Question

我正在对辅助功能进行更改，并且输入的标签带有动态值（搜索结果数），需要通过屏幕阅读器将其读取给用户。

我看到一个问题，即读取输入，然后使用动态内容设置的标签开始读取，然后再次读取输入，从而中断了动态内容。

我尝试在标签上设置aria-live="assertive"，并同时使用aria-describedby和aria-labelledby。

是否可以在输入标签之前或之后读取输入内容？

谢谢：）

      <label id="searcHResults" aria-live="polite">
        {numResults}
      </label>
      <div className="input-parent">
       <div className="input-container">
        <input aria-labelledby="searchResults" />
        {hintText && (
          <div className="hint">
            {hintText}
          </div>
        )}
       </div>
      </div>

Answer 1

屏幕阅读器通常会先读取元素的标签或名称，然后再读取元素的值。您无法控制该顺序。

是否可以在输入标签之前或之后读取输入？

您想要哪个？之前还是之后？如果您同时询问这两者，那么一个总会成立，尽管如上所述，通常在的标签后读取它的值。

我输入的内容具有动态值（搜索结果的数量）

在执行此操作时遇到麻烦。当您说您有一个“输入”时，您的意思是<输入>吗？显示搜索结果编号时，通常只是纯文本。将其放入听起来像用户可以更改搜索结果的数量。

页面上任何要更新的文本都应始终用aria-live="polite"括起来，以便在innerHTML发生更改（或您要更改的任何属性）时，屏幕阅读器会宣布该文本。

听起来您可能在问题上投入了过多的ARIA。最好始终保持简单。 Use semantic HTML first，如果这还不够的话，那么少量的ARIA通常可以解决问题。

如果您发布代码，则可能更易于诊断。

更新2019年1月24日

对新发布的代码和您的评论进行了一些澄清。

有一个附加到输入中的googlePlaces API搜索结果div

如果您在代码段中引用的是{hintText...}，那么从技术上讲，该代码不会附加到。有一个结束标记（/>），因此没有添加任何内容。 {hintText...}代码被附加在的之后，因此它是的兄弟。这听起来像是一个小细节，但有所作为。

检索到结果的数量，该值成为与此输入关联的动态更新的标签的innerHTML。

好，这样可以消除一些混乱。 OP表示中有动态文本，但实际上，中有动态文本。再次，这是一个很大的区别。

如我先前对Use semantic HTML first的评论中所述，请尽量避免使用ARIA属性。在这种情况下，不要在上使用aria-labelledby，而在

上使用for属性

<label id="searcHResults" aria-live="polite" for="myinput">
  {numResults}
</label>
<div className="input-parent">
  <div className="input-container">
  <input id="myinput"/>
  {hintText && (
    <div className="hint">
      {hintText}
    </div>
  )}
  </div>
</div>

以上代码具有

for属性添加到（指向）
id已添加到
aria-labelledby已从

在输入字段中 tab 时，将在本身之前读取其标签（动态数字）。

如果您在页面上执行其他操作导致具有更新的号码，则将仅读取标签中的新号码，因为这是{{1} }，因此您只会听到“ 15”（或搜索结果编号更改为任何数字）。

如果您想了解有关更新数字含义的更多信息，可以查看aria-atomic。

例如

aria-live="polite"

当<label id="searcHResults" aria-live="polite" for="myinput"> <span id="updateme">{numResults}</span> search results were found </label>具有新值时，屏幕阅读器将仅宣布“ 15”，因为这已全部更改。标签中的其余文本未更改，因此未宣布。如果您想阅读所有内容，请在

中添加updateme

aria-atomic="true"

现在，当数字更改时，屏幕阅读器将宣布“ 找到15个搜索结果”。

Answer 2

<input type='text' aria-label='Screen reader can see this!' />

我认为这就是您想要的答案。

如何通过屏幕阅读器读取输入然后贴标签？

2 个答案: