アクセシビリティーの理解
アクセシビリティーとは
「ユーザーが快適にWebを使えるようにすること。」
マウスの故障でキーボード操作でページの閲覧をしている方、視覚障害などで音声ブラウザを使用している方など、色んなユーザーにとって優しいサイトである必要があります。
意識することで結果的に綺麗なコードになり、seo的にも役に立ちます。
今回指摘されたポイント
・role属性の必要性
<a>タグでボタンを実装した場合はrole属性で役割を明示してあげる必要があります。
<a class="btn btn-primary" href="#" role="button">Link</a>
・<button>タグにはtypeも指定する必要がある
初期値がsubmitの為フォームで使用しない場合は、typeを指定してあげた方がいい
<button type="button" class="btn btn-primary">Primary</button>
・読み上げが必要ない部分にはarea-hiddenを使用
aria-hidden="true"
を使用することによって読み上げをスキップできます。
style='display:none'
を指定している部分に使ってあげるみたいです。
jsのプレフィックスは必ず必要
jsで操作する場合jsを接頭辞につける必要があります。
$('.hoge').toggleClass('hogehoge')
こういった部分は必ず、.js-hogeで指定してあげる必要がるみたいです。
タグの使い方
・空の要素にbackgroundなどでデザインをつけるもはよくない。もし必要ならタグで行う。
・文字として意味を持たないものはタグで囲んで使うのではなく擬似要素などで表現する。
<p>テキストテキスト<span>＞</span></p>
こういう場合 ＞ は擬似要素で表現する。
細かいメモ
・reset.cssは触らない
・font-sizeをremで指定したら余白もremを使用しないと意味がない。
・alt属性や英語を大文字で指定すると読み上げソフトを使う際、変な読み上げになる。小文字で記載してcssなどで調整する(一文字目は大文字でも問題なし)
・<dl>で囲んでいる場合<dt>が一番上。テキスト上<td>にしたくない場合は、cssで変更する。
初めてコードレビューしていただいて独学だと気にしない点が多々ああたのでいい気づきになりました。
↧