簡単にすぐできる HTML上級編 アクセシビリティ
この記事を見るだけですぐできるアクセシビリティー向上のための具体的な施策を紹介します
ABOUTなど英語を全て大文字で記載したい場合はtext-transform: uppercase;を使う
全て大文字で打ち込むと音声読み上げで「アバウト」と読み上げてくれません。
参考記事
https://internship.taneppa.net/kitadani/archives/1094/
ハンバーガーメニューにはbuttonタグを使う
目が見えない人などがWebサイトをキーボードだけで操作する時、Tab キーで押せるようになります。
参考記事
https://shibajuku.net/make-hamburger-button/
imgタグにwidth heightを指定する
アクセシビリティからは少しズレるかもですがパラダイムシフトが起きることを避けることができます。sourceには記載不要です。
<picture>
<source srcset="img/1.webp" type="image/webp">
<img src="img/1.jpg" width="300" height="400" alt="画像の説明" loading="lazy">
<picture>参考記事
https://parashuto.com/rriver/development/img-size-attributes-are-back
コピーライトにlang="en"を指定する
音声読み上げ機能により読み上げられた時に英語として発音されます。
<p><small lang="en">© 2022 copy right</small></p>svg画像にはrole="img"とラベルを付ける
音声読み上げでそのsvg画像が何の画像なのか説明されます。
ちなみにimgタグにaltタグを書くのも同様の理由があります。
<svg role="img" aria-label="SVG 画像の説明">
<!-- SVG 画像の内容 -->
</svg>参考記事
https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles/Role_Img
