2021年4月1日時点での社内版を反映。Ver. 202104.0

freee · Apr 1, 2021 · 4e20966 · 4e20966
1 parent 7b4ba2e
commit 4e20966
Show file tree

Hide file tree

Showing 38 changed files with 4,200 additions and 267 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/source/categories/icon.rst b/source/categories/icon.rst
@@ -132,6 +132,7 @@
 
 *  :ref:`exp-contrast`
 *  :ref:`exp-check-contrast`
+*  |Vibes Color Contrast|
 
 対応するWCAG 2.1の達成基準
 ````````````````````````````

diff --git a/source/categories/image.rst b/source/categories/image.rst
@@ -143,6 +143,7 @@
 
 *  :ref:`exp-contrast`
 *  :ref:`exp-check-contrast`
+*  |Vibes Color Contrast|
 
 対応するWCAG 2.1の達成基準
 ````````````````````````````
@@ -185,6 +186,7 @@
 
 *  :ref:`exp-contrast`
 *  :ref:`exp-check-contrast`
+*  |Vibes Color Contrast|
 
 対応するWCAG 2.1の達成基準
 ````````````````````````````

diff --git a/source/categories/images_of_text.rst b/source/categories/images_of_text.rst
@@ -119,6 +119,7 @@
 
 *  :ref:`exp-contrast`
 *  :ref:`exp-check-contrast`
+*  |Vibes Color Contrast|
 
 対応するWCAG 2.1の達成基準
 ````````````````````````````
@@ -161,6 +162,7 @@
 
 *  :ref:`exp-contrast`
 *  :ref:`exp-check-contrast`
+*  |Vibes Color Contrast|
 
 対応するWCAG 2.1の達成基準
 ````````````````````````````

diff --git a/source/categories/text.rst b/source/categories/text.rst
@@ -386,6 +386,7 @@
 
 *  :ref:`exp-contrast`
 *  :ref:`exp-check-contrast`
+*  |Vibes Color Contrast|
 
 対応するWCAG 2.1の達成基準
 ````````````````````````````

diff --git a/source/checks/checksheet.rst b/source/checks/checksheet.rst
@@ -0,0 +1,10 @@
+.. _checks-checksheet:
+
+チェック実施用Googleスプレッドシート
+------------------------------------
+
+各チェック内容ごとの情報をまとめたGoogleスプレッドシートを公開しています。
+
+-  `アクセシビリティー・チェックリスト一般公開用 <https://docs.google.com/spreadsheets/u/0/d/1nRnqXG2tRQ7wLTkEAE1o8N-7s9500h4B2Gj3l7AbKL4/edit>`_
+
+Google Drive上でこのシートのコピーを作成すると、チェック対象や用途に応じたフィルターをかけた表示が可能です。
diff --git a/source/checks/examples/axe.rst b/source/checks/examples/axe.rst
@@ -1,9 +1,10 @@
 .. _check-example-axe:
 
-axeを用いたチェック実施方法の例
-----------------------------------
+axe DevToolsを用いたチェック実施方法の例
+------------------------------------------
 
-axeのインストールや基本的な使用方法については、 :ref:`exp-axe` を参照してください。
+axe DevToolsのインストールや基本的な使用方法については、 :ref:`exp-axe` を参照してください。
+また、 :ref:`info-axe-rules` も合わせて参照してください。
 
 .. _check-example-axe-0021:
 
@@ -16,7 +17,7 @@ axeのインストールや基本的な使用方法については、 :ref:`exp-
 
 .. BEGIN_axe-0021
 
-「要素には十分な色のコントラストがなければなりません」という問題が出ないことを確認する。
+「 :ref:`axe-rule-color-contrast` 」という問題が出ないことを確認する。
 
 ただし、ガイドラインを満たしていない状態であっても、以下の場合は問題として表示されませんので注意が必要です。
 
@@ -45,7 +46,7 @@ axeのインストールや基本的な使用方法については、 :ref:`exp-
 
 .. BEGIN_axe-0441
 
-「画像には代替テキストがなければなりません」という問題が出ないことを確認する。
+「 :ref:`axe-rule-image-alt` 」という問題が出ないことを確認する。
 
 ただし、画像に何かしらの代替テキストが入っていれば問題として検知されないため、適切ではない代替テキストの検出をすることはできません。
 
