企業がWCAG 2.2 AAの試験結果を公開し、直したことと直さなかったことを記録した経緯を書いた記事。キーボード操作や読み上げに関わる改修と、コントラストを改めなかった判断を紹介する。
シェアックリップ
シェアされたアックリップです。
そのほかの #WCAG ピックアップ
（引用）アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
Shopify ストアの配色向けに、WCAG 2.x AA の基準を測った2種類のパレットを CSS 変数や Tailwind の設定として配布する無料キットを紹介する。コントラスト比の確かめ方も示す。
Claude Code で作った Next.js アプリ14件を WCAG 2.1 AA に適合させた作者の報告。AI が誤った ARIA を出すことを前提に、CLAUDE.md にアクセシビリティの要件を書く、ダイアログなどは shadcn/ui の部品を使う、画面ごとに axe-core で検査する、という手順を示す。
ブックマークレット「Tab trail」の紹介。ページ上で Tab の移動順を番号付きで描き、キーボードで届かない操作要素、Tab 押下時のフォーカスの飛び、隠れたフォーカスなど7種類の問題を赤く示す。Playwright のテストからも呼び出せる。
モーダルダイアログを開いたとき、Tab キーでフォーカスが背後のページへ抜けないようにする方法を解説する。ネイティブの dialog 要素（showModal()）の使い方、Escape キーで閉じられるようにすること、閉じたあとにフォーカスを開いたボタンへ戻すことを扱う。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
フロントエンド入門連載の一回で、セマンティックなHTMLが支援技術に意味を伝える仕組みと、キーボードだけで操作できるかをPlaywrightで点検する方法を、Vueのコード例で解説する。
アクセシビリティの不具合で利用者や取引を失った経験があるかを読者に問いかける記事。Tab で飛ばされるクリック要素、「ボタン」としか読まれないアイコンボタン、入力欄と結び付かないラベルといった見落としやすい不具合の例と、マウスを外してキーボードだけで主要な操作を終える5分の確認法を挙げる。
Claude Code で作った Next.js アプリ14件を WCAG 2.1 AA に適合させた作者の報告。AI が誤った ARIA を出すことを前提に、CLAUDE.md にアクセシビリティの要件を書く、ダイアログなどは shadcn/ui の部品を使う、画面ごとに axe-core で検査する、という手順を示す。
ブックマークレット「Tab trail」の紹介。ページ上で Tab の移動順を番号付きで描き、キーボードで届かない操作要素、Tab 押下時のフォーカスの飛び、隠れたフォーカスなど7種類の問題を赤く示す。Playwright のテストからも呼び出せる。
英語のサービス nakodo.app の公開76ページのHTMLを grep で集計し、見出し・スキップリンク・ナビゲーションの名前付けなどのアクセシビリティの実態を数で示した記事である。
そのほかの #企業事例 ピックアップ
A11y Osaka Meetupの第5弾。2026年11月24日に会場とオンラインで、洗髪デバイス「SUSUGU」を手がけた牛乳石鹸共進社が、開発から発信までのインクルーシブデザインの実践を振り返る。
印刷物を年齢や障害の有無、色の見え方にかかわらず伝わるようにするメディアユニバーサルデザイン（MUD）の取り組みと、企業向け防災ハンドブック「我が社のポケット防災」を、産業交流展2026への出展内容として紹介する。
SmartHRのアクセシビリティ本部による2026年10月の月報で、JIS X 8341-3:2016に基づく試験結果の公表、強制カラーモードでのロゴ表示の修正、新入社員向けアクセシビリティ研修の振り返りを伝える。
ロッテが開発したパッケージの溝、ココヨムを実際に触って試した記事。視覚に頼らず賞味期限やアレルギー情報にたどり着くための仕組みで、初めて触る人にとって分かりやすいかは個人差があると筆者は述べる。
フランスの映画アクセシビリティ推進団体「ルテゥール・ディマージュ」とのオンラインセミナー。音声描写（オーディオディスクリプション）の制作・品質保証と、映画産業における情報保障の社会的価値を問い直す。日仏の比較から、障害のあるクリエイターの仕事の可視化と上映環境の向上を考える。
Liquitousが2026年10月に行ったアクセシビリティ向上の取り組みを報告する。フォーム部品をデザインシステムの部品に置き換えたこと、読み上げ用の文言の多言語対応、入稿画面にコンテンツのチェック機能を組み込んだことなどが書かれている。
そのほかの #カラーコントラスト ピックアップ
（引用）アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
Shopify ストアの配色向けに、WCAG 2.x AA の基準を測った2種類のパレットを CSS 変数や Tailwind の設定として配布する無料キットを紹介する。コントラスト比の確かめ方も示す。
Pika
記事
macOS 向けのオープンソースのカラーピッカーである。画面上の色を取り出して各種形式でコピーできるほか、WCAG と APCA のコントラスト比を判定して、色の組み合わせが基準を満たすかを確かめられる。
文字の大きさだけでなく、文字の形・色の組み合わせ・白い紙のまぶしさが読みにくさの原因になると説明する記事。UDフォントや白黒での確認など、チラシや掲示物を作るときの工夫を紹介している。
キーボードで並べ替えボタンを押すとフォーカスが消える不具合を、disabled から aria-disabled に変えて直した。無効な部品の見た目は、WCAG 1.4.11 の例外に当たるかが仕様で決まっていないため、透明度ではなく色で3:1を満たす方法を選んでいる。
shadcn/uiを標準の状態で使うと、WCAG 2.2 AAに適合しないコンポーネントがあることを指摘する記事。フォーカスリングや入力欄のプレースホルダの色の対比不足などの例と、コードの修正方法を示す。