Webアクセシビリティですべきことをまとめてみる（HTML限定）

経緯

2023年10月にWCAG2.2が正式に勧告されました
しかし、自分はこれまでアクセシビリティが具体的に何を指し、何を実施すべきか理解できていませんでした
そこで、今回このテーマについて詳細に調査してみることにしました

既に日本語で詳細にまとまっている情報も存在しますが、内容がやや複雑で完全に理解することは難しかったため、自分自身でより理解しやすいように内容を再解説し、具体的なサンプルを加える作業を行いました

アクセシビリティに関する分類や内容は非常に広範囲にわたり、すべてを網羅することは難しいため、今回はフロントエンドエンジニアの基礎知識となるHTMLに特化したHTML Techniquesに焦点を当ててまとめます

達成基準（優先度が高い順）

アクセシビリティには達成基準という基準が設けられている
これらの基準には優先度があり、優先度が高いほど達成が推奨されている

• AAA
  • 可能な限り広範なユーザーに対して、最もアクセスしやすいウェブ体験を提供するための基準
  • このレベルを達成することで、ほとんどのユーザーがウェブコンテンツにアクセスすることが可能
  • すべてのウェブサイトでAAAレベルの全基準を満たすことは必要ではなく、また実現が難しい場合もある
• AA
  • Aレベルの基準をさらに強化し、より多くのユーザーにウェブコンテンツをアクセスしやすくするための基準となる
  • AAレベルを達成しない場合、多くのユーザーがウェブコンテンツへのアクセスに困難を感じる可能性がある
• A
  • ウェブコンテンツが基本的なアクセシビリティを満たすために必要な基準
  • このレベルを達成しない場合、一部のユーザーはウェブコンテンツにアクセスできないか、大きな困難を感じる可能性がある
• 非推奨
  • 現在では適用されない、実装が困難である、または他の達成基準と競合する可能性があるため、使用しないことが推奨されている基準

すべてのウェブサイトでAAAレベルの全基準を満たすことは必要ではなく、また実現が難しい場合もある

AAAで上記の注記があるが、A, AA, AAAのすべての達成基準と技術を考慮することは、可能な限り広範なユーザーにアクセスしやすいウェブコンテンツを提供する上で重要となる
すべての基準を完全に満たす必要はないが、可能な限り多くの基準を達成するよう努力すべきである

達成基準の採用方法に関して

達成基準にはSufficient（十分な達成方法）とAdvisory（参考達成方法）がある

• Sufficient（十分な達成方法）
  • 特定の達成基準を満たすためにWCAGワーキンググループが推奨する方法
  • 達成基準を満たすための最低限の要件を示している
• Advisory（参考達成方法）
  • 達成基準を満たすための追加勧告
  • 必須ではないがアクセシビリティ向上のための追加要件を提示している

達成基準ごとに以下でまとめたが、特定の項目にはこれらの特徴がある

• Sufficient（十分な達成方法）とAdvisory（参考達成方法）が両方指定されている
• Sufficient（十分な達成方法）やAdvisory（参考達成方法）が複数指定されている

今回は以下のルールに基づき項目を並べている

• Sufficient（十分な達成方法）が指定されている場合はその方法のレベルを採用
• Sufficient（十分な達成方法）がなければAdvisory（参考達成方法）のレベルを採用
• 上記で一番高いレベルを採用

例： H2には以下の方法が示されている

• Sufficient（十分な達成方法）

  • 1.1.1: Non-text Content -> A

• Advisory（参考達成方法）

  • 2.4.4: Link Purpose(In Context) -> A
  • 2.4.9: Link Purpose(Link Only) -> AAA

この場合はSufficient（十分な達成方法）の1.1.1のレベルであるAを採用

AAA

H24: Providing text alternatives for the area elements of image maps

原文

要約

<area>要素を使用する場合はalt属性を付与する

目的

画像上の選択可能領域と同じ役割を果たすテキストによる代替を提供することで、ユーザーが各エリアの目的や機能を理解できるようにする

対象

視覚障害者やスクリーンリーダーなどの支援技術を利用するユーザー

未対応例

画像の各エリアが何を表しているのか理解できず、ウェブサイトを正しく利用できなくなる

See the Pen H24: Providing text alternatives for the area elements of image maps - before by t.i (@tbba0anw98e) on CodePen.

対応例

各エリアが何を表しているのかを説明する具体的なalt属性を付与することで、画像の各エリアが何を表しているのか理解でき、ウェブサイトを正しく利用することができる

See the Pen H24: Providing text alternatives for the area elements of image maps - after by t.i (@tbba0anw98e) on CodePen.

H28: Providing definitions for abbreviations by using the abbr element

原文

要約

略語や頭字語を使用する場合、元の語や定義を<abbr>要素を使用して定義する

目的

略語や頭字語の意味をすべてのユーザーに理解してもらうため

対象

すべてのユーザー

未対応例

略語や頭字語が何を指しているのか理解できず、ユーザーがウェブコンテンツのすべての情報を得られない可能性がある

See the Pen H28: Providing definitions for abbreviations by using the abbr element - before by t.i (@tbba0anw98e) on CodePen.

対応例

略語や頭字語の定義を提供することで、ユーザーはより情報を理解しやすくなる
<abbr>要素を用いると、ユーザーがマウスのポインタを重ねたときにツールチップが表示され、スクリーンリーダーでも読み上げが可能になる

See the Pen H28: Providing definitions for abbreviations by using the abbr element - before by t.i (@tbba0anw98e) on CodePen.

WCAGのアクセシビリティ解説とMDNの<abbr>要素の解説で少し差がある

WCAGでは「頭字語や頭文字を含むあらゆる略語に対して、<abbr>要素を使用することは常に適切である」と説明されている
一方MDNでは「略語や頭字語すべてに<abbr>要素を使わなければならないというわけではない」と説明されている

アクセシビリティのみを考慮するのであればあらゆる略語に対して、<abbr>要素を使用することがベストプラクティスだと思われるが、一部の略語が非常に頻繁に使用され、それらの使用によってコンテンツが読みにくくなる場合などは、適切なバランスを見つけることも重要である

H30: Providing link text that describes the purpose of a link for anchor elements

原文

要約

<a>要素のリンクテキストを提供して、リンクの目的を説明する

目的

リンクテキストを<a>要素のコンテンツとして提供することにより、リンクの目的をユーザーに伝える

対象

すべてのユーザー

未対応例

リンクテキストがリンク先のコンテンツを明確にしないために、ユーザビリティとアクセシビリティが損なわれる可能性がある

See the Pen H30: Providing link text that describes the purpose of a link for anchor elements - before by t.i (@tbba0anw98e) on CodePen.

対応例

リンクテキストがリンク先のコンテンツを明確に示すことで、ユーザーが情報を効果的に理解しアクセスできるようになる

See the Pen H30: Providing link text that describes the purpose of a link for anchor elements - before by t.i (@tbba0anw98e) on CodePen.

画像をリンクとして使用する場合は、<img>要素のalt属性にリンク先のコンテンツを理解できるテキストを指定する
なお、テキストを画面に無理やり表示させる必要はないが、alt属性の使用は必須である

See the Pen H30: Providing link text that describes the purpose of a link for anchor elements - after by t.i (@tbba0anw98e) on CodePen.

リンクが画像とテキストの両方を包含している場合、テキストの内容によって<img>要素のalt属性を使い分ける必要がある

もしリンクの目的がテキストによって十分に説明されている場合、そのリンクに含まれる画像は追加情報を提供しないため、その画像の代替テキストは空（alt=""）にしても問題ない
この場合、スクリーンリーダーは画像を無視し、テキストリンクのみを読み上げる

See the Pen H30: Providing link text that describes the purpose of a link for anchor elements - after2 by t.i (@tbba0anw98e) on CodePen.

しかし、もし画像がリンクの目的とは別の追加情報を提供する場合（例えば、画像が記事のサムネイルで、その記事の内容に関する情報を視覚的に提供している場合など）、その画像には適切な代替テキストが提供されるべきである
この場合、スクリーンリーダーはテキストリンクと画像の代替テキストの両方を読み上げる

See the Pen H30: Providing link text that describes the purpose of a link for anchor elements - after4 by t.i (@tbba0anw98e) on CodePen.

H40: Using description lists

原文

要約

用語とその定義、質問とその回答などペアで関連する情報をリスト化する場合は、情報、構造、および関係性を適切に伝えるために、<dl>要素（説明リスト）、<dt>要素（用語）、<dd>要素（定義）を使用する

目的

ペアで関連する情報の構造と関係性を正確に伝えることで、ウェブコンテンツをより理解しやすくする

対象

すべてのユーザー
→ 特に視覚障害者や認知機能の制限があるユーザー

未対応例

情報の構造や関係性が不明瞭になり、ユーザーに混乱を招く可能性がある

See the Pen H40: Using description lists - before by t.i (@tbba0anw98e) on CodePen.

対応例

情報の構造と関係性が明確になり、すべてのユーザーにとってコンテンツを理解しやすくなる

See the Pen H40: Using description lists - before by t.i (@tbba0anw98e) on CodePen.

H53: Using the body of the object element

原文

要約

<object>要素を使用する場合、その中にテキストによる代替コンテンツを含めて、画像や動画などの非テキストコンテンツの代替を提供する

目的

視覚障害を持つユーザーや、何らかの理由で非テキストコンテンツを見ることができない、または非テキストコンテンツが読み込まれなかったり、ユーザーが意図的に非テキストコンテンツを無効にしている場合に、コンテンツの内容を理解することができるようにする

対象

視覚障害を持つユーザーや、何らかの理由で非テキストコンテンツを見ることができない、非テキストコンテンツが読み込まれない、意図的に非テキストコンテンツを無効にしているユーザー

未対応例

非テキストコンテンツがレンダリングできないときに、そのコンテンツの情報を得ることができない

See the Pen H53: Using the body of the object element - before by t.i (@tbba0anw98e) on CodePen.

対応例

<object>要素の中にテキストを入れることで、非テキストコンテンツがレンダリングできないときでも、そのコンテンツの情報を得ることができる

See the Pen H53: Using the body of the object element - before by t.i (@tbba0anw98e) on CodePen.

非テキストコンテンツが正常に読み込まれてレンダリングが成功した場合、代替テキストは表示されない

See the Pen H53: Using the body of the object element - after by t.i (@tbba0anw98e) on CodePen.

H54: Using the dfn element to identify the defining instance of a word

原文

要約

何らかの用語の初出や重要な用語の定義について説明する際に、<dfn>要素を使用してその用語をマークアップする

目的

単語またはフレーズの定義を最初に提供することで、ユーザーが内容を理解するのを支援する

対象

すべてのユーザー
→ 特に用語や専門用語に慣れていないユーザー

未対応例

ユーザーはテキストの特定の部分や用語の意味を理解するのが困難になることがある

See the Pen H54: Using the dfn element to identify the defining instance of a word - before by t.i (@tbba0anw98e) on CodePen.

対応例

ユーザーは単語やフレーズの定義を簡単に理解でき、結果として全体的なページ内容の理解が向上する

See the Pen H54: Using the dfn element to identify the defining instance of a word - after by t.i (@tbba0anw98e) on CodePen.

