WAI-ARIA 実装の5つのルール
ウェブアクセシビリティを高めるための実装方法のひとつに、WAI-ARIA があります。WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。この仕様で定められた記述をソースコードに加えることによって、JavaScript などでインタラクティブに動くユーザーインターフェースであっても、その状況の変化を、マシンリーダブルな形で支援技術 (スクリーンリーダーなど) に伝達することができます。
アクセシビリティに関心のある制作者の方にとって、WAI-ARIA はとても有用ではありますが、無節操に使ってよいわけではありません。「Using ARIA」という W3C 文書 (本記事執筆時点では、2018年9月27日付の Working Draft) に、5つのルールが定められているので、簡単にご紹介します。
ルールその1
「必要なセマンティクスや動作が組み込まれたネイティブの HTML 要素または属性が存在する場合は、要素の転用と ARIA のロール、ステート、プロパティの追加でアクセシブルにする代わりに、ネイティブのものを使用する。」
If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
基本的には、WAI-ARIA を用いず標準の HTML でコーディングしましょう。インタラクティブに動く UI で、HTML だけでは正確な情報を支援技術ユーザーに伝えることができないときに、WAI-ARIA で追補します。
ルールその2
「本当に必要でない限り、ネイティブのセマンティクスを変更しない。」
Do not change native semantics, unless you really have to.
例 : タブ型 UI で、各タブに見出しがある場合、<h2 role="tab">見出し</h2> と書くと <h2> 要素が元来持っている「見出しレベル2」というセマンティクスが打ち消されてしまいます。代わりに <div role="tab"><h2>見出し</h2></div> と書くようにしましょう。
ルールその3
「すべてのインタラクティブな ARIA コントロールは、キーボードで使用可能でなければならない。」
All interactive ARIA controls must be usable with the keyboard.
例 : <div role="button"> という UI コンポーネントがある場合、それだけではキーボードで操作できません。ネイティブの <button> 要素と同様に、フォーカスを当てることができて、Enter キーおよびスペースキーで実行できるように、コードを追加する必要があります。
ルールその4
「フォーカス可能な要素に対して role="presentation" や aria-hidden="true" を使用しない。」
Do not use role="presentation" or aria-hidden="true" on a focusable element.
例 : <div aria-hidden="true"><button>送信</button></div> という具合に、フォーカス可能な要素が aria-hidden の要素に含まれていると、ボタンにフォーカスが当たりつつも、支援技術ユーザーにはその旨が伝わらないという中途半端な状態になる恐れがあります。インタラクティブに動く UI で、フォーカス可能な要素を含む領域を動的に隠す場合は、CSS の display:none; を併せて適用するなどして、フォーカス対象を管理しましょう。
ルールその5
「すべてのインタラクティブな要素は、アクセシブルな「名前 (name)」がなければならない。」
All interactive elements must have an accessible name.
WAI-ARIA を用いてインタラクティブな要素を作った場合、その要素には支援技術が認識できる「名前 (name)」があることを併せて確認しましょう (参照 : WCAG に出てくる「名前」とは？)。必要に応じて、aria-label や aria-labelledby などを使って「名前」を付与します。
特に「ルールその1」は、ウェブコンテンツで WAI-ARIA の実装を検討する際の原則として、まずはおさえておきたいものです。そのうえで WAI-ARIA を用いるのが妥当ということになれば、残りのルール (その2〜その5) を遵守して、ユーザー体験に支障が生じないようにしましょう。