つい最近、お仕事で以下のようなリンクコンポーネントを使う機会がありました。
<p>
詳しくは次のリンクをご確認ください。<a href="https://example.com"
>→詳細ページ</a
>
</p>
<p></p>
このコンポーネントに大きな問題があるわけではないのですが、スクリーンリーダーユーザーのことを考えるとa要素内の「→」というテキストが気になりました。
単なる装飾的なテキストである「→」ですが、スクリーンリーダーでは「みぎやじるし」と読み上げられます。そうなるとスクリーンリーダーユーザーに余計な情報を与えてしまい、前後の文言によっては混乱を招いてしまう可能性があるわけです。
これについて職場の先輩とお話しした結果、修正については保留となったものの、こういった場合はどう対処するべきかについて自分なりに考えたのでここに記しておきます。
結論
今回のようなコンポーネントでは「→」をspan要素などで囲って、aria-hidden属性を付与してあげるのがベストだという考えに至りました。
以下は実装例です。
<p>
詳しくは次のリンクをご確認ください。<a href="https://example.com"
><span aria-hidden="true">→</span>詳細ページ</a
>
</p>
こうすることで、余計なテキストがアクセシビリティツリーから消えて、スクリーンリーダーで読み上げられなくなります。
結論としては以上なのですが、上記のようなHTMLではなく、CSSのcontentプロパティで「→」というテキストを表現したい場合も往々にしてあると思いますので、そちらについても併せて紹介しておきます。
CSSのcontentプロパティで「→」というテキストを表現する場合
CSSの場合、以下のように擬似要素のcontentプロパティにインラインSVG画像を設定してあげるのがベストだと考えています。
<p>
詳しくは次のリンクをご確認ください。<a href="https://example.com"
>詳細ページ</a
>
</p>
p > a::before {
content: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"><text dominant-baseline="text-before-edge" font-size="13px">→</text></svg>');
}
なぜ、contentプロパティに「→」を直接書かないのかというと、仕様上contentプロパティに設定したテキストはスクリーンリーダーで読み上げられるようになっているからです。 また、通常の画像ではなくインラインSVG画像を使っているのは、汎用性のない画像に対して管理コストをかけたくないと思ったからです。
ちなみに、現在はインラインSVG画像を使っていますが「CSS Generated Content Module Level 3」の中にあるcontentプロパティの値に代替テキストを付加させる機能が各種ブラウザーに実装されれば、ここで述べた方法を使う必要はなくなります[1]。ですので、これについては先述した機能が実装されるまでの代替案だと思ってもらえればと思います。
おわりに
この記事で言及している問題や対策に関してはあくまでも主観であり、すべての状況や環境で適合するわけではありません。
ですので、その辺りは自身で考えた上、実行してみてくださいね。