web-dev-qa-db-ja.com

aria-labelは、内部のコンテンツが支援デバイスによって読み取られるのを防ぎますか？

MDN docs は、次のようにaria-labelを使用する必要があると言います。

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

スクリーンリーダーにアクセスできませんが、aria-labelが内部を置き換えない置き換えないことを示唆するスタックオーバーフローに関するコメントを見ました内部内容、それだけプレフィックスです。したがって、上記の場合は「Close X」と表示されますが、これは明らかに理想的ではありません。

これは本当ですか？もしそうなら、解決策は何ですか？次のように、内部コンテンツを[aria-hidden=true]要素でラップするのは理にかなっていると思います。

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

...しかし、実際のスクリーンリーダーではテストできないので注意が必要です。

htmlwai-aria
14
callum

ほとんどの状況では、aria-labelが読み上げられますの代わりにリンクのテキスト。

これは実際には標準のテストシナリオであり、powermapperに関する広範なテスト結果があります。 https://www.powermapper.com/tests/screen-readers/labelling/a-aria-label/

テスト結果ページでは、スクリーンリーダーの出力を聞くこともできます。

8
Lee Kowalkowski

最終編集

ブログの投稿や仕様の誤解に頼るのではなく、結論に達してARIAのすべてを覚えようとするのではなく、実際にテストする方がよいと思います。

たとえば、要素のアクセス可能な名前が何であるかをテストできます。 Googleを使用している場合Chrome（うまくいけば、他のブラウザにはアクセシビリティテストツールが含まれています）：

  1. オープン開発ツール（例： F12 Windowsの場合）。
  2. 要素を選択します（ポインタまたは ctrl + shift + c）
  3. Accessibilityタブをクリックします（ここでは、アクセシビリティツリー、ARIA属性、および計算されたプロパティを表示できます。
5
Null

これは、Windowsナレーターを使用して、Microsoft EdgeとInternet Explorerで何が起こるかです。

  • ナレーターがテキストを読んでいて、その真中にボタンを見つけた場合、aria-labelは、実際には次のようにコンテンツのプレフィックスです。
    [ボタンの前のコンテンツ] [aria-label値] [ボタンタグ内のテキスト] [ボタンの後のコンテンツ]。
  • ユーザーがボタンにフォーカス（またはクリック）すると、ナレーターはaria-label値。次のように、ボタン内のコンテンツではありません。
    [aria-label値] "ボタン"。

お役に立てれば。

1
D. Pardal