Every contrast failure on our site is the same Tailwind feature, and measuring it needs a canvas
記事 海外
クイズアプリのコントラスト監査で全ての失敗が一つの Tailwind 機能に由来することを発見。oklab・oklch 色空間に対応した Canvas ベースの測定方法を紹介し、正確な色値取得の重要性を解説。
シェアックリップ
シェアされたアックリップです。
そのほかの #カラーコントラスト ピックアップ
（引用）アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
専門家のいないチームが取り組めるよう、WCAG 2.2の87項目から実害の多い7項目を絞った記事。キーボード操作、ラベル、代替テキスト、コントラスト、見出し、色以外の手がかり、フォーカスの表示を扱う。
ダークモードでもWCAG 2.1のコントラスト基準（1.4.3・1.4.11）はテーマごとに適用されると説明し、純黒の背景や鮮やかな色が基準を外しやすいことや、prefers-color-schemeのテストが漏れやすいことを扱う記事。
AIで作ったWordPressのページを公開前に確認する項目を紹介する記事。文字と背景の差、代替テキスト、見出しの順序、キーボード操作、エラーの伝え方の5項目を挙げ、自動ツールに任せる検査と人が操作する検査を分ける方法を示す。
Windowsのハイコントラストモードなどで有効になるforced-colorsでは、ブラウザが背景色や影をOSの固定パレットに置き換えるか消す。見た目だけで作ったボタンが背景と区別できなくなる仕組みを、実際の不具合の経緯とともに説明する。
筆者のサイト5頁を、キーボードだけでの操作、入力欄の名前、文字の濃さ、見出しの順の4点でWCAG 2.2に照らして数えた実測記録。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第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適合と自動テストの合格は同じではないことも説明する。
そのほかの #WCAG ピックアップ
（引用）アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
イスラエルの障害者平等権規則と規格 IS 5568 AA（WCAG 2.1 AA 準拠）への適合を、ブラウザ上で動く JavaScript により自動的に確かめる方法を解説する記事。代替テキスト・見出し構造・コントラスト・言語と文字方向の確認項目を示す。
スマートフォンなどで押し間違えやすいボタンの大きさを扱った記事である。操作対象は 24×24 CSS px 以上にし、主要な操作では 44×44 CSS px を目安にすると説明する。アイコンの大きさは変えず、押せる範囲に余白を足す方法を示す。
会員登録フォームで自動入力が効くかを1分で確かめる方法を解説する記事。入力欄に autocomplete の値を付けて入力目的を伝える意味を、WCAG 達成基準1.3.5（入力目的の特定）の解説をもとに示す。
AIがアクセシビリティをレビューできる範囲は、ソースコードだけを読むか、実行中のブラウザーやaxe-coreの結果まで受け取れるかによって変わると整理する。WCAG適合と自動テストの合格は同じではないことも説明する。
そのほかの #デザインシステム ピックアップ
WCAG 2.2の達成基準3.2.4「一貫した識別性」を、デザインとコーディングの両面から解説する記事である。同じ機能のボタンやアイコンには、どのページでも同じ名前と見た目を使うことを求める基準である。
AIだけではウェブサイトを完全にアクセシブルにできないと述べ、スキル・ガードレール・設計システム・人の検証と組み合わせることでAIが支援の力になると論じる記事。
カラーユニバーサルデザイン（CUD）と色覚多様性についての大学セミナー報告。色だけに依存しない設計（形、質感、記号で補う）、多様な見え方を理解することで新しい表現可能性が広がることについて、学生とのやり取りを通じて述べられている。
アクセシブルなUIコンポーネントライブラリをオープンソース化した発表。8つのコンポーネントについて、WCAG要件をテーマ別に文書化し、Gherkin形式のテストシナリオと自動テスト実装を含む。
Vaadin Button の Web Component 開発の 9 年以上の歴史をとおして、アクセシビリティに対応するための技術的課題と解決方法を描く。Shadow DOM 設計、フォーカス管理、tooltip の accessible 化など、進化の過程を追う。
デザインシステムがキーボード操作とフォーカス移動を一貫して管理するメカニズムを解説。フォーカストラップ・ARIA・イベントハンドリングの実装と、アプリ側のオーバーライドが破壊する事例を紹介。