React Testing Library や Chrome の開発者ツールでアクセシビリティツリーが見えるようになるなど、最近はただ見た目通りにマークアップするだけではなく、アクセシビリティに配慮したマークアップも必要なスキルセットになってきている流れを感じます。 筆者といえば、最近HTMLやCSSをよく書くようになり、マークアップ完全に理解したからマークアップなんも分からんとなっている状況です。(アクセシビリティも同様) 今回はマークアップなんも分からんといった状況の筆者が、アクセシビリティに配慮したマークアップを意識するといった内容になります。HTML、CSS、アクセシビリティは難しいので鵜呑みにせずに適宜MDNなどのドキュメントをご確認ください。 例えばチェックボックスを装飾したい 無性にチェックボックスを装飾したいとき、あると思います。 例えばこんな感じのチェックボックスですね。
![Visually Hiddenパターンでアクセシビリティに配慮したマークアップを意識する | ビジネスとIT活用に役立つ情報(株式会社アーティス)](https://cdn-ak-scissors.b.st-hatena.com/image/square/0a4ca2537b882d48b6499d4a8a617ed5b1753206/height=288;version=1;width=512/https%3A%2F%2Fwww.asobou.co.jp%2Fblog%2Fwp-content%2Fuploads%2F2022%2F11%2Fvisually-hidden-sub.jpg)