アクセシビリティAA準拠案件で悩んだのでTipsを作成

最終更新日：2018/05/11
引用：http://html5.cyberlab.info/global-attributes/tabindex.html

display:noneで文字を隠してはいけない

音声読み上げを考慮して、見た目上存在しないのにHTML上にあるという状態はダメ、ゼッタイ！

文字と背景のコントラストをしっかりとつける

コントラストが弱いと視認性がわるくなるため、専用のチェッカーなどを使ってコントラスト比を確認しながら作業すると良い。

tabボタンのカーソル指定

キーボードしか使用しないユーザを考慮した時、タブでフォーカスイベントを発生させるが、その際にaタグやinput要素などはイベントが発生するが、spanなどのタグはイベントが発生しないがtabindex属性を指定することでフォーカスするようになる。
tabindex属性はフォーカスの順番を指定するほか、負の整数でフォーカスしないという設定もできる
順番の指定が必要ない場合には0を使うとよい

正の整数

<code><input tabindex="1" type="text"></code>

負の整数

<code><input tabindex="-1" type="text"></code>

ゼロ

<code><input tabindex="0" type="text"></code>

tabindex属性の指定によるフォーカス可否

「○」は、フォーカスできることを示す。「×」は、フォーカスできないことを示す。

tabindex	フォーカス可能な要素 （※１）		フォーカス不可の要素 （※２）
	タブ	クリック	タブ	クリック
正の整数	○指定した数値の順番	○	○指定した数値の順番	○
負の整数	×	○	×	○
0	○ドキュメントにおける相対的な順番	○	○ドキュメントにおける相対的な順番	○
指定なし	○ドキュメントにおける相対的な順番	○	×	×