Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

参考情報の英訳追加 #222

Merged
merged 2 commits into from
Apr 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 61 additions & 61 deletions en/source/explanations/grayscale.rst
Original file line number Diff line number Diff line change
@@ -1,110 +1,111 @@
.. _exp-grayscale:

################################
グレースケール表示への切り替え方
################################
##################################
How to Switch to Grayscale Display
##################################

参考: :ref:`exp-color-only`
Reference: :ref:`exp-color-only`

グレースケール表示にした際の見え方を確認する場合、基本的にはOSが提供する表示切り替え機能を用います。
以下に各OSごとの表示切り替え機能の利用方法を示します。
To check how things look in grayscale display, you generally use the display switching function provided by the operating system.
Below, we will show you how to use the display switching functions for each operating system.

**********************
Windows 10Windows 11
**********************
*************************
Windows 10 And Windows 11
*************************

#. 「設定」画面を開き、「アクセシビリティ」(Windows 10では「簡単操作」)をクリック( :kbd:`Win + U` )。
#. 「カラーフィルター」をクリック。
#. ウィンドウの右側にある「カラーフィルター」のスイッチをオンにして、その下にあるドロップダウンをクリックして関連オプションを表示。
#. 「グレースケール」を選択。
1. Open the "Settings" screen and click on "Accessibility" (in Windows 10, it's called "Ease of Access") (the :kbd:`Win + U` keyboard shortcut can be used).
2. Click on "Color filters."
3. Turn on the "Color filters" switch on the right side of the window, then click the dropdown below it to show the related options.
4. Select "Grayscale."

.. image:: /img/grayscale/win-settings-1.png
:alt: スクリーン・ショット:カラーフィルターの設定画面
:alt: Screenshot of the Color Filters settings screen

頻繁に利用する場合は、同じ画面で「カラーフィルターのキーボードショートカット」を有効にすると便利でしょう。
この設定を有効にすると、 :kbd:`Win + Ctrl + C` キーの押下でいつでもカラーフィルターのオン・オフを切り替えることができるようになります。
If you frequently use this feature, it would be useful to enable "Color Filter Keyboard Shortcut" on the same screen.
Enabling this setting allows you to toggle the color filters on and off at any time by pressing :kbd:`Win + Ctrl + C`.

.. image:: /img/grayscale/win-settings-2.png
:alt: スクリーン・ショット:カラーフィルターの設定画面でキーボードショートカットを有効にする
:alt: Screenshot of the Color Filters settings screen with Keyboard Shortcut enabled

*****
macOS
*****

以下の手順やスクリーン・ショットは、macOS Venturaでのものです。
The following instructions and screenshots are for macOS Ventura.

#. :menuselection:`Appleメニュー --> システム設定` の順に選択
#. サイドバーで「アクセシビリティ」を選択
#. 右側で「ディスプレイ」をクリック
1. Select :menuselection:`Apple menu --> System Settings`.
2. In the sidebar, choose "Accessibility."
3. Click on "Display" on the right side.

.. image:: /img/grayscale/mac-settings-1.png
:alt: スクリーン・ショット:アクセシビリティ、ディスプレイの設定画面
:alt: Screenshot of the Accessibility, Display settings screen

#. 画面下方の「カラーフィルタ」のセクションで、「カラーフィルタ」のスイッチをオンにする
#. 「フィルタタイプ」で「グレイスケール」を選択
4. In the "Color Filters" section at the bottom of the screen, turn on the "Color Filters" switch.
5. Select "Grayscale" for the "Filter Type."

.. image:: /img/grayscale/mac-settings-2.png
:alt: スクリーン・ショット:カラーフィルタの設定
:alt: Screenshot of the Color Filters settings

参考: `Macでアクセシビリティの「ディスプレイ」環境設定を変更する - Apple サポート <https://support.apple.com/ja-jp/guide/mac-help/unac089/mac>`_
Reference: `Change accessibility display preferences on Mac - Apple Support <https://support.apple.com/ja-jp/guide/mac-help/unac089/mac>`_

***
iOS
***

#. 「設定」アプリ、 :menuselection:`アクセシビリティ --> カラー表示とテキストサイズ --> カラーフィルタ` の順にタップ
#. 「カラーフィルタ」をオンにする
#. 「グレイスケール」を選択する
1. Tap on the "Settings" app, then select :menuselection:`Accessibility --> Color & Text Size --> Color Filters`.
2. Turn on "Color Filters."
3. Select "Grayscale."

*******
Android
*******

Android 12の場合
================
For Android 12
==============

注:以下の記述はPixel 6上のAndroid 12における操作手順です。機種によって異なっている場合があります。
Note: The following steps are based on Android 12 on a Pixel 6. The procedure may vary depending on the device.

#. 「設定」アプリ、 :menuselection:`ユーザー補助 --> テキストと表示 --> 色補正` の順にタップ
#. 「色補正を使用」をチェック
#. 「補正モード」で「グレースケール」を選択
1. Tap on the "Settings" app, then select :menuselection:`Accessibility --> Text and display --> Color correction`.
2. Check "Use color correction."
3. Select "Grayscale" for "Correction mode."

Android 11以前の場合
====================
For Android 11 And Earlier
==========================

注:以下の記述はPixel 3A上のAndroid 11における操作手順です。端末の機種やAndroidのバージョンによって異なっている場合があります。
Note: The following steps are based on Android 11 on a Pixel 3A.
The procedure may vary depending on the device model and the version of Android.

#. 「設定」アプリ、 :menuselection:`システム --> 詳細設定` の順にタップ
#. :menuselection:`開発者向けオプション` をタップ(「開発者向けオプション」が表示されていない場合は、後述の手順で「開発者向けオプション」を有効にします)
#. :menuselection:`色空間シミュレート` をタップ
#. 「全色盲」を選択
1. Tap on the "Settings" app, then go to :menuselection:`System --> Advanced`.
2. Tap on :menuselection:`Developer options` (If "Developer options" is not visible, follow the steps mentioned later to enable "Developer options").
3. Tap on :menuselection:`Simulate color space`.
4. Select "Monochromacy."

「色空間シミュレート」で「無効」を選択するか、「設定」アプリの :menuselection:`ユーザー補助 --> 色補正` を無効にすることで、標準の表示モードに戻すことができます。
You can revert to the standard display mode by selecting "Disabled" in "Simulate color space" or by disabling "Color correction" in the "Settings" app under :menuselection:`Accessibility --> Color correction`.

参考:開発者向けオプションの有効化
==================================
Reference: Enabling Developer Options
=====================================

「開発者向けオプション」が表示されない場合は、以下の手順で開発者向けオプションを有効にします。
If "Developer Options" is not visible, follow these steps to enable it:

#. 「設定」アプリ、 :menuselection:`端末情報` をタップ
#. 表示されている「ビルド番号」を7回連続してタップ
#. 端末に設定されている暗証番号を入力
1. Tap on the "Settings" app, then select :menuselection:`About phone`.
2. Tap on "Build number" seven times in succession.
3. Enter the PIN set for the device.

******************************
参考:ブックマークレットの利用
******************************
****************************
Reference: Using Bookmarklet
****************************

簡易的なチェックの方法として、ブラウザーに表示中のページをグレースケール表示にするブックマークレットを利用する方法があります。
以下の手順でブックマークレットを作成することができます。
As a simple method for checking, you can use a bookmarklet that turns the display of the page currently viewed in your browser into grayscale.
You can create a bookmarklet by following the steps below.

なお、このブックマークレットが正常に動作せず、実行すると表示が崩れてしまうような場合があることが報告されています。
そのような場合やこのブックマークレットが正常に動作しないブラウザーを使用している場合、モバイル・アプリケーションなどWebページ以外のものの表示を確認する場合には、各OSの表示切り替え機能を使います。
Please note that there have been reports that this bookmarklet may not function properly and can cause the display to distort when executed.
In such cases, or if you are using a browser where the bookmarklet does not function correctly, or if your are checking the display of non-web page items like mobile applications, use the display switching features of the operating system.

#. 以下のコードをターゲットとするブックマーク(ブックマークレット)を作成。
1. Create a bookmark (bookmarklet) with the following code.

.. raw:: html

<details><summary>コードを表示</summary>
<details><summary>display the code</summary>

.. code-block:: javascript

Expand All @@ -113,10 +114,9 @@ Android 11以前の場合
.. raw:: html

</details>
<a href='javascript:(function(){var d=document;s=d.createElement("style");s.innerHTML="*{filter:grayscale(100%) !important}";d.body.appendChild(s)})();'>表示中のページをグレースケール表示にするブックマークレット</a>

#. チェック対象のページを表示した状態で、このブックマークレットを実行。
<a href='javascript:(function(){var d=document;s=d.createElement("style");s.innerHTML="*{filter:grayscale(100%) !important}";d.body.appendChild(s)})();'>A Bookmarklet to Turn the Displayed Page Into Grayscale</a>

2. With the target page displayed, execute this bookmarklet.

.. include:: /inc/info2gl/exp-grayscale.rst

Expand Down
59 changes: 30 additions & 29 deletions en/source/explanations/image-text-alternative.rst
Original file line number Diff line number Diff line change
@@ -1,45 +1,46 @@
.. _exp-image-text-alternative:

########################
テキストによる画像の説明
########################
##############################
Describing Images Through Text
##############################

画像は、全盲やロービジョンのユーザーなどが適切に利用できない可能性があります。
Images may not be adequately accessible to users who are totally blind or have low vision.

まず全盲のユーザーの場合、当然ですが画像を見ることができません。
また、一部のスクリーン・リーダーに搭載されている画像の認識・推測を行う機能も完璧とはほど遠いのが現状で、こういった機能の使用を前提とすることはできません。
For users who are totally blind, it is clear that they cannot see the images.
Additionally, the current capabilities of image recognition and prediction features in some screen readers are far from perfect, and it is not feasible to rely solely on these features.

一方ロービジョンなどの要因で見ることに困難があるユーザーの場合、画像のサイズや用いられている色の組み合わせなどによって見づらいという場合が考えられます。
On the other hand, users with low vision may find images difficult to view due to factors such as the size of the image or the color combinations used.

このような問題を回避するためには、その画像が提供しているのと同等の情報をテキストでも提供することが必要です。
より具体的には、画像の説明をテキストで提供します。
この際重要なことは、 **過不足なく** 情報を提供するということです。
情報が不足しているのはもちろん良くないのですが、過剰なのも良くありません。
To avoid these problems, it is necessary to provide text that conveys the same information as the image.
More specifically, a text description of the image should be provided.
It is important that the information is neither insufficient nor excessive.
It is certainly not good if the information provided is insufficient, but providing too much is also undesirable.

提供すべき説明の分量や詳しさは、その画像の内容によっても、その画像が使われている文脈によっても異なります。
The amount and detail of the description needed depend on the content of the image and the context in which it is used.

例1:
何らかの機能を実行するためのアイコンについて、そのアイコンがどのような機能を実行するためのものなのか広く一般に認知されている場合、その機能を示すテキストを提供するのが妥当でしょう。
一方、そのアイコンの意味がほとんどの人にとって分からない場合は、そのアイコンの形状など視覚的特徴を説明する必要があるかもしれません。(これは製作者の意図次第です。)
Example 1:
For an icon that performs a specific function, if the function of the icon is widely recognized, it is appropriate to provide text that describes that function.
However, if the meaning of the icon is not clear to most people, it may be necessary to describe its visual characteristics (depending on the creator's intent).

例2:
グラフを示す画像があるとき、その画像の前後のテキストを読めばそのグラフの内容が充分理解でき、画像には理解を補助する意味合いしかないような場合には、それがグラフであることが分かるテキストを提供すれば良いでしょう。
一方、その画像を見なければ意味のある情報を得られない場合は、グラフの傾向の説明や、グラフ上の数値などをテキストで提供する必要があるでしょう。
Example 2:
If there is an image depicting a graph, and the surrounding text sufficiently explains the content of the graph such that the image only aids in understanding, then it is sufficient to provide text that indicates it is a graph.
However, if meaningful information cannot be obtained without viewing the image, it will be necessary to provide a textual description of the graph's trends or the numerical data on the graph.

文脈や内容に応じて説明を検討する必要がありますが、可能な限り一貫性がある説明にすべきです。
どのような説明にすべきか検討する際に活用できる事例集を、今後整備する予定です。
It is necessary to consider the context and content when preparing descriptions, aiming for as much consistency as possible.
A collection of examples to help determine the appropriate descriptions is planned to be developed.

画像の説明を提供する方法としては、短い説明の場合は ``img`` 要素の ``alt`` 属性や、場合によっては ``aria-label`` 属性や ``aria-labelledby`` 属性を用いると良いでしょう。
長い説明の場合は、 ``aria-describedby`` 属性や ``longdesc`` 属性を用いる方法に加えて、詳細な説明を掲載したページへのリンクを画像の周囲に配置する方法なども考えられます。
For short descriptions, using the ``alt`` attribute of the ``img`` element, or possibly the ``aria-label`` or ``aria-labelledby`` attributes, would be suitable.
For longer descriptions, methods such as using the ``aria-describedby`` attribute, the ``longdesc`` attribute, or placing links to pages with detailed descriptions around the image can also be considered.

以上は、画像に何らかの意味がある情報が含まれている場合です。
画像が純粋に装飾目的で、意味のある情報を含んでいない場合は、スクリーン・リーダーなどの支援技術がその画像の存在を無視するような記述をする必要があります。
The above is applicable when the image contains meaningful information.
If the image is purely decorative and contains no meaningful information, it is necessary to write in such a way that assistive technologies like screen readers can ignore the presence of the image.

具体的には、 ``img`` 要素に空の ``alt`` 属性を付ける( ``<img src="image.png" alt="">`` )、 ``role="presentation"`` を付与するなどの方法が考えられます。
Specifically, an empty ``alt`` attribute can be added to the ``img`` element (``<img src="image.png" alt="">``), or ``role="presentation"`` can be used.

なお、上記例2のような場合において、グラフの画像は情報を提供していますので、適切な説明を付与する必要があります。
画像の説明がなくてもコンテンツの意味が伝わるのだから説明は不要だと考えるかもしれませんが、テキストの説明を活用するのは決して全盲のユーザーだけではありません。
普段は主にスクリーン・リーダーを使っているロービジョンのユーザーの場合、そこにグラフがあることが分かればグラフは拡大表示して見てみようと考えることもあるでしょう。
また、全盲のユーザーでも、そこにグラフがあることが分かれば、晴眼者とのコミュニケーションが容易になります。
Moreover, in situations like Example 2 above, an appropriate description must be attached since the graph image provides information.
While one might think that the image description is not needed when the content's meaning is clear without the description, text descriptions are useful not only for totally blind users.
Low vision users who primarily rely on screen readers might realize there is a graph and decide to enlarge it for a closer look.
Also, knowing that there is a graph can facilitate communication with sighted individuals for a totally blind user.

.. include:: /inc/info2gl/exp-image-text-alternative.rst

4 changes: 4 additions & 0 deletions ja/source/explanations/grayscale.rst
Original file line number Diff line number Diff line change
Expand Up @@ -121,3 +121,7 @@ Android 11以前の場合
.. include:: /inc/info2gl/exp-grayscale.rst

.. include:: /inc/info2faq/exp-grayscale.rst

.. translated:: true


5 changes: 5 additions & 0 deletions ja/source/explanations/image-text-alternative.rst
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,8 @@
また、全盲のユーザーでも、そこにグラフがあることが分かれば、晴眼者とのコミュニケーションが容易になります。

.. include:: /inc/info2gl/exp-image-text-alternative.rst


.. translated:: true


Loading