ちびのはてな

「ちび(猫)」と「キノコ」から生まれた「ちびキノコ」。ドラゴンボール最強!純粋なサイヤ人のように生きたいと思っているモノ作りを楽しむ人です。IT技術で少しでも多くの人が笑顔になってくれたらいいなと。

勉強会参加メモ:Front-End Study 3「『当たり前』をつくりだすWebアクセシビリティ」

f:id:chibi929:20210716222128p:plain
Front-End Study #3 メモ

PlantUML Raw Data

@startmindmap 210113_FEStudy
title "Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」"

+ FEStudy#3
++ Webエンジニアとしていま知っておきたいWebアクセシビリティ@ymrl 氏
+++ アクセシビリティとは
++++ ユーザービリティ: 特定の状況で、特定のユーザーにとって使いやすいこと
++++ アクセシビリティ: あらゆる状況で、あらゆるユーザーにとって使いやすいこと
++++ よくある誤解
+++++ 高齢者・障がい者のためのもの
+++++ 一般ユーザーは関係ない
++++ 減点法で捉えられがち
+++++ やってないと怒られる
+++++ 完璧にしないといけない
++++ 加点法で捉えよう
+++++ やることですべてのユーザーを幸せにする可能性があるもの
+++++ やればやるほど品質が上がるもの
+++ キーワード
++++ WCAG (Web Contents Accessibility Guidelines)
+++++ A, AA, AAA と難易度がある。AAAを全て網羅するのは不可能
+++++ https://waic.jp/docs/WCAG21/
+++++ https://waic.jp/docs/WCAG21/Understanding/
++++++ 解説書も一緒に読んだほうがいい
++++ WAI-ARIA
+++++ どんな UI なのかを伝える HTML 属性
+++++ aria-label, aria-modal などなど
+++++ WAI-ARIA Authoring Practice
++++++ https://waic.jp/docs/2019/NOTE-wai-aria-practices-1.1-20190207/
++++ 組織独自のガイドライン
+++++ Ameba: https://openameba.github.io/a11y-guidelines/
+++++ freee: https://a11y-guidelines.freee.co.jp/
++++ 検証ツール
+++++ aXe
++++++ 定番ツール
+++++ Lighthouse
++++++ Chrome に搭載されている
+++++ eslint-plugin-jsx-a11y, eslint-plugin-vue-a11y
++++++ React や Vue ならコレ
+++++ Visible, acot
++++++ 新しく出てきたツール
++++ 法的な制約
+++++ 欧米ではWebアクセシビリティに取り組むのは義務である
+++ 資料
++++ https://docs.google.com/presentation/d/1uhCvhh6sZCPUnReSBVDjvGfNAOTKbZ5Sxs8fYMlxMsI/edit
++++ https://zenn.dev/ymrl/articles/7f41ad2f39f714
-- これからもつづけるWebアクセシビリティ@yamanoku 氏
--- チェックしてみる
---- Lighthouse
---- aXe
---- WCAG の達成基準でチェック
----- とりあえずレベルAを目指そう
---- 企業ガイドライン
----- Abema, freee, 三井住友銀行
--- 対応してみる
---- 健全なマークアップ
---- WAI-ARIA
---- 静的解析ツール
----- React: eslint-plugin-jsx-a11y
----- Vue: eslint-plugin-vue-a11y, eslint-plugin-vuejs-plugin-accessibility
------ 後者が最新らしい
----- Angular: codelyzer
----- ESLint にルール追加が難しい場合はローカルだけで実行するだけでも良い
------ ルール追加しちゃうとエラーだらけだからね
------ 途中から Linter 追加は地獄
----- @storybook/addon-a11y
------ Storybook: UI 開発環境
--- 資料
---- https://docs.google.com/presentation/d/1bWjpa1WwL-gQT7misOvC0TOKersl-m2pyE-LIP-kWbk/edit
-- 実践!Reactで学ぶアクセシビリティ@五十嵐涼 氏
--- キーワード
---- VoiceOver
---- 区分化要素
---- WAI-ARIA Authoring Practice
----- ダイアログの例とかパンくずの例とか載ってるよ
---- testing-library/react
----- Vue 版もあるよ
------ testing-library/vie
---- getByRole
--- Next.js は _document.tsx を作らないと言語設定できない
--- alt属性付けようね
--- アイコンボタンには aria-label 付けようね
--- SPA で動的にページが切り替わったときにフォーカス変えてあげようね
--- tabIndex はインタラクティブな要素はデフォルトでフォーカスが当たる
--- モーダルダイアログの後ろにフォーカスが行ってしまう
---- フォーカストラップ案件
----- aria-modal
----- role="dialog"
----- open なときに ref を focus を当てる
---- モーダルを閉じたときにフォーカスが飛ぶ
----- onClose な処理なときに ref で focus を当てる
---- 健全なマークアップはテストを書くときにも重要
--- 資料
---- https://github.com/neet/accessible-react-101
---- https://zenn.dev/neet/articles/8b4d8d42fb2a5e

@endmindmap