チェックボックスから 考えるアクセシビリティ takagimeow

たかぎとねこ フロントエンドエンジニア 今まではRemixフレームワークを中心にひょこひょこ していましたが、最近ではHTML・CSSの仕様やアク セシビリティに関心が向いています 会社 株式会社ドワンゴ N予備校などの教育事業のWebフロント

話さないこと 話すこと アクセシビリティを備えた チェックボックスの具体的な実装方法 アクセシビリティを備えた チェックボックスの実装に関するヒント

あなたはデザイナーさんから、チェックボックスのデザインガイドを渡されました チェックボックスのデザインガイド

Chrome Edge Safari Firefox ブラウザやデバイスによってデフォルトのスタイルが適用されており、 これを完全に上書きするのは難しい

ユーザーエージェントに左右 されず、一貫したデザインと 体験を実現したい ✌️

実際に作ってみたはいいものの・・・ 🤔これってアクセシビリティ的に大丈夫そう？

・知覚可能 ・操作可能 ・理解可能 ・堅牢 WCAG2.2の4つの原則

マシンリーダブルであるかどうか キーボードで操作できるかどうか チェック状態の現在の値が判別可能かどうか etc... アクセシビリティを実現させる上で 考慮すべきこと

マシンリーダブルでない場合、支援技術（スクリーンリーダーなど）ではコンテンツとその文脈状のセマンティク スを理解できないため、読み上げられず、結果的に操作が不可能となる

アクセシビリティオブジェクトモデルに影響を与えず、視覚的に見えなくする Visually Hidden .visually-hidden { position: absolute; width: 1px; height: 1px; white-space: nowrap; clip-path: inset(50%); overflow: hidden; }

Web Accessibility Initiative Accessible Rich Internet Application W3Cによって発行されている仕様 ユーザーエージェントが認識できるセマンティクスを各要素に属性として追加することで、アクセシビリティを向 上させることができるようになる 視認できるが、スクリーンリーダーからは認識することができない複雑なUI（ウィジェット）の問題に対処できる ただし、WAI-ARIAがサポートしている範囲はセマンティクスのみで、振る舞いまではサポート外となっている WAI-ARIAを無闇に多用せず、基本的にはHTMLの要素でセマンティクスを表現可能かどうかを常に考えることが重 要 WAI-ARIA

Radix UI https://www.radix-ui.com/primitives Headless UI https://headlessui.com/ Ark UI https://ark-ui.com/ React Aria https://react-spectrum.adobe.com/react-aria/ etc... WAI-ARIAに準拠した ヘッドレス・React Hooksライブラリを使おう

Radix UIを使って 実装

アクセシビリティは 多様性である 多様な使い方に対して、いつでも利用可能なコンポーネ ントを実現させる 費用対効果に見合わないとして、アクセシビリティがな いがしろになってはいけない WCAGの4つの原則を理解して、WAI-ARIAに準拠したラ イブラリを使うとこから始めてみる ただし、ライブラリを使っているからといって、すべて が解決しているわけでないことに注意 コントラスト比やクリックターゲットの位置とサイズ、 インタラクションモデルに対する考慮など、解決しない といけない問題はたくさんある デザイナーのためのデザインではなく、プロダクトに接 する多様なユーザーのためのデザインであることを念頭 に、アクセシビリティを実現していくことが求められる まとめ