Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Webアクセシビリティ:

More than 1 year has passed since last update.

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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away