非直感的なテキストtabelでボタンのラベルにアリアを使用する方法

Question

私はこのようなボタンがあります。

<button type="button"> 
    Remove 
</button> 

文脈的、見ることができ、ユーザーはボタンが参照していることを伝えることができるようになりますが特定の製品を削除することができます。ただし、視力障害のあるユーザーの場合、「削除」というテキストは、削除しているものに関して役立つ情報ではありません。

私はaria-labelは次のように使用されることになって、MDN web docsによると、あることを知っている：

私も

画面上のテキスト・ラベルが表示されていない場合には、それを使用します aria-labelledbyは、他のマークアップとラベル付けされている要素との関連付けに使用されるはずです。ただし、マイボタンの場合は、ボタン自体にラベルが含まれています。ラベルそのものが十分に記述的ではないことが起こります。

ここで、ボタンのテキストを変更するだけではない理由を尋ねているかもしれません。 UXチームは可視のボタンのテキストを変更したくないので、ボタンの可視部分を変更することなくボタンのアクセシビリティを把握しようとしています。

どういうわけか、このような状況で何をすべきかに関する定義された仕様はありますか？私の傾向はaria-labelですが、私はARIAに準拠しているとは思えません。

ありがとうございます！

Answer 1

どういうわけか、このような状況で何をすべきかに関する定義された仕様はありますか？私の傾向は、アリアラベルを使用することですが、私はそれ自体がARIAに準拠しているという肯定的ではありません。

はいできます。

aria-label属性が使用され、内側のテキストが置き換えられます。コンテンツのみ（ステップ2F）

Answer 2

はい、あなたはアリア・ラベルを使用することができます存在しない場合に使用される一方で、テキストAlternative Computationため

仕様はaria-labelは（ステップ2Cに）優先して使用されることを定義します。通常、可視テキストまたは要素内のテキストより優先されます（カスタム設定が設定されている場合を除いて、ほとんどの場合、JFW、NVDA、VOではtrueです）。画像のためのalt属性と同じように

<button aria-label="Remove article XYZ">Remove</button> 

、ARIAラベルは、CEごとに十分であることを確認し、要素内の目に見えるテキストまたはテキストが非常におそらくを話されることはありませんつまり、それは完全にアリアに置き換えられ-ラベル。 ここの例では、「削除」という語句がラベルに表示されている必要があります。

代替の代わりに、アリア・ラベルとして、あなたはまた、テキストのみ、スクリーンリーダーによって読み上げられる作るためにCSSクラスを使用することがあります。

<button>Remove <span class="sr-only">XYZ</span></button> 

あなたは、ブートストラップのようなフレームワークに対応したCSSコードを見つけます。 この場合、表示可能なテキストとスクリーンリーダー固有のテキストの両方が順番に読み上げられます。単語が一緒に糊付けされていないことを確認してください。そうでなければ、発音の問題が発生する可能性があります。