フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【解説】WEBサイトのJIS X 8341-3:2016対応(A&AA)

HTML
WEBサイト
ガイドライン
解説

いつも見ているWEBサイト、WEBサイトに限らず車や家電製品等はごく当たり前に使っています。
しかし、これら何の不便もなく使用しているものも何かしらの障がいを持っている人たちにとっては使いにくいものという場合もあります。
例えば、邦画の場合、字幕はありませんが、聴覚障がいのある方は字幕が無いと何がどうなっているのか理解することが出来ません。
これはWEBサイトでも同じです。聴覚障がいのある方はサイト内に埋め込まれた動画の内容を字幕が無いと理解することが出来ません。
ごく普通に使用しているもの・触れているものでもこのように不便に感じている人々が存在ます。
今回の記事では、そのような人たちでも使いやすい・コンテンツを理解できるために気を付ける指針となる基準を解説したいと思います。

JIS X 8341-3:2016とは

JIS X 8341-3:2016は、日本工業規格(JIS)の一つで、WEBサイトのアクセシビリティの基準を定めたものです。
障がいのある人々を含む多くの人たちにとって使いやすいWEBサイトの基準となっています。
それぞれ以下のような方々への配慮としてこのような基準を設けています。

視覚障がい者への配慮

視覚障がいのある方がスクリーンリーダーなどの支援技術を使用してWEBサイト内のコンテンツにアクセス出来るようにするためのガイドラインを定めています。

聴覚障がい者への配慮

聴覚障がいのある方が映像コンテンツに字幕や手話通訳を付けることで、情報を受け取ることが出来るようにするためのガイドラインを定めています。

認知障がい者への配慮

認知障がいのある方が理解しやすいように、明確で単純な言語やナビゲーション、構成でWEBサイトを作成するためのガイドラインを定めています。

運動障がい者への配慮

運動障がいのある方がキーボードのみでのナビゲーションや、ユーザーインターフェースの簡単な操作が可能にするためのガイドラインを定めています。

1 知覚可能

「知覚可能」は、ウェブコンテンツのアクセシビリティガイドラインの第一原則で、すべてのユーザーがウェブコンテンツの情報を知覚できることを要求します。これには、テキスト以外のコンテンツにテキスト代替を提供する、ビデオに字幕や音声解説を付けるなどの措置が含まれます。この原則は、視覚障がい、聴覚障がいのある人を含むすべてのユーザーがコンテンツにアクセスできるようにするために重要です。

1.1 代替テキスト

「代替テキスト」は、画像やビデオなどの非テキストコンテンツにテキスト代替(代替テキスト)を提供することを要求するアクセシビリティのガイドラインです。これにより、視覚障がい者がスクリーンリーダーなどの支援技術を使ってこれらのコンテンツの情報を理解できるようになります。代替テキストは、非テキストコンテンツの内容や機能を簡潔に説明し、すべてのユーザーにコンテンツがアクセス可能になるようにします。

1.1.1 非テキストコンテンツ【A】

達成基準1.1.1「非テキストコンテンツ」では、ウェブページ上のすべての非テキストコンテンツ(例:画像、グラフ、動画)にテキスト代替(代替テキスト)を提供することが求められています。これは、視覚障がい者がスクリーンリーダーを通じてコンテンツを理解できるようにするためのものです。例えば、画像にはalt属性を用いて説明を付け加え、スクリーンリーダーが読み上げ可能な形式で情報を提供します。このようにすることで、すべてのユーザーがウェブコンテンツをアクセスしやすくなります。

1.2 時間依存メディア

「時間依存メディア」は、オーディオやビデオなどの時間に依存するメディアに対して、アクセシビリティの対策を講じることを要求するガイドラインです。これには、ビデオに対する字幕や音声解説の提供、オーディオコンテンツのテキスト書き起こし、ライブイベントのキャプションなどが含まれます。目的は、視覚障がい者や聴覚障がい者もこれらのメディアコンテンツを完全にアクセスし利用できるようにすることです。

1.2.1 音声だけ及び映像だけ(収録済み)【A】

達成基準1.2.1「音声だけ及び映像だけ(収録済み)」では、収録済みの音声コンテンツや映像コンテンツがウェブページに含まれる場合、それらのコンテンツがすべてのユーザーにとってアクセスしやすい形で提供されることが求められています。具体的には、音声コンテンツの場合はテキストによる代替(例えば、書き起こし)を、映像コンテンツの場合は映像の説明を提供することが必要です。これにより、聴覚障がい者や視覚障がい者もこれらのメディアコンテンツの情報を得ることができます。