定義する用語が何度も出現する場合、一般的には最初に出現する用語にだけ<dfn>要素で囲むようにする
また<dfn>要素は用語自体を囲むために使用され、その定義を囲むわけではないことに注意する必要がある

なお、H28: Providing definitions for abbreviations by using the abbr elementで紹介されている<abbr>要素と組み合わせると、よりアクセシビリティを向上させることができる

See the Pen H54: Using the dfn element to identify the defining instance of a word - after by t.i (@tbba0anw98e) on CodePen.

H59: Using the link element and navigation tools

原文

要約

<head>要素の中で<link>要素を使い、rel属性やhref属性を用いてウェブサイトのナビゲーションを向上させる

目的

HTMLページがウェブサイトの中でどの位置にあるのかを示す情報（メタデータ）を提供し、ユーザーがウェブサイト全体から特定のコンテンツを効率的に発見できることを支援する

対象

すべてのユーザー

未対応例

ユーザーが現在表示しているページの情報やコンテンツを見つけるのに苦労する可能性がある

See the Pen H59: Using the link element and navigation tools - before by t.i (@tbba0anw98e) on CodePen.

対応例

ウェブサイトのアクセシビリティが改善され、すべてのユーザーが情報を容易に見つけられるようになる
これにより、ウェブサイトのユーザビリティが向上し、結果としてUXも向上する

See the Pen H59: Using the link element and navigation tools - before by t.i (@tbba0anw98e) on CodePen.

H62: Using the ruby element

原文

要約

<ruby>要素, <rp>要素, <rt>要素を使用してルビを振るようにする

目的

テキストの読み方を示す注釈を提供し、コンテンツを理解するのに必要な情報をユーザーに提供する

対象

• 日本語や中国語などの東アジアの言語を学習しているユーザー
• 読解能力に課題を持つユーザー
• 視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

ユーザーはテキストの正しい読み方を理解するのが難しくなる

See the Pen H62: Using the ruby element - before by t.i (@tbba0anw98e) on CodePen.

対応例

ユーザーはテキストの読み方を直接見ることができ、コンテンツの理解が容易になる

See the Pen H62: Using the ruby element - before by t.i (@tbba0anw98e) on CodePen.

ルビは主に、既にその言語に精通しているが、特定の単語やフレーズの読み方が難しいユーザーに対して提供される

例えば日本語のコンテンツの場合、日本語を理解しているが特定の単語やフレーズの読み方が難しい日本語話者に対しては、ルビを振ることでコンテンツの理解に役立つが、日本語を全く理解していない外国人などのユーザーに対しては、読み方を教える目的でルビを振ることは一般的には行われない

See the Pen H62: Using the ruby element - after2 by t.i (@tbba0anw98e) on CodePen.

H69: Providing heading elements at the beginning of each section of content

原文

要約

コンテンツの各セクションの開始位置に見出し要素（<h1> ~ <h6>）を提供する

目的

見出し要素を使用して論理的な階層構造をマークアップすることで、ユーザーがコンテンツの構造を理解しやすくなり、特定の情報を迅速に探すことができるようになる

対象

すべてのユーザー
→ 特にスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

見出し要素がない場合、ユーザーはコンテンツのセクションを識別し理解することが困難となる

See the Pen H69: Providing heading elements at the beginning of each section of content - before by t.i (@tbba0anw98e) on CodePen.

対応例

見出しを提供することで、ユーザーは各セクションの内容を素早く理解し、関連する情報を効率的に見つけることができる

See the Pen H69: Providing heading elements at the beginning of each section of content - before by t.i (@tbba0anw98e) on CodePen.

H76: Using meta refresh to create an instant client-side redirect

原文

要約

クライアント側で即時リダイレクトを行う場合は、<meta>要素のhttp-equiv属性を"refresh"とし、content属性に0;URL=[リダイレクト先のURL]を指定する

目的

ユーザーが混乱することなく、即時に新しいページにリダイレクトすることを可能にする

対象

すべてのユーザー

未対応例

クライアント側で即時リダイレクトを行わず、ユーザーが手動でリンクを選択して遷移する

See the Pen H76: Using meta refresh to create an instant client-side redirect - after by t.i (@tbba0anw98e) on CodePen.

対応例

<meta>要素を使用してクライアント側で即時リダイレクトを実装する

See the Pen Untitled by t.i (@tbba0anw98e) on CodePen.

自動リダイレクトの実装については、通常、サーバー側の技術を用いることが推奨される
しかし、WCAGでは、サーバー側の技術で制御が困難な場合に限り、クライアント側でリダイレクトを実装してもよいとされている

一方MDNでは、自動リダイレクトによってスクリーンリーダーなどの支援技術を利用するユーザーや弱視のユーザーが混乱を引き起こす可能性があると警告している

WCAGのタイミング調節可能や割り込み回避といった達成基準を考慮すると、自動リダイレクトはこれらの基準に反する可能性があるため、実装にあたっては以下のような対策が推奨される

• ユーザーに対して明確な通知を行う
• リダイレクトまでの猶予時間を設ける
• ユーザーがリダイレクトを自ら制御できるようにする

H83: Using the target attribute to open a new window on user request and indicating this in link text

原文

要約

新規ウィンドウやタブで開くリンクを作成する場合は、target属性を使用し、リンクテキストを明記する

目的

ユーザーが意図せずに新しいウィンドウやタブが開くことによる混乱を避ける

対象

• 視覚障害者や認知障害者を含むスクリーンリーダーなどの支援技術を利用するユーザー
• 新しいウィンドウやタブが開くことによる混乱を避けたいすべてのユーザー

未対応例

新しいウィンドウやタブが予期せずに開くことでユーザーが混乱し、ウェブサイトのナビゲーションが困難になる可能性がある

See the Pen H83: Using the target attribute to open a new window on user request and indicating this in link text - before by t.i (@tbba0anw98e) on CodePen.

対応例

新しいウィンドウやタブでリンクが開くことをリンクテキストに明記することで、ユーザーは操作を行う前に情報を得ることができ、予期しないウィンドウやタブが開くことによる混乱を回避することができる

See the Pen H83: Using the target attribute to open a new window on user request and indicating this in link text - before by t.i (@tbba0anw98e) on CodePen.

テキストとして入れずにアイコンなどで表現することも可能だが、特にスクリーンリーダーなどの支援技術を利用するユーザーを考慮してaria-label属性の指定やH86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeakの対応を行う必要がある

See the Pen H83: Using the target attribute to open a new window on user request and indicating this in link text - after2 by t.i (@tbba0anw98e) on CodePen.

target属性を使用しないことで、ユーザー自身がリンク先を新しいウィンドウやタブで開くかどうかを選択できるようになる
ウェブブラウザでは、リンクを通常クリックすると「現在開いているタブで開く」、またはリンクを右クリックすると「新しいタブで開く」または「新しいウィンドウで開く」を選択することができる

target属性を使用すると、リンクは常に新しいタブまたはウィンドウで開かれるため、ユーザーの選択の自由が制限される
そのため、ユーザーの選択の自由を尊重する観点から、実装する機能や目的に応じてtarget属性の使用を検討することが重要である

H89: Using the title attribute to provide context-sensitive help

原文

要約

title属性を使用して、フォームの入力フィールドに応じたヘルプ（書式情報や入力例など）を提供する

目的

title属性にヘルプ情報を記載することで、フォームの入力フィールドに対する追加的な情報やヒントを提供し、すべてのユーザーが適切に入力できるよう支援する

対象

すべてのユーザー
→ 特に視覚障害者や認知障害者

未対応例

title属性がない場合、特定の要素やオブジェクトに関する補足情報をユーザーが取得できず、ウェブサイトの使用が困難になる可能性がある

See the Pen H89: Using the title attribute to provide context-sensitive help - before by t.i (@tbba0anw98e) on CodePen.

対応例

title属性を使用して説明を提供することで、ユーザーは特定の要素やオブジェクトの目的や使用方法を理解しやすくなる

See the Pen H89: Using the title attribute to provide context-sensitive help - before by t.i (@tbba0anw98e) on CodePen.

WCAGでは「title属性によるヘルプ情報の提供だけを行うのではなく、他の方法と併用してユーザーを支援すべきだ」と明記されている

現在のブラウザやスクリーンリーダーなどの支援技術のすべてがtitle属性に記載された情報をユーザーに提供しているわけではない
そのため、title属性だけに頼るのではなく、他の技術との併用が必要であることが勧告されている

一例として<label>要素やaria-describedby属性を用いて明示的に説明を提供することが推奨されている
placeholder属性を用いて入力例を提供することも有効だが、placeholder属性のテキストは入力を開始すると消えてしまうため、ユーザーが入力中に参照することができなくなる

See the Pen H89: Using the title attribute to provide context-sensitive help - before by t.i (@tbba0anw98e) on CodePen.

H96: Using the track element to provide audio descriptions

原文

要約

<video>要素を用いる際、視覚情報を補完する音声解説を提供するために<track>要素を使用する

目的

視覚情報を音声で補足することにより、視覚障害を持つユーザーが動画の内容をより深く理解できるようにする

対象

視覚障害者や、視覚情報にアクセスするのが困難または不可能なユーザー
例えば運転中のユーザーや、環境光の影響で画面が見えにくいユーザーなど

未対応の一例

映像によってユーザーは映像の内容を十分に理解できない可能性がある
これは映像コンテンツの利便性とアクセシビリティを低下させ、排他的な体験をもたらす可能性がある

See the Pen H96: Using the track element to provide audio descriptions - before by t.i (@tbba0anw98e) on CodePen.

対応例

映像を一時停止して音声による説明が追加されている
これにより、視覚障害のあるユーザーや視覚情報にアクセスできないユーザーが、映像コンテンツの内容を理解できるようになる

See the Pen H96: Using the track element to provide audio descriptions - after by t.i (@tbba0anw98e) on CodePen.

上で挙げた例は<track>要素を使用しているものではないが、視覚障害者が動画を視聴した際に音声による補足情報を提供することで、動画の内容を理解する手助けとなることを示している

また、映像コンテンツ内で視覚情報が不足している場合、音声がない部分で映像と音声解説が同時に流すようにすることもある
一例として、映画でキャラクターが話していないシーンで、そのシーンの視覚的な要素を説明する音声が流すようにすることで動画の内容をより理解できるようにする

H100: Providing properly marked up email and password inputs

原文

要約

ログインフォームでメールアドレスとパスワードの入力フィールドを使用する際に、ユーザーエージェント（ブラウザやパスワードマネージャーなど）がフィールドを正確に識別できるようにtype属性（例: type="email", type="password"）を適切に設定する

目的

ユーザーエージェント（ブラウザやパスワードマネージャーなど）がフィールドの種類を正確に認識し、適切な入力支援を提供できるようにするため

対象

すべてのユーザー
→ 特に記憶に自信がないユーザーや、入力の効率を向上させたいユーザー

未対応例

type属性が適切に設定されていない（type="text"）ため、ユーザーエージェント（ブラウザやパスワードマネージャーなど）がフィールドの種類を正確に認識できず、入力時のユーザーサポートが不十分になる場合がある

See the Pen H100: Providing properly marked up email and password inputs - before by t.i (@tbba0anw98e) on CodePen.

対応例

