🐱

WAI-ARIA チートシート

2022/06/28に公開約1,200字

概要

Webアクセシビリティ初学者の自分が、頭の整理のためにまとめたものです。
追記もしていこうと思います。

項目

role

ex) role=”navigation”

要素の役割を定義する。
諸々の事情でセマンティックなマークアップが出来ず、やむを得ずdivタグを使用する際に擬似的に役割を持たせることもできる。

但し上書きできないroleも存在する。
ARIA in HTMLで規定されている。

❌ <img role="banner">

また、すでに要素が対応するものがあるroleは使用すべきでない。既存の要素を使用する。

<!-- よくない -->
 <img role="button" />

<!-- buttonタグを使用する -->
⭕️ <button><img /></button>

暗黙のroleは明示しない点にも注意。

❌ <button role="button"></button>

tabindex

ex) tabindex=”0”

指定することでキーボード操作(タブキーによるフォーカス移動など)を可能にする。
属性値に0を指定すると、HTMLソースの順序でフォーカスを持たせることができる。
反対に -1 を指定するとフォーカスから外すことができる。

aria-label

ex) aria-label=”button”

要素に「ラベル付けをする文字列」を定義できる。
指定がある場合、読み上げはこちらが優先される。

<button>よくある質問</button>

「よくある質問」と読み上げられる。

<button aria-label="よくある質問はこちら">よくある質問</button>

「よくある質問はこちら」と読み上げられる。

<!-- ❌危険 -->
<button aria-label="編集">削除</button>

上記のような場合、「削除」は読まれず、「編集」のみが読み上げられる。
簡単に矛盾を作り出せる強力なARIA属性であることに注意する。

aria-expanded

ex) aria-expanded=”true”

true / false を指定することで要素の開閉状態を示す。

aria-controls

ex) aria-controls=”***”

値に指定したIDをもつ要素を制御することを示す。

aria-labelledby

ex) aria-labelledby=”***”

要素とラベルを関連付ける。
関連づけたい要素のid属性をaria-labelledby属性の値として指定する。
使い方はlabel要素に対するfor属性と同様。

Discussion

ログインするとコメントできます