Open3
小さなことからはじめるWebアクセシビリティ
Y.視覚的にはっきりと分かるリンクにする
- 文中にあるリンクテキストは色を変えるだけでなく下線等をつけて、リンクであることを明確化する。
- ホバー時に色を変えるだけでは色覚障害を持つ方にわかりづらい場合があるので、下線がつくように実装する。（ナビゲーションリンクなどはページデザインや文脈から視覚的に明らかなので別？）
達成基準
Y.font-sizeは相対単位(em, rem)を使用する
- px指定の場合、ブラウザが提供している文字サイズ変更機能が適用されない。
達成基準
Y.アイコンのアクセシビリティ
- SNSリンクなど、アイコンだけで実装している場合、スクリーンリーダーユーザーにはそのボタンがSNSリンクだと分からない。
- 装飾目的のボタンの矢印など、インラインSVGでアイコンを実装している場合は
role="img"やaria-hidden="true"等を用いる。(<img alt="" />と同義になる=装飾目的の画像) - クリックするとTOPに遷移するボタンや、ハンバーガーメニューなどもボタンの機能が明確に伝わらない場合が多いので、
aria-label属性などでボタンの意図が伝わるように実装する。