2020年10月27日時点での社内版を反映。 Ver. 202010.0

freee · Oct 27, 2020 · e4a2203 · e4a2203
1 parent 5cb6b1c
commit e4a2203
Show file tree

Hide file tree

Showing 118 changed files with 1,445 additions and 248 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "textlint-rule-ja-unnatural-alphabet": "^2.0.1",
     "textlint-rule-no-nfd": "^1.0.2",
     "textlint-rule-no-todo": "^2.0.1",
-    "textlint-rule-preset-jtf-style": "^2.3.5"
+    "textlint-rule-preset-jtf-style": "^2.3.6"
   },
   "devDependencies": {},
   "scripts": {

diff --git a/source/_static/samples/aria-live-basic.html b/source/_static/samples/aria-live-basic.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>ARIAライブ・リージョンの基本的な実装例</title>
+    <script>
+      function showStatus() {
+        let statusRegion = document.getElementById("status-region");
+        let button = document.getElementById("button");
+        let msgContainer = document.createElement("p");
+        let msg = document.createTextNode("ページが更新されました。");
+        msgContainer.appendChild(msg);
+        statusRegion.appendChild(msgContainer);
+        button.setAttribute("disabled", "true");
+      }
+    </script>
+  </head>
+  <body>
+    <h1>aria-live属性を使って自動的にメッセージが読み上げられる</h1>
+    <div aria-live="polite" id="status-region"></div>
+    <p>下のボタンを押すと、「ページが更新されました。」というテキストが表示され、自動的に同じ内容が読み上げられます。</p>
+    <button id="button" onclick="javascript:showStatus()">ページを更新</button>
+  </body>
+</html>
diff --git a/source/_static/samples/aria-live-timer.html b/source/_static/samples/aria-live-timer.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>ARIAライブ・リージョンをページのロード後に挿入する（要注意）</title>
+    <script>
+      function addText(elm, str) {
+        elm.appendChild(str);
+      }
+
+      function showStatus() {
+        let button = document.getElementById("button");
+        button.setAttribute("disabled", "true");
+        let statusRegion = document.getElementById("status-region");
+        let msgContainer = document.createElement("p");
+        msgContainer.setAttribute("aria-live", "polite");
+        statusRegion.appendChild(msgContainer);
+        let msg = document.createTextNode("ページが更新されました。");
+        setTimeout(addText, 1, msgContainer, msg);
+      }
+    </script>
+  </head>
+  <body>
+    <h1>aria-live属性を使って自動的にメッセージが読み上げられる</h1>
+    <div id="status-region"></div>
+    <p>下のボタンを押すと、「ページが更新されました。」というテキストが表示され、自動的に同じ内容が読み上げられます。</p>
+    <button id="button" onclick="javascript:showStatus()">ページを更新</button>
+  </body>
+</html>
diff --git a/source/_static/samples/lang-incorrect.html b/source/_static/samples/lang-incorrect.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>誤ったlang属性の指定</title>
+  </head>
+  <body>
+    <p>日本語のテキストは日本語の合成音声で読み上げられます。</p>
+    <p>HTML要素のlang属性には、ページ全体で主に使われている言語を指定します。</p>
+    <p>Web Content Accessibility Guidelines 2.1や、それを元に作ったfreeeアクセシビリティー・ガイドラインでは、html要素に適切なlang属性を指定することを必須としています。</p>
+  </body>
+</html>
diff --git a/source/_static/samples/lang-partial.html b/source/_static/samples/lang-partial.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>lang属性 - 日英混在</title>
+  </head>
+  <body>
+    <p>日本語のテキストは日本語の合成音声で読み上げられます。</p>
+    <p>Webの考案者、Tim Berners-Leeは、以下のように言っています：</p>
+
+    <blockquote>
+      <p lang="en">The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.</p>
+    </blockquote>
+
+    <p>適切にlang属性を使うことで、複数の言語が混在しているときの使い勝手が変わってきますが、状況や想定ユーザーに応じて、最善の実装方法が異なることが考えられます。</p>
+  </body>
+</html>
diff --git a/source/categories/link.rst b/source/categories/link.rst
@@ -72,6 +72,11 @@
 
 スクリーン・リーダーが提供するリンクの一覧機能を使う視覚障害者が、リンク先について容易に判断できるようにする。
 
+参考
+````
+
+*  :ref:`exp-link-text`
+
 対応するWCAG 2.1の達成基準
 ````````````````````````````
 
@@ -80,23 +85,6 @@
    *  |SC 2.4.4|
    *  |SC 2.4.4ja|
 
-例
-``
-
-.. list-table:: 注意すべきリンク・テキストの文言（「」部分がリンク・テキスト）
-   :header-rows: 1
-
-   *  -  NG
-      -  OK
-   *  -  ○○は「こちら」
-      -  「○○はこちら」
-   *  -  「もっと見る」
-      -  「○○についてもっと見る」
-   *  -  「詳細」
-      -  「○○についての詳細」
-
-.. todo:: マークアップで意図が明示できている例を追加
-
 .. raw:: html
 
    </div></details>

diff --git a/source/categories/markup.rst b/source/categories/markup.rst
@@ -75,7 +75,7 @@
 参考
 ````
 
-*  :ref:`exp-v.nu`
+*  :ref:`exp-nu-html-checker`
 
 対応するWCAG 2.1の達成基準
 ````````````````````````````

diff --git a/source/categories/text.rst b/source/categories/text.rst
@@ -104,11 +104,6 @@
 
 視覚障害者が、ページ内で目的のコンテンツを見つけやすくする。
 
-参考
-````
-
-*  .. todo:: 見出しやラベルの文言について、適切/不適切な事例がたぶん必要
-
 対応するWCAG 2.1の達成基準
 ````````````````````````````
 

diff --git a/source/checks/checklist.rst b/source/checks/checklist.rst
@@ -0,0 +1,17 @@
+.. _check-index:
+
+アクセシビリティー・チェック全項目一覧
+----------------------------------------
+
+書くガイドラインの「チェック内容」に示したものを、チェックID順に掲載しています。
+
+それぞれ、以下の項目を記しています。
+
+*  チェックID
+*   チェック内容
+*  対象：デザイン、コード、またはプロダクト
+*  関連ガイドライン：そのチェックによって対応状況を確認することができるガイドライン
+*  参考情報：そのチェックの意図や実施方法に関する情報が記されているものもあります（各関連ガイドラインで掲載しているものと同じです。）
+*  チェック実施方法の例を記しているものもあります（ :ref:`check-example-index` からリンクされているページにある内容と同じものです）
+
+.. include:: inc/allchecks.rst
diff --git a/source/checks/examples/axe.rst b/source/checks/examples/axe.rst
@@ -0,0 +1,67 @@
+.. _check-example-axe:
+
+axeを用いたチェック実施方法の例
+----------------------------------
+
+axeのインストールや基本的な使用方法については、 :ref:`exp-axe` を参照してください。
+
+.. _check-example-axe-0021:
+
+:ref:`check-0021`
+~~~~~~~~~~~~~~~~~
+
+   .. include:: /checks/inc/allchecks.rst
+      :start-after: .. BEGIN_check-0021
+      :end-before: .. END_check-0021
+
+.. BEGIN_axe-0021
+
+「要素には十分な色のコントラストがなければなりません」という問題が出ないことを確認する。
+
+ただし、ガイドラインを満たしていない状態であっても、以下の場合は問題として表示されませんので注意が必要です。
+
+*  マウスホバーなどで背景色やテキスト色が変化する場合の、変化後のコントラスト比が不足する場合
+*  大きいテキストのコントラスト比が3:1以上4.5:1未満の場合
+
+   -  freeeの場合日本語テキストを想定しているため、「大きいテキスト」を30px（22pt）以上または22px（18pt）以上の太字としているが、WCAGでは欧文テキストを想定して18pt以上または14pt以上の太字としているため、その間のサイズではコントラスト不足を検知できない
+
+*  テキスト以外のコントラスト比が不足している場合
+
+   -  アイコン、画像、画像化されたテキスト、ボタンやフィールドの枠線など
+
+*  半透明な要素などが重なって違う色に見えている場合の、実際に見えている色のコントラスト比が不足する場合
+*  要素が重なっていて背景色と前景色の特定が難しい場合
+
+.. END_axe-0021
+
+.. _check-example-axe-0441:
+
+:ref:`check-0441`
+~~~~~~~~~~~~~~~~~
+
+   .. include:: /checks/inc/allchecks.rst
+      :start-after: .. BEGIN_check-0441
+      :end-before: .. END_check-0441
+
+.. BEGIN_axe-0441
+
+「画像には代替テキストがなければなりません」という問題が出ないことを確認する。
+
+ただし、画像に何かしらの代替テキストが入っていれば問題として検知されないため、適切ではない代替テキストの検出をすることはできません。
+
+.. END_axe-0441
+
+.. _check-example-axe-0951:
+
+:ref:`check-0951`
+~~~~~~~~~~~~~~~~~
+
+   .. include:: /checks/inc/allchecks.rst
+      :start-after: .. BEGIN_check-0951
+      :end-before: .. END_check-0951
+
+.. BEGIN_axe-0951
+
+「フォーム要素にはラベルがなければなりません」という問題が出ないことを確認する。
+
+.. END_axe-0951
diff --git a/source/checks/examples/index.rst b/source/checks/examples/index.rst
@@ -0,0 +1,11 @@
+.. _check-example-index:
+
+チェック実施方法の例
+--------------------
+
+.. toctree::
+   :maxdepth: 1
+   :titlesonly:
+
+   nvda
+   axe