押された状態が伝わらないトグルボタン

Tabで到達でき、EnterとSpaceで押せますが、状態は is-saved クラスにしかありません。保存されていてもいなくても「お気に入り、ボタン」と読み上げられ、変化しても何も伝わりません。

aria-pressed を付けるとトグルボタンになり、「お気に入り、トグルボタン、押されていない」と読み上げられ、変化すると「押されている」と伝わります。名前は「お気に入り」のままで、状態が残りを伝えます。ハートはクラスではなくこの属性から塗るので、見た目と読み上げが一つの値から決まり、ずれません。

三つとも達成基準4.1.2を満たします。どれを選ぶかは、トグルが何であるか、すでに何があるかによります。お気に入りや太字のように、ボタンとして見えて動くトグルを作るなら、aria-pressed を使います。名前は一つのままで、フォーカス時にも変化した瞬間にも読み上げられ、必要なのは属性一つです。HTMLにはトグルボタンの要素がないため、HTMLの要素の代わりにARIAを使っているわけではありません。まとめて送信する絞り込みのように、トグルが実際にはフォームの選択肢である場合や、マークアップがすでにチェックボックスである場合は、チェックボックスのままにします。状態はブラウザーが持ち、スクリプトなしでも動きますが、チェックボックスとして読み上げられ、Enterには反応しません。ミュートとミュート解除のように、デザインがすでにラベルを次の操作に変えている場合は、aria-pressed を重ねずに名前を変える方法を残し、新しい名前が読み上げられるかを確かめるか、結果をステータスメッセージでも伝えます。

aria-pressed やチェックボックスを使うときは、どちらの状態でも名前を変えません。「お気に入り」と状態「押されている」なら明確ですが、「お気に入りから削除、押されている」は二つの異なることを同時に伝えます。

フォローボタンのように、ラベルが見える文字の場合も同じ選択になります。

• aria-pressed を使うなら、「フォロー」の文字はそのままにし、押された見た目を属性から描きます。
• ラベルを変えるなら、新しい言葉は「フォロー中」ではなく、次の操作である「フォロー解除」にし、aria-pressed は付けません。
• 「フォロー中」のように今の状態を表す言葉に変えると、見える人には状態が伝わりますが、それ以外の人には操作として読み上げられます。

押された状態は色以外でも示します。ハートが輪郭だけから塗りつぶしに変わるのは形の変化で、塗りに currentColor を使えば強制配色でも残ります。灰色から赤に変わるだけのハートは、強制配色でも、二つの色を見分けにくい人にも区別がつきません。

お気に入りの保存には、ふつうサーバーへのリクエストが伴います。押したときに状態を変え、保存に失敗したら元に戻してステータスメッセージで知らせます。保存されていない商品のハートを塗ったままにしないでください。

コンポーネントライブラリでは、押された状態を外側の要素やアイコンに持たせていることがあります。読み上げられるのはフォーカスを受ける要素の状態なので、その要素を確認してください。ボタンではなく、オンとオフの位置を持つ設定の行なら、トグルスイッチを参照してください。