勉強会参加メモ：Front-End Study 3「『当たり前』をつくりだすWebアクセシビリティ」
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
