UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Web Accessibility】アクセシビリティツリー

2022/5/14に開催されたTechFeed Conference 2022を拝聴した

TechFeed Conference 2022

このときのアクセシビリティツリーに関するメモ

アクセシビリティツリーとは

支援技術向けに公開される情報がまとめられたツリー

スクリーンリーダーなどの支援技術はこのアクセシビリティツリーをもとに読み上げられる

アクセシビリティツリーが提供する情報は以下

種類 意味
Role 要素の役割
Name 要素の名前
Description 要素の補足説明
State/Property 要素の状態や性質

https://developer.mozilla.org/ja/docs/Glossary/Accessibility_tree:titile

情報の優先度

アクセシビリティツリーはサイトを構築するさまざま情報によって計算され、その情報には優先度がある

たとえばNameを計算する情報の優先度は以下に記載がある

www.levelaccess.com

  1. aria-labelledby’(優先度高)
  2. aria-label’
  3. label (for a form control)
  4. ‘placeholder’ (for a text form control)
  5. figcaption (for a figure)
  6. ‘alt’ (for an img or area)
  7. caption (for a table)
  8. legend (for a fieldset)
  9. text contents (if allowed for this role)
  10. ‘title’
  11. value’ (for an input form control with type of ‘button’, ‘submit’, or ‘reset’)

これらの優先順位に注意して設定することが重要

ちなみに、アクセシビリティツリーはChromeの機能のフルページアクセシビリティツリーがわかりやすい

developer.chrome.com