@@ -64,9 +65,9 @@ axeのインストールや基本的な使用方法については、 :ref:`exp-
 
 以下のいずれの問題も出ないことを確認する。
 
-*  見出しは空にしてはなりません
-*  見出しのレベルは1つずつ増加させなければなりません
-*  ページにはレベル1の見出しが含まれていなければなりません
+*  :ref:`axe-rule-empty-heading`
+*  :ref:`axe-rule-heading-order`
+*  :ref:`axe-rule-page-has-heading-one`
 
 .. END_axe-0561
 
@@ -81,6 +82,6 @@ axeのインストールや基本的な使用方法については、 :ref:`exp-
 
 .. BEGIN_axe-0951
 
-「フォーム要素にはラベルがなければなりません」という問題が出ないことを確認する。
+「 :ref:`axe-rule-label` 」という問題が出ないことを確認する。
 
 .. END_axe-0951
diff --git a/source/checks/inc/allchecks.rst b/source/checks/inc/allchecks.rst
@@ -6,12 +6,11 @@
 
 .. BEGIN_check-0001
 
-充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
+アイコンや画像に関して、充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
 
 *  アイコンと背景色
-*  画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色
+*  画像内の重要な情報とその背景色
 *  画像および画像化されたテキストとその隣接領域
-*  テキストと背景色
 
 .. END_check-0001
 
@@ -20,13 +19,38 @@
 関連ガイドライン
    *  アイコン： :ref:`gl-icon-contrast`
    *  画像： :ref:`gl-image-adjacent-contrast`
-   *  画像： :ref:`gl-image-text-contrast`
    *  画像化されたテキスト： :ref:`gl-iot-adjacent-contrast`
+参考情報
+   *  :ref:`exp-check-contrast`
+   *  :ref:`exp-contrast`
+   *  `社内デザイン・システムVibesのカラー・コントラスト表 <https://contrast-grid.eightshapes.com/?background-colors=%234575b4%2C%20vbPrimaryColor%0D%0A%23338650%2C%20vbPrimaryColorHR%0D%0A%233D6DAC%2C%20vbLinkColor%0D%0A%23267A43%2C%20vbLinkColorHR%0D%0A%23252525%2C%20vbBlackColor%0D%0A%236F6B62%2C%20vbBurntColor%0D%0A%23C33939%2C%20vbAlertColor%0D%0A%23C67320%2C%20vbNoticeColor%0D%0A%23938F86%2C%20vbBaseColor3%0D%0A%23e4e0d7%2C%20vbBaseColor2%0D%0A%23efede8%2C%20vbBaseColor1%0D%0A%23749fcb%2C%20vbAccentColor%0D%0A%2371ab85%2C%20vbAccentColorHR&foreground-colors=%23ffffff%2C%20%0D%0A%23f9f7f4%2C%20vbColumnColor%0D%0A%23efede8%2C%20vbBaseColor1%0D%0A%23e4e0d7%2C%20vbBaseColor2%0D%0A%23938F86%2C%20vbBaseColor3%0D%0A%236F6B62%2C%20vbBurntColor%0D%0A%23252525%2C%20vbBlackColor%0D%0A%0D%0A%0D%0A%0D%0A&es-color-form__tile-size=compact>`_
+
+
+.. _check-0002:
+
+チェックID: 0002
+~~~~~~~~~~~~~~~~~~
+
+.. BEGIN_check-0002
+
+テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。
+
+*  文字サイズが30px（22pt）以上の場合：3:1以上（[SHOULD] 4.5:1以上）
+*  文字サイズが22px（18pt）以上で太字の場合：3:1以上（[SHOULD] 4.5:1以上）
+*  その他の場合：4.5:1以上（[SHOULD] 7:1以上）
+
+.. END_check-0002
+
+対象
+   デザイン
+関連ガイドライン
+   *  画像： :ref:`gl-image-text-contrast`
    *  画像化されたテキスト： :ref:`gl-iot-text-contrast`
    *  テキスト： :ref:`gl-text-contrast`
 参考情報
    *  :ref:`exp-check-contrast`
    *  :ref:`exp-contrast`
