aria-label在不應該屏幕閱讀時被閱讀：WCAG

Question

html結構看起來像這樣

<div>
<a href="#"> some info
  <div role="button" tabindex ="0"
      aria-label = "close"
  />
</a>
</div>

當使用屏幕閱讀器的a標簽得到讀“一些信息關閉”，然后重點按鈕，它再次讀取“關閉”。 所有我想要a標簽是“一些信息”和按鈕閱讀“關閉”。 我應該做些什么改變？ 我不能改變HTML結構。

Answer 1

你不能在另一個可聚焦元素中有一個可聚焦元素。

我應該做些什么改變 ？ 我不能改變 HTML結構。

獲得HTML代碼后，很難在不更改代碼的情況下進行更改。

如果您可以更改HTML結構，這將是一個更好的代碼：

<div>
  <button> some info</button>
  <button aria-label="close" />
</div>

遺憾的是，如果您無法更改HTML結構，我們無法更改任何內容，因為您的結構本質上是格式錯誤的。

我們仍然可以使用一些hacks（例如使用javascript），例如將role=description和tabindex=-1到a[href]元素，並用html button替換“some info”，但這將違反ARIA的第二條規則：

除非你真的需要，否則不要改變原生語義。

Answer 2

1.）小提琴與您上面發布的代碼不同。 對於我的回答，我使用了小提琴代碼（並為href屬性添加了一個“缺失" ...）

2.）該按鈕是鏈接的一部分，因此其內容將作為鏈接的一部分進行讀取。 當單擊按鈕和單擊“某些信息”時，您是否真的希望（相同）鏈接同時工作？ 看起來“某些信息”應該是鏈接的標簽/評論？

根據你想要的，我要么在按鈕之前關閉a標簽，要么只將按鈕包裝到a標簽中，用全文標記它並用aria-hidden = "true"文本：

<div>
  <a href="#">
    some info
  </a>
  <button aria-label = "close">close</button>      
</div>

要么

<div>
  <span aria-hidden="true">some info</span>
  <a href="#">
    <button aria-label = "some info, close">close</button>
  </a>
</div>

Answer 3

如果您只能添加屬性而不更改HTML結構，則可以執行以下操作：

<div>
  <a href="#" tabindex="-1">
    <div tabindex="0">some info</div>
    <button>
      close
    </button>
  </a>
</div>

將tabindex設置為-1會從Tab鍵順序中刪除元素，而將其設置為0會添加一個項目。 通常應該使用其他值。 更多信息在這里。

從Tab鍵順序中刪除a標簽並添加div代替將使鍵盤跳過a標簽並分別關注div和button標簽。