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

手を動かして始めるアクセシビリティ改善

pastak
June 06, 2023
1.6k

 手を動かして始めるアクセシビリティ改善

pastak

June 06, 2023
Tweet

More Decks by pastak

Transcript

  1. 色んなユーザーの例 • マウスが壊れて、キーボード を使うしかなくなった • 骨折して腕が一時的に使えな くなった • スマートフォンの画面が割れ て液晶が映らなくなった

    • 視力が低い・見えない 12 • イヤホンを忘れて、音声を再 生できない • 日本語を理解できない • 小さい字が読めない • ギガを使いすぎて通信制限に あった • 色覚特性を有している
  2. フォーカスリング • フォーカスの可視化(*)をして、キーボード フォーカスを 持っている要素を利用者が認識しやすくするためのアプ ローチの1つ • フォーカス可能な要素にはブラウザ標準でフォーカスリ ングが表示されるようになっているが、 CSS

    で outline: none; を指定していて、非表示に なっていることもしばしば。 21 ※ 達成基準 2.4.7: フォーカスの可視化を理解する https://waic.jp/translations/WCAG21/Understanding/focus-visible.html
  3. ランドマークロールと それらに対応するHTML要素 main <main> navigation <nav> region <section> search <search>

    (*) 37 基本的にはランドマークロールを持つHTMLタグを使えば良 い(右側)が、role属性を付与すること(左側)でも同様の情報 を付与できる banner <header> complementary <aside> contentinfo <footer> form <form> ※ 2023/06/01時点では<search>をサポートしているブラウザはない