type属性を適切に設定する（type="email", type="password"）ことで、ユーザーエージェント（ブラウザやパスワードマネージャーなど）がフィールドの種類を正確に認識し、キーボードの最適化や入力エラーの検出、自動入力などのユーザーサポートが提供される

See the Pen H100: Providing properly marked up email and password inputs - before by t.i (@tbba0anw98e) on CodePen.

H98: Using HTML 5.2 autocomplete attributesのautocomplete属性と組み合わせて実装することでユーザーエージェント（ブラウザやパスワードマネージャーなど）によるユーザーサポート + ユーザーによって以前入力された内容を再利用することができるため、よりユーザビリティを向上させることができる

そのためなるべく組み合わせて実装するのが望ましい

AA

H58: Using language attributes to identify changes in the human language

原文

要約

文章の途中で言語が変わる場合はlang属性を使用して明示する

目的

lang属性を用いることで、ページ上の言語変更をスクリーンリーダーなどの支援技術に明示し、ユーザーが内容を正しく理解してナビゲートできるようにする

対象

盲目のユーザーや、視覚障害者、非母語話者など、スクリーンリーダーなどの支援技術を利用するユーザー

未対応例

正しく設定されていない場合、異なる言語の文章が正しく読み上げられず、理解が困難になる可能性がある

See the Pen H58: Using language attributes to identify changes in the human language - before by t.i (@tbba0anw98e) on CodePen.

対応例

言語属性が適切に設定されている場合、スクリーンリーダーなどの支援技術はそれぞれの言語に適した発音で文章を読み上げる

See the Pen H58: Using language attributes to identify changes in the human language - before by t.i (@tbba0anw98e) on CodePen.

H98: Using HTML 5.2 autocomplete attributes

原文

要約

input要素にautocomplete属性を使用する

目的

autocomplete属性を指定することでユーザーが前回のフォーム送信時にブラウザに入力した情報を保存することができ、次回以降同じ種類の情報を再度入力する際に、自動的にその情報を提供することができる
これにより、ユーザーは情報の再入力を省くことができ、誤入力のリスクも減らすことができる

対象

すべてのユーザー
→ 特に身体的障害や記憶障害を持つユーザー

未対応例

ユーザーは同じ情報を何度も入力する必要がある

See the Pen H98: Using HTML 5.2 autocomplete attributes - before by t.i (@tbba0anw98e) on CodePen.

対応例

ユーザーは以前に入力した情報を再利用してフォームを迅速に入力することができる

See the Pen H98: Using HTML 5.2 autocomplete attributes - before by t.i (@tbba0anw98e) on CodePen.

H100: Providing properly marked up email and password inputsにも記載したが、H98とH100はともにフォーム入力のアクセシビリティとユーザビリティの向上を目的としている

この2つを組み合わせて実装することで、ユーザビリティをより向上させることができる

A

H2: Combining adjacent image and text links for the same resource

原文

要約

画像とテキストのリンクが同じリソースを指している場合は、両方を含む1つの<a>要素を用いて実装する

目的

キーボードを利用しているユーザーやスクリーンリーダーなどの支援技術を利用しているユーザーが混乱やサイト利用が困難にならないようにするため、リンク情報を明確かつ一貫性のある方法で提供する

対象

キーボードを利用しているユーザーやスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

テキストリンクと画像リンクがそれぞれ別の<a>要素として実装されている場合、以下の問題が発生する可能性がある

• スクリーンリーダーが別々のリンクと判断し、同じリソースへのリンクを繰り返し読み上げる
• キーボードのtabキーを使用してナビゲーションする際、テキストリンクと画像リンクの両方でフォーカスが停止し、余分な操作が必要になる

See the Pen H2: Combining adjacent image and text links for the same resource - before by t.i (@tbba0anw98e) on CodePen.

対応例

テキストリンクと画像リンクを1つの<a>要素内に組み合わせることで、以下の利点がある

• スクリーンリーダーが1つのリンクとして認識し、一度だけ読み上げる
• キーボードのtabキーでのナビゲーション時に1つのリンクにのみフォーカスが当たり、より効率的な操作が可能になる

See the Pen H2: Combining adjacent image and text links for the same resource - after by t.i (@tbba0anw98e) on CodePen.

H25: Providing a title using the title element

原文

要約

<head>要素の中に<title>要素を挿入して、ウェブブラウザのタブ、履歴、お気に入りリストから該当のページを容易に見つけられるようにする

目的

ページの全文を読むことなく、ユーザーがウェブサイト内での現在の位置を素早く把握できるようにする

対象

すべてのユーザー
→ 視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

ユーザーがページの内容や目的を素早く理解することが難しくなり、アクセシビリティが低下する

See the Pen H25: Providing a title using the title element - before by t.i (@tbba0anw98e) on CodePen.

対応例

ユーザーがページの内容や目的をより素早く理解しやすくなり、アクセシビリティが向上する

See the Pen H25: Providing a title using the title element - after by t.i (@tbba0anw98e) on CodePen.

<title>要素にはページの内容や目的を簡潔かつ明確に表現する内容を含めるべきであり、同じタイトルを複数のページで使用しないように注意する必要がある
これはユーザーがブラウザのブラウザのタブ、履歴、お気に入りリストから該当のページを特定しやすくするためにも重要な役割を果たす

また、似たようなものとしてほとんどのHTML要素に指定可能なtitle属性があるが、こちらは補足情報を提供するためのものであって、ページを識別する主要な手段ではない。<head>要素の中に1つだけ存在する<title>にはページ全体の内容を正確に反映させるようにすべきである

H32: Providing submit buttons

原文

要約

フォーム内に送信ボタンを提供する

目的

キーボード操作だけではなく、マウスやタッチ操作を主に使用するユーザーもフォームを容易に送信できるようにする
これによりすべてのユーザーが等しくサービスを利用できる環境を提供する

対象

すべてのユーザー
→ 特にキーボードを利用しているユーザーや、マウスやタッチ操作を主に使用するユーザー

未対応例

送信ボタンが存在しないと、ユーザーはフォームを送信できず、ユーザー体験が悪化する

See the Pen H32: Providing submit buttons - before by t.i (@tbba0anw98e) on CodePen.

対応例

送信ボタンを追加することで、ユーザーはフォームを送信することができ、ユーザー体験が向上する

See the Pen H32: Providing submit buttons - before by t.i (@tbba0anw98e) on CodePen.

H33: Supplementing link text with the title attribute

原文

要約

<a>要素で作成したリンクテキストにtitle属性を付ける

目的

視覚的なヒントが少ないもしくは存在しない場合に、リンクの目的をユーザーにより良く理解させる

対象

スクリーンリーダーなどの支援技術を利用しているユーザーやマウスオーバーを使ってリンクの詳細を確認するユーザー

未対応例

リンクの目的が不明確なままとなり、ユーザーの理解を妨げる可能性がある

See the Pen H33: Supplementing link text with the title attribute - before by t.i (@tbba0anw98e) on CodePen.

対応例

title属性を指定することでリンクの目的をより明確に理解することが可能となる

See the Pen H33: Supplementing link text with the title attribute - before by t.i (@tbba0anw98e) on CodePen.

リンク先の重要な情報や警告など、リンクをクリックする前にユーザーが知っておくべき内容は、title属性ではなく直接リンクテキストとして提供すべきである
title属性はホバーや特定のスクリーンリーダーを使用しているユーザーだけがアクセスできる補足情報を提供するためのものであり、重要な情報はすべてのユーザーがアクセスできる形で提供するべきである

例として「リンクの遷移先はマイページである」という情報はすべてのユーザーが知っておくべき情報となる
この場合、リンクのテキストにその情報を含めるか、リンクテキストと一緒に画像を使用する場合はalt属性を用いてスクリーンユーザーなどの支援技術を利用しているユーザーも含め、すべてのユーザーが認知できるようにする必要がある

See the Pen H33: Supplementing link text with the title attribute - before by t.i (@tbba0anw98e) on CodePen.

こちらの警告欄でも同様の内容が記載されているが、WCAGでは現在のブラウザやスクリーンリーダーなどの支援技術のすべてがtitle属性に記載された情報をユーザーに提供していない可能性があり、必ずすべてのユーザーに正しく伝わると断言することができないため、title属性によるヘルプ情報の提供だけで終わらせるのではなく、広範囲にサポートされるまで別技術との併用が必要だと勧告している

WCAGでは一例として、C7 Using CSS to hide a portion of the link textやH30: Providing link text that describes the purpose of a link for anchor elementsを活用すべきだと記載されている

H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline

原文

要約

ウェブページ上で異なるテキストの読み方向を明示するために、UnicodeのRLM（Right-to-Left Mark）またはLRM（Left-to-Right Mark）を使用する

目的

異なる文字方向を持つテキスト要素が正確に表示され、ユーザーが容易に読み取れるようにする

対象

• 多言語を扱うウェブサイトやアプリケーションで、テキストの方向が異なる場合
• 右から左に読む言語（アラビア語やヘブライ語など）を使用するユーザー
• スクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

ブラウザはテキストの方向を正しく解釈できず、テキストが不適切に表示される可能性がある
また、スクリーンリーダーなどの支援技術では正しく読み上げられない可能性がある

See the Pen H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline - before by t.i (@tbba0anw98e) on CodePen.

対応例

ブラウザはテキストの方向を正しく解釈し、適切に表示することができる
UnicodeのRLM（Right-to-Left Mark）やLRM（Left-to-Right Mark）を使用することで、スクリーンリーダーはテキストを適切な方向で読み上げることができる

See the Pen H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline - before by t.i (@tbba0anw98e) on CodePen.

上の対応例に記載しているコード内のそれぞれの文字は以下の通りとなる
これらはすべて特殊な非印刷文字となっているため画面に表示されない

• ‏, ‏, ‏がRLM（Right-to-Left Mark）
• ‎, ‎, ‎がLRM（Left-to-Right Mark）

記述方法としては、右から左へ読むアラビア文字の前後にそれぞれRLM（Right-to-Left Mark）とLRM（Left-to-Right Mark）を指定することで、アラビア文字の部分は右から左へ、その他の部分は左から右へ読むようにと明示することができる

HTMLのコードを見るとアラビア文字が‏と‎の間にないように見えるが、画面にこれらが表示されない場合、動作としては正常である

WCAGではこの技術の概念としてこちらの記事が紹介されており、そちらでは対応方法としてH56: Using the dir attribute on an inline element to resolve problems with nested directional runsで紹介されているdir属性を使用してテキストの方向を指定する方法が推奨されている

基本的にはdir属性を用いてテキストの方向を指定するだけで大半の状況を制御することが可能だが、一部の複雑な状況では制御しきれない場合がある。その時は、RLMやLRMを用いてより詳細に制御を行うことで問題を解決することができる。

See the Pen H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline - after by t.i (@tbba0anw98e) on CodePen.

H36: Using alt attributes on images used as submit buttons

原文

要約

<input>要素のtype="image"を用いる場合はalt属性を必ず含めるようにする

目的

視覚障害者が画像ボタンの機能を理解し、適切にウェブサイトを操作できるようにする

対象

視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

alt属性が欠けていると、スクリーンリーダーは画像のファイル名を読み上げるか、または何も読み上げない場合がある
その結果、ユーザーは画像ボタンの機能や目的を理解できない可能性がある

