aria-labelが使えないタグで読み上げを設定したいときの対処方法

これはなに？

Qiitaでは、先日アクセシビリティ改善プロジェクトを立ち上げ、普段のコーディングでも意識する機会が増えました。

前提として、なんでもかんでも aria-label で解決をするのではなく、誰でも同じ体験を得られるようなUIやライティングでの工夫が必要だと考えています。
それでも、晴眼者であろうとスクリーンリーダー利用者であろうと同じ意味を届けたいときには有効活用していきたいものが aria-label だと思います。

この記事では、スクリーンリーダーでの読み上げを調整するために aria-label が使えないタグで、どのような対応を試してみたのかを備忘録として残します。

この記事に記載した方法は1例であり、ベストプラクティスであるとは思っていません。
もっといい方法があるのではないかと模索している段階での、1つの試みだと捉えていただければ幸いです。

aria-labelについてのおさらい

MDNのaria-labelによると

aria-label 属性は対話型要素にラベル付けする文字列値を定義します。

とあります。
また

aria-label はアクセシビリティ名を持つことができる任意の要素で使用することができますが、実際には、 aria-label は対話型要素、ウィジェット、ランドマーク、画像、 iframe でのみ対応しています。

ともありました。

よくあるのはアイコンボタンで利用されるケースです。
Qiitaでもダイアログを閉じるボタンを「x」のアイコンで実装していたりします。

投稿完了時に表示されるダイアログを閉じるボタンの例で行くと…

UI

<button aria-label="閉じる" class="closeButtonStyle">
  <span class="material-symbols-outlined MaterialSymbol" aria-hidden="true">close</span>
</button>

※QiitaではアイコンフォントにMaterialSymbolsを利用しています。

こうするとVoiceOverでは、このボタンは「閉じる、ボタン」と読み上げられます。

aria-labelが使えるタグ、使えないタグ

MDNのaria-labelによると下記のタグは aria-label に対応していません

• code
• caption
• deletion
• emphasis
• generic
• insertion
• mark
• paragraph
• presentation / none
• strong
• subscript
• superscript
• suggestion
• term
• time

しかし、実際にはこれら以外にも span タグなども使えません

前項で引用した、MDNから「対話型要素」にラベル付けができるということを鵜呑みにすると、むしろ使えるタグは下記ということになるのではないでしょうか

• button
• details
• embed
• iframe
• label
• select
• textarea
• a に href 属性がある場合
• audio に controls 属性がある場合
• img に usemap 属性がある場合
• input に type 属性が hidden 状態ではない場合
• object に usemap 属性がある場合
• video に controls 属性がある場合

コンテンツカテゴリー - HTML: ハイパーテキストマークアップ言語 | MDNより引用

Qiitaでは markuoplint を導入していますが、許可して使える要素は下記です。

• a
• img
• h1〜h6
• button
• table
• input
• select
• textarea

こうして使えるタグ、使えないタグを改めて見ると、 aria-label での解決よりもUIやライディングでの解決ができないかをまず検討するのが大事だなと感じます。

aria-label が使えないp タグで実装してみたこと

今回試みてみたことは、期間の読み上げです。
記述すると 2024/4/27 〜 2024/5/6 という表記です。

日本人で晴眼者だったなら、/（スラッシュ） が年月日の区切りで、 〜（チルダ） が 「から」と読める人が大多数だと思います。
これをVoiceOverで読み上げると 「にせんにじゅうよん すらっしゅ よん すらっしゅ にじゅうなな （チルダを飛ばす） にせんにじゅうよん すらっしゅ ご すらっしゅ ろく」となります。

チルダの余白を削除すると「から」と読み上げはできます。

aria-label を使う以外の解決方法も検討しましたが、テキストが冗長になりそれはそれでスクリーンリーダー利用者に偏りすぎではないかと思い、今回の解決方法として下記のように実装してみました。

period.html

<p aria-hidden="true">GW期間:2024/4/27 ~ 2024/5/6</p>
<span class="hasAriaLabelStyle">ゴールデンウィークの期間は2024年4月27日から2024年5月6日まで</span>

period.scss

.hasAriaLabelStyle {
  transform: scale(0, 0);
  position: absolute;
}

最初の記号を使った表記は aria-hidden="true" にし、スクリーンリーダーでの読み上げを除外し、不可視の要素に読み上げテキストを記載しました。

HTMLの構造が複雑化して美しくないなと思わないでもありませんが、今回はこれで目的は達成できたと思います。

おわりに

スクリーンリーダーが進歩すると、このような対応が不要になる日も訪れると思いますが、少しずつできることは試してみたいと思います。
こういった読み上げの対策事例がありましたら、ぜひ教えていただければ嬉しいです！

参考

• aria-label - アクセシビリティ | MDN
• よくある質問 | Markuplint