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

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

屏幕阅读器通常首先读取元素的标签或名称，然后读取元素的值。 你无法控制那个订单。

有没有办法在输入标签之前或之后读取输入？

你要哪个？ 之前还是之后？ 如果你问两个问题，那么一个问题永远都是正确的，尽管如上所述，<input>的值通常在其标签之后读取。

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

我跟着这个问题很难。 当你说你有“输入”时，你的字面意思是<input>吗？ 显示搜索结果编号时，通常只是纯文本。 将其置于<input>听起来像用户可以更改搜索结果的数量。

更新页面上的任何文本应始终包含在aria-live="polite"以便在innerHTML发生更改时（或者您正在更改的任何属性），屏幕阅读器将会公布。

听起来你可能会在这个问题上投入太多的ARIA。 保持简单总是最好的。 首先使用语义HTML ，如果这还不够，那么小剂量的ARIA通常可以解决问题。

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

2019年1月24日更新

给出了新发布的代码和您的评论的一些说明。

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

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

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

好的，这样可以解决一些混乱。 您的OP说您在<input>中有动态文本，但实际上，您在<label>中有动态文本。 同样，这是一个很大的不同。

正如我先前在使用语义HTML的评论中所提到的，如果可以，请避免使用ARIA属性。 在这种情况下，不要在<input>上使用aria-labelledby ，而是使用<label>上的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属性添加到<label>（指向<input>）
• id添加到<input>
• aria-labelledby从<input>中删除

当标签输入字段，其标签（动态数）将在<输入>本身之前读取。

如果你在页面上做了其他事情，导致<label>有一个更新的号码，那么只会读取标签中的新号码，因为它是aria-live="polite"的唯一内容，所以你只会听到“15”（或搜索结果编号变为的任何内容）。

如果您想要更新数字意味着更多的上下文，您可以查看aria-atomic 。

例如，

<label id="searcHResults" aria-live="polite" for="myinput">
  <span id="updateme">{numResults}</span>
  search results were found
</label>

当updateme有一个新值时，屏幕阅读器只会宣布“15”，因为这一切都发生了变化。 标签中的其余部分没有改变，因此未公布。 如果您想要读取所有内容，请将aria-atomic="true"到<label>

<label id="searcHResults" aria-live="polite" for="myinput" aria-atomic="true">
  <span id="updateme">{numResults}</span>
  search results were found
</label>

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

Answer 2

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

我认为这是您正在寻找的答案。