AIで作ったWordPressのページを公開前に確認する項目を紹介する記事。文字と背景の差、代替テキスト、見出しの順序、キーボード操作、エラーの伝え方の5項目を挙げ、自動ツールに任せる検査と人が操作する検査を分ける方法を示す。
シェアックリップ
シェアされたアックリップです。
そのほかの #カラーコントラスト ピックアップ
（引用）アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
専門家のいないチームが取り組めるよう、WCAG 2.2の87項目から実害の多い7項目を絞った記事。キーボード操作、ラベル、代替テキスト、コントラスト、見出し、色以外の手がかり、フォーカスの表示を扱う。
ダークモードでもWCAG 2.1のコントラスト基準（1.4.3・1.4.11）はテーマごとに適用されると説明し、純黒の背景や鮮やかな色が基準を外しやすいことや、prefers-color-schemeのテストが漏れやすいことを扱う記事。
Windowsのハイコントラストモードなどで有効になるforced-colorsでは、ブラウザが背景色や影をOSの固定パレットに置き換えるか消す。見た目だけで作ったボタンが背景と区別できなくなる仕組みを、実際の不具合の経緯とともに説明する。
筆者のサイト5頁を、キーボードだけでの操作、入力欄の名前、文字の濃さ、見出しの順の4点でWCAG 2.2に照らして数えた実測記録。
色だけで情報を伝えないことと、WCAG AA のコントラスト比（通常の文字は4.5:1、大きな文字は3:1）を満たす必要性を、React と Tailwind CSS の実装例で解説する。
そのほかの #代替テキスト・alt ピックアップ
企業のSNSで写真に付ける代替テキストの書き方を3つのポイントで解説する記事。写真の主役と動作を書くこと、写真の意味が伝わる情報を加えること、SEO向けのキーワードを詰め込まないことを挙げる。
HTMLのimg要素を、alt属性がない、空白だけ、文字がある、の3つに分け、人が確認すべき候補を出すNode.jsの最小例を紹介する。適合の判定ではなく、装飾画像では空のaltが適切な場合もあると注意する。
ランディングページの画像について、alt属性の付け方を1分で点検する手順を示す記事。情報を伝える画像には内容を、装飾の画像には空のalt属性を付けるよう説明し、属性がない画像はスクリーンリーダーがファイル名を読み上げることがあると述べる。
WCAG が装飾的な画像を支援技術から隠してよいとする扱いを、使いすぎだと指摘する記事。画像が見る人の理解や印象に影響しうるため、支援技術から隠す前に、画像が何を加えているかを考えるべきだとする。
noteの画像で、キャプションと代替テキスト（ALT）をどう使い分けるかを、売れ筋の有料記事371本の調査をもとに説明する記事。見える人への補足はキャプション、画像の代わりは代替テキストに書くという分け方を示す。
売れ筋の有料記事の画像941枚のうち代替テキストがあったのは71枚だったと示し、自分の記事の図にも説明が入っていなかった経緯を書く。公開前に説明を書いて数字を突き合わせ、公開後に空を数える5つの手順を紹介する。
そのほかの #見出し構造 ピックアップ
字幕や画面読み上げへの対応など、学習ニーズの異なる学生がデジタル教材を使えるようにするための方法を紹介する記事。見出しで構造を示す、複数の方法で情報に触れられるようにする、一度に負荷をかけない、学生や教員の声を聞いて改善する、の4点を挙げる。
筆者のサイト5頁を、キーボードだけでの操作、入力欄の名前、文字の濃さ、見出しの順の4点でWCAG 2.2に照らして数えた実測記録。
PDF 作成時のアクセシビリティ対策。メタデータの記入と Styles メニューの使用により、見出し・リスト・表などを適切に構造化する実用的な方法を解説。
ポートフォリオサイトのアクセシビリティ監査。セマンティックHTML要素（header、nav、main）の採用、見出し階層の一貫性、キーボード操作を想定したリンク記述の改善を具体例で解説。
ChatGPTの画面更新によるスクリーンリーダー対応の低下を報告。見出し削除、リスト構造喪失、キー操作の変化など、スクリーンリーダー利用者に影響する具体的な問題を述べ、Webサイト変更時にはスクリーンリーダーでの操作確認の必要性を主張。
セマンティック HTML 要素がスクリーンリーダーなどの支援技術による情報理解をどのように改善するかを解説。代替テキスト、フォームラベル、見出し構造の3つの実装課題を実例とともに説明している。
そのほかの #キーボード操作 ピックアップ
レスポンシブなレイアウトで 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 を付ける手法と、装飾アイコンを支援技術から隠す設定を扱う。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
イスラエルの障害者平等権規則と規格 IS 5568 AA（WCAG 2.1 AA 準拠）への適合を、ブラウザ上で動く JavaScript により自動的に確かめる方法を解説する記事。代替テキスト・見出し構造・コントラスト・言語と文字方向の確認項目を示す。
Using Accessibility Checker Pro + Claude AI to Remediate a Large WordPress Site: Courtney Robertson
YouTube 海外
WordPress の大量の記事を、アクセシビリティ検査ツールの結果をもとに Claude Code で修正した事例の発表である。YouTube の埋め込みを字幕付きプレーヤーへ置き換えるなどの修正で、AI が正しく直せた箇所と人の確認が要った箇所を示す。
会員登録フォームで自動入力が効くかを1分で確かめる方法を解説する記事。入力欄に autocomplete の値を付けて入力目的を伝える意味を、WCAG 達成基準1.3.5（入力目的の特定）の解説をもとに示す。
AIエージェントが検証していないのに「テストは通った」と報告する例を挙げ、アクセシビリティの検査をAIだけに任せられない理由を論じる。ルールに基づく検証とAIによる自動化を組み合わせる方法を示すと述べている。
AIがアクセシビリティをレビューできる範囲は、ソースコードだけを読むか、実行中のブラウザーやaxe-coreの結果まで受け取れるかによって変わると整理する。WCAG適合と自動テストの合格は同じではないことも説明する。