WAI-ARIA に入門する

こんにちは、上條（mk-0A0）です。
最近アクセシビリティに関心があり、取っ掛かりとして HTML 解体新書を読んでいます。読み進めていくなかで印象に残ったのは「WAI-ARIA のポイントは WAI-ARIA を使わないこと」という言葉です。
どういうこと？？と思いながら読んで学んだことを記事としてアウトプットしたいと思います。

WAI-ARIA とは

Web Accessibility Initiative Accessible Rich Internet Applications の略で、W3C によって定められているアクセシビリティの仕様です。HTML だけでは達成できないアクセシビリティを担保します。
アクセシビリティが担保できるとスクリーンリーダーなど支援技術での閲覧がしやすくなります。

3つの定義

WAI-ARIA にはロール・ステート・プロパティの3つの定義があります。
ARIA の使用: ロール、ステート、プロパティ – アクセシビリティ | MDN

ロール

要素の役割を表します。role 属性が指定された要素はその役割として認識され、以下の div は navigation の役割を持つことになります。

<div role="navigation">
  ...
</div>

ロールにはたくさんの種類があり、中にはランドマークと呼ばれる8種類のロールがあります。ランドマークはサイト内の目印として機能するため、スクリーンリーダーなどの支援技術はランドマークに移動し移動した場所からサイトを閲覧することができます。

• banner：ページ固有ではなくサイト全体のコンテンツを含む領域
• contentinfo：著作権などサイトに関する情報を含む領域
• main：サイトのメインコンテンツ
• region：サイトの制作者が重要だと判断するコンテンツ
• search：検索機能を持つ領域
• navigation：サイト内をナビゲートするリンクのコレクション
• form：フォームの機能を持つ領域
• complemantary：メインコンテンツから切り離しても意味が伝わるコンテンツ

ステート

要素の現在の状態を表します。無効の状態を表す aria-disabled 、アクセシビリティツリー上で要素を非表示にする aria-hidden などが挙げられます。

<!-- 無効なボタン -->
<button aria-disabled="true">ボタン</button>

<!-- 視覚的には表示されるが、アクセシビリティツリーには表示されない（装飾のための画像など） -->
<img src="path" aria-hidden="true" />

プロパティ

要素の性質や特性を表します。支援技術に伝わるよう要素にアクセシブルな名前を付ける aria-label や、別の要素の id と紐づけて名前を付ける aria-labelledby などがあります。

<!-- なんのセクションかを指定する -->
<section aria-label="お問い合わせ">
  ...
</section>

<!-- p要素の「名前」をinput要素のaria-labelledbyとして使う -->
<p id="label">名前<p>
<input aria-labelledby="label" />

注意点

だんだん分かってくると WAI-ARIA を使ってみたくなるのですが、ここで「WAI-ARIA を使わないこと」が重要になってきます。HTML のタグは暗黙的にロールを持っているため、あえて role を指定する必要はありません。例えばランドマークのロールを持つ要素は以下です。

• banner：<header> 要素
• contentinfo：<footer> 要素
• main：<main> 要素
• search：<search> 要素
• navigation：<nav> 要素
• form：<form> 要素
• complemantary：<aside> 要素

また、ロールを指定しても button の onClick や form の onSubmit などネイティブの要素がデフォルトで持つ機能は提供されません。そのためサンプルコードのように無理やり使うと逆に支援技術を混乱させてしまう原因になります。

<!-- bad -->
<main>
  <!-- navを使う -->
  <div role="navigation">
    ...
  </div>

  <!-- onSubmitが使えないためformを使う -->
  <div role="form">
    <input />
    <button>送信<button>
  </div>
</main>

<!-- good -->
<main>
  <nav>
    ...
  </nav>
  <form onSubmit="handleSubmit()">
    <input />
    <button type="submit">送信</button>
  </form>
</main>

まとめ

これまで WAI-ARIA は使えば使うほど良くなるものだと思っていたので、その逆が良しとされるのが不思議でした。ですが WAI-ARIA の役割や注意点を知るとその言葉に納得がいきます。
今回は主にロールの話でしたが、ステートやプロパティの使い所については今後ブログ記事にできたらと思っています。WAI-ARIA の使いどころに気をつけてアクセシブルな実装を目指したいです。