WCAG の POUR 原則に基づきながら、セマンティック HTML・alt 属性・見出し構造・フォーム label など、アクセシビリティ対応コーディングの具体例をコード付きで解説。スクリーンリーダーや自動ツールでの確認方法も紹介する。
シェアックリップ
シェアされたアックリップです。
そのほかの #WCAG ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
WCAG 2.2 もくもく会 #13 ～ ガイドライン 4.1 互換性 ～
イベント 開催予定
WCAG 2.2 のガイドライン 4.1 互換性を読み合い、学んだことを共有する勉強会。毎月第3木曜日はオフライン交流会も開催される。
改正JIS X 8341-3とWCAG 2.1・2.2の追加基準26個を、アクセシビリティエキスパートが全3回で徹底解説するウェビナー。第2回は操作可能の達成基準を扱う。
EU域内でWebサービス・アプリを提供する企業が対応すべきアクセシビリティ関連法制（EAA・WAD・雇用平等指令）と、WCAG基づく実装方法、EU主要国の罰則・執行事例を解説。AI画面開発におけるアクセシビリティ要件化の必要性も論じる。
UI・UX・CX・HCD・UD・アクセシビリティといった関連用語40個を5つの分類で整理して解説。コントラスト比やカラーユニバーサルデザイン、代替テキストなど実例で学べる。聾学校での経験から、音声に頼らない環境での視覚情報の重要性を示す。
固定フッターがキーボード操作のフォーカスを隠す問題の検証ツール。ResizeObserver で要素の高さを追跡し、WCAG 2.4.11 の達成基準を参考に改善方法を示す。
そのほかの #代替テキスト・alt ピックアップ
UI・UX・CX・HCD・UD・アクセシビリティといった関連用語40個を5つの分類で整理して解説。コントラスト比やカラーユニバーサルデザイン、代替テキストなど実例で学べる。聾学校での経験から、音声に頼らない環境での視覚情報の重要性を示す。
AIと自動検査ツールを使ってWebページのアクセシビリティを検査する方法を、実装例で解説。WCAG 2.2に基づく6項目（色のコントラスト、代替テキスト、ボタンサイズ、幅320での表示、動き設定の尊重）の検査スクリプトとコマンド例を提示。自動検査の限界（説明文の内容評価、ボタン間隔）についても述べる。
PDF作成時の画像代替テキストレビュー手順を解説したもの。AIで下書きした代替テキストを人がレビューする際、画像の目的・周辺文脈・PDF形式後の状態を確認するプロセスを示す。
ページ公開前のアクセシビリティレビューで、実装チェックではなく人が測定したカラーコントラストペアを記録し、代替テキスト出典とキーボード動線の確認が無い場合は公開を止める判定プロセスを解説。
画像のalt属性を適切に設定する方法とAI生成ツール活用による効率化を解説。スクリーンリーダー利用者向けアクセシビリティ、SEO、AI検索精度向上の観点から重要性を説明し、装飾画像と情報画像の区別や冗長表現の避け方などのルールを紹介。AI生成は完全自動化ではなく人間による文脈確認が必須と指摘。
スクリーンリーダーユーザーや検索エンジン、低速接続ユーザーのための代替テキスト（alt属性）の書き方。何を含めるべきか、何を避けるべきかを具体例で示している。
そのほかの #見出し構造 ピックアップ
ChatGPTの画面更新によるスクリーンリーダー対応の低下を報告。見出し削除、リスト構造喪失、キー操作の変化など、スクリーンリーダー利用者に影響する具体的な問題を述べ、Webサイト変更時にはスクリーンリーダーでの操作確認の必要性を主張。
セマンティック HTML 要素がスクリーンリーダーなどの支援技術による情報理解をどのように改善するかを解説。代替テキスト、フォームラベル、見出し構造の3つの実装課題を実例とともに説明している。
Word文書のアクセシビリティについて、見出し、表、読む順序がコンテンツへのアクセスに与える影響を解説するライブ講座。
セマンティック HTML がスクリーンリーダーや支援技術でいかに機能するか、ランドマーク・見出し・フォーム要素の正しい使用の重要性を解説する。
Web開発者・デザイナー向けのブラウザ型アクセシビリティツール集。色コントラスト、代替テキスト、見出し構造、キーボード操作、フォーム、WCAG対応をカバー。
政府機関向けPDFのアクセシビリティ監査で頻出する7つのミス（見出しタグの誤り、画像の処理、フォームラベルの欠落など）を紹介。自動チェッカーの合格と Section 508 / Title II 監査結果の相違を解説する。
そのほかの #フォーム ピックアップ
メール検証フォームの実装で、状態管理で各段階を明確にし、aria-invalid で無効状態を示し、CSS で空間を予約することで、フォーカス移動とレイアウトシフトを避け、アクセシビリティと UX の両立を実現する。
セマンティック HTML 要素がスクリーンリーダーなどの支援技術による情報理解をどのように改善するかを解説。代替テキスト、フォームラベル、見出し構造の3つの実装課題を実例とともに説明している。
CAPTCHA の代わりにハニーポットを使って、スクリーンリーダー利用者に負担をかけずにスパムボットを検出する実装方法。フロントエンドとサーバー側の検証を解説。
React でメールフォームを実装する際に、フォーカス管理とアクセシビリティを両立させる方法。フォーム状態（読み込み中、成功、エラー）の変化を WAI-ARIA で通知しながら、キーボード操作とスクリーンリーダーに対応。エラー時のフォーカス復帰の実装方法を解説。
VIN入力フォームのアクセシビリティ実装について。ラベル、エラーメッセージの表示、live regionsによるスクリーンリーダー対応、フォーカス管理の具体的なコードパターンを解説している。
メールアドレス入力フィールドの目的を明示する方法について。type属性は形式を、autocomplete属性は具体的な目的を示すことで、フィールドの見た目と実際の機能の一貫性を保つ実装パターンを解説している。
そのほかの #キーボード操作 ピックアップ
固定フッターがキーボード操作のフォーカスを隠す問題の検証ツール。ResizeObserver で要素の高さを追跡し、WCAG 2.4.11 の達成基準を参考に改善方法を示す。
ランディングページのキーボードアクセシビリティチェック。フォーカスリングの表示確認方法、:focus-visible による CSS 実装例、Tab キーで行う手動確認フローを解説。
ChatGPTの画面更新によるスクリーンリーダー対応の低下を報告。見出し削除、リスト構造喪失、キー操作の変化など、スクリーンリーダー利用者に影響する具体的な問題を述べ、Webサイト変更時にはスクリーンリーダーでの操作確認の必要性を主張。
アクセシブルな Web チェックリストツールの構築方法を解説。ネイティブな HTML コントロール、ローカルストレージ、キーボード操作、プリント対応による、フレームワーク不要のシンプルな実装を紹介。
ネイティブダイアログ要素でモーダル閉じ込めとフォーカス移動を検証するためのテストフィクスチャとテスト方法を解説。フォーカスリーク防止と複数ブラウザでの検証の重要性を説明している。
業務システムのマウス操作による手首の負担を、キーボード操作で解決した経験から、アクセシビリティの本質を考える。相手の困りごとに寄り添い、摩擦を減らす設計思想の重要性について述べる。