レスポンシブなレイアウトで CSS の order や column-reverse によって見た目の順番だけを変えると、キーボード操作と読み上げの順番が見た目と食い違うことを解説する。HTML の論理的な読み順を保つべきだと論じる。
シェアックリップ
シェアされたアックリップです。
そのほかの #スクリーンリーダー ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
画像の文字を読み取ってコピーできるChrome拡張「Scribe」の公開までを、目の見えない作者が書いた記事である。結果欄で矢印キーが効かない問題はNVDAのブラウズモードによるものと切り分け、Tabキーで編集欄へ移る案内で対処した。Geminiに画像を送る前の同意画面も紹介している。
スクリーンリーダーを使う視覚障害のある筆者が、ウェブサイトのログイン画面で遭遇する障壁を解説した記事である。ラベルのないサインインアイコン、パスワード表示の切り替え、チェックボックス、分割された二段階認証の入力欄などを取り上げる。
WordPressのヒーロースライダーで、画像をWebPに変換するだけでなく、優先読み込み・遅延読み込み・レイアウト確保を組み合わせ、表示されていないスライドをaria-hiddenで読み上げ対象から外す手法を解説する記事。
axe、Chrome DevTools、スクリーンリーダーがアクセシビリティの経路の異なる場所を見ていることを整理し、自動検査が通っても、キーボード操作や読み上げの確認は別に必要だと解説している。
視覚障害のある人向けのテック番組『Double Tap』で、Amazonの新しいAlexaタブレットを検証する動画。TalkBackでの初期設定やタッチ操作の位置ずれ、点字ディスプレイとキーボードの接続を確かめる。
そのほかの #キーボード操作 ピックアップ
開発中のプロダクトの作業を公開するとき、1つの操作をキーボードだけで試し、開始状態・フォーカスの移動・結果を記録して共有する方法を解説する。確認した範囲と確認しなかった範囲も明記する。
モーダルダイアログのフォーカス管理を解説する記事。フォーカスをダイアログ内に閉じ込める実装と、閉じたあとに元の要素へ戻す挙動を扱う。HTML の dialog 要素を使えば、背景の操作を止める処理を自前で書かずに済むとする。
Fluent UIのReact v9とWeb Componentsが、Shadow DOMやPortal、ダイアログでフォーカスやキーボード操作をどう扱っているかを、公式ドキュメントとソースで確かめながら論じる記事である。UIライブラリの設計判断が主題である。
専門家のいないチームが取り組めるよう、WCAG 2.2の87項目から実害の多い7項目を絞った記事。キーボード操作、ラベル、代替テキスト、コントラスト、見出し、色以外の手がかり、フォーカスの表示を扱う。
管理画面の共通シェルに、キーボードや読み上げ利用者が本文へ直接移動できるスキップリンクを追加した修正の解説である。クリック時だけ main に一時的に tabindex を付ける手法と、装飾アイコンを支援技術から隠す設定を扱う。
AIで作ったWordPressのページを公開前に確認する項目を紹介する記事。文字と背景の差、代替テキスト、見出しの順序、キーボード操作、エラーの伝え方の5項目を挙げ、自動ツールに任せる検査と人が操作する検査を分ける方法を示す。