1.2.2 キャプション(収録済み)【A】

達成基準1.2.2「キャプション(収録済み)」では、収録済みの同期メディア(例えばビデオやオーディオコンテンツ)にキャプションを提供することが求められています。この基準の目的は、聴覚障がいのあるユーザーがビデオの音声コンテンツをテキスト形式で理解できるようにすることです。キャプションは、発話される言葉だけでなく、重要な音(例:ドアが閉まる音)もテキストで説明し、ビデオの完全な体験を提供する必要があります。これにより、すべてのユーザーがビデオコンテンツを平等にアクセスし、享受できるようになります。

1.2.3 音声解説又はメディアに対する代替コンテンツ(収録済み)【A】

達成基準1.2.3「音声解説又はメディアに対する代替コンテンツ(収録済み)」では、収録済みの同期メディア(ビデオなど)に対して、視覚障がいのあるユーザーがアクセスできるよう、音声解説や代替コンテンツを提供することが求められています。音声解説は、ビデオの重要な視覚的情報を説明する追加の音声トラックで、視覚障がい者にビデオの視覚的なコンテンツを伝えます。また、ビデオの完全な代替として、テキストによる説明や書き起こしも含まれることがあります。これにより、視覚障がい者がビデオの視覚情報を理解し、フルの体験を得ることができます。

1.2.4 キャプション(ライブ)【AA】

達成基準1.2.4「キャプション(ライブ)」では、ライブの同期メディア(例えばライブ放送のビデオやオーディオ)に対してキャプションを提供することが求められています。この基準の目的は、聴覚障がいのあるユーザーがリアルタイムのオーディオコンテンツをテキスト形式でフォローできるようにすることです。ライブキャプションは、発話される言葉をリアルタイムでテキスト化することで、聴覚障がい者に対してライブイベントや放送のアクセシビリティを提供します。これにより、聴覚障がい者もライブイベントの情報や雰囲気を平等に体験できるようになります。

1.2.5 音声解説(収録済み)【AA】

達成基準1.2.5「音声解説(収録済み)」は、収録済みの同期メディア(主にビデオ)に音声解説を提供することを要求しています。この基準は特に、視覚障がいのあるユーザー向けに設計されており、ビデオの視覚的な要素やアクションを音声で説明することに焦点を当てています。音声解説は、ビデオの主要な視覚的情報を補完する追加の音声トラックであり、視覚情報に依存しないユーザーがビデオの全内容を理解できるようにします。例えば、画面上の人物の動き、表情、場面の設定などが音声で詳細に説明されます。これにより、視覚障がい者がビデオの視覚的な情報を逃さずに体験できるようになります。

1.3 適応可能

「適応可能」は、ウェブコンテンツが異なる利用者や異なる環境に対応できるように設計されるべきであることを指します。つまり、異なるデバイス、ブラウザ、ユーザーの能力に合わせてコンテンツが適切に表示および操作できることを確保する必要があります。これには、レスポンシブデザイン、キーボード操作のサポート、アクセシビリティ機能の提供などが含まれます。目的は、できるだけ多くのユーザーがコンテンツにアクセスできるようにすることです。

1.3.1 情報及び関係性【A】

達成基準1.3.1「情報及び関係性」は、ウェブコンテンツの情報、構造、関係性が支援技術によって解釈可能であることを要求しています。これには、適切なHTMLマークアップ(見出し、リスト、表など)の使用と、必要に応じてARIAロールの適用が含まれます。この基準により、コンテンツは障がいのあるユーザーにもアクセスしやすくなります。

1.3.2 意味のある順序【A】

達成基準1.3.2「意味のある順序」では、ウェブコンテンツが表示される際に、情報が論理的かつ一貫した順序で提示されることが求められています。これは特に、スクリーンリーダーなどの支援技術を使用するユーザーにとって重要です。彼らは、視覚的な手がかりに頼ることなく、コンテンツの意味を理解する必要があるため、情報が正しい順序で提示されることが不可欠です。この基準に従うことで、コンテンツの流れがすべてのユーザーにとって理解しやすくなります。

1.3.3 感覚的な特徴【A】