+   *  `社内デザイン・システムVibesのカラー・コントラスト表 <https://contrast-grid.eightshapes.com/?background-colors=%234575b4%2C%20vbPrimaryColor%0D%0A%23338650%2C%20vbPrimaryColorHR%0D%0A%233D6DAC%2C%20vbLinkColor%0D%0A%23267A43%2C%20vbLinkColorHR%0D%0A%23252525%2C%20vbBlackColor%0D%0A%236F6B62%2C%20vbBurntColor%0D%0A%23C33939%2C%20vbAlertColor%0D%0A%23C67320%2C%20vbNoticeColor%0D%0A%23938F86%2C%20vbBaseColor3%0D%0A%23e4e0d7%2C%20vbBaseColor2%0D%0A%23efede8%2C%20vbBaseColor1%0D%0A%23749fcb%2C%20vbAccentColor%0D%0A%2371ab85%2C%20vbAccentColorHR&foreground-colors=%23ffffff%2C%20%0D%0A%23f9f7f4%2C%20vbColumnColor%0D%0A%23efede8%2C%20vbBaseColor1%0D%0A%23e4e0d7%2C%20vbBaseColor2%0D%0A%23938F86%2C%20vbBaseColor3%0D%0A%236F6B62%2C%20vbBurntColor%0D%0A%23252525%2C%20vbBlackColor%0D%0A%0D%0A%0D%0A%0D%0A&es-color-form__tile-size=compact>`_
 
 
 .. _check-0021:
@@ -36,30 +60,25 @@
 
 .. BEGIN_check-0021
 
-充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
+テキストの表示色と背景色には、充分なコントラスト比が確保されている。
 
-*  アイコンと背景色
-*  画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色
-*  画像および画像化されたテキストとその隣接領域
-*  テキストと背景色
+*  文字サイズが30px（22pt）以上の場合：3:1以上（[SHOULD] 4.5:1以上）
+*  文字サイズが22px（18pt）以上で太字の場合：3:1以上（[SHOULD] 4.5:1以上）
+*  その他の場合：4.5:1以上（[SHOULD] 7:1以上）
 
 .. END_check-0021
 
 対象
    プロダクト
 関連ガイドライン
-   *  アイコン： :ref:`gl-icon-contrast`
-   *  画像： :ref:`gl-image-adjacent-contrast`
-   *  画像： :ref:`gl-image-text-contrast`
-   *  画像化されたテキスト： :ref:`gl-iot-adjacent-contrast`
-   *  画像化されたテキスト： :ref:`gl-iot-text-contrast`
    *  テキスト： :ref:`gl-text-contrast`
 参考情報
    *  :ref:`exp-check-contrast`
    *  :ref:`exp-contrast`
+   *  `社内デザイン・システムVibesのカラー・コントラスト表 <https://contrast-grid.eightshapes.com/?background-colors=%234575b4%2C%20vbPrimaryColor%0D%0A%23338650%2C%20vbPrimaryColorHR%0D%0A%233D6DAC%2C%20vbLinkColor%0D%0A%23267A43%2C%20vbLinkColorHR%0D%0A%23252525%2C%20vbBlackColor%0D%0A%236F6B62%2C%20vbBurntColor%0D%0A%23C33939%2C%20vbAlertColor%0D%0A%23C67320%2C%20vbNoticeColor%0D%0A%23938F86%2C%20vbBaseColor3%0D%0A%23e4e0d7%2C%20vbBaseColor2%0D%0A%23efede8%2C%20vbBaseColor1%0D%0A%23749fcb%2C%20vbAccentColor%0D%0A%2371ab85%2C%20vbAccentColorHR&foreground-colors=%23ffffff%2C%20%0D%0A%23f9f7f4%2C%20vbColumnColor%0D%0A%23efede8%2C%20vbBaseColor1%0D%0A%23e4e0d7%2C%20vbBaseColor2%0D%0A%23938F86%2C%20vbBaseColor3%0D%0A%236F6B62%2C%20vbBurntColor%0D%0A%23252525%2C%20vbBlackColor%0D%0A%0D%0A%0D%0A%0D%0A&es-color-form__tile-size=compact>`_
 
 
-axeを用いたチェック実施方法の例
+axe DevToolsを用いたチェック実施方法の例
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
 .. include:: /checks/examples/axe.rst
