tabindex に1以上の値を付けると Tab の移動順が画面の見た目とずれることを、axe-core と Tab キーでの動作確認で示し、属性を削除して直す手順を解説する。
シェアックリップ
シェアされたアックリップです。
そのほかの #キーボード操作 ピックアップ
レスポンシブなレイアウトで CSS の order や column-reverse によって見た目の順番だけを変えると、キーボード操作と読み上げの順番が見た目と食い違うことを解説する。HTML の論理的な読み順を保つべきだと論じる。
開発中のプロダクトの作業を公開するとき、1つの操作をキーボードだけで試し、開始状態・フォーカスの移動・結果を記録して共有する方法を解説する。確認した範囲と確認しなかった範囲も明記する。
モーダルダイアログのフォーカス管理を解説する記事。フォーカスをダイアログ内に閉じ込める実装と、閉じたあとに元の要素へ戻す挙動を扱う。HTML の dialog 要素を使えば、背景の操作を止める処理を自前で書かずに済むとする。
Fluent UIのReact v9とWeb Componentsが、Shadow DOMやPortal、ダイアログでフォーカスやキーボード操作をどう扱っているかを、公式ドキュメントとソースで確かめながら論じる記事である。UIライブラリの設計判断が主題である。
専門家のいないチームが取り組めるよう、WCAG 2.2の87項目から実害の多い7項目を絞った記事。キーボード操作、ラベル、代替テキスト、コントラスト、見出し、色以外の手がかり、フォーカスの表示を扱う。
管理画面の共通シェルに、キーボードや読み上げ利用者が本文へ直接移動できるスキップリンクを追加した修正の解説である。クリック時だけ main に一時的に tabindex を付ける手法と、装飾アイコンを支援技術から隠す設定を扱う。
そのほかの #axe ピックアップ
AIがアクセシビリティをレビューできる範囲は、ソースコードだけを読むか、実行中のブラウザーやaxe-coreの結果まで受け取れるかによって変わると整理する。WCAG適合と自動テストの合格は同じではないことも説明する。
アクセシビリティ・オーバーレイを導入した62サイトを、導入の有無で比べた研究を紹介する動画。axe-core による自動テストでは、約9割のサイトでWCAG違反の数に測定できる差は見られなかったという。
axe、Chrome DevTools、スクリーンリーダーがアクセシビリティの経路の異なる場所を見ていることを整理し、自動検査が通っても、キーボード操作や読み上げの確認は別に必要だと解説している。
銀行のWebサイトの監査を題材に、自動チェック・支援技術に見える情報の確認・NVDAによるスクリーンリーダーのテストなどを組み合わせ、どのツールをどの問題に使うかを判断する手順を示す動画。
Reactでアイコンだけのボタンやリンクに名前がないと、スクリーンリーダーが「button」とだけ読み上げる問題を扱う。aria-labelや視覚的に隠したテキストで名前を付ける方法を、axeの検査結果とともに示す。
筆者が監査した小規模事業者のサイトでは、自動チェックツールが見つけた WCAG 違反は全体の30〜40％程度だったと述べ、スクリーンリーダーでの読み上げや代替テキストの内容、キーボードでの操作など、人の確認が要る項目を挙げる。
そのほかの #Lighthouse ピックアップ
ناحیههای لمسی و بزرگنمایی (Touch Target & Zoom): چرا اندازه و مقیاسپذیری در موبایل حیاتی است؟ 📱
記事 海外
モバイルでタッチ領域を十分な大きさにすることと、拡大縮小を妨げないことを、コード例つきで解説する。タッチ領域の下限は WCAG 2.2 の AA 基準にあたる 24×24px とする。
Semantic HTMLの基本と、アクセシビリティ・SEO・コード保守性に対する3つの利点を解説。Lighthouse監査を例に、`<main>`ランドマーク追加などの改善方法と、その効果を実測値で示す。
14の小売店を対象にした自動アクセシビリティスキャンで最も多かった問題5点と修正方法を紹介。コントラスト不足、フォームラベルの欠落、alt属性の欠落など、午後数時間で実装できる具体的な対策をLighthouseとaxe DevToolsを使った検証方法とともに示す。
全国810大学を対象にウェブアクセシビリティを自動診断した大規模調査。99.1%に問題が検出。国立大学は画像の代替テキスト欠落、私立大学はUIの役割・キーボード操作の問題が多く、設置区分によって課題が異なることが明らかに。
アクセシビリティをチェック・テストするためのツール・拡張機能・スクリーンリーダーの一覧。自動チェック、コントラスト測定、スクリーンリーダー利用など、成果物検証の手段を紹介している
セマンティックHTMLの重要性とスクリーンリーダーへの影響を解説。著者のポートフォリオサイト監査で発見した3つの問題——画像のalt属性欠落、フォームラベルの接続不良、見出し階層のスキップ——と修正方法を紹介する。