Playwright と @axe-core/playwright で、WCAG の A・AA の違反を自動テストで見つける方法を解説する記事。メニューを開いた状態のような操作後の画面を検査する書き方や、既知の問題を除いて新たな違反だけを検出する方法を扱う。自動テストで検出できるのは一部であることも書いている。
シェアックリップ
シェアされたアックリップです。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
Storyblok の編集画面（Visual Editor）に、自動のアクセシビリティ検査機能が追加されたことを伝える記事。axe-core を使って WCAG 2.0〜2.2 の A・AA を検査し、違反箇所は編集画面から直接修正できる。自動検査で見つかるのは一部だけなので、手動の検証と併用すべきだと書いている。
生成AIが作るフォーム部品のアクセシビリティを、モデル・指示文・評価の測り方の違いで比べた研究（PACE）を、著者が紹介する。自動チェックでは分からない、ラベルの意味やキーボード操作、エラーからの回復を確かめる必要を論じる。
視神経萎縮などで見えにくさのある人がスクリーンリーダー・拡大表示・キーボード操作を使う前提で、開発者が最初に押さえたい基本をまとめた記事である。意味のあるHTML、ラベル、フォーカス管理、変化の知らせ方、テストの方法を扱う。
イスラエルの障害者平等権規則と規格 IS 5568 AA（WCAG 2.1 AA 準拠）への適合を、ブラウザ上で動く JavaScript により自動的に確かめる方法を解説する記事。代替テキスト・見出し構造・コントラスト・言語と文字方向の確認項目を示す。
デジタル庁のデザインシステム（DADS）を参考に、小さい文字やコントラスト比をウェブサイトで点検するAIエージェント向けスキルを紹介する記事。Pythonで候補を拾い、ブラウザで確かめ、人が判断する二段階の点検を解説する。
そのほかの #axe ピックアップ
Storyblok の編集画面（Visual Editor）に、自動のアクセシビリティ検査機能が追加されたことを伝える記事。axe-core を使って WCAG 2.0〜2.2 の A・AA を検査し、違反箇所は編集画面から直接修正できる。自動検査で見つかるのは一部だけなので、手動の検証と併用すべきだと書いている。
axe-core 4.14.0の更新を伝える記事。WCAG 2.5.3「名前に含まれるラベル」の検査が既定で有効になり、表示されているラベルが名前に含まれない操作部品を検出するようになった経緯と、主要OSの音声操作を試した結果を解説する。
AIがアクセシビリティをレビューできる範囲は、ソースコードだけを読むか、実行中のブラウザーやaxe-coreの結果まで受け取れるかによって変わると整理する。WCAG適合と自動テストの合格は同じではないことも説明する。
アクセシビリティ・オーバーレイを導入した62サイトを、導入の有無で比べた研究を紹介する動画。axe-core による自動テストでは、約9割のサイトでWCAG違反の数に測定できる差は見られなかったという。
axe、Chrome DevTools、スクリーンリーダーがアクセシビリティの経路の異なる場所を見ていることを整理し、自動検査が通っても、キーボード操作や読み上げの確認は別に必要だと解説している。
銀行のWebサイトの監査を題材に、自動チェック・支援技術に見える情報の確認・NVDAによるスクリーンリーダーのテストなどを組み合わせ、どのツールをどの問題に使うかを判断する手順を示す動画。
そのほかの #WCAG ピックアップ
（引用）アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
研修資料の文字と背景の色の組み合わせを、WebAIM Contrast Checkerで一組ずつ測る方法を解説する。入力の手順と、コントラスト比をWCAG AAの通常文字の基準に照らして読む方法を、架空の文例で示す。
Storyblok の編集画面（Visual Editor）に、自動のアクセシビリティ検査機能が追加されたことを伝える記事。axe-core を使って WCAG 2.0〜2.2 の A・AA を検査し、違反箇所は編集画面から直接修正できる。自動検査で見つかるのは一部だけなので、手動の検証と併用すべきだと書いている。
色のコントラストを測る2つの方式、WCAG 2 のコントラスト比と APCA（Lc 値）の違いを解説する記事。WCAG 2 の計算の手順、達成基準ごとに必要な比率、WCAG 2 の限界と APCA の位置づけを扱う。法律や規格で使われているのは WCAG 2 のコントラスト比だと書いている。
WCAG 2.2 AAの55項目を、デザインだけで決まる項目・実装だけの項目・両方が関わる項目に分類した記事。デザインだけは10項目、実装だけは19項目、両方は25項目だったと報告している。