こんにちは！kanappleです。
アクセシビリティ4つの原則の前回の続きです。
1. 知覚可能
2. 操作可能
3. 理解可能
4. 堅牢
今回は理解可能についてです。
3.理解可能
理解可能とは、利用者が情報とユーザーインターフェイスの操作が理解可能でなければならないということです。
理解可能にはどのように対応すれば良いか、レベルA、レベルAAに対応したガイドラインについて、実装例を交えて説明します。
3.1 読みやすさ
このガイドラインの目的は、利用者がコンテンツを読み取ることができ、理解する為に必要な情報が利用可能であることを保証することです。
障害のある人はテキストを視覚、聴覚、触覚など様々な方法で体験しています。できるだけわかりやすくテキストコンテンツを提供することが重要です。
・ページに言語コードを設定する
例）日本語のウェブページ
<html>要素にlang=“ja”を設定します。
二つの言語が書かれている場合等は、コンテンツの大部分を占める言語をlang属性設定します。
lang属性を設定することで、ユーザーエージェントがコンテンツを正しく提示できるようになり、利用者が自分に合った言語のコンテンツにアクセスしたことを確認することができます。
例）英語の文章中にフランス語語の一節がある
該当箇所を<span lang=“fr”>で囲むことで、フランス語として認識されるようになります。
lang属性を設定していないと、デフォルトの言語に英語を用いている合成音声では、フランス語を英語の発音で読んでしまう可能性があります。
3.2 予測可能
このガイドラインの目的は、ウェブページからウェブページへのコンテンツの順序を提示し、利用者が動作を予測可能にすることです。
・フォーカス時にコンテキストを変えない
例） ドロップダウンメニュー
ドロップダウンメニューにフォーカスしている場合、利用者が選択肢を実行すると新しいページにジャンプし、フォーカスを抜けることも可能にします。
フォーカス時に自動でジャンプしたり、コンテキストが変わったりしないようにします。
・入力時にコンテキストを変えない
例） フォーム
フォーム入力をし終えた時や項目を選択した際に、自動でフォーム送信することがないようにします。
利用者が前後のコンテキストを必要としている場合や、意図せず送信し間違った行先にジャンプしてしまう可能性がある為です。
・ナビゲーションを一貫させる
例） 検索フィールド
ウェブページの最後の項目に置くなど、どのページでも同じ順序で存在するようにします。
配置を一貫することで、利用者が必要とする機能がどこにあるのかを予測し見つけることができるようになります。
・一貫して識別できるようにする
例） ダウンロードアイコン
サイトの至るところにあるダウンロードアイコン、その代替テキストを統一します。
同じ機能であるのに、ページによって別のラベルをつけることがないようにしましょう。
テキストによる代替を頼りにしている人は、一貫したラベルがあることで予測可能となり、そのコンポーネントを検索することもできるようになります。
3.3 入力支援
このガイドラインは、利用者が正しい情報を間違いを最小限にとどめて入力できるようにすることです。
誰でもミスをすることがありますが、そのエラーに気づけるようにし、エラーを修正するにはどのようにすれば良いかを利用者がわかるようにしましょう。
・エラーが特定できるようにする
例）エラーとなったフォーム
入力されていない場合や誤りがある場合は、どの部分にエラーが発生しているかを具体的に把握できるよう、アラートを表示させるなどしましょう。
色やテキストのスタイルを変えるだけでは、視覚に障害がある方はエラーを認識できません。
・入力欄にラベルや説明をつける
例） 入力フォーム
どのフィールドに何を入力すべきか、ラベルや説明で示します。説明文が多すぎると分かり辛くなる場合もあるので、利用者がタスクを完了する為の最小限の情報を提示します。
・エラーの修正の提案をする
例） エラーとなったフォーム
エラーの修正方法を正確に把握できるよう、説明を提供しましょう。
説明だけではわかり辛い場合は、ヘルプを追加するなどすると良いです。
・エラーを回避させる
例） オンラインショッピングサービス
利用者が注文後に内容を確認したり、変更したりできるようにします。
障害がある方は、ミスをしてしまう可能性が高いです。元の状態に戻せるようにすることで、重大な結果となることを避けることができます。
また、入力内容を確認して修正できるようにすると、利用者がミスに気づくことができるようになります。
以上が、理解可能のガイドラインになります。
これらはJIS X 8341-3:2016の、知覚可能の原則（レベルA、レベルAA）ガイドラインで、10の達成基準があります。
実装例を参考に、ひとつずつ達成していきましょう。
まとめ
・理解可能の原則とは、利用者が情報とユーザーインターフェイスの操作が理解可能であるということ
・ユーザーエージェントがコンテンツを正しく提供できるように、言語コードを設定する
・フォーカス時や入力時にコンテキストを変更したり、自動で送信やジャンプしない
・ナビゲーションや、アイコン、ラベルは統一し、利用者が予測できるようにする
・フォームにエラーが発生した場合は、どの部分にどのような問題が発生しているかを明確に提示する
次回は、堅牢の原則について説明します。
全 1 件中 1 〜 1 件目を表示
この記事を書いた人
kanapple
HTML&CSSコーダー
フリーランスでウェブサイト制作をしています。
趣味はお酒と映画鑑賞です。
