AIでアクセシビリティの改善候補を探し、人が確かめて報告にまとめる仕事の進め方を解説する記事。点検の範囲を依頼者と決めること、AIの出力に根拠と限界を添えることを説いている。
シェアックリップ
シェアされたアックリップです。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第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の試験結果を公開し、直したことと直さなかったことを記録した経緯を書いた記事。キーボード操作や読み上げに関わる改修と、コントラストを改めなかった判断を紹介する。
そのほかの #生成AI ピックアップ
全盲のITエンジニアである守井清吾さんが、AI を情報の確認と動画制作の手段として使った経緯をつづった記事である。ハッカソンの選考通知を AI に読んでもらったことや、見えないまま動画を作る工程、画像の不具合を AI に見つけてもらったことを書いている。
Claude Code で作った Next.js アプリ14件を WCAG 2.1 AA に適合させた作者の報告。AI が誤った ARIA を出すことを前提に、CLAUDE.md にアクセシビリティの要件を書く、ダイアログなどは shadcn/ui の部品を使う、画面ごとに axe-core で検査する、という手順を示す。
W3Cの資料をもとに、画像の役割を決めてから代替テキストを考える方法を解説している。絵本の紹介に添える画像を例に、AIに画像と前後の文章を渡して代替テキストの案を作ってもらう相談文も示している。
【「おこ助AI」実演デモ】プロ向け字幕・音声ガイド制作ツール機能説明会（無料）
イベント 開催終了
MASC がリリースしたバリアフリー字幕・音声ガイド制作ソフト「おこ助AI」の機能説明会と実演デモ。AI による自動文字起こし、ハコ割・原稿整形、自動スポッティングなど、制作効率化の機能を紹介。字幕・音声ガイド制作に携わる映像制作者・放送事業者向け。
全盲の筆者が、AI に絵を説明させる頼み方を検証した記事。同じ絵を AI に説明させると左右を取り違えたが、見えない人のための作法を頼み方に書き足すと、正しく答える回数が増えたと報告している。
Is AI Making the Web Less Accessible? Challenges in AI-Generated Content | Accessible Web Webinar
YouTube 海外
AIが生成したコードや画像の説明文、チャットボットの出力が、支援技術の利用者に新たな障壁を生むことを扱うウェビナーである。公開前に行うべきコードの確認と、人によるレビューの必要性を取り上げる。
そのほかの #代替テキスト・alt ピックアップ
W3Cの資料をもとに、画像の役割を決めてから代替テキストを考える方法を解説している。絵本の紹介に添える画像を例に、AIに画像と前後の文章を渡して代替テキストの案を作ってもらう相談文も示している。
READMEやドキュメントに載るアニメーションGIFや短い動画の代替テキストの書き方を解説する。アニメーションが示す結果を書き、画面上に表示される文字を含める。装飾的な動きには空の代替テキストを付ける。
問い合わせフォームのアクセシビリティ監査で見つかった問題を、セマンティックHTMLの書き方で直した過程を記した記事である。label と input の結び付け、fieldset と legend によるグループ分け、画像の alt の付け方を扱っている。
Webサイトのアクセシビリティを検証する7つの観点を示した記事である。キーボード操作、セマンティックなHTML、コントラストとズーム、フォーム、代替テキスト、動的なコンポーネント、自動チェックと手動QAの併用を扱う。
ソフトウェアのドキュメントに載せるスクリーンショットの代替テキストの書き方を解説する記事である。画像の目的から書き始め、画面の状態を書くこと、手順の情報を画像の中だけに置かないこと、装飾的な画像には空の代替テキストを使うことを扱う。
AIで作ったLPを公開する前に確かめる7項目を紹介する記事。W3C WAIのEasy Checksを基に、ページのタイトル・代替テキスト・見出し・コントラスト・文字の拡大・キーボード操作・フォームを点検する。
そのほかの #見出し構造 ピックアップ
英語のサービス nakodo.app の公開76ページのHTMLを grep で集計し、見出し・スキップリンク・ナビゲーションの名前付けなどのアクセシビリティの実態を数で示した記事である。
Our sign-in page has 0 autocomplete attributes, and the password field is not in the HTML at all
記事 海外
ログイン画面の入力欄に autocomplete 属性がなく、パスワード入力欄も配信されるHTMLに含まれないため、パスワード管理ツールの候補が出ない状況を報告する記事。公開ページのスキップリンクの飛び先が大半で存在しない点や、見出しレベルの飛びも検査している。
公開ページの大半でスキップリンクの飛び先が存在せず、機能していない例を示す記事。トップページには main 領域も無いため、ランドマークで移動するスクリーンリーダーの利用者は、移動先がページ末尾の footer だけになる。
字幕や画面読み上げへの対応など、学習ニーズの異なる学生がデジタル教材を使えるようにするための方法を紹介する記事。見出しで構造を示す、複数の方法で情報に触れられるようにする、一度に負荷をかけない、学生や教員の声を聞いて改善する、の4点を挙げる。
AIで作ったWordPressのページを公開前に確認する項目を紹介する記事。文字と背景の差、代替テキスト、見出しの順序、キーボード操作、エラーの伝え方の5項目を挙げ、自動ツールに任せる検査と人が操作する検査を分ける方法を示す。
筆者のサイト5頁を、キーボードだけでの操作、入力欄の名前、文字の濃さ、見出しの順の4点でWCAG 2.2に照らして数えた実測記録。
そのほかの #フォーム ピックアップ
読み込み中の表示でレイアウトを動かさず、次に何をすべきか、失敗したときにどうするかを伝える方法を 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点で、読み上げが合わず操作できない例を挙げる。