W3Cの資料をもとに、画像の役割を決めてから代替テキストを考える方法を解説している。絵本の紹介に添える画像を例に、AIに画像と前後の文章を渡して代替テキストの案を作ってもらう相談文も示している。
シェアックリップ
シェアされたアックリップです。
そのほかの #代替テキスト・alt ピックアップ
READMEやドキュメントに載るアニメーションGIFや短い動画の代替テキストの書き方を解説する。アニメーションが示す結果を書き、画面上に表示される文字を含める。装飾的な動きには空の代替テキストを付ける。
問い合わせフォームのアクセシビリティ監査で見つかった問題を、セマンティックHTMLの書き方で直した過程を記した記事である。label と input の結び付け、fieldset と legend によるグループ分け、画像の alt の付け方を扱っている。
Webサイトのアクセシビリティを検証する7つの観点を示した記事である。キーボード操作、セマンティックなHTML、コントラストとズーム、フォーム、代替テキスト、動的なコンポーネント、自動チェックと手動QAの併用を扱う。
ソフトウェアのドキュメントに載せるスクリーンショットの代替テキストの書き方を解説する記事である。画像の目的から書き始め、画面の状態を書くこと、手順の情報を画像の中だけに置かないこと、装飾的な画像には空の代替テキストを使うことを扱う。
AIで作ったLPを公開する前に確かめる7項目を紹介する記事。W3C WAIのEasy Checksを基に、ページのタイトル・代替テキスト・見出し・コントラスト・文字の拡大・キーボード操作・フォームを点検する。
画像を見ることが難しい人に内容を伝える代替テキストを、AIに文案として頼む前に、そのページで伝えたい意味を一行で決めておく方法を紹介する。装飾画像に空のalt属性を使う判断にも触れている。
そのほかの #生成AI ピックアップ
全盲のITエンジニアである守井清吾さんが、AI を情報の確認と動画制作の手段として使った経緯をつづった記事である。ハッカソンの選考通知を AI に読んでもらったことや、見えないまま動画を作る工程、画像の不具合を AI に見つけてもらったことを書いている。
Claude Code で作った Next.js アプリ14件を WCAG 2.1 AA に適合させた作者の報告。AI が誤った ARIA を出すことを前提に、CLAUDE.md にアクセシビリティの要件を書く、ダイアログなどは shadcn/ui の部品を使う、画面ごとに axe-core で検査する、という手順を示す。
【「おこ助AI」実演デモ】プロ向け字幕・音声ガイド制作ツール機能説明会（無料）
イベント 開催終了
MASC がリリースしたバリアフリー字幕・音声ガイド制作ソフト「おこ助AI」の機能説明会と実演デモ。AI による自動文字起こし、ハコ割・原稿整形、自動スポッティングなど、制作効率化の機能を紹介。字幕・音声ガイド制作に携わる映像制作者・放送事業者向け。
全盲の筆者が、AI に絵を説明させる頼み方を検証した記事。同じ絵を AI に説明させると左右を取り違えたが、見えない人のための作法を頼み方に書き足すと、正しく答える回数が増えたと報告している。
Is AI Making the Web Less Accessible? Challenges in AI-Generated Content | Accessible Web Webinar
YouTube 海外
AIが生成したコードや画像の説明文、チャットボットの出力が、支援技術の利用者に新たな障壁を生むことを扱うウェビナーである。公開前に行うべきコードの確認と、人によるレビューの必要性を取り上げる。
全盲の筆者が、視覚障害のある人によるバイブコーディングの事例を紹介する。スクリーンリーダーで使えるターミナル「BlindTerm」などのツールや、AIで復活させたオーディオゲームを取り上げている。