ライトに始めるアクセシビリティチェック
2022/10/04
パートナーさんのwebページをaxeDevToolsでをスキャンして見てると大抵、
おっふ。
となれます 😇
↓はdocomoさんのコーポレートのTOPをscanしたものです。
ちゃんとやってるサービスならIssueは2桁に納まります。(freeeさんのTOPは34Issueです)
-
axeによるscan
と chrome標準のElement > Accessiiblity(あまり知られてない)
を駆使すると、一般的にまずいものはかなり可視化されると思います。 -
併せて、Mac標準の読み上げツール、
VoiceOver (option+TouchIdを3回で起動)
でページを読ませてみてみると、またおっふとなれて、アクセシビリティがんばりたくなってくるとおもいます。- 目をつぶってサイト操作して、目的の場所にたどり着ければOKなんですが、、、
じゃあどうやって直す?
webだとfreeeさんとcyberさんがそれぞれガイドラインを公開しているので、まずさらっと一読するのがオススメです。
その上でWCAGで各論をみにいきます
freeeさんがデザイン・コーディング・QA用のチェックリストを公開してる
- とりあえず作ったものを眺めながら、ぽちぽちチェックしてみるとよさげです。
研修資料も公開してる
https://developers.freee.co.jp/entry/a11y-training
アクセシビリティちゃんとやってるサービスの事例
- レベルAA準拠らしいです↓。参考にするのです。
いろいろツールがある
要素やコンポーネント実装の参考に
結論
アクセシビリティならfreeeさんがすごいです。困ったらnakaneさんにきくのです↓
- slack #a11y / Workplace アクセシビリティ