RELEASE Ver. 202404.0 (2024-04-23)

data/json/faq-tags.json

@@ -32,6 +32,10 @@
         "ja": "Android TalkBack",
         "en": "Android TalkBack"
     },
+    "screen-reader": {
+        "ja": "スクリーン・リーダー",
+        "en": "Screen Reader"
+    },
     "target-size": {
         "ja": "ターゲット・サイズ",
         "en": "Target Size"

data/yaml/checks/product/0682.yaml

@@ -47,6 +47,6 @@ procedures:
   - tool: Landmark Navigation via Keyboard or Pop-up
     technique:
       ja: |-
-        `Landmark Navigation via Keyboard or Pop-up <https://matatk.agrip.org.uk/landmarks/>`_ をインストールしたブラウザーで表示した際、コンテンツのすべてのパーツが適切なARIAランドマークの領域に属していることを確認する。
+        `Landmark Navigation via Keyboard or Pop-up <https://matatk.agrip.org.uk/landmarks/>`__ をインストールしたブラウザーで表示した際、コンテンツのすべてのパーツが適切なARIAランドマークの領域に属していることを確認する。
       en: |-
-        Confirm that every part of the page content is contained in an appropriate ARIA landmark region when viewed using a browser with the `Landmark Navigation via Keyboard or Pop-up <https://matatk.agrip.org.uk/landmarks/>`_ extention installed.
+        Confirm that every part of the page content is contained in an appropriate ARIA landmark region when viewed using a browser with the `Landmark Navigation via Keyboard or Pop-up <https://matatk.agrip.org.uk/landmarks/>`__ extention installed.

data/yaml/faq/d0001.yaml

@@ -5,7 +5,7 @@ tags:
 - markup
 title:
   ja: 見出しレベルの指定
-  en: Heading level specification
+  en: Heading Level Specification
 problem:
   ja: |-
     見出し、小見出しを設定するべきか、どの部分を見出しに指定すべきか分からない。
@@ -33,7 +33,9 @@ explanation:
     If you can't imagine what kind of information is lined up on the page just by reading the headings, there probably are not enough headings.
 guidelines:
 - gl-text-heading-label
+- gl-markup-semantics
 checks:
 - '0271'
 info:
 - exp-text-wording
+- exp-markup-semantics

data/yaml/faq/d0002.yaml

@@ -6,7 +6,7 @@ tags:
 - target-size
 title:
   ja: ラジオボタンやチェックボックスのサイズ
-  en: Size of radio buttons and check boxes
+  en: Size of Radio Buttons And Check Boxes
 problem:
   ja: |-
     サイズが24×24pxより小さいラジオボタンやチェックボックスは、 :ref:`check-0331` と :ref:`check-0351` でNGとすべきか
@@ -26,19 +26,19 @@ solution:
 explanation:
   ja: |-
     :ref:`check-0331` と :ref:`check-0351` は、ガイドライン項目 :ref:`gl-icon-target-size` を満たすための条件を示しています。
-    このガイドラインは、WCAG 2.1の達成基準2.5.5 `Target Size <https://www.w3.org/TR/WCAG21/#target-size>`_ （ `ターゲットのサイズ <https://waic.jp/translations/WCAG21/#target-size>`_ ）が元になっています。
+    このガイドラインは、WCAG 2.1の達成基準2.5.5 `Target Size <https://www.w3.org/TR/WCAG21/#target-size>`__ （ `ターゲットのサイズ <https://waic.jp/translations/WCAG21/#target-size>`__ ）が元になっています。
 
     レベルAAAのこの達成基準では、マウスなどのポインティング・ディバイスの操作対象（チェックボックスやラジオボタンを含む）の大きさとして44×44px以上のサイズを求めています。
     デスクトップ向けサービスの多いfreeeでは、44×44px以上を満たすのは難しいものの、何らかの基準は必要ということで、24×24pxという基準を設けています。
 
-    なお、WCAGの最新バージョンであるWCAG 2.2では、 `Target Size (Minimum) <https://www.w3.org/TR/WCAG22/#target-size-minimum>`_  として、24×24px以上を求めるレベルAAの達成基準2.5.8が追加されています。
+    なお、WCAGの最新バージョンであるWCAG 2.2では、 `Target Size (Minimum) <https://www.w3.org/TR/WCAG22/#target-size-minimum>`__  として、24×24px以上を求めるレベルAAの達成基準2.5.8が追加されています。
 
     これらの達成基準では、例外事項として、「ユーザエージェントのコントロールである: ターゲットのサイズがユーザエージェントによって定められており、かつコンテンツ制作者が変更していない。」という項目があるため、freeeのガイドライン/チェックリストでも、ブラウザーのデフォルトから変更していないものは対象外としています。
     ブラウザーのデフォルトでラジオボタンやチェックボックスのサイズが小さいのはコンテンツ製作者の責任ではなく、またブラウザーのデフォルトにしてあればユーザー側で変更することも可能だろうという想定なのだと考えられます。
 
     ブラウザーのデフォルトから変更しているかどうかの判断方法には、以下のようなものがあります。
 
-    *  MDNの `チェックボックスのサンプル <https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/checkbox>`_ や `ラジオボタンのサンプル <https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/radio>`_ と見比べてみて、明らかに見た目が違う場合は変更されている。
+    *  MDNの `チェックボックスのサンプル <https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/checkbox>`__ や `ラジオボタンのサンプル <https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/radio>`__ と見比べてみて、明らかに見た目が違う場合は変更されている。
     *  開発者ツールを用いてページのソースを確認する：
 
        1. チェックボックスの上で右クリックしてメニューを開き、「検証」を選ぶ
@@ -63,19 +63,19 @@ explanation:
 
           上記のスクリーン・ショットでは ``box-sizing: border-box`` が上書きされているが、元の指定と同じで、見た目を変更する指定でもないので問題はない。
   en: |-
-    Checks 0331 and 0351 indicate the conditions for satisfying Guideline Item :ref:`gl-icon-target-size` which is based on the Success Criterion 2.5.5 `Target Size <https://www.w3.org/TR/WCAG21/#target-size>`_ of WCAG 2.1.
+    Checks 0331 and 0351 indicate the conditions for satisfying Guideline Item :ref:`gl-icon-target-size` which is based on the Success Criterion 2.5.5 `Target Size <https://www.w3.org/TR/WCAG21/#target-size>`__ of WCAG 2.1.
 
     This Level AAA success criterion requires the size of pointer input targets, including checkboxes and radio buttons, to be 44×44px or more.
     freee, which has many desktop services, finds it difficult to meet the requirement of 44×44px or more, but it is necessary to have some kind of standard, so we have set a standard of 24×24px.
 
-    In WCAG 2.2, the latest version of WCAG, Level AA Success Criterion 2.5.8 `Target Size (Minimum) <https://www.w3.org/TR/WCAG22/#target-size-minimum>`_ has been added, which requires a size of 24×24px or more.
+    In WCAG 2.2, the latest version of WCAG, Level AA Success Criterion 2.5.8 `Target Size (Minimum) <https://www.w3.org/TR/WCAG22/#target-size-minimum>`__ has been added, which requires a size of 24×24px or more.
 
     These success criteria have an exception that "The size of the target is determined by the user agent and is not modified by the author." Therefore, in freee's guidelines/checklist, those that have not been changed from the browser's default are excluded.
     When the check boxes and radio buttons are shown with the browser's default style, the content author does not owe the responsibility for it, and it can be assumed that the user can change the setting.
 
     There are several ways to determine whether or not the browser's default has been changed.
 
-    *  If the appearance is clearly different from the MDN `checkbox sample <https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/checkbox>`_ or `radio button sample <https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/radio>`_ , it has been changed.
+    *  If the appearance is clearly different from the MDN `checkbox sample <https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/checkbox>`__ or `radio button sample <https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/radio>`__ , it has been changed.
     *  Use the developer tools to check the page source:
 
        1. Right-click on the checkbox to open the menu and select "Inspect".

data/yaml/faq/d0003.yaml

@@ -5,7 +5,7 @@ tags:
 - target-size
 title:
   ja: テキスト・リンクのクリック可能な領域が小さい
-  en: The clickable area of a text link is small
+  en: The Clickable Area of a Text Link Is Small
 problem:
   ja: |-
     文中のテキストがリンクになっている箇所について、クリック/タップできる領域のサイズ、特に高さが基準を満たしていないが、修正する必要があるか。
@@ -19,13 +19,13 @@ solution:
 explanation:
   ja: |-
     当ガイドラインでクリック/タップ可能な領域のサイズ（ターゲット・サイズ）について定めているものは、アイコンとフォーム・コントロールを対象としていて、テキストのリンクは対象としていません。
-    また、WCAG 2.1の達成基準2.5.5 `Target Size <https://www.w3.org/TR/WCAG21/#target-size>`_ （ `ターゲットのサイズ <https://waic.jp/translations/WCAG21/#target-size>`_ ）においても、インラインである場合の例外として、クリック/タップのターゲットが文中、又はテキスト・ブロック内に存在する場合には、サイズの基準の対象外としています。
+    また、WCAG 2.1の達成基準2.5.5 `Target Size <https://www.w3.org/TR/WCAG21/#target-size>`__ （ `ターゲットのサイズ <https://waic.jp/translations/WCAG21/#target-size>`__ ）においても、インラインである場合の例外として、クリック/タップのターゲットが文中、又はテキスト・ブロック内に存在する場合には、サイズの基準の対象外としています。
 
     ターゲット・サイズは大きい方が操作しやすいというのは事実ですから、幅に関してはリンクにするテキストの内容を工夫することでより広くすることはできますし、可能な範囲でそういった工夫をすることは推奨されます。
     一方高さに関しては、ターゲット・サイズの基準を満たすだけの目的で調整する必要はありません。
   en: |-
     In our guidelines, the specified sizes for clickable/tappable areas (target size) are intended for icons and form controls, and do not apply to text links.
-    Similarly, in WCAG 2.1 `Success Criterion 2.5.5 Target Size <https://www.w3.org/TR/WCAG21/#target-size>`_, there's an exception for inline elements, where targets that are within sentences or text blocks are exempt from the size criteria.
+    Similarly, in WCAG 2.1 `Success Criterion 2.5.5 Target Size <https://www.w3.org/TR/WCAG21/#target-size>`__, there's an exception for inline elements, where targets that are within sentences or text blocks are exempt from the size criteria.
 
     It is true that larger target size makes it easier to interact with, so it is recommended to creatively adjust the content of the text being linked to make its width broader, within feasible limits.
     However, there is no need to adjust the height solely to meet the target size criteria.

data/yaml/faq/p0001.yaml

@@ -2,13 +2,10 @@ id: p0001
 sortKey: 70000
 updated: '2023-12-05'
 tags:
-- nvda
-- macos-vo
-- ios-vo
-- android-tb
+- screen-reader
 title:
   ja: スクリーン・リーダーの読み上げ方がおかしい漢字や英単語がある
-  en: There are kanji or English words that are read in an unexpected way by the screen reader.
+  en: There Are Kanji Or English Words That Are Read in an Unexpected Way by Screen Readers
 problem:
   ja: |-
     読み上げられ方のおかしい漢字や英単語があるが、どのように対処するべきか。

data/yaml/faq/p0002.yaml

@@ -5,7 +5,7 @@ tags:
 - axe
 title:
   ja: axe DevToolsの警告への対処
-  en: Dealing with axe DevTools warnings
+  en: Dealing With axe DevTools Warnings
 problem:
   ja: |-
     axe DevToolsで出ている警告の意味や対処方法が分からない。

data/yaml/faq/p0003.yaml

@@ -5,7 +5,7 @@ tags:
 - grayscale
 title:
   ja: グレースケール表示にするブックマークレットで表示が崩れる
-  en: The bookmarklet to display in grayscale breaks the layout
+  en: The Bookmarklet to Display in Grayscale Breaks the Layout
 problem:
   ja: |-
     グレースケール表示した際の見え方を確認するために :ref:`exp-grayscale` で紹介されているブックマークレットを使うと表示が崩れる、関連するチェックの結果はNGとすべきか。

data/yaml/faq/p0004.yaml

@@ -0,0 +1,53 @@
+id: p0004
+updated: '2024-04-12'
+sortKey: 70050
+tags:
+- screen-reader
+title:
+  ja: どのような情報をスクリーン・リーダーで読み上げられないようにするべきか
+  en: What Information Should Not Be Read Aloud by Screen Readers?
+problem:
+  ja: |-
+    スクリーン・リーダーを使用する際、どのような要素が読み上げられるべきか、または読み上げられるべきではないかの判断をどのようにするべきか分からない。
+  en: |-
+    It is unclear how to determine which elements should be read aloud and which should not by a screen reader.
+solution:
+  ja: |-
+    *  スクリーン・リーダーで読み上げられるようにするべきか迷う場合は、読み上げられるようにする。
+    *  装飾的に挿入されている意味を持たない画像や、アイコンなどの画像で直後に全く同じ意味のテキストがある場合、それらは読み上げられないようにする。
+    *  それ以外の要素は、原則として読み上げられるようにする。
+  en: |-
+    *  If you are unsure whether something should be read aloud by a screen reader, make it read aloud.
+    *  If there is an image that is inserted decoratively and has no meaning, or an image such as an icon, and there is exactly the same text immediately after it, it should not be read aloud.
+    *  Other elements should generally be read aloud.
+explanation:
+  ja: |-
+    情報の取捨選択は、最終的にユーザーに委ねられるべきです。
+    ですから、意味のある情報は原則としてすべて読み上げられるようにするべきです。
+
+    ただし、装飾的に挿入されている意味を持たない画像は読み上げられないようにします。
+
+    また、アイコンなどの画像で直後に全く同じ意味のテキストがある場合、それらの画像は読み上げられないようにします。
+    こうすることで、情報の重複を避けることができます。
+
+    それ以外で読み上げられないようにしても問題がない情報は、そもそも画面上に表示されている必要がない情報の可能性があります。
+  en: |-
+    The decision on what information to filter should ultimately be left to the user.
+    Therefore, as a principle, all meaningful information should be made readable.
+
+    However, images inserted purely for decoration without any meaning should not be read aloud.
+
+    Images such as icons where identical meaning text immediately follows, also should not be read aloud.
+    This helps avoid the duplication of information.
+
+    Information that does not pose a problem even if not read aloud may not need to be displayed on the screen at all.
+guidelines:
+- gl-image-decorative
+checks:
+- '0402'
+- '0413'
+- '0451'
+- '0461'
+- '0471'
+info:
+- exp-image-text-alternative