アクセシブルなウェブの実装のためにWAI-ARIAを使いこなす

わたし

今日のお話

1. はじめに
2. WAI-ARIAとは
3. WAI-ARIAの前にHTML
4. WAI-ARIAを使いこなす
5. 実際のワークフロー

はじめに

フロントエンドの実装が担保するウェブアクセシビリティ

• マシンリーダビリティ
• キーボード操作

実装腕力

息を吐くようにアクセシブルな実装をする

WAI-ARIAとは

<header role="banner">
hogehoge
</header>

WAI

Web  Accessibility  Initiative 

ARIA

Accessible  Rich  Internet  Applications 

WAI-ARIAはアクセシビリティを高めるため
マークアップ言語のセマンティクスを
補強するためのもの

WAI-ARIAは何を補強できるか

• 役割 : role
• 状態 : aria-*
• プロパティ : aria-*

役割 : role

<ul role="tree"></ul>

これはツリーウィジェットである

状態 : ステート

<li aria-selected="true" role="treeitem">...</li>

このツリーアイテムは選択されている（いない）

プロパティ

<ul aria-label="menu tree" role="tree"></ul>

このツリーウィジェットの名前プロパティはmenu treeである

これらの付与されたセマンティクスはどのようにユーザー（支援技術）に伝わるか

アクセシビリティAPI

OSが支援技術にセマンティクスなどの
情報を伝えるAPI

ブラウザがレンダリングしているコンテンツを
アクセシビリティAPIのオブジェクトに変換して
支援技術に伝える

WAI-ARIAの前にHTML

まじで

適切な要素選択

<a href> / <button>

• 遷移と実行
• フォーカス可能ということ

リンクかボタンかそれ以外か - Unreviewed

<h1> / <section>

• 文章構造
• 画面の領域分割とラベリング

<table> / <th> / <td>

データの参照構造を示す

Table markup example : No Hacks

input / label

<dt>会社名</dt>
<dd><input type="text" /></dd>

<label>
会社名 <input type="text" />
</label>

<datalist>

(e.g. 大阪のセレクトショップZABOUの通販/ウェブショップ

Can I Use datalist? Data on support for the datalist feature across the major browsers from caniuse.com.

HTMLの属性

alt / title

<a href="#" class="right-off-canvas-toggle show-for-small globalNavButton" aria-expanded="true">
  <img src="https://www.m-g-n.me/wp-content/themes/mgn/src/svg/sandwich.svg">
</a>

<abbr title="point">pt</abbr>

tabindex

• キーボードフォーカスを制御
• 値は順序
• 1以上にせず、 0 or -1 を使用する

hoge

Read the HTML Living Standard

4 The elements of HTML

WAI-ARIAを使いこなす

考え方

WAI-ARIAはホスト言語のセマンティクスを補強する

• HTMLで表現できないものを表現する時
• どうしてもHTMLのネイティブ要素が使えない時
• 構造上、ネイティブのセマンティクスを上書きする必要がある時

HTMLで表現できないものを表現する時

• HTMLにないrole
• ステート、プロパティ

よく使う role

• tab
• alert
• dialog
• search

alert

ライブリージョン、要素内の変化を監視

<div role="alert" aria-live="assertive">
  <p>！</p>
</div>

Live Regions - ARIA Demo

頻出ステート、プロパティ

• aria-label 名前プロパティを与える
• aria-expanded 展開されているかどうか
• aria-hidden 隠されているかどうか
• aria-controls 制御する要素を示す
• aria-current 現在位置であることを示す
• aria-describedby 説明テキストがある要素を示す
• aria-live 自動更新される要素を示す

altの代替

aria-expanded

要素の開閉状態を表す

≠ 表示/非表示

<nav aria-expanded="true" aria-labelledby="menu-toggle-link">
  <a href="#menu" id="menu-toggle-link">Menu</a>
  <ul aria-hidden="false" id="menu"> <!-- こっちが非表示 -->
    <li><a href="./works">Works</a></li>
    ...
  </ul>
</nav>

どうしてもHTMLのネイティブ要素が使えない時

HTMLの持つ機能を代替的に実装する場合

<input type="datatime-local" />

<div aria-expanded="true">
  <input role="combobox" type="text" aria-haspopup="grid" aria-activedescendant="date-2018-12-09" />
  <div role="grid">
      table widget...
  </div>
</div>

通常のHTMLネイティブ要素を装飾のためだけに代替しなくても良い

<span role="checkbox" aria-checked="true" tabindex="0"></span>

<input type="checkbox" checked style="opacity: 0;/* visually hidden style */" />
<span aria-hidden="true">
  <svg>...</svg>
</span>

構造上、ネイティブのroleやプロパティを上書きする必要がある時

例) role[tablist] > role[tab]

<ul role="tablist">
  <li role="tab"></li>
</ul>

<ul role="tablist">
  <li role="none">
    <a href="#tabpanel-1" role="tab">Tab</a>
  </li>
</ul>

WAI-ARIAを使う時に参照する資料やドキュメント

WAI-ARIA Authoring Practices 1.1

ARIAの実装例、キーボード操作の標準も例示

ARIA in HTML

ホスト言語をHTMLにしたときのARIAの使用規範

ARIA in HTML 日本語訳

グローバルaria-*属性を除くaria-*属性は付与できる要素 or roleが定められている

WAI-ARIA の検証

ブラウザの Accessibility Tree

• Chrome: デベロッパーツール > Elements > Accessibility
• Firefox: 開発ツール > アクセシビリティ
• Safari: 開発ツール > 要素 > ノード > アクセシビリティ
• Edge: 開発者ツール > 要素 > アクセシビリティのプロパティ

支援技術で検証してみる

• ナレーター
• NVDA
• VoiceOver

実際のコーディングの流れ

ありがとうございました！