HTML/CSS初心者向けのWebアクセシビリティ入門。意味のあるHTML、キーボード操作、フォーム、代替テキスト、コントラストの5点から始める基本を解説。
シェアックリップ
シェアされたアックリップです。
そのほかの #WCAG ピックアップ
改正JIS X 8341-3とWCAG 2.1・2.2の追加基準26個を、アクセシビリティエキスパートが全3回で徹底解説するウェビナー。第2回は操作可能の達成基準を扱う。
EU域内でWebサービス・アプリを提供する企業が対応すべきアクセシビリティ関連法制（EAA・WAD・雇用平等指令）と、WCAG基づく実装方法、EU主要国の罰則・執行事例を解説。AI画面開発におけるアクセシビリティ要件化の必要性も論じる。
【名古屋開催】第12回 ウェブアクセシビリティ勉強会
イベント 開催予定
ウェブアクセシビリティの基礎から実務的なテーマまで、参加者と一緒にワークショップ形式で学ぶ勉強会。WCAG 2.2やスクリーンリーダーの実機検証など、手を動かしながら知見を共有する。初心者歓迎。
WCAG 2.2 もくもく会 #10 ～ ガイドライン 3.1 判読可能 ～
イベント 開催予定
WCAG 2.2のガイドライン3.1（判読可能）と達成方法集を読み合い、参加者で学んだことや気づきを共有するもくもく会。
GitHub ActionsでWCAG 2.2準拠のアクセシビリティチェックを自動化するアクション。axe-coreを使用し、プルリクエストで違反を検出して構築を失敗させる。重大度レベル（critical/serious/moderate/minor）の設定や基準の選択ができる。
WCAG 3.0の最新仕様を読み解き、アクセシビリティ対応における AI の役割を整理した記事。機械的な検証は AI に任せ、文脈理解と定性評価は人間が行うという役割分担の具体例と、マルチエージェントシステムなどの実装方法を提案する。
そのほかの #ガイドライン ピックアップ
Webアクセシビリティ対応の相談を案件として組み立てるフロー。調査・提案・試験から翌年点検まで、実務的に進めるステップを、A11yWorkFlowツールのサンプル資料を交えて解説する。
デジタル庁のウェブアクセシビリティガイドブック解説。アクセシビリティの対象範囲（一時的・状況的な障害を含む）、自動チェックツール の限界、試験による「準拠」の意味、JIS X 8341-3とWCAG の関係、適合レベル AA の試験体制を制作者向けに説明。
PDF のアクセシビリティタグ構造を解説したビデオ。Adobe Acrobat で使う一般的なタグと正しい実装方法を視覚的に示す無料ガイド付き。
PDFアクセシビリティの実装ガイド。見出し、リスト、表、図、リンク、フォームフィールドなどのタグ構造と、Adobe Acrobatでの修正方法を紹介。PDF/UA、WCAG対応。
Steamで販売されているゲームのアクセシビリティ機能表示の読み方と、購入前の確認ポイントを解説。自分に必要な条件を整理し、公式説明や体験版で実際に確認する手順を説明する。
生成AIが画像の詳しい説明を書いても、代替テキストとして使用する前に7点の観点で編集する必要があると解説。目的・意味・装飾性・機能・文字・図表・CMS実装後の確認を通じ、見た目の正確性ではなく「見られない人にも同じ情報へ到達できるか」を基準とすべき。
そのほかの #キーボード操作 ピックアップ
状態管理のバグがキーボード操作とスクリーンリーダーユーザーに異なる影響をもたらす仕組みと、デバッグの順序を解説。実装時に状態遷移表を作成することの重要性を示す。
CSSのreading-flowプロパティを使い、flexboxやgridで視覚順序が変わった際のフォーカス順序と視覚の乖離を解決。キーボード操作とスクリーンリーダー対応を同時に実現する方法を解説。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
AIチャットの応答遅延時に、何も起きていない状態がキーボード・スクリーンリーダーユーザーに伝わらない問題を指摘。フォーカス消失や live region 更新の不備を具体的に説明し、待機・ストリーミング・スタール等の状態遷移を accessible name と live region で通知する実装例を解説。
長文記事にナビゲーション機能を加える際、本文へのアクセスを阻害しない設計原則。キーボード操作・スクリーンリーダー対応・フォーカス表示など複数の利用方法を前提とした実装パターンと確認方法を解説している。
そのほかの #代替テキスト・alt ピックアップ
WebAIM Million 2026年調査で明らかになった最も一般的な6つのWCAG違反について、なぜそれらが問題かを解説し、各々の修正コードを具体的に示す。
WordPress環境でのメール送信におけるアクセシビリティについて。確認メール・パスワードリセット等、ユーザーが受け取る全メッセージが読みやすく・ナビゲート可能である必要性を解説。コンテンツ・構造・デザイン・テスト実践を網羅した講座。
生成AIが画像の詳しい説明を書いても、代替テキストとして使用する前に7点の観点で編集する必要があると解説。目的・意味・装飾性・機能・文字・図表・CMS実装後の確認を通じ、見た目の正確性ではなく「見られない人にも同じ情報へ到達できるか」を基準とすべき。
Web制作の卒業制作をWCAG 2.2に沿ってセルフチェック。LightHouse、キーボード操作、代替テキストの3点から、具体的な問題点と対策を実例で解説。
スクリーンリーダーがアクセシビリティツリーを通じてWebページを読む仕組みと、alt欠落・ARIA誤用などよくある実装エラーの修正法を解説する。
自動運転AIチャレンジのドキュメント翻訳とツール多言語化。日本語のみだったページを英語化し、ツールメッセージを日本語・英語併記に。画像に代替テキストを追加し、用語集と海外参加者向けガイドも作成。
そのほかの #カラーコントラスト ピックアップ
CSS のネイティブ相対色構文（oklch、color-mix）を用いて、ダイナミックにコントラスト対応・wide-gamut 対応するカラートークン設計を解説。WCAG 要件を保ちながら 2026 年トレンドパレットを実装する方法を紹介。
ロゴやマークのコントラスト評価方法を提案する記事。ピクセル平均測定ではなく列単位での測定により、単語が完全に消える問題を検出する手法を解説。
WebAIM Million 2026年調査で明らかになった最も一般的な6つのWCAG違反について、なぜそれらが問題かを解説し、各々の修正コードを具体的に示す。
color-schemeプロパティでダークモードにおけるブラウザのネイティブUI（日付入力、セレクト、スクロールバー）の自動対応が可能。カスタムコンポーネント制作なしで実装できるテクニック。
WCAGコントラスト比を満たす色スキーム設計方法について解説。sRGB・HSL色空間の限界、相対輝度の計算式、OKLCH色空間を使ったCSS設計トークンで、アクセシブルな色システムを構築する方法を示す。
WordPress環境でのメール送信におけるアクセシビリティについて。確認メール・パスワードリセット等、ユーザーが受け取る全メッセージが読みやすく・ナビゲート可能である必要性を解説。コンテンツ・構造・デザイン・テスト実践を網羅した講座。