See the Pen H36: Using alt attributes on images used as submit buttons - before by t.i (@tbba0anw98e) on CodePen.

対応例

alt属性を使用すると、スクリーンリーダーはそのテキストを読み上げ、画像ボタンの機能や目的を理解することができる
なお、alt属性には画像の説明をするのではなく、ボタンの機能に関する説明文を含める必要がある
同一ページ内にそれぞれ異なる動作をする複数の送信/実行ボタンがある場合、そのボタンのラベルは特に重要である

See the Pen H36: Using alt attributes on images used as submit buttons - before by t.i (@tbba0anw98e) on CodePen.

H37: Using alt attributes on img elements

原文

要約

<img>要素を使用するときは、画像が伝える内容や機能を表現する短いテキストをalt属性に指定する

目的

画像に重要な情報が含まれる場合、その情報を代替テキストに含めることで、画像と同じ役割を果たすことができる

対象

視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー
または画像が読み込めない環境にあるユーザー

未対応例

alt属性がない場合、スクリーンリーダーは画像のファイル名を読み上げるか、または何も読み上げない場合がある
さらに画像が表示されない場合、代替テキストがないためユーザーは画像の内容を理解する手段がなくなってしまう
これにより、ウェブサイトの利用に支障をきたし、アクセシビリティが損なわれる可能性がある

See the Pen H37: Using alt attributes on img elements - after2 by t.i (@tbba0anw98e) on CodePen.

対応例

alt属性がある場合、スクリーンリーダーは代替テキストを読み上げる
また、画像が表示されない状況でも、ユーザーは代替テキストを通じて画像の情報を得ることが可能である

See the Pen H37: Using alt attributes on img elements - after2 by t.i (@tbba0anw98e) on CodePen.

alt属性に指定するテキストは、視覚的な特徴を説明するのではなく、画像が伝えようとしている情報や意図をユーザーが理解できるような内容を含むべきである

例えば、上の対応例に記載されているサンプルコードでは、alt属性のテキストを「りんごの生産量グラフ」とすると、テキストは視覚的な特徴のみを伝えるため、画像を見ることができないユーザーは画像が伝えるべき具体的な情報を得ることができない
そのため、画像が伝えるべき情報を具体的に示すテキストをalt属性に設定することが推奨される

背景や境界線など、画像が装飾的な目的のみを果たし、コンテンツの理解には必要ない場合、その画像はalt属性を空にするか、role="presentation"属性を使用してマークアップすることが推奨される
これにより、スクリーンリーダーはその画像を無視することができる

See the Pen H37: Using alt attributes on img elements - after2 by t.i (@tbba0anw98e) on CodePen.

H39: Using caption elements to associate data table captions with data tables

原文

要約

<table>要素を用いる場合は、その内容を説明する<caption>要素を使用する

目的

<table>要素と<caption>要素を関連付けることで、表のデータとその概要をプログラム的に関連付ける
それにより、テーブルが何を表しているかをユーザーが直観的に理解しやすくする

対象

すべてのユーザー
→ 特に視覚障害を持つユーザーやスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

<caption>要素を使用しない場合、ユーザーはテーブルの目的や内容を理解しにくい
特にスクリーンリーダーなどの支援技術を利用しているユーザーは、テーブルの構造を理解するのが難しくなる可能性がある

See the Pen H39: Using caption elements to associate data table captions with data tables - before by t.i (@tbba0anw98e) on CodePen.

対応例

テーブルの目的や内容が明確になり、すべてのユーザーがテーブルの内容をよりよく理解することができるようになる
特にスクリーンリーダーなどの支援技術を利用しているユーザーは、標題（caption要素）が読み上げられることによってテーブルの内容を把握しやすくなる

See the Pen H39: Using caption elements to associate data table captions with data tables - before by t.i (@tbba0anw98e) on CodePen.

<table>要素をレイアウト目的で使用する場合は<caption>要素を使用する必要はない

レイアウトテーブルは要素のコンテンツの配置を制御することが目的であり、ユーザーにとってテーブルそのものは見えない（意識されない）ものであるべきと考えられている
このようなテーブルに<caption>要素を使用すると、スクリーンリーダーなどの支援技術がこのテーブルに注目し（読み上げるなどしてしまう）、ユーザーが混乱する可能性がある
そのため、マークアップする際はそのテーブルがどのような目的で使用されているのかを考慮し、<caption>要素を入れる必要があるかどうかを検討することが重要である

See the Pen H39: Using caption elements to associate data table captions with data tables - after by t.i (@tbba0anw98e) on CodePen.

H42: Using h1-h6 to identify headings

原文

要約

見出しを識別するための見出し要素（<h1> ~ <h6>）を使用する

目的

コンテンツの構造と情報の階層性を明確にする
見出しタグは、情報の流れとその重要性を視覚的に表現できるだけではなく、HTMLの構造的な意味も持つ
これにより、視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザーが、情報を容易に理解し、ページをナビゲートすることが可能となる

対象

視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

適切な見出し要素を使用しないと、ユーザーがページの構造や内容を理解するのが難しくなる

See the Pen H42: Using h1-h6 to identify headings - before by t.i (@tbba0anw98e) on CodePen.

対応例

適切な見出し要素を使用すると、すべてのユーザーがページの構造を理解しやすくなり、情報を効率的に探すことが可能となる

See the Pen H42: Using h1-h6 to identify headings - before by t.i (@tbba0anw98e) on CodePen.

基本的には見出し要素は連続的（<h1>要素の子要素には<h2>要素を用いる）に適用する必要がある
SEOへの影響に関して議論があるものの、アクセシビリティを考慮すると、見出し要素は連続的に順序を守って記述することが推奨されている

H43: Using id and headers attributes to associate data cells with header cells in data tables

原文

要約

<table>要素を使用して作成したデータテーブルにおいて、データセルが複数の行や列のヘッダーセルと関連付けられている場合、id属性とheaders属性を使用して紐付けをする

目的

視覚障害者や認知障害を持つユーザーがテーブルの構造と関連性を適切に理解できるようにする

対象

視覚障害者や認知障害者、またはスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

テーブルのデータが適切に解釈されず、どのデータセルがどのヘッダーセルと紐づいているのか識別することが難しくなる

See the Pen H43: Using id and headers attributes to associate data cells with header cells in data tables - before by t.i (@tbba0anw98e) on CodePen.

対応例

テーブルにid属性とheaders属性を用いて紐付けを行うことで、ユーザーはどのデータセルがどのヘッダーセルと紐づいているのか識別することが可能となる

See the Pen H43: Using id and headers attributes to associate data cells with header cells in data tables - after by t.i (@tbba0anw98e) on CodePen.

こちらの警告欄に記載した内容と重複するが、データを表示する目的ではなくレイアウト目的で<table>要素を用いた場合は、セルとヘッダーを紐づける必要がないため、id属性とheaders属性を用いる必要はない
紐づけようとした場合、ユーザーにとって意味がない要素に対してスクリーンリーダーなどの支援技術がこのテーブルに注目（読み上げるなどの動作をする）し、ユーザーが混乱する可能性があるためである

H44: Using label elements to associate text labels with form controls

原文

要約

フォームコントロールに<input>要素を使用する際は、<label>要素を使って関連付け、ラベルとコントロールの関係を明確にする

目的

フォームコントロールの目的を明確にし、その目的を視覚的にも聴覚的にもユーザーに伝えることで、ユーザビリティを向上させる

対象

すべてのユーザー
→ 特に視覚障害者、認知障害者、およびスクリーンリーダーなどの支援技術を利用するユーザー

未対応例

未対応の場合、視覚障害のあるユーザーがフォームコントロールを適切に理解できない可能性がある
また、フォーム要素がラベルに囲まれていない場合、クリック可能な領域が限定され、操作性が低下する
以下は<span>要素を使用した例であり、span要素をクリックしても入力フィールドにフォーカスは当たらない

See the Pen H44: Using label elements to associate text labels with form controls - before by t.i (@tbba0anw98e) on CodePen.

対応例

ラベルが適切に関連付けられると、画面読み上げツールはフォームコントロールとラベルを一緒に読み上げ、ユーザーはそのコントロールの目的をより容易に理解できるようになる
<label>要素をクリックすると入力フィールドにフォーカスが当たる
紐づける際は、<label>要素のfor属性と<input>要素のid属性を一致させる

See the Pen H44: Using label elements to associate text labels with form controls - before by t.i (@tbba0anw98e) on CodePen.

以下は<label>要素を用いて関連付けることが推奨されるフォームコントロールの一例である

• テキスト入力フィールド（<input type="text">, <input type="password">など）
• チェックボックス（<input type="checkbox">）
• カラーピッカー（<input type="color">）
• ファイル選択ボタン（<input type="file">）
• ラジオボタン（<input type="radio">）
• ダイアルコントロール（<input type="range">）
• セレクトボックス（<select>）
• テキストエリア（<textarea>）

一方、通常は<label>要素の使用が不要または推奨されないフォームコントロールは以下となる

• 送信およびリセットボタン ( <input type="submit">, <input type="reset">)
• 画像ボタン ( <input type="image">)
• 隠しフィールド ( <input type="hidden">)
• スクリプトボタン (<button>, <input type="button"> )

ただし、これらの要素に対しても、ユーザーがコントロールをより明確に識別できるようにする、または追加情報を提供するために、特定の状況や要件に応じて<label>要素を用いることが適切な場合がある
実装内容や状況によって使い分けることを検討する必要がある

<input type="radio">や<input type="checkbox">を使用する場合、関連するテキストをラベルとして提供することが重要である
理由としては、ラベルを介してユーザーはどの選択肢を選択しているのかをより明確に識別できるためである

選択要素（ラジオボタンやチェックボックス）の後ろに選択肢のテキストを配置することが一般的であるため、通常<label>要素を用いて実装する場合は入力要素の後に配置する
ただし、さらにユーザビリティを向上させるために<label>要素で<input>要素とテキストを囲む方法もある
これによりクリック可能な領域が拡大し、操作が容易になる

<input>要素の後ろに<label>要素を指定する方法
枠線で囲まれた部分をクリックするとチェックをつけることができる

See the Pen H44: Using label elements to associate text labels with form controls - after2 by t.i (@tbba0anw98e) on CodePen.

<label>要素で<input>要素とテキストを囲む方法
上と同じように枠線で囲まれた部分をクリックするとチェックをつけることができ、より広いクリック可能領域を提供する

See the Pen H44: Using label elements to associate text labels with form controls - after2 by t.i (@tbba0anw98e) on CodePen.

H48: Using ol, ul and dl for lists or groups of links

原文

要約

リストやリンクグループを作成する場合は<ol>要素, <ul>要素, <dl>要素を用いる

目的

ウェブページ上の情報を整理し、視覚的にも聴覚的にも、特にスクリーンリーダーなどの支援技術を利用しているユーザーにとって理解しやすい形で提供する

対象

すべてのユーザー
→ 特にスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

ユーザーがリストの開始と終了を正確に把握することが難しくなり、情報を理解するのが難しくなる

See the Pen H48: Using ol, ul and dl for lists or groups of links - before by t.i (@tbba0anw98e) on CodePen.

対応例

リスト要素を使用すると、情報が適切に構造化され、すべてのユーザーが情報を理解しやすくなる