達成基準1.3.3「感覚的な特徴」は、ウェブコンテンツが位置、色、サイズ、形状、音などの感覚的特徴にのみ依存しないように要求しています。これは、情報を伝える際に視覚や聴覚に依存しない方法を提供することを意味します。たとえば、指示が「赤いボタンをクリック」とだけ言及している場合、色覚異常のあるユーザーや視覚障がい者はその指示を理解できない可能性があります。代わりに、「送信」と書かれた赤いボタンをクリック」といったように、テキストによる説明を提供することが推奨されます。この基準は、すべてのユーザーが等しく情報にアクセスし、操作を行うことができるようにするために重要です。

1.4 判別可能

「判別可能」は、ウェブコンテンツを異なるユーザーグループに対して適切に区別可能にするためのガイドラインです。これには、色の使用、音声の制御、コントラスト、テキストのサイズ変更などが含まれます。これらの要素を適切に設計することで、全てのユーザーにとってコンテンツが理解しやすく、アクセス可能になります。

1.4.1 色の使用【A】

達成基準1.4.1「色の使用」では、色だけを情報の伝達手段として使用しないことが求められています。これは、色覚に障がいがあるユーザーや全盲のユーザーが情報を見逃すことがないようにするためです。例えば、テキストのリンクが色の変更のみで示されている場合、色覚障がい者には識別が困難です。そのため、リンクのテキストに下線を引くなど、色以外の方法でリンクを示すことが推奨されます。この基準に従うことで、ウェブページ上の情報が色に依存しないユーザーにも明確に伝わります。

1.4.2 音声の制御【A】

達成基準1.4.2「音声の制御」では、ウェブページ上で自動的に再生される音声に対して、ユーザーが容易に制御(一時停止、停止、ボリューム調整など)できる機能を提供することが求められています。この基準は、ウェブページを訪れた際に予期せずに音声が再生されることによる不便や不快感を避けるために重要です。具体的には、3秒以上続く音声が自動的に再生される場合、ユーザーがその音声を一時停止、停止、またはボリュームを調整できる手段を提供する必要があります。これにより、すべてのユーザーがウェブページのオーディオコンテンツに対してより良い制御を持つことができます。

1.4.3 コントラスト(最低限レベル)【AA】

達成基準1.4.3「コントラスト(最低限レベル)」は、テキストとその背景との間に少なくとも4.5:1のコントラスト比を確保することを要求します。この基準は、視覚障がい者を含むすべてのユーザーがテキストを読みやすくするために設定されており、特に色覚障がい者や視力の低下したユーザーにとって重要です。大きなテキストの場合、3:1のコントラスト比で十分です。

1.4.4 テキストのサイズ変更【AA】

達成基準1.4.4「テキストのサイズ変更」は、テキストが支援技術なしで200%まで拡大できることを要求しています。これにより、視覚障がいのあるユーザーがテキストを拡大しても、コンテンツや機能が損なわれないようにします。この基準は、ウェブページが異なる視力レベルのユーザーにとって読みやすくアクセスしやすいことを保証するために重要です。

1.4.5 文字画像【AA】

達成基準1.4.5「文字画像」は、意図した視覚的表現が技術的に可能である場合、情報を伝えるのにテキストを使用し、文字画像(テキストを画像として表示すること)を避けることを要求しています。この基準は、スクリーンリーダーやテキスト拡大ツールを使うユーザーが情報にアクセスできるようにするために重要です。例外としては、特定のブランドロゴなど、特別な視覚的効果が必要な場合があります。

2 操作可能

「操作可能」は、ウェブコンテンツがあらゆるユーザーに対して簡単に操作可能であることを確保するためのガイドラインです。これには、マウス、タッチスクリーン、キーボード、音声認識など、さまざまな入力方法をサポートし、ユーザーがコンテンツを操作できるようにすることが含まれます。アクセシビリティを向上させ、ユーザーエクスペリエンスを改善するために、操作性に配慮することが重要です。

2.1 キーボード操作可能

「キーボード操作可能」は、ウェブコンテンツがキーボードで操作できることを確保するためのガイドラインです。これは、マウスやタッチスクリーンを使用できないユーザー、特に身体的な障がいがあるユーザーにとって重要です。ウェブサイトやアプリは、キーボードだけでナビゲーション、フォーム入力、リンクの選択などができるようになる必要があります。これにより、アクセシビリティを確保し、より多くのユーザーに利用されることが可能になります。

