Dashboard NG: 1.3.1
ダッシュボード ユーザー管理 注文履歴 商品管理 設定
サイドバーがdivで実装されnavランドマークがない。スクリーンリーダーでナビゲーションとして認識されない。

ユーザー管理

ユーザー一覧 NG: 1.3.1

h1の直後にh4が使われており、h2/h3をスキップ。見出し階層が論理的でなく、スクリーンリーダーのナビゲーションに支障。
NG: 1.3.1 (scope/captionなし)
ID 名前 メール ステータス 操作
001 田中太郎 tanaka@example.com 有効 NG: 4.1.2 NG: 4.1.2
002 鈴木花子 suzuki@example.com 保留
003 佐藤次郎 sato@example.com 無効
アイコンのみのボタンにaria-label/テキストがなく、スクリーンリーダーで「ボタン」としか読み上げられない。テーブルにcaption、thにscopeがない。

タブ切り替え NG: 2.1.1 / 4.1.2

基本情報
権限設定
ログ

タブ1の内容。ユーザーの基本情報が表示されます。

タブ2の内容。権限の設定画面です。

タブ3の内容。操作ログが表示されます。

タブがdiv+onclickで実装されており、キーボードでフォーカス・操作ができない。role="tablist"/"tab"/"tabpanel"、tabindex、矢印キー操作が必要。

ユーザー登録フォーム

NG: 1.3.1
labelのfor="wrong-id"とinputのid="user-name"が不一致。ラベルクリックでフォーカスが移動しない。
部署 NG: 1.3.1
span要素はlabelの代わりにはならない。label要素でselect要素と関連付けが必要。

NG: 1.3.5
メールアドレス入力にautocomplete="email"がない。自動入力支援が利用できず、認知障害のあるユーザーに不便。

NG: 1.3.1
パスワード要件がplaceholderでのみ表示。入力開始で消えてしまい、aria-describedbyで別途要件テキストを関連付けるべき。

モーダルダイアログ NG: 2.4.3 / 4.1.2

モーダルにrole="dialog"、aria-modal="true"がない。フォーカストラップが実装されておらず、Tabキーでモーダル外の要素にフォーカスが移動する。Escapeキーでの閉じ操作も未実装。

ステータス説明

ユーザーステータスは3種類あります: 有効 アカウントが有効でログイン可能な状態です 、 保留 管理者の承認待ちです 、 無効 アカウントが停止されています NG: 1.4.13 / 2.1.1

ツールチップがCSS :hoverのみで表示され、キーボードフォーカスやスクリーンリーダーでアクセスできない。また、ツールチップ上にポインタを移動すると消えてしまう(1.4.13違反)。

リアルタイム通知 NG: 4.1.3

通知を待っています...
通知エリアにaria-live="polite"がない。動的に追加されるメッセージがスクリーンリーダーに読み上げられない。