See the Pen H48: Using ol, ul and dl for lists or groups of links - after by t.i (@tbba0anw98e) on CodePen.

<ol>要素, <ul>要素, <dl>要素の使い分けとして以下のように定義されている

• <ol>: リストが順序付けられている場合、例えば手順やランキングリストなどに使用
• <ul>: リストが順序に依存しない場合、例えば一般的なリストや項目群に使用
• <dl>: 用語と定義や質問と回答など、情報の名前-値のペアをグループ化する場合に使用

ただし、すべてのリストがマークアップを必要とするわけではない
例えば、カンマや句点で区切られた単純な列挙の場合は、無理にリストとしてマークアップする必要はない

See the Pen H48: Using ol, ul and dl for lists or groups of links - after by t.i (@tbba0anw98e) on CodePen.

H49: Using semantic markup to mark emphasized or special text

原文

要約

特別な、または強調したいテキストに対して、意味的なマークアップ（<strong>要素や<em>要素など）を使用する

目的

セマンティックHTMLを使用して強調または特別なテキストをマークアップすることで、テキストの意味が視覚的にだけでなく、プログラムによる解釈やスクリーンリーダーなどの支援技術を通じても伝わるようにする
これにより、対象となるユーザーが情報をより容易に理解できるようになる

対象

視覚障害者や視覚的な強調を理解するのが難しいユーザー
またはスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

視覚的には強調されているが、意味的なマークアップが使用されていない
そのため、対象となるユーザーは、テキストが強調されていることを理解することが困難になる

See the Pen H49: Using semantic markup to mark emphasized or special text - before by t.i (@tbba0anw98e) on CodePen.

対応例

セマンティックHTMLを使用することにより、プログラムやスクリーンリーダーなどの支援技術がテキストの強調を認識し、ユーザーに伝えることができる。

See the Pen H49: Using semantic markup to mark emphasized or special text - before by t.i (@tbba0anw98e) on CodePen.

H51: Using table markup to present tabular information

原文

要約

表形式の情報を表示する場合は、<table>要素, <tr>要素, <th>要素, <td>要素を用いてマークアップする

目的

テーブルを視覚的に理解することが困難なユーザーに対しても、表示形式の変更があった場合でも、テーブル内の情報とその関係性が維持されるようにマークアップする
これにより、すべてのユーザーがテーブルの情報にアクセスしやすくなる。

対象

すべてのユーザー
→ 特に視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

以下のような見出しセル（<th>要素）がない場合、テーブルの構造が明確でないため、表の構造や情報を正確に把握することが困難になる

See the Pen H51: Using table markup to present tabular information - before by t.i (@tbba0anw98e) on CodePen.

対応例

表の構造を明確にマークアップすることで、ユーザーが構造とデータの関係性をより容易に理解できるようになる

See the Pen H51: Using table markup to present tabular information - after by t.i (@tbba0anw98e) on CodePen.

H56: Using the dir attribute on an inline element to resolve problems with nested directional runs

原文

要約

テキストの方向を正しく指定したい場合はdir属性をインライン要素に使用する

目的

テキストブロック内の異なる方向のテキストが混在していることによる表示の問題を解消する
特に、インライン要素に対してdir属性を使用すると、ネストされた異なる方向のテキストの問題を解決できる

対象

右から左に読む言語を使用するユーザーや、スクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

未指定の場合、テキストの読みやすさが損なわれ、特に右から左に読む言語を使用するユーザーにとっては理解しづらくなる可能性がある

See the Pen H56: Using the dir attribute on an inline element to resolve problems with nested directional runs - before by t.i (@tbba0anw98e) on CodePen.

対応例

テキストの方向性を適切に指定すると、テキストはスクリーンリーダーなどの支援技術により適切に解釈され、すべてのユーザーが容易に理解できる

See the Pen H56: Using the dir attribute on an inline element to resolve problems with nested directional runs - before by t.i (@tbba0anw98e) on CodePen.

H57: Using the language attribute on the HTML element

原文

要約

<html>要素にlang属性を指定する

目的

ページの主要な言語を表す有効な言語コードを指定することで、支援ツールがページを適切に解釈し、正確に作動させるようにするため

対象

特に視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー
または自動翻訳ツールを使用する非母国語話者

未対応例

言語属性が設定されていない場合、スクリーンリーダーは適切な発音規則を適用することができず、自動翻訳ツールは原文の言語を推測しなければならない
このため、誤った発音や訳語が出力される可能性が高まる

See the Pen H57: Using the language attribute on the HTML element - before by t.i (@tbba0anw98e) on CodePen.

対応例

言語属性が正しく設定されていると、スクリーンリーダーや自動翻訳ツールはより適切な発音や翻訳を出力する

See the Pen H57: Using the language attribute on the HTML element - before by t.i (@tbba0anw98e) on CodePen.

言語コードはBCP47で定義されている言語タグを使用する
BCP47の読解が難しいという場合はこちらに記載されている主要な言語コードを使用すれば基本的に問題はない

ここでは<html>要素にlang属性を指定することでページ全体の言語を設定するが、作成するページによってはページ内に複数の言語が混在する場合がある
その場合は、H58: Using language attributes to identify changes in the human languageのような方法を用いることを推奨する

H63: Using the scope attribute to associate header cells and data cells in data tables

原文

要約

<table>要素を用いて実装する際、<th>要素にscope属性を利用してヘッダーとデータセルを関連付ける

目的

視覚障害や認知障害を持つユーザーがデータテーブルを理解しやすくする

対象

視覚障害や認知障害を持つユーザー
特に、スクリーンリーダーなどの支援技術を利用してテーブルにアクセスするユーザー

未対応例

スクリーンリーダーなどの支援技術はヘッダーとデータセルの関連性を自動的に認識できない可能性がある
これにより、ユーザーはテーブルの情報を理解するのに困難を感じる可能性がある

See the Pen H63: Using the scope attribute to associate header cells and data cells in data tables - before by t.i (@tbba0anw98e) on CodePen.

対応例

scope属性を用いて明示的に定義することで、スクリーンリーダーなどの支援技術はヘッダーとデータセルの関連性をより正確に理解し、その情報をユーザーに伝えることが可能になる

See the Pen H63: Using the scope attribute to associate header cells and data cells in data tables - before by t.i (@tbba0anw98e) on CodePen.

ヘッダーとデータセルの紐付けに関してはH43: Using id and headers attributes to associate data cells with header cells in data tablesでも同じような達成基準が設定されている

おおまかには以下のような使い分けとなる
H63が比較的単純に、H43がより複雑な指定が可能となると理解しておくと良い

• H63: ヘッダーが複数の行や列に跨らないようなシンプルなテーブルにおいて、ヘッダーがどのセルなのか、どの方向（縦: colや横: rowなど）の見出しなのかを定義
• H43: ヘッダーが複数の行や列に跨るような複雑なテーブルにおいて、各データセルがどのヘッダーに対応するものなのかを細かく定義

より詳しく内容を知りたいという方はMDNやこちらを参考にすると良い

See the Pen H63: Using the scope attribute to associate header cells and data cells in data tables - before by t.i (@tbba0anw98e) on CodePen.

scope属性は<th>要素に指定すると記載されているが、必ずしも指定しないといけないというわけではない
一例として、1行目、1列目にヘッダーが来る場合は<th>要素だけを実装するだけでも、スクリーンリーダーなどの支援技術が自動で解釈してユーザーに情報を伝えてくれるため問題はないと考えられる

See the Pen H63: Using the scope attribute to associate header cells and data cells in data tables - after3 by t.i (@tbba0anw98e) on CodePen.

基本的にscope属性は<th>要素に設定するものとなる
ただし以下のようなパターンに該当する場合、<td>要素にもscope属性を指定することを検討する必要があるので注意が必要

• <td>要素で実装されたデータセルが行・列のヘッダーとしても機能する場合
• <th>要素に指定されたスタイルなどを当てたくないなどの特別な理由により、<th>要素ではなく<td>要素で実装されたヘッダーの場合

See the Pen H63: Using the scope attribute to associate header cells and data cells in data tables - after by t.i (@tbba0anw98e) on CodePen.

H64: Using the title attribute of the iframe element

原文

要約

<iframe>要素を用いる場合は必ずtitle属性を指定するようにする

目的

視覚的には識別できない

対象

視覚障害のあるユーザーや、スクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

<iframe>要素の内容が何であるかをユーザーが理解するのが難しくなる

See the Pen H64: Using the title attribute of the iframe element - before by t.i (@tbba0anw98e) on CodePen.

対応例

ユーザーは<iframe>要素の内容をより理解しやすくなる

See the Pen H64: Using the title attribute of the iframe element - before by t.i (@tbba0anw98e) on CodePen.

こちらの警告欄でも同様の内容が記載されているが、WCAGでは現在のブラウザやスクリーンリーダーなどの支援技術のすべてがtitle属性に記載された情報をユーザーに提供していない可能性があり、必ずすべてのユーザーに正しく伝わると断言することができないため、title属性によるヘルプ情報の提供だけで終わらせるのではなく、広範囲にサポートされるまで別技術との併用が必要だと勧告している

WCAGでは具体的な対応方法は記載されていないが、一例として<a>要素を用いてリンクテキストを併用する、aria-label属性やaria-labelledby属性を利用してラベルを提供し、スクリーンリーダーに読み上げられるように対応するといった方法が挙げられる

See the Pen H64: Using the title attribute of the iframe element - after by t.i (@tbba0anw98e) on CodePen.

H65: Using the title attribute to identify form controls when the label element cannot be used

原文

要約

<label>要素を使えない場合、titletitle属性を指定してフォームコントロールの認識を行えるようにする

目的

ユーザーがフォームコントロールの目的を理解するのを助けることで、ウェブコンテンツをより使いやすく理解しやすくなる

対象

すべてのユーザー
→ 特に視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

特にスクリーンリーダーなどの支援技術を利用しているユーザーは、フォームコントロールの目的を理解するのが難しくなる可能性がある

See the Pen H65: Using the title attribute to identify form controls when the label element cannot be used - before by t.i (@tbba0anw98e) on CodePen.

対応例

title属性を追加すると、スクリーンリーダーはその情報を読み取り、フォームコントロールの目的や意味をユーザーに伝えることができる

See the Pen H65: Using the title attribute to identify form controls when the label element cannot be used - before by t.i (@tbba0anw98e) on CodePen.

こちらの警告欄でも同様の内容が記載されているが、WCAGでは現在のブラウザやスクリーンリーダーといった支援技術のすべてがtitle属性に記載された情報をユーザーに提供していない可能性があり、必ずすべてのユーザーに正しく伝わると断言することができないため、title属性によるヘルプ情報の提供だけで終わらせるのではなく、広範囲にサポートされるまで別技術との併用が必要だと勧告している

WCAGでは具体的な対応方法は記載されていないが、最適な方法はH44: Using label elements to associate text labels with form controlsで記載されている<label>要素を併用するようにすることが最適解となっている
ただ今回のように<label>要素が使えない場合は一例としてaria-label属性やaria-labelledby属性を利用してラベルを提供し、スクリーンリーダーに読み上げられるように対応するといった方法が挙げられる

See the Pen H65: Using the title attribute to identify form controls when the label element cannot be used - after by t.i (@tbba0anw98e) on CodePen.

