Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Linterからはじめるa11y

nacal
August 23, 2024

 Linterからはじめるa11y

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

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

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

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

nacal

August 23, 2024
Tweet

Other Decks in Technology

Transcript

  1. 3 ⾃⼰紹介 GMOペパボ ホスティング事業部 for Gamersチーム 初登壇 nacal Nakata Hikaru ロリポップ!for Gamers

    Webアプリケーションエンジニア Next.js, Golang, Ruby on Rails • ⽻⽥空港と成⽥空港を間違えたけどなんとか 北海道に上陸できました • X : @_nacal 初北海道
  2. a11yとは 5 - Webページにある情報や機能の利⽤しやすさ - スクリーンリーダーでコンテンツを理解できる - キーボードのみで操作をすることができる など -

    フロントエンド開発における関⼼や必要性の向上 Webアクセシビリティ さまざまな利⽤者が、さまざまなデバイスを使い、さまざまな状況でウェブを使 うようになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリ ティは必要不可⽋な品質と⾔えます。 引用:https://waic.jp/knowledge/accessibility
  3. a11yやってる? 9 - 専⾨的な知識が必要 - 複雑な要素に対する正しい知識を得ることへのハードル - 有志の取り組みだけでなくチームや組織に啓発していく必要がある - ⼿が回らない

    - プロダクト開発における優先度の難しさ - やっていきたいが何からはじめたらいいか分からない → Linterからはじめてみる a11yに対するハードル
  4. Linterからはじめるa11y 12 - 専⾨的な知識が必要 - Lintによって検知できる、正しい知識を得られる - 共通のルールとして定義できる - ⼿が回らない

    - CIに組み込むことで作業の⼀部にできる - ⼯数⾃体は⼤きく変わらないものが多い Linter導⼊によるa11yに対するハードル
  5. 導⼊実例 14 導⼊先 - minneのNext.jsアプリケーション - jsxファイル数 884 課題 -

    コードベースのa11y 導⼊したもの - jsx-eslint/eslint-plugin-jsx-a11y
  6. 導⼊実例 18 - Linterで検知できないものもある - Linter → コードに対するチェック - アクセシビリティーチェッカーやコントラストチェッカーの活⽤

    - スクリーンリーダーを実際に触ってみる - ⼩さいことからはじめていく - Linterを導⼊することでチームや組織がa11yを意識するきっかけになる - 仲間を増やして浸透させていく これで全て解決...ではない