<CodeLearn/>
HTML レッスン8

アクセシビリティ

すべてのユーザーが使いやすいWebページを作ろう

アクセシビリティとは?

Webアクセシビリティは、障がいのある方や高齢者を含むすべての人が Webコンテンツを利用できるようにすることです。視覚障がいのある方はスクリーンリーダー(読み上げソフト)を使い、 マウスが使えない方はキーボードだけで操作します。適切なHTMLを書くことで、これらの支援技術が正しく動作します。

アクセシブルなフォーム

index.htmllazy
32 lines0 issues

Monaco Editor を準備しています

表示領域に入った時点で Monaco と Shiki を初期化します。

preview.local
Live Preview
Console

console.log / warn / error の出力がここに表示されます。

チェックリスト

すべてのimgにalt属性をつける
labelとinputをfor/idで紐づける
セマンティックタグを使う(div地獄を避ける)
キーボードだけで全操作できるようにする
十分な色コントラスト比を保つ
フォーカス状態を視覚的に分かりやすくする
aria属性で補足情報を提供する
見出しの階層構造を正しくする(h1→h2→h3)