2.1.1 キーボード【A】

達成基準2.1.1「キーボード」は、ウェブコンテンツのすべての機能がキーボードだけで操作できることを要求します。これは、マウスを使えないユーザー(例えば、身体障がい者やキーボードのみを使用するユーザー)がウェブサイトのすべての機能にアクセスできるようにするために重要です。この基準により、すべてのユーザーが平等にウェブコンテンツを利用できるようになります。

2.1.2 キーボードトラップなし【A】

達成基準2.1.2「キーボードトラップなし」では、キーボードだけを使ってナビゲーションする際に、ユーザーが任意のコンポーネントにフォーカスを当てた後、それを離れることができることを要求します。つまり、ユーザーがキーボードでフォーカスを当てた要素から簡単に離れることができるようにする必要があり、フォーカスが特定の要素に「閉じ込められる」ことがないようにすることが重要です。これにより、キーボードを主なナビゲーション手段とするユーザーもスムーズにウェブサイトを使用できます。

2.2 十分な時間

「十分な時間」は、ウェブコンテンツがユーザーに十分な時間を提供するためのガイドラインです。これには、コンテンツの読み取りや操作に必要な時間を確保し、ユーザーがストレスなく情報を理解し、操作できるようにすることが含まれます。また、時間制限を設定する場合には、ユーザーに時間延長やコンテンツの一時停止のオプションを提供することが求められます。これにより、あらゆるユーザーにとってコンテンツがアクセス可能になります。

2.2.1 タイミング調整可能【A】

達成基準2.2.1「タイミング調整可能」は、ウェブコンテンツに制限時間が設けられている場合、ユーザーがその時間を調整できることを要求します。これには、時間の延長、一時停止、停止のオプションが含まれます。特に、オンラインテストやタイムアウト機能があるウェブページで重要で、すべてのユーザーが十分な時間を持ってコンテンツにアクセスできるようにするために設定されています。

2.2.2 一時停止,停止及び非表示【A】

達成基準2.2.2「一時停止、停止及び非表示」は、動きのある、点滅する、スクロールする、または自動的に更新されるコンテンツに対して、ユーザーがこれらを一時停止、停止、または非表示にするオプションを持つことを要求します。この基準は、こうした動的な要素が原因で情報を読み取るのが困難になることを防ぐために重要です。特に、注意散漫や認知障がいのあるユーザーにとって有用であり、ユーザーがコンテンツに集中しやすくなります。

2.3 発作の防止

「発作の防止」は、ウェブコンテンツがユーザーに対して発作を引き起こす可能性のある刺激を制御するためのガイドラインです。これには、点滅や明るい色の使用を制限し、ユーザーに安全な閾値以下の閃光を提供することが含まれます。これにより、神経系の異常を持つユーザーや発作のリスクがあるユーザーに対しても、コンテンツが安全に利用できるようになります。

2.3.1 3回のせん(閃)光,又はしきい(閾)値以下【A】

達成基準2.3.1「3回の閃光、又は閾値以下」では、ウェブコンテンツが1秒間に3回を超える閃光を放つことがないように要求しています。これは、閃光感受性てんかんを持つユーザーに対する発作のリスクを減らすためです。また、ウェブページが一般閃光閾値及び赤色閃光閾値を下回っていることも要求されています。この基準により、ウェブコンテンツはより安全でアクセスしやすくなります。

2.4 ナビゲーション可能

「ナビゲーション可能」は、ウェブコンテンツがユーザーに対して効果的なナビゲーションを提供するためのガイドラインです。これには、ウェブページのタイトルやリンクの目的の明確な表示、フォーカス可能なコンポーネントの適切な順序、およびフォーカスの可視化が含まれます。これにより、利用者がウェブサイトを効果的に閲覧し、情報を見つけたり操作したりできるようになります。

2.4.1 ブロックスキップ【A】

達成基準2.4.1「ブロックスキップ」は、ウェブページ上の繰り返されるコンテンツブロック(例えば、ナビゲーションメニューやサイドバー)をスキップするメカニズムを提供することを要求しています。これにより、キーボードユーザーやスクリーンリーダーを使用するユーザーが、毎回同じナビゲーションリンクを通過することなく、直接メインコンテンツにアクセスできるようになります。例としては、「メインコンテンツへスキップ」のようなリンクが挙げられます。これは、ウェブページの使いやすさとアクセシビリティを向上させる重要な機能です。

