https://www.notion.so/images/page-cover/met_vincent_van_gogh_ginoux.jpg
←back

ライトに始めるアクセシビリティチェック

2022/10/04

パートナーさんのwebページをaxeDevToolsでをスキャンして見てると大抵、

おっふ。

となれます 😇

↓はdocomoさんのコーポレートのTOPをscanしたものです。

ちゃんとやってるサービスならIssueは2桁に納まります。(freeeさんのTOP34Issueです)

/public/images/astronotion/a5641fc5-dc8d-4507-8acb-b54fa0565f0e_Untitled.png
  • axeによるscanと chrome標準のElement > Accessiiblity(あまり知られてない) を駆使すると、一般的にまずいものはかなり可視化されると思います。
  • 併せて、Mac標準の読み上げツール、VoiceOver (option+TouchIdを3回で起動)でページを読ませてみてみると、またおっふとなれて、アクセシビリティがんばりたくなってくるとおもいます。
    • 目をつぶってサイト操作して、目的の場所にたどり着ければOKなんですが、、、

じゃあどうやって直す?

webだとfreeeさんとcyberさんがそれぞれガイドラインを公開しているので、まずさらっと一読するのがオススメです。

その上でWCAGで各論をみにいきます

freeeさんがデザイン・コーディング・QA用のチェックリストを公開してる

https://docs.google.com/spreadsheets/d/1nRnqXG2tRQ7wLTkEAE1o8N-7s9500h4B2Gj3l7AbKL4/edit#gid=2136964974

  • とりあえず作ったものを眺めながら、ぽちぽちチェックしてみるとよさげです。

研修資料も公開してる

https://developers.freee.co.jp/entry/a11y-training

アクセシビリティちゃんとやってるサービスの事例

いろいろツールがある

要素やコンポーネント実装の参考に

結論

アクセシビリティならfreeeさんがすごいです。困ったらnakaneさんにきくのです↓

  • slack #a11y / Workplace アクセシビリティ
←back