HTML レッスン8
アクセシビリティ
すべてのユーザーが使いやすいWebページを作ろう
アクセシビリティとは?
Webアクセシビリティは、障がいのある方や高齢者を含むすべての人が Webコンテンツを利用できるようにすることです。視覚障がいのある方はスクリーンリーダー(読み上げソフト)を使い、 マウスが使えない方はキーボードだけで操作します。適切なHTMLを書くことで、これらの支援技術が正しく動作します。
アクセシブルなフォーム
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
32 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
チェックリスト
✓ すべてのimgにalt属性をつける
✓ labelとinputをfor/idで紐づける
✓ セマンティックタグを使う(div地獄を避ける)
✓ キーボードだけで全操作できるようにする
✓ 十分な色コントラスト比を保つ
✓ フォーカス状態を視覚的に分かりやすくする
✓ aria属性で補足情報を提供する
✓ 見出しの階層構造を正しくする(h1→h2→h3)