2.4.2 ページタイトル【A】

達成基準2.4.2「ページタイトル」は、ウェブページにその内容を反映した明確なタイトルを設定することを要求しています。各ページのタイトルは、ブラウザのタイトルバーやタブ、スクリーンリーダーによって読み上げられ、ページの目的や内容を正確に伝える必要があります。この基準により、ユーザーはブラウザの履歴やブックマークを通じてページを簡単に識別し、ナビゲーションを容易に行えるようになります。また、視覚障がい者がスクリーンリーダーを使用してページを効率的に探索できるようになります。

2.4.3 フォーカス順序【A】

達成基準2.4.3「フォーカス順序」は、ウェブページ内でキーボードフォーカスを移動する際に、要素が論理的かつ予測可能な順序でフォーカスされることを要求しています。これにより、キーボードのみを使用するユーザーがページのナビゲーションを理解しやすくなります。フォーカスの順序はページの意味や操作性を維持する必要があり、ユーザーが混乱するようなランダムな順序ではなく、コンテンツの流れに従うものでなければなりません。

2.4.4 リンクの目的(コンテキスト内)【A】

達成基準2.4.4「リンクの目的(コンテキスト内)」は、リンクの目的がテキストそのもの、またはリンクが配置されているコンテキストによって理解できることを要求します。これにより、リンクの目的が明確になり、特にスクリーンリーダーを使用するユーザーが、リンクを選択する前にその行き先や機能を理解できるようになります。例えば、「こちらをクリック」ではなく、「詳細情報を見る」のように具体的な説明をリンクテキストに含めることが望ましいです。

2.4.5 複数の手段【AA】

達成基準2.4.5「複数の手段」では、ウェブサイト内の特定ページへのアクセス方法を複数提供することが求められています。例えば、サイトマップ、検索機能、ナビゲーションメニューなど、異なる方法でページにアクセスできるようにすることが重要です。この基準により、ユーザーは自分にとって便利な方法で必要な情報やページを見つけやすくなります。特に大規模なウェブサイトや複雑な情報構造を持つサイトで効果的です。

2.4.6 見出し及びラベル【AA】

達成基準2.4.6「見出し及びラベル」は、ウェブページ上の見出しやラベルが関連するコンテンツの内容や目的を明確に表していることを要求します。これにより、ユーザーはコンテンツを簡単にナビゲートし、必要な情報を迅速に見つけることができます。特に、スクリーンリーダーを使用するユーザーや認知障がいのあるユーザーにとって、正確でわかりやすい見出しやラベルは情報の理解を助けます。

2.4.7 フォーカスの可視化【AA】

達成基準2.4.7「フォーカスの可視化」は、キーボード操作を使用してナビゲーションする際に、フォーカスされている要素が視覚的に明確であることを要求しています。これにより、キーボードのみでウェブサイトを操作するユーザーが、どの要素がアクティブであるかを簡単に識別できるようになります。例えば、フォーカスされたリンクやボタンには明確なアウトラインや背景色の変更が適用されるべきです。この基準は、キーボードナビゲーションの使いやすさを向上させます。

3 理解可能

「理解可能」は、ウェブコンテンツが広範な利用者に理解しやすくなるように設計されるべきであることを指します。これには、明確な言語の使用、適切なコンテンツの構造、および助けになる補助技術の提供が含まれます。理解可能なコンテンツは、視覚的に障がいのある人や異なる文化や言語の背景を持つ人々にとってもアクセス可能であり、理解しやすいものです。これはウェブアクセシビリティの基本的な原則の一つです。

3.1 読みやすさ

「読みやすさ」は、ウェブコンテンツが広範な利用者に読みやすく表示されることを指します。これには、適切なフォントやフォントサイズの使用、適切な行間や文字間隔の設定、背景とテキストのコントラストの確保などが含まれます。読みやすいコンテンツは、視覚的に障がいのある人や高齢者など、さまざまな利用者にとって理解しやすく、快適に閲覧できるものです。読みやすさはウェブアクセシビリティの重要な要素の一つであり、コンテンツのアクセス可能性を向上させます。

3.1.1 ページの言語【A】