@@ -840,7 +859,7 @@ NVDAを用いたチェック実施方法の例
    :start-after: .. BEGIN_nvda-0441
    :end-before: .. END_nvda-0441
 
-axeを用いたチェック実施方法の例
+axe DevToolsを用いたチェック実施方法の例
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
 .. include:: /checks/examples/axe.rst
@@ -1049,7 +1068,7 @@ NVDAを用いたチェック実施方法の例
    :start-after: .. BEGIN_nvda-0561
    :end-before: .. END_nvda-0561
 
-axeを用いたチェック実施方法の例
+axe DevToolsを用いたチェック実施方法の例
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
 .. include:: /checks/examples/axe.rst
@@ -1672,7 +1691,7 @@ NVDAを用いたチェック実施方法の例
    *  :ref:`exp-form-labeling`
 
 
-axeを用いたチェック実施方法の例
+axe DevToolsを用いたチェック実施方法の例
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
 .. include:: /checks/examples/axe.rst

diff --git a/source/checks/inc/gl-form-hidden-label.rst b/source/checks/inc/gl-form-hidden-label.rst
@@ -5,6 +5,6 @@
    *  フォーム・コントロールは、ラベルとなるテキストまたは画像と ``label`` 要素または ``aria-labelledby`` 属性で関連付けられている。または
    *  ``aria-label`` 属性で適切なラベルが付けられている。
    *  開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。
-プロダクト（ :ref:`check-0951` 、 :ref:`axeによるチェック実施方法の例 <check-example-axe-0951>` ）
+プロダクト（ :ref:`check-0951` 、 :ref:`axe DevToolsによるチェック実施方法の例 <check-example-axe-0951>` ）
    *  フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または
    *  スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。
diff --git a/source/checks/inc/gl-form-label.rst b/source/checks/inc/gl-form-label.rst
@@ -5,6 +5,6 @@
    *  フォーム・コントロールは、ラベルとなるテキストまたは画像と ``label`` 要素または ``aria-labelledby`` 属性で関連付けられている。または
    *  ``aria-label`` 属性で適切なラベルが付けられている。
    *  開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。
-プロダクト（ :ref:`check-0951` 、 :ref:`axeによるチェック実施方法の例 <check-example-axe-0951>` ）
+プロダクト（ :ref:`check-0951` 、 :ref:`axe DevToolsによるチェック実施方法の例 <check-example-axe-0951>` ）
    *  フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または
    *  スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。
diff --git a/source/checks/inc/gl-icon-contrast.rst b/source/checks/inc/gl-icon-contrast.rst
@@ -1,7 +1,6 @@
-デザイン（ :ref:`check-0001` ）、プロダクト（ :ref:`check-0021` 、 :ref:`axeによるチェック実施方法の例 <check-example-axe-0021>` ）
-   *  充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
+デザイン（ :ref:`check-0001` ）
+   *  アイコンや画像に関して、充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
 
       *  アイコンと背景色
-      *  画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色
+      *  画像内の重要な情報とその背景色
       *  画像および画像化されたテキストとその隣接領域
-      *  テキストと背景色
diff --git a/source/checks/inc/gl-image-adjacent-contrast.rst b/source/checks/inc/gl-image-adjacent-contrast.rst
@@ -1,7 +1,6 @@
-デザイン（ :ref:`check-0001` ）、プロダクト（ :ref:`check-0021` 、 :ref:`axeによるチェック実施方法の例 <check-example-axe-0021>` ）
-   *  充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
+デザイン（ :ref:`check-0001` ）
+   *  アイコンや画像に関して、充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
 
       *  アイコンと背景色
-      *  画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色
+      *  画像内の重要な情報とその背景色
       *  画像および画像化されたテキストとその隣接領域
-      *  テキストと背景色
diff --git a/source/checks/inc/gl-image-description.rst b/source/checks/inc/gl-image-description.rst
@@ -4,5 +4,5 @@
 コード（ :ref:`check-0431` ）
    *  画像に関する簡潔で過不足ない説明が ``alt`` 属性や ``aria-label`` 属性で付加されている。かつ
    *  詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、または ``aria-describedby`` 属性で関連付けられている。
