LoginSignup
1
1

More than 3 years have passed since last update.

@SatoshiMukainakano(Satoshi Mukainakano)

アクセシビリティ(a11y)対応の 「HTMLを書くとき」の自分メモ

Posted at

a11yの必要性

HTML書くとき

※書き終わったあとのコードを振り返るときにも。

(1) コンテンツのランドマーク

  • どのセクションにも属していない header タグ or role="banner"
  • どのセクションにも属していない footer タグ or role="contentinfo"
  • 文法上正しい位置にある main タグ or role="main"

メモ

  • 原則として、ページを通して1箇所
  • これら3つは互いに、どれかの子孫要素にも、どれかの祖先要素にもなっていない
  • 「ここを探索できれば一発」的に、「共通ヘッダ」「共通フッタ」「コンテンツ主旨」 を示す

(2) 部品のランドマーク

  • nav タグ or role="navigation"
  • 検索のためのフォーム ( role="search" )
  • データ送信・操作のためのフォーム ( role="form" )

メモ

  • コンテキスト、コンテンツ の並びによって、複数あっていいケースあり

(3) 見出し・セクション

  • h1-6 ( h1, h2, h3, h4, h5, h6 ) タグ
  • aside タグ or role="complementary"
  • article タグ
  • section タグ

メモ

注意

  • HTML LS文法上で厳密に言えば、だいぶ語弊が残る
  • あくまで、現時点の実装を踏まえた「早見」として
  • 2019年11月時点では アウトラインアルゴリズム を踏襲した ブラウザ・支援技術 は見当たらない、とされる

(4) 他とつなげる

  • 他のページへの遷移
    • a タグ
      • aタグ 以外のタグで「リンク」を装うのは原則的に非推奨
      • やむない場合にのみ、 role="link" を活用
      • target="_blank" には rel="noopener" を併設されたい
      • なるべくラベルだけでリンク先の 主旨・概要 を示したい
  • フォーム
    • ラベル付け必須
    • エラーをしっかり明記
  • 埋め込みコンテンツ
    • 代替テキストなり、代替コンテンツなり、補助情報なり
  • 外部リソース
    • link タグ、 meta タグ、 OGP関連、アクセス解析系
  • スクリプト

(5) その他

HTML LS や WAI-ARIA を有効に活用

  • リスト
  • テキストレベル
  • 動的に内容を変更したことを示す

参考にしたもの（一部）

[EOF]

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1