だれのためか
目が見えない人だけでなく、見えにくい人、手を動かしにくい人、年をとった人、けがをしている人も使います。まず押さえる 5 つの基本はフロントエンドの基礎「アクセシビリティ」にあります。
どんな人が、どう使っているか
法律の決まりと、使う人の数
WCAG 2.2 と JIS
WCAG は W3C の決まりで、4 つの原則・13 のガイドライン・達成基準でできています。達成基準には A・AA・AAA のレベルがあり、まず目指すのは AA です。
達成基準の地図 レベルと原則で、しぼれます
どこまで満たすか・日本の規格
意味のある HTML
読み上げもキーボードも、HTML の意味を手がかりにしています。見出し・button と a・label の基本はフロントエンドの基礎「HTML」に。ここでは、勤怠の画面でつまずきやすい所です。
代替テキストの練習 場面は作り物です
悪い HTML を直す 考え方のヒント
打刻の修正申請の画面に、わざと 8 つの問題を入れました（作り物）。怪しいと思う行を押してください。
見つけた問題
キーボードだけで使えるか
マウスを使わない人は、Tab で次の部品へ、Shift + Tab で前へ進み、Enter やスペースで押します。悪い作りと良い作りで、同じフォームを比べてみてください。
キーボードだけで、修正申請を出してみる フォームは作り物で、どこにも送りません
枠の中の「日付」を押してから、Tab キーで進んでください。キーボードが無いときは、下のボタンで Tab を押したことにできます（ボタンは部品ごとに進みます。本物の Tab は、ブラウザによっては日付と時刻の欄の中の、年・月・日や時・分の区切りごとにも止まります）。
読み上げの目安（フォーカスが来た順）考え方のヒント
色とコントラスト
文字と背景の明るさの差（コントラスト比）は、計算で確かめられます。色を選ぶか、例を押してください。色だけで伝えないことも、あわせて見ます。
コントラスト比の計算機
色だけで伝えていないか 勤怠のカレンダーの作り物
ARIA を使う前に
ARIA は、HTML だけでは伝えられない役割や状態を、支援技術に伝える属性です。強い道具なので、間違えると、かえって使えなくなります。まず HTML の部品で足りないかを考えます。
名前はどれになる？ 付ける物を選ぶと、支援技術に伝わる入力欄の名前（アクセシブルな名前）が変わります
ARIA を足す？ 直す？
確かめ方
道具で分かるのは一部です。道具 → キーボード → 拡大 → 読み上げの順で確かめ、できれば実際に使う人にも試してもらいます。
道具で分かる？ 人が確かめる？
確かめる順番
読み上げソフトの最初の一歩
AI 時代AI とアクセシビリティ
AI は、それらしい画面も代替テキストもすぐに作ります。読み上げの道具も AI で賢くなりました。それでも、確かめるのは人です。
チェックリスト
画面を作ったら、確かめたものにチェックを付けてください（この端末にだけ保存されます）。考え方のヒント