Webアクセシビリティ(コーディング)

Webアクセシビリティチェックリスト（コーディング）

アクセシビリティを向上させることは、障害を持った人々だけではなく、すべての人を対象としたWebの質の向上にも応用できます。コーディング編では、キーボードユーザー及びスクリーンリーダーユーザーを考慮したインタラクティブ性を持たせることを目的としています。

button、aタグを設定する(フォーカス)

buttonのフォーカスを設定します。button自体も適切なところにマークアップしましょう。スクリーンリーダーでは「ボタン」と読み上げます。アクティブ状態のスタイルも設定しましょう。

button{
	/* outline: none; NG */
} 

aria-labelを設定するとボタンに読み上げを追加することができます。以下は、「ボタン、元に戻す」となります。

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

aタグは「リンク」を表します。下線を表示して「リンク」であることを明確に示しましょう。

a{
	/* text-decoration: none; NG */
}

imgタグのaltを設定する

画像のaltタグを設定しましょう。スクリーンリーダーが読み上げます。また、画像が存在しない時alt値が出力されます。タブの切り替え「＋」「−」の代替情報も切り替えましょう。非表示にするだけではスクリーンリーダーが読み上げてしまいます。(aria-labelも削除しておきましょう)

用語を適切に選択する（UI面）

用語はユーザービリティ面の工夫ですが、適切な用語を選ぶことは、ユーザーの認識的緊張を緩和することができます。以下は、参考書籍を引用

• 保管ではなく、保存
• 破棄ではなく、削除
• 入れ替えではなく、編集

セマンティックのHTML

セクショニングコンテンツ(section,nav,aside,article)は適切な箇所に使用しましょう。無意味にdivタグで囲むのは避けてください。セクショニングコンテンツはスクリーンリーダーでも読み上げられます。そのため何重ものsectionタグで囲むと「セクション、セクション、セクション」と読まれます。その部分を意識してコーディングしてください。

<section>
	<section>
		<section>
		</section>
	</section>
</section>

ARIA属性に、ランドマークロールというものが存在しますが、HTML５ではnavタグやaside,articleタグなどが用意されています。そのため、ランドマークロールは必要ありません。今は、ほとんどのサイトが使用していないと思います。ネガティブなHTMLのセマンティックで目的を果たせる場合には、ARIA属性を使用する必要ありません。また、セクションごとに目的の強調とラベル付けに見出しに使用することが推奨されています。

<h2 aria-level="4">セクション2</h2>

aria-levelでスタイルを変更したくないが、見出しレベルを変更することができます。

メインコンテンツスキップ

初期のタブキーでは、上部に「本文はこちら」ボタンをつけておきましょう。参考サイトは、都庁のサイトでtabキーを押してみてください。

a.skip{
	position: relative;
	top: -100px;
	trasition: position, 0.5s ease;
}

ページ内リンク

ページ内を移動後、フォーカスを設定しないとユーザーの誤解を招きます。JavaScriptでフォーカスを設定できます。

target.attr('tabindex', '-1');
target.focus();

テキスト画像

テキスト画像は使用するのは、避けて下さい。代替コンテンツとして、altタグで設定すれば良いという人もいますが避けるのが無難です。Webフォントを使用しましょう。

タブの切り替え

ローディング

ダイアログ