生成AIが作るフォーム部品のアクセシビリティを、モデル・指示文・評価の測り方の違いで比べた研究(PACE)を、著者が紹介する。自動チェックでは分からない、ラベルの意味やキーボード操作、エラーからの回復を確かめる必要を論じる。
シェアックリップ
シェアされたアックリップです。
そのほかの #生成AI ピックアップ
【「おこ助AI」実演デモ】プロ向け字幕・音声ガイド制作ツール機能説明会(無料)
MASC がリリースしたバリアフリー字幕・音声ガイド制作ソフト「おこ助AI」の機能説明会と実演デモ。AI による自動文字起こし、ハコ割・原稿整形、自動スポッティングなど、制作効率化の機能を紹介。字幕・音声ガイド制作に携わる映像制作者・放送事業者向け。
AIに画像の代替テキストを頼むときは、見た目を列挙するのではなく、その図で補いたい内容を渡すことを説明した記事。リンクから記事への矢印を説明文に残し、実際の操作結果ではないと本文で注記した例を挙げている。
画像の代替テキストは、写っているものを書く前に、情報・飾り・リンクのどの役割を担っているかを考えるべきだと説明した記事。空の代替テキストを使う場面や、AIへ依頼するときに役割を伝える方法も扱っている。
Microsoft Teams のアクセシビリティ・アーキテクトで、ろう者である人物が、Copilot を使って利用者の体験から得た知見をコードの改善に結びつける様子を紹介する。本人によれば、数日かかっていた作業が10〜15分で済むようになったという。
Using Accessibility Checker Pro + Claude AI to Remediate a Large WordPress Site: Courtney Robertson
WordPress の大量の記事を、アクセシビリティ検査ツールの結果をもとに Claude Code で修正した事例の発表である。YouTube の埋め込みを字幕付きプレーヤーへ置き換えるなどの修正で、AI が正しく直せた箇所と人の確認が要った箇所を示す。
そのほかの #フォーム ピックアップ
Four form components hold every form in our app, and writing this post found the one bug in them
アプリ「Nakodo」のフォーム部品の設計を解説する記事。失敗の通知と成功の通知で role を使い分ける理由と、入力欄の補足(ヒント)が入力欄に関連付けられておらず、スクリーンリーダーで読まれない不具合を扱う。
会員登録フォームで自動入力が効くかを1分で確かめる方法を解説する記事。入力欄に autocomplete の値を付けて入力目的を伝える意味を、WCAG 達成基準1.3.5(入力目的の特定)の解説をもとに示す。
スクリーンリーダーを使う視覚障害のある筆者が、ウェブサイトのログイン画面で遭遇する障壁を解説した記事である。ラベルのないサインインアイコン、パスワード表示の切り替え、チェックボックス、分割された二段階認証の入力欄などを取り上げる。
Reactのフォーム部品の設計を、ラベルやメッセージ行などの共通の構造、react-hook-form と zod への接続、スマートフォンでの操作の3点から解説する。例には作者が開発するUIライブラリを使っている。
専門家のいないチームが取り組めるよう、WCAG 2.2の87項目から実害の多い7項目を絞った記事。キーボード操作、ラベル、代替テキスト、コントラスト、見出し、色以外の手がかり、フォーカスの表示を扱う。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
Storyblok の編集画面(Visual Editor)に、自動のアクセシビリティ検査機能が追加されたことを伝える記事。axe-core を使って WCAG 2.0〜2.2 の A・AA を検査し、違反箇所は編集画面から直接修正できる。自動検査で見つかるのは一部だけなので、手動の検証と併用すべきだと書いている。
Playwright と @axe-core/playwright で、WCAG の A・AA の違反を自動テストで見つける方法を解説する記事。メニューを開いた状態のような操作後の画面を検査する書き方や、既知の問題を除いて新たな違反だけを検出する方法を扱う。自動テストで検出できるのは一部であることも書いている。
視神経萎縮などで見えにくさのある人がスクリーンリーダー・拡大表示・キーボード操作を使う前提で、開発者が最初に押さえたい基本をまとめた記事である。意味のあるHTML、ラベル、フォーカス管理、変化の知らせ方、テストの方法を扱う。
イスラエルの障害者平等権規則と規格 IS 5568 AA(WCAG 2.1 AA 準拠)への適合を、ブラウザ上で動く JavaScript により自動的に確かめる方法を解説する記事。代替テキスト・見出し構造・コントラスト・言語と文字方向の確認項目を示す。
デジタル庁のデザインシステム(DADS)を参考に、小さい文字やコントラスト比をウェブサイトで点検するAIエージェント向けスキルを紹介する記事。Pythonで候補を拾い、ブラウザで確かめ、人が判断する二段階の点検を解説する。