スマートフォンのフォーム設計における4つの実践的改善テクニック:input type の最適化、選択式への転換、ページ分割、エラー後の焦点戻しを解説。
#フォーム
Mobile Form Input Types, Page Splits, and Uploads: A Practical Checklist モバイルフォーム入力タイプ、ページ分割、アップロード:実践的チェックリスト
モバイルフォームの入力フィールド・アップロード・ページ分割について、アクセシビリティを考慮した実装チェックリストを提供する実践的ガイド。
Accessible PDF Forms: Tag Structure and ADA Title II Requirements アクセシブルなPDFフォーム:タグ構造とADA Title II要件
PDFフォームのアクセシビリティ実装に必要なタグ構造・配置・ツールチップ等を解説。ADA Title II規制下での準拠要件。
Auditing a form for accessibility | Accessible Web Audit フォームのアクセシビリティ監査 | アクセシブルウェブ監査
ウェブフォームのアクセシビリティ監査実践ガイド。入力方式とカラーコントラストを中心に、RAMP監査ツールとChrome拡張を用いた検証方法を解説。
Fluent UI 2のInputコンポーネント実装における、フォーム設計とアクセシビリティ対応を詳細に解説。ラベル・補足テキストの配置、支援技術への対応方法を扱う。
MacのVoiceOverでSafariのフォーム要素(検索、ボタン、チェックボックス等)を効率的に操作・移動する方法をステップバイステップで解説するガイド動画。
Chain Restaurant Online Ordering: How Post-Order Tracking Fails Blind Customers チェーンレストランのオンライン注文:視覚障害ユーザーが直面する追跡機能の課題
チェーンレストランのオンライン注文追跡機能が視覚障害ユーザーにもたらすアクセシビリティ課題を実例を交えて分析。チャットUI・フォーム・評価機能の問題点を指摘。
Is Your PDF Form Fillable or Print-Only? ADA Title II Compliance Basics あなたのPDFフォームはフィルト可能か:ADA Title IIコンプライアンスの基本
ADA Title IIに基づくPDFフォームのアクセシビリティ要件について解説。フィルト可能なフォームとオンラインでのアクセシビリティ対応の法的義務を説明している。
Accessible Forms in React Native: A Complete Reference Guide React Nativeのアクセシブルなフォーム:完全リファレンスガイド
React Nativeでアクセシブルなフォームを実装する方法を解説するリファレンスガイド。認証フロー・データ入力・ユーザーサポート等のパターン実装を網羅。
HTML フォーム要素の placeholder 属性をラベル代わりに使う実装の問題点を整理。スクリーンリーダー非対応・コントラスト不足・入力時の消失など、アクセシビリティとユーザビリティの課題を解説。
Not every form field needs to be in a fieldset すべてのフォームフィールドが fieldset に含まれる必要はない
フォームのアクセシビリティ設計において fieldset の適切な使用方法を解説。すべてのフォームフィールドが fieldset に含まれる必要がないことを学べる。
Html Form HTMLフォーム
HTMLフォームの基本的な実装方法と、ユーザー入力を取得するための実装テクニックを初心者向けに解説する記事。
キーボード操作とフォーム設計のアクセシビリティ向上について。タブ順序、スキップリンク、エラー・成功通知の配置などUIパターンの実装と継続改善の仕組み化を論じる。
When Your Chat Bubble Hides Form Errors: The Accessibility Bug Behind Mystery Sign-Up Drop-Offs チャットがフォームエラーを隠す問題:アクセシビリティバグとコンバージョン低下
フローティングライブチャットウィジェットがサインアップ・決済フォームのエラーメッセージを隠す問題を、WCAG 1.4.10違反として分析。アクセシビリティ不具合とコンバージョン低下の因果関係を解説。
WCAG 3.2.2の入力時の変更についてselectタグと独自ドロップダウンの実装判断の違いを解説。フォーム要素のアクセシビリティ実装の細かい判定基準を学べる。
Accessible and Functional Quantity Spinbutton Pattern アクセシブルで機能的な数量スピンボタンパターン
WAI-ARIA spinbutton パターンのアクセシブル実装方法とベストプラクティスを解説する技術ガイド。
Date Pickers Are the Most Common Accessibility Failure on Booking Sites — Here's Why 予約サイトのデートピッカーがアクセシビリティの主要課題である理由
予約サイトのカレンダーピッカーにおけるアクセシビリティバリアを実例で解説。スクリーンリーダー対応やキーボード操作の問題と対策を提示。
Job Application Forms: The Accessibility Failures That Quietly Cost You Disabled Candidates 採用応募フォーム:障害者を見えない形で排除するアクセシビリティ問題
採用応募フォームの潜在的なアクセシビリティ問題が障害者の応募を技術的に阻害している実態を指摘。法的側面と実装上の対策を解説。
Form accessibility: the checklist nobody actually uses (until users complain) フォームアクセシビリティ: ユーザーから苦情が出る前に
フォームのアクセシビリティで陥りやすい落とし穴を解説。自動検証では検出できない実ユーザーの課題を指摘し、チェックリスト形式で実装ガイドを提供する。
Newsletter Signup Form Accessibility: 6 Mistakes I See in Every Creator Landing Page ニュースレター登録フォームのアクセシビリティ:よくある6つの誤り
クリエイター向けランディングページのニュースレター登録フォームで多く見られるアクセシビリティの誤りを指摘。フォーム設計の改善点を解説。
The Incredible Overcomplexity of the Shadcn Radio Button :: Aaron Gustafson Shadcn ラジオボタンの驚くべき過剰複雑性
コンポーネントライブラリの実装複雑性を指摘。Shadcn/uiのラジオボタン実装を例に、なぜそうなるのか、より簡潔な設計の可能性を検討する記事。
Healthcare Accessibility: New Patient Intake Forms and Screen Readers 患者初診フォームのアクセシビリティ: スクリーンリーダー利用者の課題
視覚障害者が医療保険申込フォームで遭遇するアクセシビリティ問題を指摘。ラベル不足、不正なインプット、モバイルボタンの不具合を当事者の視点から解説。
How to Build Accessible Custom Dropdowns (Comboboxes) That Actually Work 機能するアクセシブルなカスタムドロップダウン(コンボボックス)の構築方法
WAI-ARIAを用いたカスタムドロップダウン・コンボボックスのアクセシブル実装方法を解説。フォーム操作の改善技法。
WCAG compliancy date widget WCAGコンプライアンス対応の日付入力ウィジェット
ウェブフォームの日付入力欄におけるアクセシビリティの課題とWCAGコンプライアンス対応方法についての実装ガイド。
We Audited Provia's AI Shopping Chat. Here's What the Before Looks Like. Provia AI ショッピングチャット:アクセシビリティ監査レポート
AI ショッピングチャットのアクセシビリティ監査レポート。naked divs、キーボードナビゲーション不可のカード、入力ラベル欠損など実際の問題を指摘。
スクリーンリーダーやキーボード操作に対応した、意味のあるフォーム設計の原則と実装手法を解説。アクセシビリティを最初から組み込むアプローチ。
How to Reduce Cart Abandonment with Accessible Ecommerce Checkout アクセシブルなECチェックアウトでカート離脱を減らす方法
ECサイトのチェックアウト画面をアクセシブルに改善することで、カート放棄率を削減し全ユーザーのコンバージョン向上を実現する実装手法を解説する。
参加のハードルを下げるフォーム設計の具体的なアプローチを、寄付システムを題材に紹介するインクルーシブデザイン事例である。
Windows 11 設定画面でスライダーが正しくレンダリングされない問題を報告。フォームコントロールの機能不全がユーザーインターフェースに与える影響を検証。
Retail Checkout Accessibility: What the Forms Get Wrong 小売チェックアウトのアクセシビリティ:フォームの何が間違っているか
ECサイトのチェックアウトフォームにおけるアクセシビリティの問題を、スクリーンリーダーユーザーの体験をもとに分析し、改善方法を提示している
HTML仕様の再学習を通じて得た気づきをまとめた第2弾。セマンティック要素の正確な使い方とアクセシビリティに関連するHTML仕様の理解を深める内容だ。
セマンティックHTML、ARIA属性、フォーム設計、Dialog、ダークパターン回避など、Web開発の現場で頻出するアクセシビリティ課題を実践的に解説する。
Why Blind Shoppers Struggle With Online Product Returns 視覚障害のある買い物客がオンライン返品で苦労する理由
オンライン購入・返品プロセスにおいて視覚障害ユーザーが直面するアクセシビリティバリア(QRコード、位置選択フォーム等)を分析する記事。
Why Blind Shoppers Can’t Complete Online Checkout 視覚障害のある買い物客がオンラインチェックアウトを完了できない理由
スクリーンリーダーユーザーがオンラインショッピング決済を完了できない理由と、ショッピングカートの一般的なアクセシビリティ障壁を詳解。
Accessible building blocks for web: form fields ウェブのアクセシブルな構成要素:フォームフィールド
スクリーンリーダーやキーボード操作ユーザーを含むすべての利用者にとって入力しやすいウェブフォームの設計・実装方法を解説する。
Accessible building blocks for web: form fields (British Sign Language version) ウェブのアクセシブルな構成要素:フォームフィールド(英国手話版)
すべての利用者にとって入力しやすいウェブフォームの設計原則を、イギリス手話で解説するTetraLogicalのシリーズ動画。
Next.js/Reactでキーボード操作のみで使用可能なログインフォームを実装しながら、WAI-ARIAによるフォーカス管理とエラー通知の実装方法を詳しく解説している。
複雑な日付ピッカーUIをアクセシブルに実装するJavaScriptコンポーネント「Pikaday」。フォーム入力時のキーボード操作とスクリーンリーダー対応を強化し、ユーザー体験改善を目指した技術実装ガイド。
HTML標準要素とWAI-ARIA属性を組み合わせたアクセシビリティ対応チェックボックスのコピペ可能な実装パターンを紹介している。
アクセシビリティについて
代替テキスト・フォームラベルなど具体的な実装例を交えながら、Webアクセシビリティの基礎知識とWCAG対応の重要なポイントをわかりやすく解説した入門記事だ。
The button element button 要素
HTML button 要素の実装とアクセシビリティ対応をカバーした非公式ガイド。フォームコントロール、キーボード操作、スクリーンリーダー対応が主焦点。
Contextual form errors and ARIA コンテキストフォームエラーとWAI-ARIA
Webフォームのエラー表示のアクセシビリティをWAI-ARIAを用いて改善する方法を解説。コンテキスト情報を含むエラーメッセージの実装パターンを実例で示す。
WebアプリケーションのアクセシビリティをHTMLとWAI-ARIAの基礎から実践的改善手法まで体系的に解説した技術書。フォーム・モーダル等の複雑なUIパターンへの対応と組織での推進ノウハウも網羅する。
視覚障害者のウェブ利用を前提に、アクセシビリティに配慮した入力フォームの設計・実装手法を検討した論文。スクリーンリーダーでの操作性改善を中心に論じる。
Form Design Patterns フォームデザインパターン
視覚障害者や運動障害のあるキーボードユーザーにも対応したアクセシブルなフォームデザインのパターンを実装例とともに解説した技術書だ。