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>

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

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

<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>