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

アクセシビリティ_株式会社ニジボックス Katsuhito Karube

アクセシビリティ_株式会社ニジボックス Katsuhito Karube

リクルートグループ主催!『大規模メディアにおけるWeb開発の最前線』
https://business-and-creative.connpass.com/event/188628/

株式会社NIJIBOX

December 18, 2020
Tweet

More Decks by 株式会社NIJIBOX

Other Decks in Programming

Transcript

  1. 達成基準 WCAG (Web Content Accessibility Guidelines) W3C の Web Accessibility

    Initiative (WAI) が勧告 WCAG 2.1 が最新(2.2 の勧告は2021年の予定) 国際的には ISO/IEC 40500:2012 (WCAG 2.0 の内容) 国内では JIS X 8341-3:2016 (WCAG 2.0 の内容)
  2. アクセシビリティ要件 • role=”alert” をつける • 「閉じる」ボタンが button として認識される • Tab

    キーで「閉じる」ボタンにフォーカス • 「閉じる」ことが明示される • Enter キーなどでクリックの代替操作ができる • カラーコントラスト
  3. アクセシビリティ要件 • role=”alert” をつける • 「閉じる」ボタンが button として認識される • Tab

    キーで「閉じる」ボタンにフォーカス • 「閉じる」ことが明示される • Enter キーなどでクリックの代替操作ができる • カラーコントラスト 定義されない事が多い

  4. アクセシビリティ要件 • role=”alert” をつける • 「閉じる」ボタンが button として認識される • Tab

    キーで「閉じる」ボタンにフォーカス • 「閉じる」ことが明示される • Enter キーなどでクリックの代替操作ができる • カラーコントラスト エンジニアの裁量

  5. WCAG 適合をチェックするツール • Lighthouse • URL を入力して計測するタイプ • 外部から css

    を挿入してハイライトするものまで 機械には限界がある

  6. お名前 送信する あ メールアドレス お住まいの住所 郵便番号 選択してください 都道府県 ︙ 書類送付先住所

    郵便番号 選択してください 都道府県 ︙ 形式が正しくありません。 aria-invalid=”true”