支援技術と WCAG の読み方から、見出し・ランドマーク・フォーム・代替テキスト、ARIA の役割と状態、フォーカス管理とモーダル、コントラストと拡大、そして自動チェックの限界まで。全20レッスンで「自分のページを自分で点検して直せる」ところまで進みます。悪い例と良い例をブラウザ上に並べて、実際に Tab キーで触りながら確かめられます。
全20レッスンを5つの章に分けています。第1章から順に進めるのがおすすめですが、 気になるところだけ拾い読みしてもかまいません。 例はブラウザ内でそのまま動かせます。Tab キーで触って確かめるものが多いので、マウスから手を離して試してください。
支援技術の種類、WCAG の読み方、規格と実務の関係を押さえ、キーボードと読み上げで自分のページを触ってみます。第4回までで「何を確かめればよいか」が分かるようになります。
見出し・ランドマーク・リンクとボタン・フォームのラベル・代替テキスト・表を、Chrome のアクセシビリティツリーで確かめながら書き直します。実務で出る問題の大半は、この章の内容で消えます。
role と状態、フォーカスの管理、モーダルダイアログ、動的な更新の知らせ方を扱います。最後は dialog と aria-live を使って、開いて閉じて通知するまでを組み立てます。
コントラスト比の計算、文字 200% とリフロー 320px、動きの抑制と色以外の手がかりを、すべて数値で確かめます。デザインの段階で決められることが、この章にまとまっています。
axe-core・pa11y・Lighthouse を実際に走らせ、見つかるものと見つからないものを実測で並べます。最後に、手で確かめる手順とチームへの残し方を決めます。
全20レッスンを終えたら、実践課題 マウスを使わずに送れるフォームを作る で通しで書いてみてください。土台を固め直すなら HTML/CSS 入門コース、設計の側から見るなら UI/UX デザインと Figma 入門コース へ。メンバーシップで全コースが解放されます。