☺️
「Webアクセシビリティ」について理解する - WCAGによる標準ガイドライン（Level A）
「Webアクセシビリティ」について理解する - WCAGによる標準ガイドライン（Level A）
概要
- この記事は、React - アクセシビリティに基づいて、自分の備忘録としてより具体的に、かつ現在のReactのversionになるべく合わせるように記述している。
- なお、今回の記事に関しては、Reactに直接関係するような記述はほぼない。そもそもwebアプリを制作するにあたり必要な記述をしていく、というスタンスでいる。
Webアクセシビリティ（A11y）とは
- Webアクセシビリティとは、誰でも使えるようwebサイトを設計・構築することである。
Webアクセシビリティの標準ガイドライン
WCAG(Web Content Accessibility Guidelines)
-
WCAGとは、Webアクセシビリティにおける標準ガイドラインのことである。これを満たしているかどうかの確認を行うため、チェックリストが存在する。ここでは、Wuhcagがまとめている資料を参考にする。
-
WCAGにおいては、Webアクセシビリティのコンプライアンスに応じて、3種類のレベルに分けている。
- A: Essential（必須）
- AA: Ideal Support（できれば必要）
- AAA: Specialized Support（あれば尚良）
- 今回は、Level Aに着目してまとめていく。AAとAAAに関しては、今回は記述しない。
WuhcagによるWCAGのchecklist（Level A）
1.1.1 - Non-text Content（非テキストコンテント）
- 画像や音声、ビデオなどを閲覧できないユーザーに対して、代替テキストによって置き換える
<img src="location-of-image.jpg" alt="image" />
1.2.1 - Audio-only and Video-only (Pre-recorded) （音声のみ、映像のみ（事前収録）の場合 ）
- ビデオや音声を閲覧することが難しいユーザーに対して、オーディオファイルやポッドキャストなどの「音声のみ」「動画のみ」コンテンツを提供する
1.2.2 - Captions (Pre-recorded) （字幕（録画済み））
- 聴覚に障害のあるユーザーは、動画の音声を聞き取れない場合がある。映像の内容を字幕で表示することでコンテンツを楽しむことができる
1.2.3 - Audio Description or Media Alternative (Pre-recorded) （ガイド音声または代替メディア（録音済み））
- 視覚に障害のあるユーザーは、映像コンテンツの代替手段が必要となる。音声ガイドトラックや代替テキストを追加することでコンテンツを楽しむことができる。
1.3.1 - Info and Relationships（情報と関係性）
- webサイトの構造が論理的で、コンテンツの各セクションが明確な関係を持っていれば、すべてのユーザーにメリットが有る。「見出し」「箇条書き」「改行」「表」「太字」「リンクの下線」など、視覚的な手がかりや、その他のフォーマットの選択は、ユーザーがコンテンツを理解するのに役立つ
- webブラウザや支援技術が、これらの要素をすべて理解できる必要がある。例えば、見出し（heading）には単に太字を使うだけでなく、H1などの正しい見出しタグを使用する
1.3.2 Meaningful Sequence（意味のある配列）
- webサイトのコンテンツの意味は、見せ方によって変わってくる。例えば英語圏においては、左から右に、左手側から右手側のコラムにしたがって読んでいく。コンテンツの解釈のためにアシスト機能（スクリーンリーダーなど）を使用しているユーザーにおいては、意味のある順番で表示されている必要がある。もしそうでなければ、ユーザーは混乱してしまい、理解できなくなる可能性がある。
1.3.3 Sensory Characteristics（感覚的な特徴）
- 「感覚的な特徴」は、簡単に言うと形や音、位置、序列、色、サイズなどのことである。
- 「感覚的な特徴」に加えて、要素にテキストラベルを用いることで、「感覚的な特徴」のみを利用した指示や説明は避けるようにする。
1.4.1 Use of Colour（色の仕様）
- 視覚に障害のあるユーザー（色が識別できないなど）は、色によって情報を識別することが難しい。そのため、ラベルや図形、パターンなどの識別子を用いるようにする。
1.4.2 Audio Control（音声操作）
- 自動的に音声が再生されることによって、特に認知障害のある方やスクリーンリーダーを使用している方などに対して注意をそらし、混乱を生じさせてしまうことがある。なので、自動的に音声が再生されないようにする。
2.1.1 Keyboard
- 視覚障害、運動障害のあるユーザーに対しては、キーボードのみ（またはキーボードのような機器など）を使用することでwebサイトを操作・案内できるような状態にする。
2.1.2 No Keyboard Trap
- 視覚障害、運動障害のあるユーザーに対しては、キーボードを使用して、ウェブサイトのすべてのコンテンツおよび機能にアクセスしたり、それらから離れたりすることができなければならない。
- ほぼ2.1.1と同義。
2.1.4 Character Key Shortcuts
- キーボードショートカットは、音声入力を必要とするユーザーや運動障害のあるユーザーに対しては、問題になってくる。また、携帯電話のキーボードでは機能領域が狭くなるため、ここでも問題が起きる可能性がある。
- 音声入力を必要とするユーザーに対しては、シングルキーのショートカット（「Fキー：検索」など）は特に良くない。
- シングルキーのショートカットはなるべく避け、マルチキーでのショートカットを設定する。
2.2.1 Timing Adjustable
- 視覚障害、運動障害、認知障害などのあるユーザーに対しては、webサイトの仕様や理解に一定の時間がかかってくる。彼らに対しては時間制限のある挙動は問題が生じることがある。
- 制限時間が始まる前に、ユーザーが制限時間をoffにするオプションを提供する。
- 制限時間が始まる前に、デフォルト設定の10倍以上の範囲で制限時間を調整できるオプションをユーザーに提供する。
- 制限時間が終了する少なくとも20秒前に、ユーザーが制限時間を延長できるようにする。ボタンをクリックするような簡単な操作で、少なくとも10回は使用できるものでなければならない。
2.2.2 Pause, Stop, Hide
- 視覚障害、認知障害などのあるユーザーに対しては、webサイトのコンテンツが移動したり、自動更新することは、時に使いづらい状態になってしまう。情報が変更される前に前の情報を認識できなかったり、webサイトの移動に気を取られたりするからである。
- コンテンツの移動を避けるだけでなく、簡単な操作方法を提供する。
2.3.1 Three Flashes or Below Threshold（3回点滅または閾値以下）
- webサイトの画面のフラッシュは、てんかんなどの光感受性発作障害を持つユーザーが困ることがある。
- 1秒間に3回以上光るコンテンツは避けるようにする。
2.4.1 Bypass Blocks
- webサイトにおいて、各ページの最上部には、同じまたは似通ったコンテンツが配置されていることがよくある（ナビゲーションメニューやヘッダーなど）。視覚障害、運動障害、認知障害などのあるユーザーにとっては、要素を順にたどっていくために、反復的なコンテンツを認識するのに苦労することがある。
- webサイトのすべてのページに、「コンテンツへのスキップ」など、ユーザーを各ページのメインコンテンツの最初に送るようなリンクを追加する。
- 繰り返し表示されるコンテンツの最初に、「コンテンツをスキップするためのリンク」「各コンテンツのエリアへのリンク」などを追加する。
2.4.2 Page Titled
- 説明的なページタイトルは、すべてのユーザーにとって有益となる。これにより、ユーザーは自分が正しいページにいるかどうかをすぐに理解することができる。視覚障害、認知障害、運動障害などのあるユーザーにとっては、使用しているテクノロジーがページタイトルに大きく依存している。
- すべてのwebページに、単一で説明的なメタタイトルを導入する。
2.4.3 Focus Order
- 'focus order'とは、ユーザーがwebサイト上のcomponentにアクセスする際の順序のこと。キーボードニミのナビゲーションやスクリーンリーダを使用するユーザーは、設定されたfocus orderに従うため、意味とユーザビリティを保つことが重要。
- 各webページのfocus順序が、ページの意味と機能を維持する順序になっているか確かめる。
2.4.4 Link Purpose
- リンクを明確に、理解しやすくすることは重要。それは、スクリーンリーダーなどを使用するユーザーは、ページ上のすべてのリンクを開いて、行きたい場所を見つけられるようにすることが多いから。また、webサイトを高倍率で表示したり、リンクをタブで表示したりする人もいるため、ユーザーは常にリンクテキストとその周辺の数語しか見ることができない。
- ユーザーの助けになるように、リンクテキスト（アンカーテキスト）は、周囲のコンテンツの文脈の中で、リンク先を明確にする必要がある。
2.4.7 Focus Visible
- webページに複数要素がある場合は、「どの要素にキーボードフォーカス」があたっているかを強調させることができる。これによって、キーボードに頼っているユーザーは、キーボードがどの要素と連動するかがわかるため、ナビゲーションがしやすくなる。また、注意力や短期記憶に制限のあるユーザーにとっても、フォーカスの位置が視覚的に判断しやすくなる。
2.4.13 Page Break Navigation
- 'page break locator'は、コンテンツ内の身のあるポイントをユーザーに案内する方法のこと。
- 視覚障害のあるユーザーや、デジタルコンテンツを利用しているユーザーは、テキスト内の特定のポイントを見つけるために、'page break locator'を利用することができる。
2.5.1 Pointer Gestures
- 「2本指でのpinch & zoomまたはswipe」などのジェスチャー、「図形描写やカルーセルのswipe」などのpath-based movementなどは、一部のユーザーにとっては、信憑性の高い正確な方法でジェスチャーを行うことができない人もいる。
- multi pointやpath-based movementを必要とする機能においては、single pointerでも同じ機能を操作できるような方法をユーザーが選択できるように提供する。
3.1.1 Language of Page
- 各webページにHTML言語を設定することは、アシスト補助によるサイト閲覧を含めて、ユーザーの手助けとしてはもっとも簡単な方法である。スクリーンリーダはwebサイトのHTML言語に基づいて言葉を発音するため、言語設定はとても重要なものとなる。
3.2.1 On Focus
- webサイトがユーザーの期待通りに動作しなかった場合は、ユーザーの離脱の原因になってくる。
- Focusは、ユーザーがフォームやビデオなどのinteractiveな要素に到達したとき、webサイト上で何が起こるかを考える上で重要なものとなってくる。マウスでもキーボードでも、ユーザーからfocusされた要素は、自動的に変化してはいけない。
- focusした際に、すべての要素を自動的に変化させないようにする。
3.2.2 On Input
- formにユーザーが入力した内容が表示されたとき、自動的に別のフィールドに移動したり、自動送信されたりしてはいけない。ユーザーが送信ボタンをクリックすることを選択した場合にのみ、フォームデータを送信するようにする。
3.3.1 Error Identification
- ユーザーがwebサイトで何らかのミスをした時に、タイムリーで明確なエラー表示を行う。その事によって、ユーザーが自分のミスを確認できる状態となる。
- 自動的に検知した間違いを特定し、ユーザーに説明する。
- error箇所の値確認エラーの説明を追加し、error内容と修正方法を提示する。
3.3.2 Labels or Instructions
- webサイトに置いて、ユーザーに情報を入力してもらう機能があると思うが、明確やラベルや指示がなければ、ユーザーが何をすればいいのか理解できなくなる。
- すべての入力フィールドにおいて、明確で適切な、シンプルなラベルを付与する。
- フィールドに特定のフォーマットが必要な場合は、その例を示す（例：フォームの「日付」フィールドには「Enter the date as dd/mm/yyyy」など）。
- 必須フィールドにはアイコンを付け、フォームの前にそのアイコンの意味を説明する。
- 説明文に関しても明確で適切な、シンプルな文章を記載する。
4.1.1 Parsing
- Parsing（構文解析）とは、webブラウザや支援技術などのソフトウェアがwebサイトを読んで理解する方法のこと。
- ユーザーがwebサイトを閲覧する際に使用する様々なテクノロジーにおいて、webサイトの解析に問題が生じないようにすることが重要。
- HTML要素に、必要に応じて開始タグ（
<>）および終了タグ（</>）があること。 - すべてのHTML要素を正しくネストする。
- 固有のIDを使用する。
- HTML要素に重複した属性が含まれていないか確認する。
4.1.2 Name, Role, Value
- webサイトに掲載されているすべてのものは、定義された基準に沿って動作する必要がある。HTMLではないコードを記述する場合は、HTMLのような標準に準拠する必要がある。
- webサイトで使用するスクリプトは、HTML仕様を使用する。
- 第三者が作成したプラグインやその他の要素を使用する際は、有効なHTMLマークアップがされていることを確認する。
Discussion