9月7日、dev.toに「a11yとUXを向上させるフロントエンドの4つのヒント」が公開された。
The 4 Frontend tips for improving a11y and UX - dev.to
この記事では、スクリーンリーダーの読み上げを意識した実装など、アクセシビリティ、UX向上のヒントを4つ紹介している。
目次
- グラフィックスにテキストを使用してはいけない
- aria-labelでは、動詞を使って要素が行動につながることを伝える
- パスワードの表示・非表示には、ボタン要素を使う
- 正しいバーチャルキーボードを表示する
グラフィックスにテキストを使用してはいけない
テキストを使ってグラフィックを作成する方法がある。
よくある例として、クローズボタンの十字アイコンを乗算記号(x)で作成することが挙げられる。
確かに視覚的には有効な解決策だが、アクセシビリティの観点からすると、バッドプラクティスになる。
すべてのテキストシンボルには、スクリーンリーダーが読み上げられるコードがある。
その結果、スクリーンリーダーは「閉じる、ボタン」ではなく、「乗算、ボタン」と読み上げるため、ユーザーは混乱してしまう。
したがって、グラフィックスにテキストを使用してはいけない。
グラフィックスにはSVGを使用して、代替テキストを添える。それには以下の2つの方法がある。
- 要素にテキストを追加し、CSSのvisually-hiddenパターンを使って隠す
- aria-label属性を使用する
私は、最初の方法を支持している。CSSが読み込まれていないときにテキストが表示されるためだ。
自分の好みの方法を選ぶのがいいだろう。
bad
<button type="button">×</button>
<!-- or -->
<button type="button">×</button>good
<button type="button">
<span class="visually-hidden">close modal</span>
<svg height="1rem" width="1rem">...</svg>
</button>
<!-- or -->
<button type="button" aria-label="close modal">
<svg height="1rem" width="1rem">...</svg>
</button>aria-labelでは、動詞を使って要素が行動につながることを伝える
スクリーンリーダーのユーザーが要素の操作方法を理解できるように、aria-label属性を使うベストプラクティスがある。
しかし、問題があると思っている。
それは名詞を使うことだ。
例えば、保存されたアイテムのあるページに行くためのリンクを「Saved items」と書いたとする。
すると、ユーザーは「リンク、 Saved items」と聞くことになる。
要素がアクションにつながることをユーザーが理解できるように、aria-labelに動詞を使うことをお勧めする。
例えば、「Saved items」の代わりに「go to my saved items」と書く。
この場合、ユーザーは「リンク、go to my saved items」と聞くことになる。その方がわかりやすいと思う。
bad
<a aria-label="Saved items" href="https://example.com/saved-lists">
<svg height="1rem" width="1rem">...</svg>
</a>good
<a aria-label="Go to my saved items" href="https://example.com/saved-lists">
<svg height="1rem" width="1rem">...</svg>
</a>パスワードの表示・非表示には、ボタン要素を使う
クレジット: Stas Melnikov
ここ数年、ボタンの非表示/表示パターンは非常に人気がある。
しかし、多くの人がHTML要素の選択を間違えている。
ユーザーはマウスだけで要素を操作すると思われている。1回クリックするだけ、2回クリックするだけ、など。
しかし、このパターンの価値はもっと重要だ。
まず、ユーザーはキーボードを使い、タブキーを使ってフィールドからボタンに素早くフォーカスを合わせる。
そして、エンターキーを押すことで、パスワードの表示・非表示を切り替える。
次に、スクリーンリーダーは、この要素がインタラクティブであることを検出しなければなりない。
でないと、ユーザーはそれを使うことができないからだ。
そこで、これらの条件をすべて満たすのが、ボタン要素になる。
ボタン要素を使えば、ユーザーは喜んでインターフェースを使ってくれるだろう。
正しいバーチャルキーボードを表示する
クレジット: Stas Melnikov
フォームのUXをよりシンプルでユーザーフレンドリーなものにしたいのであれば、type属性を正しく選択すべきだ。
この属性は、ブラウザが最適な仮想キーボードを表示するのに役立つからである。
これにより、ユーザーはより迅速にフォームを入力することができる。
例えば、ユーザーが電話番号を入力する場合、type="tel"は数字やその他の特殊記号を含むキーボードを表示する。
しかし、既存の値が適用できない場合もある。
例えば、サインインするときに、ユーザーに数字のコードを入力してもらいたいとする。
このような場合は、inputmode属性を使用することで、ブラウザが正しいキーボードも表示することができる。
数字のコード入力では、inputmode="numeric"を使うべきだ。
そうすれば、ブラウザは数字のみのキーボードを表示し、ユーザーはtype属性を使用した場合と同様に素早くフィールドを埋めることができる。
