Linterからはじめるa11y

Webアクセシビリティについて注目が集まる中で、幅広い知識が必要になることや本質的な目的が捉えにくい側面もあり、何からはじめるといいのか分からない人も多くいると感じています。

ここでは、Webアクセシビリティの概要についてお話しした後、Webアクセシビリティ向上のための第一歩としてeslint-plugin-jsx-a11yやmarkuplintなどのLinterの活用について紹介します。

また、これらのLinterを実際の既存プロダクトへと導入した際の体験談や、導入において考慮すべきポイントについてお話しします。

フロントエンドカンファレンス北海道2024での発表資料です。

Transcript

1. 1 Linterからはじめるa11y nacal フロントエンドカンファレンス北海道2024 2024.08.24
2. 2 アジェンダ 1. a11yとは 2. a11yやってる？ 3. Linterからはじめるa11y 4. 導⼊実例 5. まとめ
3. 3 ⾃⼰紹介 GMOペパボ ホスティング事業部 for Gamersチーム 初登壇 nacal Nakata Hikaru ロリポップ！for Gamers Webアプリケーションエンジニア Next.js, Golang, Ruby on Rails • ⽻⽥空港と成⽥空港を間違えたけどなんとか 北海道に上陸できました • X : @_nacal 初北海道
4. 1. a11yとは 4
5. a11yとは 5 - Webページにある情報や機能の利⽤しやすさ - スクリーンリーダーでコンテンツを理解できる - キーボードのみで操作をすることができる など - フロントエンド開発における関⼼や必要性の向上 Webアクセシビリティ さまざまな利⽤者が、さまざまなデバイスを使い、さまざまな状況でウェブを使 うようになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリ ティは必要不可⽋な品質と⾔えます。 引用：https://waic.jp/knowledge/accessibility
6. 2. a11yやってる？ 6
7. a11yやってる？ 7 ① めっちゃやってる ② ちょっとやってる ③ やりたいがやれていない ④ やりたいと思わない Webアクセシビリティやってる？
8. a11yやってる？ 8 ① めっちゃやってる ② ちょっとやってる ③ やりたいがやれていない ④ やりたいと思わない Webアクセシビリティやってる？
9. a11yやってる？ 9 - 専⾨的な知識が必要 - 複雑な要素に対する正しい知識を得ることへのハードル - 有志の取り組みだけでなくチームや組織に啓発していく必要がある - ⼿が回らない - プロダクト開発における優先度の難しさ - やっていきたいが何からはじめたらいいか分からない → Linterからはじめてみる a11yに対するハードル
10. 3. Linterからはじめるa11y 10
11. Linterからはじめるa11y 11 - ESLint - jsx-eslint/eslint-plugin-jsx-a11y - vue-a11y/eslint-plugin-vuejs-accessibility - Biome - Accessibility rules - markuplint - Accessibility rules 各Linterにおけるa11y
12. Linterからはじめるa11y 12 - 専⾨的な知識が必要 - Lintによって検知できる、正しい知識を得られる - 共通のルールとして定義できる - ⼿が回らない - CIに組み込むことで作業の⼀部にできる - ⼯数⾃体は⼤きく変わらないものが多い Linter導⼊によるa11yに対するハードル
13. 4. 導⼊実例 13
14. 導⼊実例 14 導⼊先 - minneのNext.jsアプリケーション - jsxファイル数 884 課題 - コードベースのa11y 導⼊したもの - jsx-eslint/eslint-plugin-jsx-a11y
15. 導⼊実例 15 GMOペパボ - Web Accessibility Guidelines を元にルールを精査 導⼊ルールの精査 ※各Linterにあるrecommended設定からはじめてもよい
16. 導⼊実例 16 - 結構な数が警告された → できることからはじめる - まずはwarningに設定し、コツコツ解消していく 導⼊
17. 導⼊実例 17 - reviewdogからの警告 - チームがa11yを意識するきっかけとなった 導⼊してみて
18. 導⼊実例 18 - Linterで検知できないものもある - Linter → コードに対するチェック - アクセシビリティーチェッカーやコントラストチェッカーの活⽤ - スクリーンリーダーを実際に触ってみる - ⼩さいことからはじめていく - Linterを導⼊することでチームや組織がa11yを意識するきっかけになる - 仲間を増やして浸透させていく これで全て解決...ではない
19. 5. まとめ 19
20. 20 まとめ - フロントエンド開発におけるアクセシビリティの重要性 - 専⾨的な知識が必要な点やチームとしての取り組み⽅に課題を感じる - Linterの導⼊からはじめてみる - できることから、ちいさくはじめる - Linterを⼊れて終わりではなく、仲間を増やしていく
21. 21 Thank you!