Zenn
✍️

【備忘録】アクセシビリティ初心者が学んだWAI-ARIAについて

に公開
HTML
アクセシビリティ
tech

最近、フォーム周りの実装を通してアクセシビティについて考える機会が増えたので、今後の備忘録として記録しました。
※内容はややざっくりとしておりますことあらかじめご了承ください。

WAI-ARIA（ウェイ アリア）とは

WAI-ARIAはWeb Accessibility Initiative Accessible Rich Internet Applicationsの略です。
W3Cによって定められた追加仕様で、HTMLだけでは表すことのできない構造や状態などを明示することができます。

role属性について

HTMLの要素にARIAロールを割り当てて、その要素の役割を明確にします。

<ul role="tablist">
<li role="tab">tab1</li>
<li role="tab">tab2</li>
</ul>
<div role="tabpanel">content1</div>
<div role="tabpanel">content2</div>

暗黙的なrole

HTMLの各要素には暗黙的にロールが規定されており、要素に何かしらのWAI-ARIAで規定されたロールが対応しています。buttonタグならbuttonロール、navタグならnavigationロールなど...。
各暗黙的なロールについては、「ARIA in HTML」を参照していくのが良さそうです。
https://momdo.github.io/html-aria/#sotd

ARIA属性について

ARIA属性は、Accessible Rich Internet Applications (ARIA) と呼ばれる技術の一部です。スクリーンリーダーなどの支援技術がコンテンツを正しく解釈し、ユーザーに伝えるための情報を提供します。これにより視覚的な情報や対話的な要素が適切にアクセシブルになり、障害のあるユーザーがコンテンツを理解しやすくなります。

aria-labelledby

適用される要素のラベル付けを行う要素を識別します。別の要素のIDを指定することで関連付けられ、要素の目的や意味を正確に伝えることができます。

<section aria-labelledby="service-heading">
  <h2 id="service-heading">サービス</h2>
  ...
</section>

※aria-labelとの違い

aria-labelはDOMに直接ラベルを指定します。MDNではaria-labelledbyを優先的に使用することが推奨されています。aria-labelは見出しを表示したくない、見た目だけの装飾で意味を持たせたい時に限定した方が良さそうです。

<button aria-label="閉じる">×</button>

aria-describedby

その属性が設定されている要素を説明する要素を特定します。要素のグループ、見出しのある領域、定義などに静的テキストを関連付けることができます。

<button aria-describedby="hint">検索</button>
<div id="hint" style="display: none">
  キーワードに一致するアイテムを検索することができます。
  複数のキーワードを空白で区切ることでAND検索もできます。
</div>

aria-hidden

要素がアクセシビリティ API に公開されているかどうかを示します。aria-hidden="true" を追加すると、その要素とすべての子要素がアクセシビリティツリーから除去されます。支援する技術からコンテンツを隠すのみで、視覚的には何らかの非表示になるわけではありません。
使用例

  • アイコンや画像などの純粋に装飾的なコンテンツ
  • 繰り返されるコンテンツテキストなどの重複コンテンツ
  • メニューのような、画面外または折りたたまれたコンテンツ

aria-expanded

要素が展開されているかどうかを示す属性です。展開していればtrue、そうでない場合はfalseを指定します。

<section aria-expanded="false">
  <button type="button">開く</button>
  <div id="section1" aria-hidden="true">
    コンテンツ
  </div>
</section>

aria-controls

制御対象となる要素を指定する属性です。対象の要素のIDを指定して関係性を紐付けます。
（スクリーンリーダーは、aria-controls="accordion-content"を読み取って、accordion-buttonがaccordion-contentの表示非表示を切り替えるボタンであることを認識しています。）

<button id="accordion-button" aria-controls="accordion-content">開く/閉じる</button>
<div id="accordion-content" style="display: none;">
  <!-- コンテンツ -->
</div>

aria-live

動的なコンテンツがユーザーにリアルタイムで伝えられる必要がある場合に使用します。

  • polite: ユーザーが現在の作業を妨げられない場合に更新
  • assertive: ユーザーに即座に通知する場合の更新

最後に

ARIA属性は本来のHTML5セマンティクス要素を置き換えるものではなく補完するものなので、可能な限りネイティブのHTML5セマンティクス要素を使用し、role属性について晴眼者にも分かりやすい情報も踏まえつつ、ARIAを適切に使用することが大事だということも忘れないでおきたいです。

その他（アクセシビリティ関連の参考記事）

WAI-ARIAを学ぶときに整理しておきたいこと
https://zenn.dev/yusukehirao/articles/e3512a58df58fd
aria-labelでなんでも解決しようとしない
https://qiita.com/ymrl/items/fa44f9c7a457ead8a43d
aria-label を使いすぎない
https://azukiazusa.dev/blog/do-not-use-aria-label-too-much/
aria-expandedの​よく​ある​間違い
https://masup.net/2018/10/common-mistake-when-use-aria-expanded
WAI-ARIA(ウェイ アリア)とは？初めて制作する方向けに解説！
https://b-risk.jp/blog/2021/07/wai_aria/

Discussion