改正障害者差別解消法（2024年4月施行）への対応ガイド。JIS X 8341-3 AA レベルへの準拠に必要な3大NG（コントラスト比・キーボード操作・alt 属性）をリストアップ。Playwright × axe-core での全自動監査と Gemini Vision による alt 自動生成で、工数を大幅削減する実装方法を解説。
シェアックリップ
シェアされたアックリップです。
そのほかの #WCAG ピックアップ
（引用）アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
JIS X 8341-3の試験実施ガイドラインと発注ガイドラインをもとに、アクセシビリティ診断の見積もりで試験するページ数を決める方法を整理する。ページの選び方と枚数の目安を、公開された試験結果と照らして解説する。
HSLの明度が色相によって知覚的に揃わない問題を示し、sRGBの色をOKLCH色空間へ変換する関数と、WCAG 2.1のコントラスト比を計算して4.5:1を満たす明るさに自動で調整する関数をJavaScriptで解説する記事。
研修資料の文字と背景の色の組み合わせを、WebAIM Contrast Checkerで一組ずつ測る方法を解説する。入力の手順と、コントラスト比をWCAG AAの通常文字の基準に照らして読む方法を、架空の文例で示す。
Storyblok の編集画面（Visual Editor）に、自動のアクセシビリティ検査機能が追加されたことを伝える記事。axe-core を使って WCAG 2.0〜2.2 の A・AA を検査し、違反箇所は編集画面から直接修正できる。自動検査で見つかるのは一部だけなので、手動の検証と併用すべきだと書いている。
そのほかの #JIS X 8341-3 ピックアップ
JIS X 8341-3の試験実施ガイドラインと発注ガイドラインをもとに、アクセシビリティ診断の見積もりで試験するページ数を決める方法を整理する。ページの選び方と枚数の目安を、公開された試験結果と照らして解説する。
ウェブアクセシビリティの試験で、人が確認した結果・方法・判断理由を記録し、試験結果報告書と不適合一覧を作成する無料ツールを紹介する。Web版・a-blog cms版・Chrome拡張機能の3種類があり、用途に応じて選ぶ。適合を保証するものではない。
日本のJIS X 8341-3が約10年ぶりに改正され、WCAG 2.2相当へ更新される見通しを解説する記事。日本の達成基準の土台は実質2008年のWCAG 2.0だったと整理し、ツールだけでは試験が終わらない点も論じる。
改正JIS X 8341-3とWCAG 2.1・2.2の追加基準26個を、アクセシビリティエキスパートが全3回で徹底解説するウェビナー。第2回は操作可能の達成基準を扱う。
外部ツール（HubSpot等）の埋め込み機能によるアクセシビリティエラーについて、自社で対応できる範囲と提供元への依頼の境界を実例から整理。
デジタル庁ガイドブック第3章「非干渉」基準を解説。自動再生音声の制御、キーボードトラップ回避、光の点滅制限、自動コンテンツ切り替え禁止の4つの基準について、リリース前に必ず対応する必要性と改修方法を述べる。
そのほかの #法律・制度 ピックアップ
障害のある子どもを含むすべての子どもが学べる学校作りのため、基礎的環境整備と合理的配慮の実践を公立学校の事例から学ぶ。教師の視点から多様性の包摂に向き合う
（引用）2007年に特別支援教育が法制化され、8年が経過しました。その間2012年には中央教育審議会から「共生社会の形成に向けたインクルーシブ教育システム構築のための特別支援教育の推進」の報告が出され、2016年4月1日には、いわゆる「障害者差別解消法」が施行されます。このような状況下、学校現場では、具体的にどのようにインクルーシブ教育を進めていけばいいのでしょうか。この難しくも希望のある問いに、編集代表…
（引用）「人権」という言葉を聞いてどのようなことを思い浮かべるか──。本来は身近な問題、テーマであるはずだが、「大変な人たちの問題」「重たい」といった、なんとなくそばに置きたくない思いや、小中高等学校などでは 「深刻なことを考える時間」といったイメージがあるかもしれない。しかし、このような「距離を置く」考え方こそ、私たちの身近にある人権問題をより一層、深刻なものにしているといえる。 本書では、「人権」をわ…
（引用）障害者の暮らしはどう変わったか…自立生活センター活動の現場から考える。
イスラエルの障害者平等権規則と規格 IS 5568 AA（WCAG 2.1 AA 準拠）への適合を、ブラウザ上で動く JavaScript により自動的に確かめる方法を解説する記事。代替テキスト・見出し構造・コントラスト・言語と文字方向の確認項目を示す。
福岡県が県内の観光施設のバリアフリー改修や車いす等の機器導入に使える補助金（第2期募集）について、補助率・上限額・対象施設・申請期限を解説している。
そのほかの #代替テキスト・alt ピックアップ
AIに画像の代替テキストを頼むときは、見た目を列挙するのではなく、その図で補いたい内容を渡すことを説明した記事。リンクから記事への矢印を説明文に残し、実際の操作結果ではないと本文で注記した例を挙げている。
画像の代替テキスト（alt）の役割と書き方を解説する。スクリーンリーダーで読まれたり画像の代わりに表示されたりする文章として、ページ内でその画像が果たす役割に合わせて書くことを勧めている。
画像の代替テキストは、写っているものを書く前に、情報・飾り・リンクのどの役割を担っているかを考えるべきだと説明した記事。空の代替テキストを使う場面や、AIへ依頼するときに役割を伝える方法も扱っている。
企業のSNSで写真に付ける代替テキストの書き方を3つのポイントで解説する記事。写真の主役と動作を書くこと、写真の意味が伝わる情報を加えること、SEO向けのキーワードを詰め込まないことを挙げる。
HTMLのimg要素を、alt属性がない、空白だけ、文字がある、の3つに分け、人が確認すべき候補を出すNode.jsの最小例を紹介する。適合の判定ではなく、装飾画像では空のaltが適切な場合もあると注意する。
ランディングページの画像について、alt属性の付け方を1分で点検する手順を示す記事。情報を伝える画像には内容を、装飾の画像には空のalt属性を付けるよう説明し、属性がない画像はスクリーンリーダーがファイル名を読み上げることがあると述べる。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
React の単体テストに axe-core を組み込んで a11y を自動検査する方法を解説する記事。アイコンフォントの文字が名前とみなされて、名前の無いボタンが標準ルールで検出されないため、独自ルールで補っている。
JIS X 8341-3の試験実施ガイドラインと発注ガイドラインをもとに、アクセシビリティ診断の見積もりで試験するページ数を決める方法を整理する。ページの選び方と枚数の目安を、公開された試験結果と照らして解説する。
Playwright と Guidepup で、スクリーンリーダーを実際に操作しながらウェブページを検証するテストの作り方を解説する記事である。BBC のホームページを例に、設定の手順と、読み上げ内容を検証する考え方を示す。
Storyblok の編集画面（Visual Editor）に、自動のアクセシビリティ検査機能が追加されたことを伝える記事。axe-core を使って WCAG 2.0〜2.2 の A・AA を検査し、違反箇所は編集画面から直接修正できる。自動検査で見つかるのは一部だけなので、手動の検証と併用すべきだと書いている。
Playwright と @axe-core/playwright で、WCAG の A・AA の違反を自動テストで見つける方法を解説する記事。メニューを開いた状態のような操作後の画面を検査する書き方や、既知の問題を除いて新たな違反だけを検出する方法を扱う。自動テストで検出できるのは一部であることも書いている。
そのほかの #生成AI ピックアップ
【「おこ助AI」実演デモ】プロ向け字幕・音声ガイド制作ツール機能説明会（無料）
イベント 開催予定
MASC がリリースしたバリアフリー字幕・音声ガイド制作ソフト「おこ助AI」の機能説明会と実演デモ。AI による自動文字起こし、ハコ割・原稿整形、自動スポッティングなど、制作効率化の機能を紹介。字幕・音声ガイド制作に携わる映像制作者・放送事業者向け。
AIに画像の代替テキストを頼むときは、見た目を列挙するのではなく、その図で補いたい内容を渡すことを説明した記事。リンクから記事への矢印を説明文に残し、実際の操作結果ではないと本文で注記した例を挙げている。
AIにReactのUIを生成させるとき、ロール・キーボード操作・コントラストの3項目を必ず答えさせるプロンプトの書き方を紹介する記事。ネイティブ要素を優先させることや、コントラスト比を数値で示させることなどを挙げる。
画像の代替テキストは、写っているものを書く前に、情報・飾り・リンクのどの役割を担っているかを考えるべきだと説明した記事。空の代替テキストを使う場面や、AIへ依頼するときに役割を伝える方法も扱っている。
生成AIが作るフォーム部品のアクセシビリティを、モデル・指示文・評価の測り方の違いで比べた研究（PACE）を、著者が紹介する。自動チェックでは分からない、ラベルの意味やキーボード操作、エラーからの回復を確かめる必要を論じる。