Facebookで@caztcha さんがShort note on making your mark (more accessible)をシェアされているのを見て、「またcontentプロパティを使用した実装方法か…」と私がコメントした事から 記事にある実装方法がベストな方法なのかどうか@caztcha さんと色々と意見を交わしていました。 そこで私が「作業効率悪いですけど、補助的情報でも提供するならaria-label属性使った方が良いと思います。」と意見したことから、 @caztchaさんが「mark要素にaria-label属性を入れちゃうと、mark要素で括られたマーキングされている文字列は、(aria-label属性に上書きされる形で) スクリーンリーダーでは読み上げられないのでは？」と問われ、 それに@masuP9 さんが「Textnode 上書きしちゃいますね」と答えられた後、Accessible Name and Description: Computation and API Mappings 1.1の情報提供していただき「あーでも検証環境が macOS VoiceOver だとです。」と言われてたので、 私は「念のため検証してみよう」と思い立ち、実際スクリーンリーダーでどう読み上げるか検証してみました。

私が検証した環境は、Win7/PC-Talker7/Internet Explorer11とWin7/NVDA/Firefox57.0.1,Google Chrome63.0.3239.84,Internet Explorer11とiOS10.3.3/VoiceOver/SafariとAndoroid7.1.1/TalkBack5.2.1/Firefox57.0.1,Google Chrome62.0.3202.84です。読み上げ結果は以下のように興味深いものになりました。

button要素、a要素、mark要素にaria-label属性を入れた場合

PC-Talker7/Internet Explorer11

• button要素 - aria-labelの値のみを読み上げる
• a要素 - aria-labelの値を読み上げない
• mark要素 - aria-labelの値と要素内の情報とも読み上げる(2つの情報を続けては読み上げない。操作的にCtrl+下矢印2回に押す)

NVDA/Firefox,Google Chrome,Internet Explorer11

• button要素 - aria-labelの値のみを読み上げる
• a要素 - aria-labelの値のみを読み上げる
• mark要素 - aria-labelの値は読み上げない(要素内の情報のみ)

VoiceOver/Safari

• button要素 - aria-labelの値のみを読み上げる
• a要素 - aria-labelの値のみを読み上げる
• mark要素 - aria-labelの値は読み上げない(要素内の情報のみ)

TalkBack/Firefox

• button要素 - aria-labelの値のみを読み上げる
• a要素 - aria-labelの値のみを読み上げる
• mark要素 - aria-labelの値と要素内の情報とも読み上げる

TalkBack/Google Chrome

• button要素 - aria-labelの値のみを読み上げる
• a要素 - aria-labelの値のみを読み上げる
• mark要素 - aria-labelの値のみを読み上げたのち"ハイライト表示されたコンテンツ"と読み上げる

aria-label属性を入れたの場合、NVDAとVoiceOverは同じ結果でbutton要素とa要素の場合はaria-label属性のみ読み上げるので情報不足になり、対象のmark要素ではaria-label属性の値は読み上げてくれないのでaria-label属性は現状不要になります。 PC-Talker7はmark要素は意図したように読み上げてくれるのですが、なぜかa要素のaria-label属性の値を読み上げずbutton要素ではaria-label属性のみ読み上げるので情報不足になります。 TalkBack/Firefox,Google Chromeともbutton要素とa要素の場合aria-label属性のみ読み上げるので情報不足になりますが、Firefoxでのmark要素は意図したように読み上げてくれるのでaria-label属性は有効だという事になります。また、Google Chromeでのmark要素はaria-labelの値のみ読み上げた後"ハイライト表示されたコンテンツ"と読み上げてくれるのでaria-label属性不要で一番望ましい結果になりました。

正直、スクリーンリーダーと要素とブラウザによってこんなに解釈が違うと思わなかったのですが、総合的にみてmark要素をアクセシブルにするのにaria-label属性は有効ではないと思いました。

ここで気になったのが、私の認識の中にあったPC-TalkerはWAI-ARIAに対応していない場合でもtitle属性なら読み上げる上にimg要素にalt属性とtitle属性が入ってる場合title属性を優先して読み上げる(titleのみ読み上げる)という事です。ですので、こちらも検証してみました。

mark要素にtitle属性を入れた場合

PC-Talker7/Internet Explorer11

titleの値を読み上げない(要素内の情報のみ)

NVDA/Firefox,Google Chrome,Internet Explorer11

titleの値を読み上げない(要素内の情報のみ)

VoiceOver/Safari

titleの値を読み上げない(要素内の情報のみ)

TalkBack/Firefox

titleの値を読み上げない(要素内の情報のみ)

TalkBack/Google Chrome

titleの値のみを読み上げた後"ハイライト表示されたコンテンツ"と読み上げる

title属性を入れた場合、どのスクリーンリーダーもtitle属性の値を読み上げないのでtitle属性は有効でないという結果になりました。上で私が書いたPC-Talkerはtitle属性を優先的に読み上げるという知識はすべての要素に対してではなく、mark要素の場合は他のスクリーンリーダーと同じようにtitle属性の値は読み上げないと覚えておかないといけないという事がわかりました。 (PC-Talkerはimg要素にaltとtitleが入っている場合altの値しか読み上げません)(VoiceOverはimg要素にaltとtitleが入っている場合どちらともの値を読み上げますがtitleの値は少し遅れて読み上げます)

私はaria-labelledby属性とaria-describedby属性を4種スクリーンリーダーで読み上げた検証結果の情報をここで公開している事とPC-Talkerがaria-label属性の値を読み上げ、mark要素の場合はtitle属性の値は読み上げないという事から、PC-Talkerがaria-describedby属性とaria-labelledby属性に対応しているかどうかと対応していない場合title属性は有効かどうか気になり読み上げの確認をしてみました。結果は、aria-describedby属性とaria-labelledby属性ともに関連した情報は読み上げずtitle属性の値は読み上げました。また、input属性にラベルを付けられない場合、PC-Talkerでtitle属性は有効か確認したところ今までと変わらず有効でした。(title属性の値を読み上げました)

総括

TalkBack/Google Chromeの読み上げのようにmark要素だけで"ハイライト表示されたコンテンツ"と読み上げてくれるのがベストですが、ほとんどのスクリーンリーダーはそのようには読み上げてくれません。 補足的にCSSでmark要素だという情報を提供するならstrongやemも同じように実装した方が良いと思うという事と、読み上げ結果を考慮するとaria-label属性も有効ではないという事から、strongやemと同じように特に何もしないという結論に至りました。

検証した感想としては、PC-Talkerのtitle属性の件のように要素によって読み上げ方に違いがあるので、こういう機会にきちんと読み上げの確認をして自分の情報もアップテートしなければいけないと思いました。そして、こういう風にアクセシビリティに関する1つの事を掘り下げて検証や討論をしながら良い実装方法を考えるのは非常に興味深く為になります。今回、@caztchaさんと@masuP9さんにご意見いただいた事で「あっそうか！」と思う事が多々あり非常に勉強になりました。