アクセシビリティ：SR-のみまたはARIAラベル

Question

From MDN：

以下の例では、ボタンが中央にXで、典型的な「閉じる」ボタンのように見えるようにスタイル設定されています。ボタンの目的がダイアログを閉じることであることを示すものはないので、aria-label属性は、支援技術にラベルを付けるために使用されます。ブートストラップのマニュアルによると

<button aria-label="Close" onclick="myDialog.close()">X</button> 

：

だから私は、私も書くことができると思います.SR-のみ

でスクリーンリーダーを除くすべてのデバイスに要素を隠す：

<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button> 

ブートストラッププロどのように私が好きなものを選ぶことができますか？

Answer 1

MDNの例では、aria-labelがボタン内のテキストを上書きするため、スクリーンリーダーは単に「閉じる」という言葉を話すだけです。これは、ブートストラップなしでコードを再利用しても機能します。

例では、スクリーンリーダーは「x」をスクリーンリーダーから隠すことは何もしていないため、「close x」と発声します。また、テキストノードを追加してクラスに隠しています。

MDNの例を使用します。