達成基準3.1.1「ページの言語」は、ウェブページの主要な言語がコード内で明確に宣言されていることを要求しています。これは通常、HTMLの<html>タグ内のlang属性を使用して行われます(例:<html lang="ja">)。この宣言により、スクリーンリーダーは正しい言語でコンテンツを読み上げ、ページが多言語のユーザーに適切に表示されます。

3.1.2 一部分の言語【AA】

達成基準3.1.2「一部分の言語」は、ウェブページの主要な言語とは異なる言語で書かれたテキスト部分がある場合、その部分に対して個別に言語を指定することを要求しています。これは、例えばHTMLの<span><p>タグにlang属性を追加することで達成されます(例:<span lang="en">English text</span>)。このように言語を指定することで、スクリーンリーダーは適切な発音でテキストを読み上げ、内容の理解が容易になります。

3.2 予測可能

「予測可能」は、ウェブコンテンツやウェブアプリケーションが利用者に対して予測可能であることを指します。これは、利用者がウェブサイト内での操作やナビゲーションの結果を予測でき、一貫性があることを意味します。予測可能性を実現するためには、一貫したナビゲーションメニュー、コンテンツの一貫性、明示的なリンクテキスト、コンテンツの意味を理解できる情報などが提供されるべきです。予測可能なウェブ体験は、利用者がスムーズに操作し、求める情報を見つけやすくするために重要です。

3.2.1 フォーカス時【A】

達成基準3.2.1「フォーカス時」では、キーボードフォーカスが要素に移動した際に自動的なコンテキスト変化(例えば新しいページへのリダイレクトやポップアップの表示)が起こらないことを要求しています。これにより、キーボードユーザーが予期せぬ動作に遭遇することなく、フォーカスを通じてページを安全にナビゲートできるようになります。要素にフォーカスが当たった際のコンテキスト変化は、ユーザーの明示的なアクション(例:ボタンのクリック)によってのみ発生すべきです。

3.2.2 入力時【A】

達成基準3.2.2「入力時」は、ユーザーがフォームやその他のインターフェースのコントロールにデータを入力した際に、自動的なコンテキスト変更が起こらないことを要求します。例えば、選択メニューから項目を選んだだけでページがリダイレクトされるようなことがないようにする必要があります。この基準により、ユーザーは意図せず不意にページを離れたり、予期せぬ動作に遭遇したりすることなく、入力プロセスを制御できます。コンテキストの変化はユーザーの明示的なアクション(例えば、「送信」ボタンのクリック)に基づいてのみ行われるべきです。

3.2.3 一貫したナビゲーション【AA】

達成基準3.2.3「一貫したナビゲーション」は、ウェブサイト上で繰り返されるナビゲーション要素(例:メニューバーやサイドバー)が、ページ間で同じ順序で表示されることを要求します。これにより、ユーザーはウェブサイトをナビゲートする際に一貫性と予測可能性を体験でき、特にスクリーンリーダーやキーボードナビゲーションを利用するユーザーにとって利便性が向上します。ユーザーがカスタマイズした場合を除き、ナビゲーション要素は一貫した配置と順序を保つべきです。

3.2.4 一貫した識別性【AA】

達成基準3.2.4「一貫した識別性」は、ウェブサイト全体で同じ機能を持つコンポーネント(例:検索ボタンやヘルプリンク)が一貫して識別できるようにすることを要求します。これにより、ユーザーはウェブサイトをナビゲートする際に混乱を避け、繰り返し現れる要素を容易に識別できます。特に、スクリーンリーダーを使用するユーザーや頻繁にウェブサイトを訪れるユーザーにとって、一貫した識別性はナビゲーションを助け、効率を向上させます。

3.3 入力支援

「入力支援」は、ウェブコンテンツやウェブアプリケーションがユーザーの入力を支援するための機能を提供することを指します。これは、利用者がフォームを記入したり、データを入力したりする際に、ユーザビリティを向上させるための機能です。具体的な例には、エラーメッセージの表示、入力フィールドの自動補完、選択肢の提案、日付選択のカレンダーなどが含まれます。入力支援は、ユーザーが正確で迅速な情報入力を行うのに役立ち、ユーザーエクスペリエンスを向上させます。

3.3.1 エラーの特定【A】

達成基準3.3.1「エラーの特定」では、ウェブフォームなどでユーザーの入力エラーが検出された場合、そのエラーが発生した具体的な場所をユーザーにテキストで明確に知らせることが求められています。これにより、ユーザーは自分のエラーを容易に特定し、修正することができます。特にフォーム入力時の使いやすさとアクセシビリティが向上します。

