アクセシビリティ
このサイトは WCAG 2.2 レベル AA を目標としています。そのうち自動で検査できる部分はビルドのたびに検査され、後退があればビルドは失敗します。
ビルドが強制していること
- 色のコントラスト。 文字の組み合わせはすべて 4.5:1、フォーカス表示は 3:1 の比率に対して検査します。明るいテーマでも暗いテーマでも同じです。配色はテストに書き写すのではなくスタイルシートから読み取るので、色をひとつ変えればそれだけで検査が走ります。
- マークアップの意味付け。 リンターがすべてのコンポーネントにアクセシビリティ規則を適用します。ラベルの欠落、不正な ARIA、ハンドラを持つ非対話要素はいずれもビルドを落とします。
- 横方向のはみ出しがないこと。 アラビア語の右から左のレイアウトも含め、実際のブラウザで検査しています。
設計上の判断
- 色だけが手がかりになることは決してありません。 会議プランナーの勤務時間は塗りに加えて枠線を持ち、夏時間の注意書きは琥珀色の色味ではなく言葉です。
- 結果は自分から知らせます。 結果領域はすべて
aria-live="polite"なので、変換が変わったときに読み上げられます。探しに行く必要はありません。 - すべての入力欄に本物のラベルがあります。 プレースホルダーをラベル代わりにしている箇所はどこにもありません。
- 動きは設定に従います。
prefers-reduced-motionが設定されていれば、アニメーションとスムーススクロールは切られます。 - JavaScript なしでも動きます。 オフセット、切り替え日、参照表、解説はすべて事前生成されたページの中にあります。スクリプトを必要とするのはリアルタイムの時計と対話的なツールだけで、それなしでは動かない操作部は、死んだ状態で見せるのではなく隠します。
- 時刻は等幅書体とタブ幅の数字で組んでいます。 桁が揃い、進む数字が隣の文字をずらさないためです。
既知の制約
- 会議プランナーの24時間の帯は幅の広い表です。折り返さず、自身のコンテナの中で横にスクロールします。折り返された帯は形として読めなくなるからです。同じ情報は、その上の要約に文章としても置いてあります。
- 自動検査が捉えられるアクセシビリティ上の問題は一部にすぎません。ここで何かがうまく動かないなら、それは不具合であり、ぜひ知らせてください。
知らせる方法
お問い合わせページのアドレスに、該当ページと何が起きたかを書いてお送りください。支援技術についての報告はとりわけ有用です。その技術を手元に置かずに検証することが、いちばん難しいからです。