バッジしか変わらない「カートに入れる」ボタン

サーバーが応答すれば数字は正しく変わります。しかし span はライブリージョンではなく、フォーカスのあるボタンも何も変わらないため、待っている間もそのあとも、スクリーンリーダーには読み上げるものがありません。最初の追加の処理中にもう一度押すと、マグがもう1個入ります。追加に失敗すると、何も変わりません。

role="status" の p は空の状態で最初からHTMLにあるため、文言が変わる前から、ブラウザーはこの領域の変化を見張っています。スクリーンリーダーは読み上げ中の内容を終えてから「ホーローマグを追加しました。カートの商品は1点です」と読みます。ショップの応答に0.5秒以上かかるときは、その前に「ホーローマグを追加しています…」と読まれるため、待っている間も無音になりません。すぐに応答があれば省かれるので、二度続けて聞かされることもありません。フォーカスはボタンに残り、ボタンも有効なままです。待っている間に押しても無視され、マグが2個入ることはありません。押すたびに文中の件数が変わるので、2回目も読み上げられます。この行はボタンのすぐ下にあり、画面拡大ソフトの利用者がもともと見ている場所です。ヘッダーが見えなくなるまでスクロールしていても、画面が見える人の目に入ります。行はページが変わるまで残しておけます。追加に失敗したときも、黙らずにそのことを言葉で伝えます。

三つとも、フォーカスを動かさずに結果を伝えます。ボタンのそばの行を使ってください。コードは隠した領域と同じで、劣る点がありません。メッセージが利用者の見ている場所にも表示され、追加に時間がかかっていることや失敗したことも伝えられます。隠した領域が合うのは、変更できないテーマを使っている場合など、デザインをそのまま保つ必要があるときです。サイト中の「カートに入れる」が一度に直ります。件数をステータス領域にする方法は、包む要素を一つ足すだけでスクリプトも変えない最小の変更ですが、それだけでは足りません。ヘッダーがどの画面幅でも同じで、件数がHTMLに入っている場合に限って使い、失敗には別にメッセージを用意してください。

アイコンが変わるだけのほかの操作。 操作の結果が絵だけで示される場面では、同じ失敗が起き、同じ方法で直せます。

• リンクのコピー：2秒間チェックマークに変わるアイコンは聞こえません。「リンクをコピーしました」を確認の行か領域に書き込み、ブラウザーがクリップボードへの書き込みを拒んだときもそう伝えます。
• お気に入りへの保存：塗りつぶされるハートはトグルボタンで、その状態はボタン自体に aria-pressed で持たせます。フォーカスのあるボタンの状態は読み上げられます。押された状態が伝わらないトグルボタンを参照してください。ステータスメッセージが要るのは、「保存しました。リストを残すにはログインしてください」のように、ボタンでは伝えられないことがある場合だけです。
• 商品一覧のクイック追加：どのカードのボタンも「カートに入れる」なので、メッセージには商品名を入れます。

追加している間。 ボタンを押してからサーバーが応答するまでの時間も、確認の一部です。確認の行と隠した領域では、読み上げられない読み込み中の表示と同じように扱います。すぐに応答があれば結果だけを伝え、遅いときはタイマーで先に「追加しています…」と伝え、応答が来たらタイマーを止めます。ボタンは有効なままにして、処理中の押下は無視します。フォーカスのあるボタンを disabled にすると見た目は整いますが、ブラウザーがフォーカスをボタンから外すことがあります。Chromeではフォーカスがページ自体に落ち、ボタンが有効に戻っても戻らないため、スクリーンリーダーの利用者は買い物の途中で現在位置を失います。ボタンにスピナーを描くのは、名前が変わらない限りかまいません。言葉はステータス領域に任せます。無効なコントロール全般については見つからず理由も分からない無効なボタンを参照してください。

領域を先に用意します。 コンポーネントベースのフレームワークでは、領域をレイアウトか商品のマークアップに置きます。メッセージと一緒に現れる {#if} の中や、追加したときに表示されるミニカートの中には置きません。メッセージと一緒に現れる領域は、たいてい読み上げられません。この失敗は画面に出ても読み上げられないステータスメッセージで詳しく扱っています。

カートのパネルは別のデザインです。 追加するとミニカートのパネルを開くショップもあります。パネルの中へフォーカスを移してダイアログとして動くなら、ステータスメッセージではなくコンテキストの変化にあたり、何が起きたかはパネルの見出しが伝えます。背後にフォーカスが残るモーダルに従ってください。フォーカスを移さずにスライドして出るだけのパネルは、バッジと同じく何も読まれないため、ここで紹介した修正のどれかが必要です。

読み上げの割り込み。 role="status" は、スクリーンリーダーが読み終えるのを待ってから読まれるため、確認の知らせに合っています。カートへの追加に role="alert" や aria-live="assertive" を使わないでください。利用者が聞いていた内容を遮ります。

同じ文言が続く場合。 失敗が2回続くと同じ文を書き込むことになり、領域の文言が変わらないと何も読まないスクリーンリーダーもあります。件数が読み上げられない検索・絞り込み結果と同じように、先に領域を空にし、少し間を置いてから新しい文言を書き込みます。

修正にならないもの。 ボタンの文言を2秒間「追加しました」に変えても、フォーカスのあるボタンの変化を読み上げるかどうかはスクリーンリーダーによって異なり、カートの状態も伝わりません。カートのリンクやメッセージへフォーカスを移せば読まれますが、利用者を商品から引き離し、4.1.3が求める方法でもありません。件数に合わせて変わるカートのリンクの aria-label は、リンクにフォーカスがないため読み上げられません。