前回まで

ゼロから始めるWeb Accessibility入門：概要
 ゼロから始めるWeb Accessibility入門：誤解
 ゼロから始めるWeb Accessibility入門：セマンティックHTML

多用する「ボタン」を例に、「ロール（役割の定義）」「プロパティ（情報を提供する）」というWAI-ARIAの基本を記載します。

button要素

これ大事です。

button要素はボタンを表す。

基本のボタンは次のように記述します。

<button>何かを実行</button>

ボタンをアクセシブルにするには？

<button>要素を正しく使用することで、キーボードユーザとスクリーンリーダのユーザにメリットがあります。

ボタンがフォーカスを受け取る。
フォーカスを受け取ったボタンをキーボードで習慣通りに操作する。
スクリーンリーダーがボタンを「ボタン」として読み上げる。

キーボードユーザは、マウスでなくキーボードを使ってWebページをナビゲートします。キーボードでWebページを利用できるようにすることは、WCAG2.0（Web Accessibility Inisitative発行の「Web Content Accessibility Guidelines」）に規定されています。

すべての機能をキーボードから利用できるようにすること。
ーWCAG2.0ガイドライン2.1

WebページでTabキーを押すと、ページ内の次のインタラクティブ要素（ボタンなど）にフォーカスが移動します。Enterキーまたはスペースバーを押すと、要素がアクティブになり、イベントが実行されます。

スクリーンリーダーユーザも同様にキーボードをよく使いますが、ボタンにフォーカスがあるかどうかを目で確認することができません。スクリーンリーダーは、ユーザがフォーカスを合わせたとき、その要素が<button>であるかどうかを伝える必要があり、そのためにはボタンのマークアップに<button>要素を使うというのが最も簡単な方法です。

ボタンのタイプ

<button>が使われていないことが多くあります。
<a>要素で定義していたり、さらに悪い場合には、デフォルトではフォーカスを受け取れない<span>や<div>であることも多々あります。

ボタンのタイプは簡単に次です

submit	button	reset
フォームを送信する	JavaScriptイベントに適する	？？

ARIAによるラベルづけ

aria-labelとaria-labelledbyという、フォームにアクセシブルなテキストを付与するための2つの方法を提供しています。

aria-label = 値にラベルテキストを含む属性
aria-labelledby = テキストを含む他の要素を参照

ARIAのこれらのプロパティにより、読み上げのための追加のテキストコンテンツや足りないテキストコンテンツを提供することによってスクリーンリーダーのアクセシビリティを向上させることが可能です。

aria-label

<!-- aria-labelの例 -->
<button aria-label="元に戻す">&#xE000;</button>

aria-labelledby

ボタンとその説明との関係をアクセシブルな方法で構築

<p>元に戻すには<span id="back-text">元に戻す</span>ボタンを押してください。</p>
<button aria-labelledby="back-text">&#xE000;</button>

次回