マウスでは問題なく操作できるWebページが、キーボードでは使えなくなる典型的な箇所を解説する記事。クリックにしか反応しないdiv、フォーカスの枠の削除、固定ヘッダーの陰に隠れるフォーカス、ダイアログのフォーカス管理を扱う。
シェアックリップ
シェアされたアックリップです。
そのほかの #キーボード操作 ピックアップ
ホームページのトップで自動的に切り替わる画像について、読む人が止めたり前の案内に戻ったりできるように見直す方法を解説する。停止やキーボード操作の確認手順、見学会などの重要な案内をスライドの外にも置く考え方を含む。
テスト用の一時受信箱のような一覧にReactで検索と未読フィルタを付けるとき、アクセシブルに作る方法を解説する。読み込み中・該当なし・エラーの状態を分けて設計することや、件数の伝え方、フォーカスの保ち方を扱う。
視神経萎縮などで見えにくさのある人がスクリーンリーダー・拡大表示・キーボード操作を使う前提で、開発者が最初に押さえたい基本をまとめた記事である。意味のあるHTML、ラベル、フォーカス管理、変化の知らせ方、テストの方法を扱う。
クリックできる要素が <button> で作られているか、<div> などで代わりに作られていないかを確かめる方法を解説する記事である。<div> は、自分で補わない限り、Tab キーで移動できず、スクリーンリーダーにもボタンとして伝わらない。
レスポンシブなレイアウトで CSS の order や column-reverse によって見た目の順番だけを変えると、キーボード操作と読み上げの順番が見た目と食い違うことを解説する。HTML の論理的な読み順を保つべきだと論じる。
開発中のプロダクトの作業を公開するとき、1つの操作をキーボードだけで試し、開始状態・フォーカスの移動・結果を記録して共有する方法を解説する。確認した範囲と確認しなかった範囲も明記する。
そのほかの #WCAG ピックアップ
（引用）アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
研修資料の文字と背景の色の組み合わせを、WebAIM Contrast Checkerで一組ずつ測る方法を解説する。入力の手順と、コントラスト比をWCAG AAの通常文字の基準に照らして読む方法を、架空の文例で示す。
Storyblok の編集画面（Visual Editor）に、自動のアクセシビリティ検査機能が追加されたことを伝える記事。axe-core を使って WCAG 2.0〜2.2 の A・AA を検査し、違反箇所は編集画面から直接修正できる。自動検査で見つかるのは一部だけなので、手動の検証と併用すべきだと書いている。
Playwright と @axe-core/playwright で、WCAG の A・AA の違反を自動テストで見つける方法を解説する記事。メニューを開いた状態のような操作後の画面を検査する書き方や、既知の問題を除いて新たな違反だけを検出する方法を扱う。自動テストで検出できるのは一部であることも書いている。
色のコントラストを測る2つの方式、WCAG 2 のコントラスト比と APCA（Lc 値）の違いを解説する記事。WCAG 2 の計算の手順、達成基準ごとに必要な比率、WCAG 2 の限界と APCA の位置づけを扱う。法律や規格で使われているのは WCAG 2 のコントラスト比だと書いている。
そのほかの #WAI-ARIA ピックアップ
Four form components hold every form in our app, and writing this post found the one bug in them
記事 海外
アプリ「Nakodo」のフォーム部品の設計を解説する記事。失敗の通知と成功の通知で role を使い分ける理由と、入力欄の補足（ヒント）が入力欄に関連付けられておらず、スクリーンリーダーで読まれない不具合を扱う。
WordPressのヒーロースライダーで、画像をWebPに変換するだけでなく、優先読み込み・遅延読み込み・レイアウト確保を組み合わせ、表示されていないスライドをaria-hiddenで読み上げ対象から外す手法を解説する記事。
WordPressのヒーロースライダーの画像を、PNGからWebPに変えて合計約7.8MBから約316KBへ軽くした手順を解説する。あわせて、非表示のスライドを aria-hidden で読み上げの対象から外す方法と、Playwright による自動確認を紹介する。
モーダルダイアログのフォーカス管理を解説する記事。フォーカスをダイアログ内に閉じ込める実装と、閉じたあとに元の要素へ戻す挙動を扱う。HTML の dialog 要素を使えば、背景の操作を止める処理を自前で書かずに済むとする。
Fluent UIのReact v9とWeb Componentsが、Shadow DOMやPortal、ダイアログでフォーカスやキーボード操作をどう扱っているかを、公式ドキュメントとソースで確かめながら論じる記事である。UIライブラリの設計判断が主題である。
Shadow DOM の内側にあるボタンなどの要素が、支援技術にどう伝わるかを扱う記事である。DOM・Accessibility Tree・プラットフォーム API の関係を仕様と Chrome での観察から整理し、カスタム要素に意味を持たせる設計の選択肢を示している。