H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore

原文

要約

スクリーンリーダーなどの支援技術が無視すべき画像について、<img>要素でalt属性を空（alt=""）にする + title属性を使用しない

目的

視覚障害のあるユーザーやスクリーンリーダーなどの支援技術を利用するユーザーがアクセスする際に、不必要な情報を伝えずに、ページの主要なコンテンツに焦点を当てる

対象

視覚障害のあるユーザーやスクリーンリーダーなどの支援技術を利用するユーザー

未対応例

画像が情報を伝えるためのものではないにも関わらず、スクリーンリーダーがalt属性やtitle属性に指定されたテキストを読み上げてしまうため、ユーザーに混乱をもたらす可能性がある

See the Pen H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore - before by t.i (@tbba0anw98e) on CodePen.

対応例

スクリーンリーダーは無視すべき画像を読み上げないため、ユーザーはページの主要なコンテンツに集中することができる

See the Pen H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore - before by t.i (@tbba0anw98e) on CodePen.

alt属性を空にすることと、alt属性自体を指定しないことはスクリーンリーダーなどの支援技術において厳密に違う動作となることがある

• alt属性が空（alt=""）: スクリーンリーダーはその画像を無視する
• alt属性未指定: スクリーンリーダーは画像のファイル名やURLを読み上げることがある

未指定の場合画像のファイル名やURLを読み上げる可能性があり、その場合ユーザーにとって混乱を招く可能性があるため、alt=""を指定するようにすべきである

See the Pen H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore - after by t.i (@tbba0anw98e) on CodePen.

H71: Providing a description for groups of form controls using fieldset and legend elements

原文

要約

<fieldset>要素と<legend>要素を用いて関連するフォームコントロールのグループ化を行い、説明を提供する。

目的

視覚的なコンテキストに依存できないユーザーが、フォーム内の関連コントロールを一組として理解しやすくする

対象

視覚障害者、認知障害者、高齢者など、視覚的なコンテキストに依存できないすべてのユーザー

未対応例

視覚的なコンテキストに依存できないユーザーは、フォーム内の関連コントロールの目的を理解するのが困難になる可能性がある

See the Pen H71:Providing a description for groups of form controls using fieldset and legend elements - before by t.i (@tbba0anw98e) on CodePen.

対応例

視覚的なコンテキストに依存できないユーザーでも、フォーム内の関連コントロールを一組として理解しやすくなる

See the Pen H71:Providing a description for groups of form controls using fieldset and legend elements - after by t.i (@tbba0anw98e) on CodePen.

フォームのコントロールに関してはH44: Using label elements to associate text labels with form controlsにも同じような達成基準が設定されている

これらの使い分けに関しては以下のように定義されている

• H44: チェックボックスで実装される選択肢が単数存在する場合は<fieldset>要素と<legend>要素を使用せず、<label>要素のみ使用して実装する
• H71: ラジオボタンやチェックボックスで実装される選択肢が複数存在する場合は、グループ化と説明のために<fieldset>要素と<legend>要素を使用して実装する

See the Pen H71:Providing a description for groups of form controls using fieldset and legend elements - after2 by t.i (@tbba0anw98e) on CodePen.

H77: Identifying the purpose of a link using link text combined with its enclosing list item

原文

要約

リスト項目とリンクテキストを組み合わせて、リンクの目的が遷移前にわかるようにする

目的

リスト項目を含むリンクテキストを使って、リンクの目的が遷移する前に理解できるようにする

対象

視覚障害者、認知障害者、スクリーンリーダーなどの支援技術を利用しているユーザーなど、リンクの目的を理解するのに支援が必要なユーザー
特に、テキストだけでリンクの目的を理解することが難しいユーザーや、複数のリンクが並んでいる場合にどのリンクがどのコンテンツに対応するのかを判断するのが難しいユーザーが対象となる

未対応例

リンク先のコンテンツを予測できないため、ユーザーが混乱したり誤ったリンクをクリックするリスクがある

See the Pen H77: Identifying the purpose of a link using link text combined with its enclosing list item - before by t.i (@tbba0anw98e) on CodePen.

対応例

リンク先のコンテンツを予測しやすくなり、必要な情報を効率的に見つけることができる

See the Pen H77: Identifying the purpose of a link using link text combined with its enclosing list item - before by t.i (@tbba0anw98e) on CodePen.

リンクを理解するために必要な追加情報（説明文）は基本的にリンクよりも前におくことが有用とされている
これはスクリーンリーダーなどの支援技術は基本的にページを上から下へ読み進めるため、リンクの後に追加情報があると理解が難しくなる可能性があるからである

ただし、すべての情報をリンクの前に置かなければならないというわけでもない
対応例のようにリンクテキストが具体的であればリンク先の予測自体は可能となる
あくまでリンクの前に説明文があれば理想的ではあるが、リンクテキストが具体的であれば説明文がリンクの後ろに置かれていてもH77の要件は満たされると考えられる

See the Pen H77: Identifying the purpose of a link using link text combined with its enclosing list item - after by t.i (@tbba0anw98e) on CodePen.

H78: Identifying the purpose of a link using link text combined with its enclosing paragraph

原文

要約

段落内のテキストとリンクテキストを組み合わせて、リンクの目的が遷移前にわかるようにする

目的

リンクテキストとそれを含んでいる段落のテキストから、リンクの目的を特定する

対象

リンクの目的を理解するのに困難を感じる可能性のあるすべてのユーザー
→ 特に視覚障害者、認知障害者、スクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

リンクテキストが「ここをクリック」や単にURLのみである場合、一部のユーザーはリンク先のコンテンツを予測できず混乱する可能性がある。

See the Pen H78: Identifying the purpose of a link using link text combined with its enclosing paragraph - before by t.i (@tbba0anw98e) on CodePen.

対応例

リンク先のコンテンツを予測しやすくなり、ユーザーは必要な情報を効率的に見つけることができる

See the Pen H78: Identifying the purpose of a link using link text combined with its enclosing paragraph - before by t.i (@tbba0anw98e) on CodePen.

H77: Identifying the purpose of a link using link text combined with its enclosing list itemに同じ内容が記載されているが、リンクを理解するために必要な追加情報（説明文）は基本的にリンクよりも前におくことが最も有用とされている

理由等に関してはH77に記載されている内容を参照してください

H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells

原文

要約

テーブルセル内のリンクテキストと関連するテーブルヘッダーセルを組み合わせて、リンクの目的が遷移前にわかるようにする

目的

リンクとそれを含んでいるデータテーブルのコンテキストから、リンクの目的を特定する

対象

リンクの目的を理解するのに困難を感じる可能性のあるすべてのユーザー
→ 特に視覚障害者、認知障害者、スクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

リンクテキストが「ここをクリック」や単にURLのみである場合、一部のユーザーはリンク先のコンテンツを予測できず混乱する可能性がある。

See the Pen H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells - before by t.i (@tbba0anw98e) on CodePen.

対応例

リンク先のコンテンツを予測しやすくなり、ユーザーは必要な情報を効率的に見つけることができる。

See the Pen H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells - before by t.i (@tbba0anw98e) on CodePen.

H80: Identifying the purpose of a link using link text combined with the preceding heading element

原文

要約

リンクテキストと直前の見出し（<h1> ~ <h6>）を組み合わせてリンクの目的を遷移前にわかるようにする

目的

リンクのテキストとその直前にある見出しのコンテキストから、リンクの目的を特定する

対象

対象

リンクの目的を理解するのに困難を感じる可能性のあるすべてのユーザー
→ 特に視覚障害者、認知障害者、スクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

ユーザーはリンク先のコンテンツを予測できず、混乱する可能性がある

See the Pen H80: Identifying the purpose of a link using link text combined with the preceding heading element - before by t.i (@tbba0anw98e) on CodePen.

対応例

ユーザーはリンク先のコンテンツを予測しやすくなり、より効率的に必要な情報を見つけることができる

See the Pen H80: Identifying the purpose of a link using link text combined with the preceding heading element - before by t.i (@tbba0anw98e) on CodePen.

可能な限りリンクテキストだけでリンク先のコンテンツを予測しやすいようなものを設定することが理想です
そのため対応例に記載したようなコードが理想的ではあるが、リンクテキストだけではリンクの目的が特定できない場合や、リンクテキストが短すぎる場合などは、リンクテキストとは別に追加の文脈を入れることも可能である

See the Pen H80: Identifying the purpose of a link using link text combined with the preceding heading element - after by t.i (@tbba0anw98e) on CodePen.

H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested

原文

要約

リストが入れ子になっている状況で、親リスト項目と組み合わせたリンクテキストを用いて、入れ子になったリストの中でリンクの目的を特定する

目的

入れ子になったリストに含まれるリスト項目によって与えられる文脈から、リストの中のリンクの目的を特定する

対象

リンクの目的を理解するのに困難を感じる可能性のあるすべてのユーザー
→ 特に視覚障害者、認知障害者、スクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

ユーザーはリンク先のコンテンツを予測できず、混乱する可能性がある

See the Pen H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested - before by t.i (@tbba0anw98e) on CodePen.

対応例

より明確なリンクテキストを提供することで、ユーザーはリンク先のコンテンツを予測しやすくなり、必要な情報を効率的に見つけることができる

See the Pen H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested - before by t.i (@tbba0anw98e) on CodePen.

H80: Identifying the purpose of a link using link text combined with the preceding heading elementに関連する説明があるが、可能な限りリンクテキストだけでリンク先のコンテンツを予測しやすくすることが望ましい
ただし、リンクテキストだけではリンクの目的が特定できない場合や、リンクテキストが短すぎる場合などは、リンクテキストに加えて追加の文脈を提供することも適切

H84: Using a button with a select element to perform an action

原文

要約

<select>要素に対して、選択後にアクションを実行するボタンを併用する

目的

<select>要素の値を選択しただけで意図せずアクションが実行されることを防ぎ、ユーザーがアクションを明示的に制御できるようにする

対象

すべてのユーザー
→ 特にキーボードを使用して操作するユーザーにとっては、選択肢をナビゲートするだけで意図しないアクションがトリガーされるのを防ぐために重要

未対応例

選択した値により即座にアクションが実行される設定は、ユーザーが混乱しやすく、意図しない結果を招く可能性がある

See the Pen H84: Using a button with a select element to perform an action - before by t.i (@tbba0anw98e) on CodePen.

対応例

ユーザーが自分の選択を確認し、その選択を明示的に確定させることができる
これにより、何が起こるか予測しやすくなり、使いやすさとアクセシビリティが向上する

See the Pen H84: Using a button with a select element to perform an action - after by t.i (@tbba0anw98e) on CodePen.

H85: Using optgroup to group option elements inside a select

原文

要約

<optgroup>要素を使用して<select>要素内の<option>要素をグループ化する

目的

選択肢を視覚的にまたは論理的にグループ化し、選択肢の数が多い場合でもユーザーが簡単に選択できるようにする

対象

視覚障害者、認知障害者、運動障害者や選択肢を見つけるのが難しいユーザー

未対応例

<optgroup>要素を使用しない場合、選択リストが長くなり、ユーザーが必要な選択肢を見つけるのが難しくなる

See the Pen H85: Using optgroup to group option elements inside a select - before by t.i (@tbba0anw98e) on CodePen.

