1 Linterからはじめるa11y nacal フロントエンドカンファレンス北海道2024 2024.08.24

2 アジェンダ 1. a11yとは 2. a11yやってる？ 3. Linterからはじめるa11y 4. 導⼊実例 5. まとめ

3 ⾃⼰紹介 GMOペパボ ホスティング事業部 for Gamersチーム 初登壇 nacal Nakata Hikaru ロリポップ！for Gamers Webアプリケーションエンジニア Next.js, Golang, Ruby on Rails ● ⽻⽥空港と成⽥空港を間違えたけどなんとか 北海道に上陸できました ● X : @_nacal 初北海道

1. a11yとは 4

a11yとは 5 - Webページにある情報や機能の利⽤しやすさ - スクリーンリーダーでコンテンツを理解できる - キーボードのみで操作をすることができる など - フロントエンド開発における関⼼や必要性の向上 Webアクセシビリティ さまざまな利⽤者が、さまざまなデバイスを使い、さまざまな状況でウェブを使 うようになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリ ティは必要不可⽋な品質と⾔えます。 引用：https://waic.jp/knowledge/accessibility

2. a11yやってる？ 6

a11yやってる？ 7 ① めっちゃやってる ② ちょっとやってる ③ やりたいがやれていない ④ やりたいと思わない Webアクセシビリティやってる？

a11yやってる？ 8 ① めっちゃやってる ② ちょっとやってる ③ やりたいがやれていない ④ やりたいと思わない Webアクセシビリティやってる？

a11yやってる？ 9 - 専⾨的な知識が必要 - 複雑な要素に対する正しい知識を得ることへのハードル - 有志の取り組みだけでなくチームや組織に啓発していく必要がある - ⼿が回らない - プロダクト開発における優先度の難しさ - やっていきたいが何からはじめたらいいか分からない → Linterからはじめてみる a11yに対するハードル

3. Linterからはじめるa11y 10

Linterからはじめるa11y 11 - ESLint - jsx-eslint/eslint-plugin-jsx-a11y - vue-a11y/eslint-plugin-vuejs-accessibility - Biome - Accessibility rules - markuplint - Accessibility rules 各Linterにおけるa11y

Linterからはじめるa11y 12 - 専⾨的な知識が必要 - Lintによって検知できる、正しい知識を得られる - 共通のルールとして定義できる - ⼿が回らない - CIに組み込むことで作業の⼀部にできる - ⼯数⾃体は⼤きく変わらないものが多い Linter導⼊によるa11yに対するハードル

4. 導⼊実例 13

導⼊実例 14 導⼊先 - minneのNext.jsアプリケーション - jsxファイル数 884 課題 - コードベースのa11y 導⼊したもの - jsx-eslint/eslint-plugin-jsx-a11y

導⼊実例 15 GMOペパボ - Web Accessibility Guidelines を元にルールを精査 導⼊ルールの精査 ※各Linterにあるrecommended設定からはじめてもよい

導⼊実例 16 - 結構な数が警告された → できることからはじめる - まずはwarningに設定し、コツコツ解消していく 導⼊

導⼊実例 17 - reviewdogからの警告 - チームがa11yを意識するきっかけとなった 導⼊してみて

導⼊実例 18 - Linterで検知できないものもある - Linter → コードに対するチェック - アクセシビリティーチェッカーやコントラストチェッカーの活⽤ - スクリーンリーダーを実際に触ってみる - ⼩さいことからはじめていく - Linterを導⼊することでチームや組織がa11yを意識するきっかけになる - 仲間を増やして浸透させていく これで全て解決...ではない

5. まとめ 19

20 まとめ - フロントエンド開発におけるアクセシビリティの重要性 - 専⾨的な知識が必要な点やチームとしての取り組み⽅に課題を感じる - Linterの導⼊からはじめてみる - できることから、ちいさくはじめる - Linterを⼊れて終わりではなく、仲間を増やしていく

21 Thank you!