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

a11yの必要性

• 過去記事
  • https://qiita.com/SatoshiMukainakano/items/6a23f4ca90579eeff277
  • https://qiita.com/SatoshiMukainakano/items/f38b71d99698576696c9
  • ワールドワイドで見たら、より厳しいとこ多数
  • 自分だって、いつケガしたり、障害もったり、するかわからない
  • ケガや障害じゃなくても、公共の場の利用でもヒントになる

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 タグ

メモ

• 「見出しをジャンプ」していくことで、そのページが伝えたいアウトラインを素早く巡行できる状態を目指す
  • 本文しかないならともかく、それ以外のものもある中でいちいち全部をめぐってられない
  • h1-6タグ でマークアップされた要素をジャンプしていく「見出しジャンプ」「見出しナビゲーション」 機能を活用
    • 例・VoiceOver ： https://website-usability.info/2010/11/entry_101123.html
    • 例・TalkBack ： https://support.google.com/accessibility/android/answer/6006598?hl=ja
    • 例・NVDA ： http://nvdajp.osdn.jp/howto/manual/nvda_commands.html
• 見出し【以外】を全部なくしたら、「コンテンツのアウトライン」がうまく描けている状態

注意

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

(4) 他とつなげる

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

(5) その他

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

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

参考にしたもの（一部）

• https://waic.jp/docs/WCAG20/Overview.html
• https://html.spec.whatwg.org/multipage/
• https://momdo.github.io/html/
• https://developer.mozilla.org/ja/docs/Web/Accessibility
• http://honttoni.blog74.fc2.com/blog-entry-61.html
• https://shibe97.tumblr.com/post/121266132377/html5のアウトラインを極めるための6つのルール
• https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines
• http://www.html5-memo.com/html5/html5_03/
• ツール： https://gsnedders.html5.org/outliner/
• https://reliphone.jp/disabilities-possibilities/
• http://ommyzfactory.cocolog-nifty.com/blog/2019/10/post-a30587.html

[EOF]