対応例

<optgroup>要素を適用すると、選択リストがカテゴリごとに整理され、選択肢を見つけやすくなる

See the Pen H85: Using optgroup to group option elements inside a select - after by t.i (@tbba0anw98e) on CodePen.

<optgroup>要素を使う際には以下の点に注意する

• <select>要素の直下にのみ<optgroup>要素を配置する
• <optgroup>要素の直下にのみグループ化したい<option>要素を配置する
• <optgroup>要素の中では<optgroup>要素を使用してグループ化させることはできない
• <optgroup>要素にlabel属性を指定することで、グループ化する際のラベルテキストを指定することができる

より詳細に知りたい方はMDNを参照

スクリーンリーダーなどの支援技術を利用している場合、<optgroup>要素によるグループ化情報がユーザーに必ずしも伝わらない可能性がある
そのため、各<option>要素のテキストは、その選択肢が何を意味し、どのグループに属しているのかを理解できるような内容にすることが重要である

H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak

原文

要約

視覚的な要素である絵文字、顔文字、アスキーアート、リーツスピークの代替テキストを提供する

目的

視覚的な表現の情報を理解できないユーザー（視覚障害者、読字障害者、認知能力に制約のあるユーザーなど）が、絵文字、顔文字、アスキーアート、リーツスピークなどの情報を理解できるようにするため

対象

視覚障害者、読字障害者、認知能力に制約のあるユーザー

未対応例

対象ユーザーは、視覚的な表現の意味を理解することができないため、以下の各コンテンツから情報を得ることが難しい

See the Pen H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak - before by t.i (@tbba0anw98e) on CodePen.

対応例

対象ユーザーも視覚的な表現の情報を理解することができるようになる
対応例のコードでは、絵文字に代替テキストを提供する方法をいくつか記載している
他の顔文字やアスキーアート、リーツスピークも基本的には同様の手法を用いることでアクセシビリティを向上させることができる

See the Pen H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak - before by t.i (@tbba0anw98e) on CodePen.

隠しテキストに関してSEO観点で懸念がありそうだが、現時点では大きな問題はないと思われる
キーワードを詰め込んで検索ランキングを不正に上げる、不適切なコンテンツの隠蔽などは検索エンジンにとってスパムと判定されてペナルティを受ける可能性がある
しかし、今回はスクリーンリーダーに有用な情報を提供するために隠しテキストを用いているため、一般的には問題とはならない

また適切ではないスタイルの定義となるdisplay: noneやvisibility: hidden, width, height, font-size: 0などのスタイルを用いていないため、情報がスクリーンリーダーにとってアクセス不可能になることはない

参考サイトはこちらを参照

こちらの警告欄でも同様の内容が記載されているが、WCAGでは現在のブラウザやスクリーンリーダーといった支援技術のすべてがtitle属性に記載された情報をユーザーに提供していない可能性があり、必ずすべてのユーザーに正しく伝わると断言することができないため、title属性によるヘルプ情報の提供だけで終わらせるのではなく、広範囲にサポートされるまで別技術との併用が必要だと勧告している

H88: Using HTML according to spec

原文

要約

HTMLを規格に合わせて使用する

具体的には以下3点を考慮する必要がある

• HTMLの仕様で定義されている機能のみを使用する
• HTMLの仕様によって指示された方法で機能を使用する
• コンテンツが正しく解析されることを確認する

目的

HTMLとXHTMLをそれぞれの仕様に従って使用することで、スクリーンリーダーなどの支援技術が作者の意図に合った相互運用可能な機能の表現を提示できるようになる

対象

すべてのユーザー
→ 特にスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

HTMLを正しく使用しないと、ウェブページが意図した通りにレンダリングされないか、アクセスが困難になる可能性がある

See the Pen H88: Using HTML according to spec - before by t.i (@tbba0anw98e) on CodePen.

対応例

ウェブページは意図した通りに機能し、アクセシビリティツールは内容を適切に解釈することができる

See the Pen H88: Using HTML according to spec - before by t.i (@tbba0anw98e) on CodePen.

H90: Indicating required form controls using label or legend

原文

要約

必須のフォーム要素を示す場合は<label>要素や<legend>要素を用いて明示する

目的

ウェブアプリケーションやフォームにおいて、特定の入力フィールドがデータ送信のために必須であることをユーザーに明確に示す

対象

すべてのユーザー

未対応例

一部のユーザーは、入力フィールドが必須であることを理解できず、フォームの送信時にエラーが生じるリスクがある

See the Pen H90: Indicating required form controls using label or legend - before by t.i (@tbba0anw98e) on CodePen.

対応例

ユーザーがフォームコントロールが必須であることを容易に理解できるようにし、フォームのエラー率を低下させる

See the Pen H90: Indicating required form controls using label or legend - before by t.i (@tbba0anw98e) on CodePen.

required属性をフォーム要素に指定することで、ブラウザにそのフィールドが必須であることを指示できる
これはユーザーが該当フィールドに入力することを要求し、フォームが送信される前にブラウザが検証を行います
もし必須フィールドが空の場合は、ユーザーに警告を出して送信を阻止することができる
この機能は、フォームの完全性を保証し、ユーザーの誤操作を減らすのに役立つ

See the Pen H90: Indicating required form controls using label or legend - after2 by t.i (@tbba0anw98e) on CodePen.

H91: Using HTML form controls and links

原文

要約

HTMLの基本機能を使用して入力フォームやリンクを作成する

目的

フォームやリンク要素をキーボードで操作可能にし、スクリーンリーダーなどの支援技術ともうまく連携できるようにする

対象

すべてのユーザー
→ 特に視覚障害、運動障害、認知障害を持つユーザー

未対応例

一部のユーザーはウェブサイトの操作が困難になり、重要な情報や機能にアクセスできなくなる可能性がある

See the Pen H91: Using HTML form controls and links - before by t.i (@tbba0anw98e) on CodePen.

対応例

すべてのユーザーがウェブサイトを容易に操作し、情報にアクセスできるように改善される

See the Pen H91: Using HTML form controls and links - before by t.i (@tbba0anw98e) on CodePen.

厳密には、フォームやリンクを作成するHTML要素はアクセシビリティAPIに紐づけられている
これにより各HTML要素には役割（role）, 名前（name）, 値（value）, 状態（state）というアクセシビリティ情報が紐づけられており、スクリーンリーダーなどの支援技術はこのアクセシビリティ情報を抽出してユーザーに情報を提供する

これらの要素を適切に使用してフォームやリンクを作成することで、すべてのユーザーが容易に操作できるようになる

各HTML要素のそれぞれのアクセシビリティ情報を確認したい場合はこちらを参考にすると良い

H95: Using the track element to provide captions

原文

要約

<video>要素を使用する際に、字幕や音声の説明などの補足的な情報を提供するために<track>要素を使用する

目的

視覚的な情報とは別にテキストベースで映像の字幕や音声の説明などの補足的な情報を提供することで、音声を利用できない環境や聴覚に障害がある場合でもユーザーが映像コンテンツを理解できるようにする

対象

主に聴覚障害者や、音声情報の受け取りが難しい状況にあるユーザー

未対応例

字幕や音声の説明がないビデオでは、聴覚障害者や音声情報へのアクセスが限られた環境にいるユーザーは、ビデオの内容を完全に理解できない可能性がある
MDNのHTML Demo: <track>にて<track>要素を削除した状態で動画を再生すると、映像に対応する字幕や音声の説明が表示されず、コンテンツの理解が困難になることが確認できる

対応例

ビデオの音声情報をテキスト形式で提供することにより、聴覚障害者や音声情報へのアクセスが制限されているユーザーもビデオコンテンツの内容を理解することが容易になる
MDNのHTML Demo: <track>にて<track>要素を含めた状態で動画を再生すると、映像に対応する字幕や音声の説明が表示され、コンテンツの理解を助けることが確認できる

こちらはMDNのHTML Demo: <track>で挙動を確認することができるため、未対応例、対応例ともにサンプルコードは記載していません。

H97: Grouping related links using the nav element

原文

要約

<nav>要素を使用して関連するナビゲーションリンクをグループ化する

目的

スクリーンリーダーなどの支援技術を利用しているユーザーがリンクのグループを特定しやすく、またそれらをスキップしやすくすることで、ウェブサイトのナビゲーションを効率的に行うことができるようにする

対象

視覚障害者や認知障害者、スクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

リンクの関係性を容易に把握できない場合、ユーザーのナビゲーションが困難となり、ウェブサイトのユーザビリティが低下する可能性がある

See the Pen H97: Grouping related links using the nav element - before by t.i (@tbba0anw98e) on CodePen.

対応例

<nav>要素を使用することでリンクのグループを明示し、リンクの関係性を容易に把握することができる

See the Pen H97: Grouping related links using the nav element - before by t.i (@tbba0anw98e) on CodePen.

<nav>要素が同一ページ内で複数回使用される場合は、各ナビゲーショングループを識別できるようにするためaria-label属性やaria-labelledby属性を使用してナビゲーショングループを区別すると良い

See the Pen H97: Grouping related links using the nav element - after2 by t.i (@tbba0anw98e) on CodePen.

H101: Using semantic HTML elements to identify regions of a page

原文

要約

セマンティックHTML要素を使用してページの領域を識別する

目的

視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザーがページの構造とコンテンツを理解しやすくするため

対象

視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

それぞれの領域が何を表しているのかが明確に示されていない

See the Pen H101: Using semantic HTML elements to identify regions of a page - before by t.i (@tbba0anw98e) on CodePen.

対応例

ページの各領域が適切なセマンティックHTML要素でマークアップされている
これにより、視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザーは、各領域が何を表しているのかを容易に理解することができる

See the Pen H101: Using semantic HTML elements to identify regions of a page - before by t.i (@tbba0anw98e) on CodePen.

どれにも属さない

H99: Provide a page-selection mechanism

原文

要約

ページ選択メカニズムを提供する。

目的

特定のページへ直接アクセスする手段をユーザーに提供し、スクリーンリーダーなどの支援技術を利用しているユーザーがページの位置情報を明確に理解できるようにする

対象

すべてのユーザー
→ 特に視覚障害、認知障害、運動障害を持つユーザー

未対応例

対応前のHTMLドキュメントでは、ページリストがプログラムで取得できない可能性がある
さらに、ページリストが存在しても、ユーザーやスクリーンリーダーなどの支援技術がその存在や位置情報を十分に認識できない場合がある

See the Pen H99: Provide a page-selection mechanism - before by t.i (@tbba0anw98e) on CodePen.

対応例

role属性とaria-labelledby属性を用いて、ページリストの役割とタイトルを明示することで、ユーザーやスクリーンリーダーなどの支援技術がページリストを適切に認識し、位置情報を取得することが可能になる

See the Pen H99: Provide a page-selection mechanism - before by t.i (@tbba0anw98e) on CodePen.

将来的に削除される可能性あり

WCAG2.2に現在残っているが、達成基準が削除されているため将来的に削除される可能性があるテクニックを以下にまとめる

達成基準の削除は技術進化やアクセシビリティ理解の向上によるものであり、削除されたからといって遵守が不要になるわけではない
将来的にWCAGから削除される可能性のあるテクニックについても、達成基準が非推奨でない限り、基本的には遵守するべきである

