📘
No ARIA is better than Bad ARIAを実感した話
要約
aria 属性 は使える箇所と使えない箇所があって、スクリーンリーダーによって間違いを許容したりしなかったりする。aria 属性を使う前に、使える箇所を確認しよう。
aria-label の挙動でハマった
以下のアンケートの「aria-label で対応する」を見て、直近でハマった aria-label の挙動を思い出したので記事にしてみました。
視覚的には隠したいがスクリーンリーダーには読み上げて欲しい文言がありました。詳細は違いますが、概ね以下のようにマークアップしました。
<div aria-label="aria-label"></div>
Talkback では意図通りの読み上げでしたが、iOS の VoiceOver ではaria-labelが無視されるという挙動になりました。playcode で類似のページを作ってみたので、お手持ちのスクリーンリーダーではどんな動きをするか試してみてください。
名前付け禁止
aria-label を指定して良い要素は Web 仕様で定められています。以下、ARIA in HTML(日本語訳)の引用。
名前付け禁止として特定される要素は、著者がaria-labelまたはaria-labelledby属性を指定してはならない要素である。ただし、その要素の暗黙的なロールが、著者由来の名前付けを許可する明示的なWAI-ARIAロールによって上書きされることを要素が許可している場合は除く。詳細については、4.1 要素に名前を付けるためのARIA属性の使用に関する要件を参照のこと。
divは名前付け禁止として特定されていますので、本来aria-labelを付けてはいけません。この辺りの仕様への適合を、TalkbackよりiOS VoiceOverの方が厳しく見ているようです。
Discussion