Ceeds Academy教材アプリ教材・症状語・タグで検索
索引グラフ試す
Web/フロントエンド基盤▸Web基礎

Web: アクセシビリティ(セマンティクス・ARIA・コントラスト)

knowledge所要 20分最新草稿
前提: Web: HTML の基礎(要素・セマンティクス・文書構造)
意味グラフ(この教材と内容的に近い教材・1ネスト)
例え(Analogies)
アクセシビリティ=スロープと点字ブロック

段差(操作の壁)を誰でも越えられるよう、スロープや点字ブロックを最初から設計に織り込む。後付けより、標準の作り(セマンティックHTML)で初めから備える方が確実。

概要

📍 Web/フロントエンド基盤 ▸ Web基礎 ▸ アクセシビリティ | 種別: knowledge | facts_as_of 2026-06

公式ドキュメント — knowledge

🎞 スライド

アクセシビリティ(a11y)=誰もが使える設計

優先順位(テキスト図)

[セマンティックHTML] ← まず土台(button は

仕上げ

キーボード操作・フォーカス可視・コントラスト比(WCAG)・alt/label

—
出典(sources)

MDN Accessibility ; WCAG ; 2026-06確認

確認問題(Review-Questions)
視認性で確保すべき基準は?択一
基礎公式
解答・解説▾ 開く

コントラスト比(WCAGの基準)。

ARIAより優先すべきものは?記述
応用公式
解答・解説▾ 開く

セマンティックHTML(適切な要素を使う。不要なARIAはむしろ有害)。

目次
例え概要公式ドキュメント出典確認問題
鮮度
最新
更新: 2026-06-15
次回棚卸し: 2028-06-15
周期: 24か月
版: WAI-ARIA / WCAG(2026)

概要

アクセシビリティ(a11y)は誰もが使える設計。セマンティック HTML を土台に、必要に応じ ARIA、キーボード操作、コントラスト、代替テキストを足す。

公式ドキュメント準拠

  • セマンティクス優先(button は <button>)。ARIA は補助(role/aria-*)、不要な ARIA は害。
  • キーボード操作とフォーカス可視。**コントラスト比(WCAG)**を確保。画像に alt、入力に label。

出典: MDN: Accessibility / WCAG

🧭 誤解訂正集

よくある誤解 正しい理解
ARIA を付ければ OK セマンティック HTML が先(不要 ARIA は害)
a11y は特別な追加対応 標準で作れば多くは満たせる
見た目が良ければ十分 キーボード操作・コントラスト・alt/label も要る

📖 用語

  • アクセシビリティ(a11y) … 誰もが使えるようにする設計。
  • セマンティック HTML … 意味に合ったタグ(<button> 等)で作ること。
  • ARIA(role / aria-*) … 不足を補う補助の属性(多用は害)。
  • フォーカス可視 … キーボードで今どこを操作中か見える状態。
  • コントラスト比 / WCAG … 文字と背景の明暗差/その基準(アクセシビリティ指針)。
  • alt / label … 画像の代替テキスト/入力の説明ラベル。

✅ 確認の目安(can-do)

「セマンティクスが先・ARIA は補助」を説明でき、キーボード操作・コントラスト・alt/label を含め**「この UI のどこが a11y 上弱いか」**を判断できる。