アクセシビリティ対応に関する学び

例えば、「詳細ページへ進む際に押す矢印ボタン」を実装する際、
今まではアイコンをbackground-imgで指定して終わり、疑似要素でアイコンを表示させて終わり……。
といった実装になっており、アクセシビリティへの配慮ができていなかったことにフィードバックをいただいて学ぶことができました。
具体的には以下のようにアイコン等の要素の子要素としてspanタグを入れ、画面上spanタグを表示させないような実装をすると、
スクリーンリーダーを用いるユーザーにもボタンの意図を伝えることができることを学びました。
```<p class="c-nextButton__arrow">
  <span class="u-visuallyHidden">詳細ページへ</span>
</p>```
「画面上不可視とする」ことをどのように実装しているのか確認してみると、
以下のような実装になっていました。
```u-visuallyHidden {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(1px 1px 1px 1px);
 border: 0;
}
```
調べてみると、Bootstrap等でもこのようなスクリーンリーダー用のクラスが用意されていることを知りました。
他のエンジニアの方の実装やライブラリのクラスなどを拝見してスキルを身につけていきたいと思いました。