「いいね」ボタンが状況によってはラベルを失う

貢献 UX
1

チームの皆さん、こんにちは！
これはちょっと通りがかりの報告です。別のスレッドで、いいねボタンにアクセシビリティラベルが表示されないことがあることに気づきました。まだパターンは見つけていませんが、投稿にすでに1つ以上のいいねがついているか、まだ1つもついていないかによって、コントロールが分割されて表示されることに関連している可能性があります。その場合、2つのボタンが表示されます。1つにはカウントが表示され、もう1つにはラベルがありません。

Marco

「いいね！」 3
2

ああ、これはメタサイト（https://meta.discourse.org/t/notice-testing-discourse-reactions-here-on-meta-for-1-week/183672）でDiscourse Reactionsプラグインのテストを行っているためだと思います。これを修正する必要がありますね！ご報告ありがとうございます。

「いいね！」 6
3

@Ahmed_Gagan FYI、ぜひこちらをご覧ください。

「いいね！」 5
4

多数のケースで試行・検証しましたが、再現できませんでした。ラベルは常に表示されますが、初回表示には若干の遅延が生じます。これは title 属性の一般的な挙動です。
問題点は「いいね」ボタンに付与されているツールチップにあると推測されます。認識は合っていますでしょうか？

IMG_1826
IMG_18263024×1539 1.57 MB

「いいね！」 1
7

ポストへの「いいね」を押すボタンについて、スクリーンリーダーが何を話しているかをお尋ねしています。あるいは、他のリアクションを追加できるかもしれませんが、私のスクリーンリーダーはそのことを全く教えてくれません。私がラベル付けされていると認識するのは、現在の「いいね」数が1以上の場合に表示される要素のみです。数が0の場合は、そのコントロールは存在しません。しかし、「いいね」リアクションを追加するために押すボタンは、Windows、Mac、iOS のいずれのスクリーンリーダーでもラベル付けされていません。

私は盲目のため、マウスは使用していません。また、title 属性自体がタッチ操作では一般的に問題があります。なぜなら、マウスホバーを簡単にトリガーする方法が通常ないからです。

これが役立つことを願っています…

明確にしておきますが、私が言及しているのは #discourse-reactions-actions-916340 > div > div.discourse-reactions-reaction-button.my-likes > button というボタンです。このボタンには title 属性も aria-label もなく、内部には aria-hidden として設定された SVG しかありません。仮にそうだったとしても、その SVG やその子要素にはスクリーンリーダーが利用できる情報が一切含まれていません。したがって、解決策は以下の通りです：

  1. このボタンに aria-label を付け、「このポストにいいねをする」や「いいねで反応する」などの明確な文言を設定してください。将来的に他のリアクションが追加される可能性があるため、どのリアクションが追加されるかを明示する必要があります。
  2. 数を保持する要素 #discourse-reactions-counter-916340 には、実際に誰がどのリアクションをしたかについてのより良い情報を提供すべきです。 sighted な人々がその情報にどのようにアクセスしているかはわかりません（その数字をクリックするとポップアップが表示される場合など）。しかし、これもスクリーンリーダーやキーボードユーザーがアクセスできるようにする必要があります。
  3. 将来的に他のリアクションが追加される場合、それらもマウスだけでなく、タッチ、キーボード、スクリーンリーダーにも対応できるようにする必要があります。

現時点では、少なくとも私の場合、このウィジェットは「いいね」リアクションのみを許可しているようです。

複数の投稿をしてしまい申し訳ありませんが、原因を特定するためにいかに細心の注意が必要かがわかります。私のポスト以外のポストにある title 属性は、現在、実際の「いいね」ボタンの親 div にあります。しかし、スクリーンリーダーがそれを認識するには、title 属性はボタン自体に配置される必要があります。スクリーンリーダーは任意の要素からの title を認識しません。過去25年間、この一般化が乱用されてきたからです。したがって、title 属性を <button> 子要素に移動すれば、スクリーンリーダーは正しく認識します。

「いいね！」 1
9

@MarcoZehe さん、必要な箇所のタイトルを特定してくださり、ありがとうございます。
あなたの問題を解決する PR をこちらに追加しました。

@MarcoZehe さん、PR はすでにマージされましたので、最新のプラグインをプルして試してみてください。

10

ありがとうございます！このインスタンスがプラグインの最新コードを反映するまで待ちます。私は独自に Discourse インスタンスを運用していないため、プラグインを取り込む環境がありません。迅速な修正をありがとうございます！

「いいね！」 4
11

Marco、どうもありがとうございます。

リアクション機能を再デプロイしました（約15分以内に反映されるはずです）。

問題が解決したかご確認いただき、ご連絡ください。

「いいね！」 3
12

@Sam さん、この問題は確かに解決したように見えます。ありがとうございます！

「いいね！」 4
13

Marco、テストしていただき本当にありがとうございます！

「いいね！」 2