CSS の `accent-color` プロパティを使用して、チェックボックスやラジオボタンなどのフォーム要素の色をブランドカラーに変更する方法。ネイティブコントロールを保持するため、キーボード操作とスクリーンリーダー対応を失わない。
シェアックリップ
シェアされたアックリップです。
そのほかの #フォーム ピックアップ
HTMLフォーム設計の基礎講座。textareaとinputの使い分け、labelとの関連付けを解説。入力データの性質に応じた要素選択が、セマンティックHTMLとアクセシビリティの基礎であることを教える。
HTMLの`<input type="email">`がメールアドレス入力欄の意味を持つことや、`type="text"`との違い、labelとの関連付けなどHTMLの意味論を解説する記事。
メール再送信ボタンのアクセシブルなUIパターンを解説。idle・sending・sent・cooldown・error の5つの状態を明確に示し、スクリーンリーダーユーザーにも「待機中」「送信中」「再試行まであと24秒」といった情報が伝わるReactコンポーネントの実装方法を提示する。
セマンティックHTMLの重要性とスクリーンリーダーへの影響を解説。著者のポートフォリオサイト監査で発見した3つの問題——画像のalt属性欠落、フォームラベルの接続不良、見出し階層のスキップ——と修正方法を紹介する。
Lighthouse と axe で頻出するアクセシビリティエラー（代替テキスト・色コントラスト・ボタン名前・フォームラベル）の意味と修正方法を解説する。
RTL（アラビア語など）とLTR（英語など）の双言語サイトに必要な設計・開発・QAチェックリスト。ドキュメント構造、タイポグラフィ、アイコン、フォーム、数値表示、コンテンツ、検索メタデータ、モバイル実機テストまでをカバー。
そのほかの #テスト・検証 ピックアップ
Googleが発表した「Guided Vision」は、Gemini Liveの視覚支援機能で、視覚障害・弱視者との協働開発。カメラの向きや距離が不適切な場合に音で構図を補助し、AIが読める画像を撮影時点で確保する。実務への応用として、建設業で品番読み込みの精度向上を例に検証方法を提案。
音声ゲームブックの開発で直面した、音声認識と音声入力の技術的課題と、入力のタイミング表示・VoiceOver対応などの設計の工夫について
【名古屋開催】第12回 ウェブアクセシビリティ勉強会
イベント 開催終了
ウェブアクセシビリティの基礎から実務的なテーマまで、参加者と一緒にワークショップ形式で学ぶ勉強会。WCAG 2.2やスクリーンリーダーの実機検証など、手を動かしながら知見を共有する。初心者歓迎。
首都圏の大学230校を対象にしたWebアクセシビリティ対応状況の調査。方針公表率や試験実施率、axe DevTools による問題検出など、教育機関のアクセシビリティ対応の課題を数値で明らかにするレポート。
動画の音声をAIで文字起こしした場合、映像にしかない操作手順や指示を記事に補足する編集手順。視覚情報なしで内容を追えるようにするW3C基準のブログ編集方法。
ローカルAI（Gemma 3 4B）を用いてWeb要素のアクセシブル名を自動提案し、キーボード操作を補完するChrome拡張機能。スクリーンリーダー対応で、ブラウザ側のみで動作。