キーボードで選べず、読み上げもされない座席表

ある映画館の予約ページでは、1回の上映の座席を座席表で示しています。「スクリーン」と書かれた帯の下に、AからDの4列、各列6席が並びます。空席は緑、予約済みは赤で、空席をクリックすると選択中を示す青に変わります。座席表の上には3つの色を説明する凡例があり、A〜B列は$10、C〜D列は$14と書かれています。マウスなら、C列で隣り合う2席を選ぶのは2回のクリックで済みます。

マウスを使わずにTabキーを押すと、フォーカスはページの先頭からすべての座席を飛ばし、「次へ」へ進みます。座席は一つも選べません。座席が空のdivなので、スクリーンリーダーでページを読んでも、「スクリーン」に続いて列の文字「A」「B」「C」「D」が読まれるだけで、その間には何も聞こえません。赤と緑が同じ色に見える人には、どの座席も同じように見えます。C列の空席の1、2、5、6番は、予約済みの3、4番と同じ色合いです。

そこで、チームは各座席をボタンにします。Tabは各座席に止まるようになりますが、スクリーンリーダーには24席のどれも「ボタン」としか聞こえず、どの列の何番か、料金はいくらかは伝わりません。予約済みの座席もほかと同じボタンで、押しても何も起きず、何も読まれません。座席を選んでも色が変わるだけで、スクリーンリーダーは前と同じように「ボタン」と読みます。

達成基準2.1.1「キーボード」は、マウスでできることはすべてキーボードでもできることを求めています。この座席表で座席を選ぶ方法は、divのクリックだけです。divはフォーカスを受けず、キーにも反応しないため、ポインターなしでは座席を選べません。

達成基準4.1.2「名前（name）・役割（role）及び値（value）」は、どのコントロールにも名前と役割があり、状態が支援技術に伝わることを求めています。座席もコントロールです。選択でき、空席・予約済み・選択中のいずれかの状態を持ちます。divには役割も名前もないため、スクリーンリーダーは何もないかのように通り過ぎます。ボタンには役割があっても、テキストも名前もありません。どちらの場合も、状態を表すのは taken と chosen というクラスと、その色だけです。ブラウザーが支援技術に伝える情報は要素と属性から作られ、クラス名や背景色からは作られないため、状態は伝わりません。

達成基準1.4.1「色の使用」は、色だけで情報を示さないことを求めています。どの座席も、空席か、予約済みか、選択中かを塗りの色だけで示しており、印も形も言葉もありません。座席表の上の凡例には言葉がありますが、凡例と座席を結び付けるのは色だけです。緑、赤、青の明るさの差は1.46:1以内、赤と青では1.11:1しかないため、色味を除くとほとんど同じに見えます。また、色覚特性の中でも多い、赤と緑を見分けにくいタイプの人には、緑と赤がほぼ同じ色に見えます。

映画館、劇場、コンサートホール、スタジアム、航空会社、鉄道は、チケットを買う途中にこのような座席表を置いています。座席表でしか選べない場合、選べない座席は買えないチケットと同じです。座席表の横に「おまかせで選ぶ」ボタンを置くサイトもありますが、選ぶのはサイトの側です。通路側の席も、一緒に来た人の隣も、いつも座る列も選べません。

10グループ中4グループに影響

• 全盲 （影響あり）
• 弱視 （影響あり）
• 色覚 （影響あり）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 筋力・可動域 （影響なし）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 視覚を使わない 座席が空のdivなら、スクリーンリーダー利用者には「スクリーン」という言葉と列の文字だけが読まれ、その間には何も聞こえません。座席がボタンなら、どれも「ボタン」としか読まれません。どの座席も、どの列の何番か、料金はいくらか、空いているか、予約済みか、選択中かを伝えないため、手助けなしでは座席を予約できません。
• 手の操作が限られる 座席がクリックにしか反応しない場合、キーボードやスイッチの利用者はまったく座席を選べません。Tabはページの先頭から座席表全体を飛ばして「次へ」へ進みます。
• 色を知覚しない 赤と緑を見分けにくい人には、空席と予約済みの座席が同じ色に見え、クリックしても何も起きないことで初めて予約済みだと分かります。色味をまったく除くと、3つの色はほとんど同じ濃さです。
• 視覚が限られる 塗りの色を置き換えるWindowsのコントラスト テーマでは、どの座席も同じように描かれます。また、視力の低い人は色の見え方も弱いことが多く、空席・予約済み・選択中を見分けにくくなります。

空のdivには役割がないため、1つ目の座席表ではaxeが確認するものはありません。axeのコントラストのルールが見るのはテキストで、塗りの色が何を意味するかは見ません。2つ目の座席表の空のボタンは、テキストも名前もないため、axeが button-name として報告します。ただし、そのボタンが座席であることや、クラスでは予約済みや選択中と示しているのにマークアップでは何も伝えていないことは分かりません。

この診断ツールは、seat やそれに類するよくあるクラス名を手がかりに、div、span、SVGの図形で作られた座席を探します。Tabが座席にも座席表の中のほかの要素にも届かない座席表を報告し、Tabは届いても、クラスでは予約済みや選択中と示しているのに disabled、aria-disabled、checked、aria-pressed、aria-checked、aria-selected のどれも持たない座席も報告します。Tabが届く座席表は、人が確認する項目として渡し、各座席の名前が列と番号を伝えているか、色がなくても状態が分かるかを確かめてもらいます。idやクラス名で座席表と分かる canvas も、同じように確認に回します。それと分かるクラス名のない図形で作った座席表は見つからず、座席の名前が聞く人にとって分かりやすいかは、どの確認でも分かりません。

広く写されている座席予約のチュートリアルは、1つ目の作り方、つまり1席ごとに空のdivを置き、座席表全体に1つのクリック処理を付ける形で作られています。AIアシスタントに座席表をアクセシブルにするよう頼むと、divをボタンに変えただけで終わり、2つ目の座席表になることがあります。すべての座席に aria-label="座席" のような同じ名前を付けることもあります。