-プロダクト（ :ref:`check-0441` 、 :ref:`NVDAによるチェック実施方法の例 <check-example-nvda-0441>` 、 :ref:`axeによるチェック実施方法の例 <check-example-axe-0441>` ）
+プロダクト（ :ref:`check-0441` 、 :ref:`NVDAによるチェック実施方法の例 <check-example-nvda-0441>` 、 :ref:`axe DevToolsによるチェック実施方法の例 <check-example-axe-0441>` ）
    *  画像の説明がスクリーン・リーダーで適切に読み上げられる。
diff --git a/source/checks/inc/gl-image-text-contrast.rst b/source/checks/inc/gl-image-text-contrast.rst
@@ -1,7 +1,6 @@
-デザイン（ :ref:`check-0001` ）、プロダクト（ :ref:`check-0021` 、 :ref:`axeによるチェック実施方法の例 <check-example-axe-0021>` ）
-   *  充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
+デザイン（ :ref:`check-0002` ）
+   *  テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。
 
-      *  アイコンと背景色
-      *  画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色
-      *  画像および画像化されたテキストとその隣接領域
-      *  テキストと背景色
+      *  文字サイズが30px（22pt）以上の場合：3:1以上（[SHOULD] 4.5:1以上）
+      *  文字サイズが22px（18pt）以上で太字の場合：3:1以上（[SHOULD] 4.5:1以上）
+      *  その他の場合：4.5:1以上（[SHOULD] 7:1以上）
diff --git a/source/checks/inc/gl-iot-adjacent-contrast.rst b/source/checks/inc/gl-iot-adjacent-contrast.rst
@@ -1,7 +1,6 @@
-デザイン（ :ref:`check-0001` ）、プロダクト（ :ref:`check-0021` 、 :ref:`axeによるチェック実施方法の例 <check-example-axe-0021>` ）
-   *  充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
+デザイン（ :ref:`check-0001` ）
+   *  アイコンや画像に関して、充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
 
       *  アイコンと背景色
-      *  画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色
+      *  画像内の重要な情報とその背景色
       *  画像および画像化されたテキストとその隣接領域
-      *  テキストと背景色
diff --git a/source/checks/inc/gl-iot-text-contrast.rst b/source/checks/inc/gl-iot-text-contrast.rst
@@ -1,7 +1,6 @@
-デザイン（ :ref:`check-0001` ）、プロダクト（ :ref:`check-0021` 、 :ref:`axeによるチェック実施方法の例 <check-example-axe-0021>` ）
-   *  充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
+デザイン（ :ref:`check-0002` ）
+   *  テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。
 
-      *  アイコンと背景色
-      *  画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色
-      *  画像および画像化されたテキストとその隣接領域
-      *  テキストと背景色
+      *  文字サイズが30px（22pt）以上の場合：3:1以上（[SHOULD] 4.5:1以上）
+      *  文字サイズが22px（18pt）以上で太字の場合：3:1以上（[SHOULD] 4.5:1以上）
+      *  その他の場合：4.5:1以上（[SHOULD] 7:1以上）
diff --git a/source/checks/inc/gl-markup-semantics.rst b/source/checks/inc/gl-markup-semantics.rst
@@ -2,7 +2,7 @@
    *  見出し（ ``h1`` ～ ``h6`` ）、箇条書き（ ``ul``, ``ol``, ``dl`` ）、表（ ``table`` ）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。
 コード（ :ref:`check-0551` ）
    *  見出し（ ``h1`` ～ ``h6`` ）、箇条書き（ ``ul``, ``ol``, ``dl`` ）、表（ ``table`` ）などを用いてセマンティクスが適切にマークアップされている。
-プロダクト（ :ref:`check-0561` 、 :ref:`NVDAによるチェック実施方法の例 <check-example-nvda-0561>` 、 :ref:`axeによるチェック実施方法の例 <check-example-axe-0561>` ）
+プロダクト（ :ref:`check-0561` 、 :ref:`NVDAによるチェック実施方法の例 <check-example-nvda-0561>` 、 :ref:`axe DevToolsによるチェック実施方法の例 <check-example-axe-0561>` ）
    *  設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。
 プロダクト（ :ref:`check-0562` 、 :ref:`NVDAによるチェック実施方法の例 <check-example-nvda-0562>` ）
    *  スクリーン・リーダーが、表（ ``table`` ）を適切に認識していて、表中のセルも適切に認識している。