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

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

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

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

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

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

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

実際に作ってみたはいいものの・・・ 🤔これってアクセシビリティ的に大丈夫そう？ <div>を配置することで、デザインを実現できたぜ！

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

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

マシンリーダブルでない場合、支援技術（スクリーンリーダーなど）ではコンテンツとその文脈状のセマンティクスを理解できないため、読み上げられず、結果的に操作が不可能となる <div>だけで構築されたチェックボックスでは、チェックボックスという役割が与えられていないため、チェックされたかどうかの状態を支援技術は読み取ることが困難になり、押されているのか押されていないのかをユーザーに伝えることが出来なくなる 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に準拠したライブラリを使うとこから始めてみるただし、ライブラリを使っているからといって、すべてが解決しているわけでないことに注意
コントラスト比やクリックターゲットの位置とサイズ、インタラクションモデルに対する考慮など、解決しないといけない問題はたくさんあるデザイナーのためのデザインではなく、プロダクトに接する多様なユーザーのためのデザインであることを念頭に、アクセシビリティを実現していくことが求められるまとめ

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

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

たかぎとねこ

More Decks by たかぎとねこ

Other Decks in Programming

Featured

Transcript