Edited at

Webアクセシビリティ:

2017年9月に開催されたHtml5 Conferenceで発表されていた

多様なユーザーニーズに応えるフロントエンドデザインパターン〜書籍「インクルーシブ HTML + CSS & JavaScript」より -HTML5 Confrence 2017-

こちらとてもわかりやすかったです。

これを見ていて特になるほど!と思った内容をメモしておきます。


隠しテキストで説明

<a href="xxx/xxx.html" class="call-top-action">

今すぐ購入
</a>

今すぐ購入のようなボタンが続く場合だったり、対象の商品からdomが離れてしまっている場合、

スクリーンリーダーでは「何を」今すぐ購入なのかがわからない。

そんな時は、以下のように隠しテキストで補足説明を書いてあげよう。

<a href="xxx/xxx.html" class="call-top-action">

<span class="visuallt-hidden">
スタンドにたたずむ裸の男を
</span>
今すぐ購入
</a>


数種類の要素を1つのリンクにすることへの問題点

よくあるタイトルや画像・ボタンなど全てがリンクになっているパターンです

<a href="xxx/xxx.html" class="call-top-action">

<h3>スタンドにたたずむ裸の男</h3>
<img src="image.jpg" alt="スタンドにたたずむ裸の男の写真"/>
<button>今すぐ購入</button>
</a>

デザイン(みため)としての問題もありますが、スクリーンリーダーに対する問題点が強いなと感じました


  • スクリーンリーダーで中身が全部読まれてしまうため、リンクとして判断しずらい


    • リンク内の要素全て読まれた後に「リンク」と読まれる



  • リンク一覧機能と相性が悪い


外部サイトとの連携を考える(SERP)

メタデータを設定しましょう。

サーチエンジン経由で使う人が使いやすいように。

また、外部サイトでも表示されやすいように。

itemprop 属性


WAI-ARIAのライブリージョン

スクリーンリーダーで他の読み上げに割り込んで読んでくれる。

たとえばローディング中などに活躍します。

<div aria-live="assertive" role="alert">

XXを読み込み中。しばらくお待ちください
</div>