3.3.2 ラベル又は説明【A】

達成基準3.3.2「ラベル又は説明」は、ユーザーが入力する必要があるフォーム要素や他のインターフェースコントロールに対して、適切なラベルや説明が提供されていることを要求します。これにより、ユーザーは各入力フィールドの目的や使用方法を明確に理解でき、フォームを正確かつ効率的に完成させることができます。ラベルや説明は特に、スクリーンリーダーを使用する視覚障がい者や認知障がいのあるユーザーにとって重要です。

3.3.3 エラー修正の提案【AA】

達成基準3.3.3「エラー修正の提案」は、ユーザーがウェブフォームで入力エラーを犯した際に、可能な限りそのエラーの修正方法を提案することを要求します。これにより、ユーザーはエラーを簡単に修正し、フォームを無事に完了できるようになります。ただし、セキュリティ上の理由や個人情報の保護を理由に修正提案を提供できない場合は、この要件から除外されます。この基準の目的は、ユーザーエクスペリエンスを向上させることです。

3.3.4 エラー回避(法的,金融及びデータ)【AA】

達成基準3.3.4「エラー回避(法的、金融及びデータ)」は、法的・金融取引や重要なデータを扱うオンラインフォームで、ユーザーが誤りを犯すリスクを軽減するための措置を講じることを要求します。これには、入力内容の確認機能、送信前のエラーチェック、送信後のデータ修正オプションなどが含まれます。この基準の目的は、重要な取引やデータ操作に関するユーザーの誤りを最小限に抑えることです。

4 堅ろう(牢)(Robust)

「堅ろう(Robust)」は、ウェブコンテンツやウェブアプリケーションが異なる環境や状況で正常に機能し、予期しないエラーや問題に対処できる能力を指します。つまり、堅ろうなウェブコンテンツは、さまざまなウェブブラウザ、デバイス、オペレーティングシステムで適切に表示され、利用可能であると同時に、ユーザーが誤った入力を行っても崩壊せず、エラーを適切に処理できます。堅ろうなウェブは、信頼性が高く、利用者に安定したエクスペリエンスを提供します。

4.1 互換性

「互換性」は、ウェブコンテンツやウェブアプリケーションがさまざまな環境やプラットフォームで適切に動作し、異なるユーザーエージェント(ウェブブラウザや支援技術)やデバイスで一貫性のあるエクスペリエンスを提供する能力を指します。つまり、互換性があるウェブコンテンツは、さまざまなブラウザ、オペレーティングシステム、デバイスで問題なく利用でき、異なるユーザーエージェント間で一貫性が保たれます。これにより、可能な限り多くのユーザーにアクセス可能なウェブ体験が提供されます。

4.1.1 構文解析【A】

達成基準4.1.1「構文解析」は、ウェブページが標準のHTMLやXMLのルールに従って正確にマークアップされていることを要求します。要素には完全な開始タグと終了タグが必要であり、要素のネストは正しく行われ、IDはページ全体で一意でなければなりません。この基準は、ウェブページが様々なブラウザや支援技術によって正確に解釈されることを保証するために重要です。

4.1.2 名前(name),役割(role)及び値(value)【A】

達成基準4.1.2「名前(name)、役割(role)及び値(value)」は、すべてのユーザーインターフェースコンポーネントがその名前、役割、及び状態や値をプログラムによって解釈できる形で提供することを要求しています。これにより、支援技術(例えばスクリーンリーダー)がこれらの情報を読み取り、ユーザーに適切に伝えることができます。例えば、ボタンやフォームフィールドは、その機能や状態が正確に識別できるようにマークアップされる必要があります。この基準は、ウェブインターフェースのアクセシビリティを確保するために重要です。

参考URL

https://waic.jp/translations/WCAG20/Overview.html#text-equiv

https://waic.jp/resource/jis-x-8341-3-2016/

まとめ

今回はWEBサイトのJIS X 8341-3:2016の基準に対応させるための方法を解説しました。ある案件でこの要件を満たすという内容が含まれていたので色々調べてみました。調べていくうちにその内容は当たり前のことから、知らないと気が付かない・なかなか配慮出来ない点など様々ありました。ただ、このような仕様に無くても普段から出来る限り誰にでも使いやすいWEBサイト作りを意識していきたいと思いました。