WCAG 2.2の「ターゲットのサイズ(最低限)」と「重複入力」の基準を、イベントの申し込み画面を例に解説する記事。操作対象の大きさと間隔を確保すること、同じ手続きで入力を繰り返させないことを求める基準だと説明する。
シェアックリップ
シェアされたアックリップです。
そのほかの #WCAG ピックアップ
(引用)アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
イスラエルの障害者平等権規則と規格 IS 5568 AA(WCAG 2.1 AA 準拠)への適合を、ブラウザ上で動く JavaScript により自動的に確かめる方法を解説する記事。代替テキスト・見出し構造・コントラスト・言語と文字方向の確認項目を示す。
スマートフォンなどで押し間違えやすいボタンの大きさを扱った記事である。操作対象は 24×24 CSS px 以上にし、主要な操作では 44×44 CSS px を目安にすると説明する。アイコンの大きさは変えず、押せる範囲に余白を足す方法を示す。
会員登録フォームで自動入力が効くかを1分で確かめる方法を解説する記事。入力欄に autocomplete の値を付けて入力目的を伝える意味を、WCAG 達成基準1.3.5(入力目的の特定)の解説をもとに示す。
AIがアクセシビリティをレビューできる範囲は、ソースコードだけを読むか、実行中のブラウザーやaxe-coreの結果まで受け取れるかによって変わると整理する。WCAG適合と自動テストの合格は同じではないことも説明する。
そのほかの #フォーム ピックアップ
会員登録フォームで自動入力が効くかを1分で確かめる方法を解説する記事。入力欄に autocomplete の値を付けて入力目的を伝える意味を、WCAG 達成基準1.3.5(入力目的の特定)の解説をもとに示す。
スクリーンリーダーを使う視覚障害のある筆者が、ウェブサイトのログイン画面で遭遇する障壁を解説した記事である。ラベルのないサインインアイコン、パスワード表示の切り替え、チェックボックス、分割された二段階認証の入力欄などを取り上げる。
Reactのフォーム部品の設計を、ラベルやメッセージ行などの共通の構造、react-hook-form と zod への接続、スマートフォンでの操作の3点から解説する。例には作者が開発するUIライブラリを使っている。
専門家のいないチームが取り組めるよう、WCAG 2.2の87項目から実害の多い7項目を絞った記事。キーボード操作、ラベル、代替テキスト、コントラスト、見出し、色以外の手がかり、フォーカスの表示を扱う。
会員登録フォームの入力欄に autocomplete 属性を付けて、入力の目的を伝える方法を解説する記事。名前・メールアドレス・郵便番号などをブラウザが自動入力できるようにし、WCAG 1.3.5 と認知の困りごとのある人の入力の負担に結びつける。
筆者のサイト5頁を、キーボードだけでの操作、入力欄の名前、文字の濃さ、見出しの順の4点でWCAG 2.2に照らして数えた実測記録。