H74: Ensuring that opening and closing tags are used according to specification

原文

要約

HTMLを書くときは、それぞれの要素に対して開始タグと閉じタグを正しく使用する

目的

スクリーンリーダーなどの支援技術がコンテンツを解析するときに生じる可能性がある基本的なエラーを回避する

対象

すべてのユーザー
→ 特にスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

ウェブページが予期せぬ動作をする、または正しく表示されない可能性がある

See the Pen H74: Ensuring that opening and closing tags are used according to specification - before by t.i (@tbba0anw98e) on CodePen.

対応例

ウェブページが予期した通りに動作し、スクリーンリーダーなどの支援技術が内容を正確に解釈する

See the Pen H74: Ensuring that opening and closing tags are used according to specification - before by t.i (@tbba0anw98e) on CodePen.

なぜ削除となる可能性があるか

元々4.1.1: Parsing（構文解析）を達成するためのテクニックとなっていたが、WCAG2.2でこの基準が削除された

この基準は必要だったのは、ブラウザやスクリーンリーダーなどの支援技術がウェブページを正しく読み取ることを保証するためだったが、HTMLの仕様の改善とブラウザのエラー処理能力の向上により、ブラウザもエラーをうまく処理できるようになったため、この基準は不要となった
また、スクリーンリーダーなどの支援技術はかつてウェブページのコードを独自に解析していたが、現在はブラウザの解析結果に依存するようになった
その結果、WCAG2.2からこの基準は削除されている

この基準に関連する問題は1.3.1: Info and Relationships（情報と関係性)や4.1.2: Name, Role, Value（名前、役割、値）でカバーされている

H75: Ensuring that Web pages are well-formed

原文

要約

XMLベースのマークアップ言語を正しく使ってマークアップをする

• 開始タグと終了タグが対になっていること（例：<p>と</p>）
• タグが適切にネストされていること（例：<b><i>text</i></b>は正しいが、<b><i>text</b></i>は不適切）
• 属性値が引用符で適切に囲まれていること（例：<img src="image.jpg" alt="image">）
• 閉じタグが不要なタグが適切に使用されていること（例：<img>, <input>など）

目的

ウェブページのマークアップが正しくないと、スクリーンリーダーなどの支援技術がコンテンツを適切に解析できないことがある
このようなエラーを避けるために、ウェブページは適切に形成されている必要がある

対象

すべてのユーザー
→ 特にスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

ブラウザがマークアップを正しく解析できないため、ウェブページが意図した通りに表示されない、または適切に機能しない場合がある

See the Pen H75: Ensuring that Web pages are well-formed - before by t.i (@tbba0anw98e) on CodePen.

対応例

ウェブページが適切に形成されている場合、ブラウザはページを正しく解析し、一貫性のある表示と動作が期待できる

See the Pen H75: Ensuring that Web pages are well-formed - before by t.i (@tbba0anw98e) on CodePen.

なぜ削除となる可能性があるか

H74: Ensuring that opening and closing tags are used according to specificationと同じ

H93: Ensuring that id attributes are unique on a Web page

原文

要約

id属性は必ず重複しないようにする

目的

異なる要素に同じid属性を持つコンテンツを解析しようとしたときに、支援技術が問題を引き起こすことが知られている主要なエラーを回避する

対象

すべてのユーザー
→ 特に支援技術を使用しているユーザーやキーボードだけで操作するユーザー

未対応例

id属性が一意でない場合、スクリーンリーダーなどの支援技術が正しく要素を識別できない場合がある

See the Pen H93: Ensuring that id attributes are unique on a Web page - before by t.i (@tbba0anw98e) on CodePen.

対応例

すべてのid属性が一意である場合、スクリーンリーダーなどの支援技術が正しく機能し、ユーザーが容易に情報にアクセスできる

See the Pen H93: Ensuring that id attributes are unique on a Web page - before by t.i (@tbba0anw98e) on CodePen.

なぜ削除となる可能性があるか

H74: Ensuring that opening and closing tags are used according to specificationと同じ

H94: Ensuring that elements do not contain duplicate attributes

原文

要約

要素に同じ属性を重複して指定しないようにする

目的

重複した属性を持つ要素を解析する際にスクリーンリーダーなどの支援技術が適切に機能しない可能性がある主要なエラーを回避する

対象

すべてのユーザー
→ 特に視覚障害や認知障害を持ち、スクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

スクリーンリーダーなどの支援技術が正しく機能せず、ウェブサイトが意図した通りに動作しない可能性がある

See the Pen H94: Ensuring that elements do not contain duplicate attributes - before by t.i (@tbba0anw98e) on CodePen.

対応例

重複する属性を削除または統合することで、ウェブページのアクセシビリティが向上し、意図した通りに動作するようになる

See the Pen H94: Ensuring that elements do not contain duplicate attributes - before by t.i (@tbba0anw98e) on CodePen.

なぜ削除となる可能性があるか

H74: Ensuring that opening and closing tags are used according to specificationと同じ

非推奨

WCAG2.1には存在していたが2.2からは削除されているものを以下にまとめる

H4: Creating a logical tab order through links, form controls, and objects

原文

要約

初期設定のタブ順番が十分でない時に、tabindex属性を使用してフォーカスの当たる順番を正しくすることでより論理的なタブ順番を提供する

目的

視覚的な順序と論理的な順序を一致させることで、ユーザーが予測可能な順序で情報や機能にアクセスできるようにする

対象

キーボードを利用しているユーザーやスクリーンリーダーなどの支援技術を利用しているユーザー

未対応例

順序が不規則な場合、ユーザーは直感的な操作を行うことができず、混乱する可能性がある
下記ではtabキーで進むと新郎と新婦の情報を行き来する不規則なフォーカスの順番となる場合がある

See the Pen H4: Creating a logical tab order through links, form controls, and objects - before by t.i (@tbba0anw98e) on CodePen.

対応例

tabindex属性を適切に設定することで、順序が規則的になり、ユーザーは直感的な操作を行うことができる
下記では、tabキーで進むと新郎の全情報から新婦の全情報に移る規則正しい順番となる

See the Pen H4: Creating a logical tab order through links, form controls, and objects - after by t.i (@tbba0anw98e) on CodePen.

削除理由

G59の達成基準「HTMLの構成を正しくする」を実践することでこの問題は自動的に解決するため
WCAG2.2ではG59に従うことが推奨される

H35: Providing text alternatives on applet elements

原文

要約

<applet>要素に代替テキストや代替コンテンツを設定する

目的

<applet>要素に対する代替テキストまたは内容を提供することで、すべてのユーザーがその機能や情報にアクセスできるようにする

対象

視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザーや、テキストのみでウェブを閲覧するユーザー

削除理由

<applet>要素はHTML5で廃止され、現在は使用されていないため

代替案

<applet>要素の代わりに<object>要素を使用することが推奨されている

See the Pen H45: Using longdesc - after by t.i (@tbba0anw98e) on CodePen.

H45: Using longdesc

原文

要約

<img>要素を使う際、詳細な説明が必要な場合はlongdesc属性を使用する

目的

長い説明を要する画像について、視覚障害者や視覚的な情報を理解できないユーザーに対して、その情報の詳細な説明を提供するため

対象

視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

削除理由

longdesc属性はHTML5で非推奨となったため

代替案

<img>要素に長文の説明を加えたい場合はaria-describedby属性を使用するか、説明文を画像の近くに配置する
または、あるいは詳細な説明へのリンクを提供したい場合は<a>要素などでリンクを作成する

See the Pen H45: Using longdesc - after by t.i (@tbba0anw98e) on CodePen.

H46: Using noembed with embed

原文

要約

<embed>要素を用いる場合、サポートされていないブラウザやスクリーンリーダなどの支援技術でのアクセスを考慮して<noembed>要素を併用して代替コンテンツを提供する

目的

すべてのユーザーがコンテンツにアクセスできるようにするため、サポートされていないブラウザやスクリーンリーダーなどの支援技術を利用しているユーザーに対応できる代替方法を提供する

対象

すべてのユーザー
→ 特にサポートされていないブラウザやスクリーンリーダーなどの支援技術を利用しているユーザー

削除理由

<noembed>要素はHTML5で廃止され、現在は使用されていないため

代替案

<noembed>要素の代わりに<object>要素内に代替コンテンツを提供することが推奨されている
この方法はH53: Using the body of the object elementで説明されている

H60: Using the link element to link to a glossary

原文

要約

<link>要素のrel="glossary"属性を使用して用語集へのリンクを作成する

目的

すべてのユーザーがウェブコンテンツの内容を理解できるようにするため、専門的な言葉や固有名詞が理解しにくいユーザーに対しても、用語集へのリンクを提供することで情報へのアクセス性を向上する

対象

すべてのユーザー

削除理由

<link>要素のrel="glossary"`属性はHTML Living Standardで非推奨となったため

代替案

<link>要素のrel="glossary"属性の代わりとして<a>要素を使用して直接用語集へのリンクを提供する

See the Pen H45: Using longdesc - after by t.i (@tbba0anw98e) on CodePen.

H70: Using frame elements to group blocks of repeated material

原文

要約

繰り返し性のあるコンテンツブロックをグループ化するために<frame>要素を使用する
ここでいう繰り返し性のあるコンテンツブロックとは、ナビゲーションメニューやリンク集、ヘッダーなどが該当する

目的

コンテンツの構造とナビゲーションを改善し、ユーザーが情報を効率的に探すことを支援する

対象

視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

削除理由

<frame>要素はHTML5で非推奨となったため

代替案

<frame>要素の代わりにセマンティックHTMLを用いて繰り返し性のあるコンテンツブロックを適切にグループ化することが推奨される
例としてナビゲーションは<nav>要素、リストは<ul>要素や<ol>要素、ヘッダーには<header>要素などが該当する

See the Pen H60: Using the link element to link to a glossary - after by t.i (@tbba0anw98e) on CodePen.

厳密には、WCAGから定義自体は削除はされていないが、削除理由にも記載した通り<frame>要素はHTML5で非推奨とされている
そのため、現代のウェブ開発では<frame>要素の使用は推奨されないため、非推奨の欄に入れている

H73: Using the summary attribute of the table element to give an overview of data tables

原文

要約

テーブルの概要を説明するために<table>要素のsummary属性を使用する

目的

テーブルにどのようにデータがまとめられているかという短い概略や、テーブルをどのように読み進めるかという短い説明を提供する

対象

視覚障害者やスクリーンリーダーなどの支援技術を利用しているユーザー

削除理由

<table>要素のsummary属性はHTML5で非推奨となったため

代替案

<table>要素のsummary属性の代わりに<caption>要素やaria-describedby属性を用いて概要を説明するようにする

See the Pen H70: Using frame elements to group blocks of repeated material - after by t.i (@tbba0anw98e) on CodePen.

まとめ

今回、ウェブアクセシビリティについて一通り調査してみました
すべてを完璧に理解することができたというわけではないが、普段意識していなかった部分でもウェブアクセシビリティの向上に貢献していることに気づき、非常に学びの多い経験となったためとても良かったと思います
この記事が、ウェブアクセシビリティに対する理解を一歩深めるきっかけとなり、どのように取り組めば良いのか解決するための手がかりとなれば幸いです

参考元