Webサイトのアクセシビリティを検証する7つの観点を示した記事である。キーボード操作、セマンティックなHTML、コントラストとズーム、フォーム、代替テキスト、動的なコンポーネント、自動チェックと手動QAの併用を扱う。
シェアックリップ
シェアされたアックリップです。
そのほかの #キーボード操作 ピックアップ
フロントエンド入門連載の一回で、セマンティックなHTMLが支援技術に意味を伝える仕組みと、キーボードだけで操作できるかをPlaywrightで点検する方法を、Vueのコード例で解説する。
アクセシビリティの不具合で利用者や取引を失った経験があるかを読者に問いかける記事。Tab で飛ばされるクリック要素、「ボタン」としか読まれないアイコンボタン、入力欄と結び付かないラベルといった見落としやすい不具合の例と、マウスを外してキーボードだけで主要な操作を終える5分の確認法を挙げる。
ブックマークレット「Tab trail」の紹介。ページ上で Tab の移動順を番号付きで描き、キーボードで届かない操作要素、Tab 押下時のフォーカスの飛び、隠れたフォーカスなど7種類の問題を赤く示す。Playwright のテストからも呼び出せる。
モーダルダイアログを開いたとき、Tab キーでフォーカスが背後のページへ抜けないようにする方法を解説する。ネイティブの dialog 要素（showModal()）の使い方、Escape キーで閉じられるようにすること、閉じたあとにフォーカスを開いたボタンへ戻すことを扱う。
VoiceOver に対応した小型のボタン式キーボード「Rivo3」を、サイトワールド2026の会場で試した感想を書いた記事。画面をタッチするジェスチャー操作と物理ボタンでの操作を比べ、ボタン操作でストレスが減ったと述べる。
キーボードで並べ替えボタンを押すとフォーカスが消える不具合を、disabled から aria-disabled に変えて直した。無効な部品の見た目は、WCAG 1.4.11 の例外に当たるかが仕様で決まっていないため、透明度ではなく色で3:1を満たす方法を選んでいる。
そのほかの #代替テキスト・alt ピックアップ
W3Cの資料をもとに、画像の役割を決めてから代替テキストを考える方法を解説している。絵本の紹介に添える画像を例に、AIに画像と前後の文章を渡して代替テキストの案を作ってもらう相談文も示している。
READMEやドキュメントに載るアニメーションGIFや短い動画の代替テキストの書き方を解説する。アニメーションが示す結果を書き、画面上に表示される文字を含める。装飾的な動きには空の代替テキストを付ける。
問い合わせフォームのアクセシビリティ監査で見つかった問題を、セマンティックHTMLの書き方で直した過程を記した記事である。label と input の結び付け、fieldset と legend によるグループ分け、画像の alt の付け方を扱っている。
ソフトウェアのドキュメントに載せるスクリーンショットの代替テキストの書き方を解説する記事である。画像の目的から書き始め、画面の状態を書くこと、手順の情報を画像の中だけに置かないこと、装飾的な画像には空の代替テキストを使うことを扱う。
AIで作ったLPを公開する前に確かめる7項目を紹介する記事。W3C WAIのEasy Checksを基に、ページのタイトル・代替テキスト・見出し・コントラスト・文字の拡大・キーボード操作・フォームを点検する。
画像を見ることが難しい人に内容を伝える代替テキストを、AIに文案として頼む前に、そのページで伝えたい意味を一行で決めておく方法を紹介する。装飾画像に空のalt属性を使う判断にも触れている。
そのほかの #フォーム ピックアップ
読み込み中の表示でレイアウトを動かさず、次に何をすべきか、失敗したときにどうするかを伝える方法を React で示す記事。aria-busy や role の使い分けも解説する。
Liquitousが2026年10月に行ったアクセシビリティ向上の取り組みを報告する。フォーム部品をデザインシステムの部品に置き換えたこと、読み上げ用の文言の多言語対応、入稿画面にコンテンツのチェック機能を組み込んだことなどが書かれている。
フォームの入力エラーで、どの欄をどう直すかを案内する方法を、申込みフォームを例に解説している。エラー文から該当欄へ移れること、直す以外の入力を残すことを挙げ、WCAG 2.2のエラー特定と修正の提案に触れている。
JIS X 8341-3の改正でベースとなる規格がWCAG 2.2へ移る予定を受け、タップ領域やフォーム入力、フォーカス表示など追加される達成基準の要点を整理した記事。縦書きや改行、IME入力など日本語特有の配慮も扱う。
問い合わせフォームのアクセシビリティ監査で見つかった問題を、セマンティックHTMLの書き方で直した過程を記した記事である。label と input の結び付け、fieldset と legend によるグループ分け、画像の alt の付け方を扱っている。
スクリーンリーダーを使う視覚障害のある筆者が、支払い方法の登録フォームで遭う障壁をまとめた記事。有効期限の入力欄、請求先住所の選択、既定のカードの設定の3点で、読み上げが合わず操作できない例を挙げる。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
フロントエンド入門連載の一回で、セマンティックなHTMLが支援技術に意味を伝える仕組みと、キーボードだけで操作できるかをPlaywrightで点検する方法を、Vueのコード例で解説する。
アクセシビリティの不具合で利用者や取引を失った経験があるかを読者に問いかける記事。Tab で飛ばされるクリック要素、「ボタン」としか読まれないアイコンボタン、入力欄と結び付かないラベルといった見落としやすい不具合の例と、マウスを外してキーボードだけで主要な操作を終える5分の確認法を挙げる。
Claude Code で作った Next.js アプリ14件を WCAG 2.1 AA に適合させた作者の報告。AI が誤った ARIA を出すことを前提に、CLAUDE.md にアクセシビリティの要件を書く、ダイアログなどは shadcn/ui の部品を使う、画面ごとに axe-core で検査する、という手順を示す。
ブックマークレット「Tab trail」の紹介。ページ上で Tab の移動順を番号付きで描き、キーボードで届かない操作要素、Tab 押下時のフォーカスの飛び、隠れたフォーカスなど7種類の問題を赤く示す。Playwright のテストからも呼び出せる。
企業がWCAG 2.2 AAの試験結果を公開し、直したことと直さなかったことを記録した経緯を書いた記事。キーボード操作や読み上げに関わる改修と、コントラストを改めなかった判断を紹介する。