WordPressのヒーロースライダーの画像を、PNGからWebPに変えて合計約7.8MBから約316KBへ軽くした手順を解説する。あわせて、非表示のスライドを aria-hidden で読み上げの対象から外す方法と、Playwright による自動確認を紹介する。
シェアックリップ
シェアされたアックリップです。
そのほかの #WAI-ARIA ピックアップ
WordPressのヒーロースライダーで、画像をWebPに変換するだけでなく、優先読み込み・遅延読み込み・レイアウト確保を組み合わせ、表示されていないスライドをaria-hiddenで読み上げ対象から外す手法を解説する記事。
モーダルダイアログのフォーカス管理を解説する記事。フォーカスをダイアログ内に閉じ込める実装と、閉じたあとに元の要素へ戻す挙動を扱う。HTML の dialog 要素を使えば、背景の操作を止める処理を自前で書かずに済むとする。
Fluent UIのReact v9とWeb Componentsが、Shadow DOMやPortal、ダイアログでフォーカスやキーボード操作をどう扱っているかを、公式ドキュメントとソースで確かめながら論じる記事である。UIライブラリの設計判断が主題である。
Shadow DOM の内側にあるボタンなどの要素が、支援技術にどう伝わるかを扱う記事である。DOM・Accessibility Tree・プラットフォーム API の関係を仕様と Chrome での観察から整理し、カスタム要素に意味を持たせる設計の選択肢を示している。
管理画面の共通シェルに、キーボードや読み上げ利用者が本文へ直接移動できるスキップリンクを追加した修正の解説である。クリック時だけ main に一時的に tabindex を付ける手法と、装飾アイコンを支援技術から隠す設定を扱う。
エージェントの実行中を示すフッターで、ステータスを示す領域（role=status）の範囲を作業の段階を示す文だけに限定する試作を報告している。経過時間の表示や停止ボタンは領域の外に出している。読み上げの実際の挙動は確かめていない。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第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適合と自動テストの合格は同じではないことも説明する。