WCAG 2.2のカラーコントラスト要件をわかりやすく解説し、テストツールと自動修正の方法を紹介。デザイナー・開発者向けの実践的なアプローチでコントラスト問題を解決する。
シェアックリップ
シェアされたアックリップです。
そのほかの #カラーコントラスト ピックアップ
レトロアーケード美学を保ちながら WCAG コントラスト要件を満たす色設計と、Flash of Unstyled Content を避ける実装方法を解説。CSS カスタムプロパティと同期スクリプトを組み合わせた構成。
Windows 11のマウスポインター設定で背景との対比を調整し、視認性を高める方法と、ユーザーがPCを自分にあわせてカスタマイズすることの重要性について
デザインシステムの配色監査を支援するツール。複数色の組み合わせをすべて表行列で可視化し、WCAG のコントラスト比基準(AA/AAA)と文字サイズ別の達成状況を一覧表示。相対輝度の計算ロジックと実装方法を解説。
ユーザー層の高齢化に対応したデザイン必要性と、大きなテキスト・強いコントラスト・大きなボタンなど年配ユーザーのニーズに対応することで、すべてのユーザーにとって使いやすい設計が実現できることを解説。
WCAGレベルAA達成のための初心者向けガイド。alt属性・コントラスト比・見出しタグ・ラベル・キーボード操作・字幕・リンクテキストの7つのポイントと、WAVE・Lighthouse・axeなどの検査ツールを解説する。
Lighthouse がアクセシビリティ 100 点でも見落とす項目を、手動チェックで検出。装飾的なアイコンの aria-hidden 設定、ランドマークの配置と aria-labelledby による命名、HTML の妥当性など、実装例を交えて解説。
そのほかの #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画面開発におけるアクセシビリティ要件化の必要性も論じる。
WCAG 2.2 もくもく会 #12 ~ ガイドライン 3.3 入力支援 ~
WCAG 2.2 のガイドライン 3.3 入力支援を読み合い、学んだことを共有する勉強会。毎月第1・2・3木曜日に開催される定期イベント。
Googleスライドのライブ字幕機能の設定・使用方法と注意点。句読点がなく音声認識の精度に限界があり、保存されないため、聞き取り補助として機能すること、記録としては別途用意が必要なことを説明する。
レトロアーケード美学を保ちながら WCAG コントラスト要件を満たす色設計と、Flash of Unstyled Content を避ける実装方法を解説。CSS カスタムプロパティと同期スクリプトを組み合わせた構成。
そのほかの #テスト・検証 ピックアップ
Googleが発表した「Guided Vision」は、Gemini Liveの視覚支援機能で、視覚障害・弱視者との協働開発。カメラの向きや距離が不適切な場合に音で構図を補助し、AIが読める画像を撮影時点で確保する。実務への応用として、建設業で品番読み込みの精度向上を例に検証方法を提案。
音声ゲームブックの開発で直面した、音声認識と音声入力の技術的課題と、入力のタイミング表示・VoiceOver対応などの設計の工夫について
【名古屋開催】第12回 ウェブアクセシビリティ勉強会
ウェブアクセシビリティの基礎から実務的なテーマまで、参加者と一緒にワークショップ形式で学ぶ勉強会。WCAG 2.2やスクリーンリーダーの実機検証など、手を動かしながら知見を共有する。初心者歓迎。
首都圏の大学230校を対象にしたWebアクセシビリティ対応状況の調査。方針公表率や試験実施率、axe DevTools による問題検出など、教育機関のアクセシビリティ対応の課題を数値で明らかにするレポート。
動画の音声をAIで文字起こしした場合、映像にしかない操作手順や指示を記事に補足する編集手順。視覚情報なしで内容を追えるようにするW3C基準のブログ編集方法。
ローカルAI(Gemma 3 4B)を用いてWeb要素のアクセシブル名を自動提案し、キーボード操作を補完するChrome拡張機能。スクリーンリーダー対応で、ブラウザ側のみで動作。