web-dev-qa-db-ja.com

スクリーンリーダーの場合：テキストアイテムのグループを1つのアイテムとして読み取るようにマークアップする方法私も試すべきですか？

次のコンポーネントをWCAG 2.1ガイドライン、アクセシビリティのベストプラクティス、および可能な限り支援技術の互換性に従ってマークアップするにはどうすればよいですか（JAWS、NVDA、またはVoiceOverだけをターゲットにしたくない） ）？

または、スクリーンリーダー（およびその他の支援技術）のユーザーは、この特定の対話についてさえ気にしていますか？

目の見えるユーザーとして、私は視覚的に次のことを1つの情報として利用します。

enter image description here

ただし、スクリーンリーダーのユーザーは、「アイテム」でナビゲートすると、マークアップされた各テキストが個別に読み上げられます。

テキストは、スタイル、セマンティクス、および業界で一般的なスクリーンリーダーのユーザーのみに非表示のテキストを伝えるために大幅にマークアップされています。

マークアップは次のようになります（注：タグの任意の組み合わせで動作が認識されるため、この特定の例ではセマンティクスについてコメントしないでください）：

<data value="0.99">
    <span class="sr-only">Sale:</span>
    <mark>$0.99</mark>
    <span class="sr-only">discounted from</span>
    <s>$1.00</s>
</data>

したがって、スクリーンリーダーのユーザーエクスペリエンスは次のようになります
注：通貨の読み取りは、リーダーとユーザーの設定によって異なります。

[User executes "Read current item" command]

セール：

[User executes "Read next item" command]

99セント

[User executes "Read next item" command]

から割引

[User executes "Read next item" command]

1ドル

これは直観に反し、煩わしい可能性があります。マークアップに関する実装の詳細がユーザーに公開されるため、ユーザーが必ずしも知ったり気にしたりする必要はありません。

対照的に、セマンティクスやスタイルの価格をマークアップしないことを選択し、プレーンテキストのみを使用してすべてのユーザーに同じ情報を伝えた場合、スクリーンリーダーは1つのアイテム：

<span>Sale: $0.99 discounted from $1.00</span>

スクリーンリーダーのエクスペリエンスは次のようになります：
注：通貨の読み取りは、リーダーとユーザーの設定によって異なります。

[User executes "Read current item" command]

販売：1ドルから割引された99セント

これは、はるかに優れたエクスペリエンスのように感じられ、目の見えるユーザーが視覚的に情報を消費する方法、およびすべてのユーザーに情報を消費させる方法とより一致します。

accessibilityhtmlhtml5screen-readerwcag
2
gfullam

（コメントを回答に展開:)
モバイルユーザーの場合、 親要素で非標準role="text" を使用できます。それはハックでWebKitでのみ機能しますが、私の回想では、インライン要素に遭遇したときにVoiceOverのみが（誤って）行を分割するため、問題ありません。 NVDA、JAWS、およびTalkBackは一度に正しくその行を読み上げますが、@ andrewmcphersonがコメントしたように、さまざまなスクリーンリーダーを使用してテストしてください。

role="text"を使用しても、粒度の選択は解除されません（ありがたいことに、解除できません）。したがって、ユーザーがテキストを行、単語、または文字で読みたい場合は、スクリーンリーダーのショートカット（ローターのオンiOSなど）。このロールを使用すると、アイテム間を移動するとき（iOSでの左/右スワイプ）にのみ子がグループ化されます。

最初に "Sale："を追加することがさらに役立つかどうかも検討します。すでに "割引"と言っているので、Saleを追加するとこれが複製され、多くのアイテムを参照するときに音声が乱雑になります。

1
Victor

テキストアイテムのグループを1つのアイテムとして読み取るようにマークアップする方法は？私も試すべきですか？

このように言えば、次の理由により、質問は少し見当違いです。

スクリーンリーダーユーザーとして、「アイテム」でナビゲートする場合、

スクリーンリーダーは、ユーザーの好みに応じて、テキストのチャンクをさまざまな粒度で読み取ることができます。これは、一度に段落、行、単語、または文字にすることができます。経験豊富なスクリーンリーダーユーザーは、粒度を頻繁に切り替えることができます。

一部の要素により、スクリーンリーダーが一時停止または停止する場合があります。セール価格の背景に色を付け、元の価格に取り消し線を付ける場合、これを回避することはできません。

これははるかに優れたエクスペリエンスのように感じられ、視力のあるユーザーが視覚的に情報を消費する方法、およびすべてのユーザーに希望する方法が情報を消費する方法とより一致します。

強調鉱山、そこ。スクリーンリーダーのユーザーに同等のエクスペリエンスを提供する方法について考えているのは良いことですが、特定のエクスペリエンスを誰かに強制しようとすることに注意してください。結局のところ、あなたは知りませんなぜ彼らはスクリーンリーダーを使用しています。多分彼らは盲目かもしれないし、多分そうではないかもしれない。

0
andrewmacpherson