aria-hidden="true"とrole="none presentation"の違いについて
今日もWAI-ARIAの話です。
そのまんまのタイトルの記事があったので以下引用。
Presentational roles are used when elements need to be in the DOM, but the semantics of them are inaccurate or unnecessary.
role="presentation"は要素がDOMとしては必要だけどセマンティクスが必要ないときに使われるとのこと。それに対し、
aria-hidden="true" means the element is removed from the tree
aria-hidden="true"は要素をアクセシビリティツリーから消すために使われる、つまり支援技術から認識されなくなるので、スクリーンリーダーで読み上げられなくなる。
何も指定していないh1要素は「見出しレベル1 デフォルトの見出し」と読まれるが、aria-hidden="true"を指定したh1要素は読み上げられない。また、role="none presentation"を指定したh1要素は「role="none presentation"を設定した見出し」とだけ読まれ、h1要素としてのセマンティクスがなくなっているのがわかる（動作環境はWindows10,Chrome,NVDA）。
調べてたらspan要素にrole="presentation”を付与している例があったけど、spanにはそもそもセマンティクスがないので使用法としては不適切なはず。過去にはスペーサーやテーブルレイアウトで使われてたらしいけど、今はその使い方しないよね…。
また、role="none"については、WAI-ARIA 1.1の日本語訳から
ARIA 1.1において、ワーキンググループは、単語"presentation"または"presentational"の意図された意味の周囲の著者の混乱のために、presentationのロールに同義語としてnoneを導入した
実装がrole="none"に対して十分なサポートを含むまで、ウェブ制作者は、presentationロールだけでrole="presentation"またはnoneロールのフォールバックとして重複してrole="none presentation"を使用することを勧める
とのことなので、role="presentation"ではなくrole="none presentation"と指定してある。確かにpresentationって意味が取りにくいのでいい変更なんじゃないかなあと思う。ふたつ指定しなきゃいけないのは面倒だけど…。
role="none"を知れたのが今回の収穫ですね（今まで知らなかった）。
