javascript-如何读取输入,然后通过屏幕阅读器标记？

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

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

我尝试在标签上设置aria-live =“ assertive”,并使用aria- describeby和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>

解决方法:

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

Is there a way to have the input read before or after an input label?

你要哪个？之前还是之后？如果您同时询问这两个问题,那么尽管如上所述,< input>通常在标签后读取.

I’ve got an input that has a dynamic value (number of search results)

我在遵循此步骤时遇到了麻烦.当您说自己有一个“输入”时,您的意思是< input>吗？显示搜索结果编号时,通常只是纯文本.将其放入< input>听起来用户可以更改搜索结果的数量.

页面上任何要更新的文本都应始终包裹在aria-live =“ polite”中,以便当innerHTML更改(或您要更改的任何属性)时,屏幕阅读器会宣布该文本.

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

如果您发布代码,则可能更易于诊断.

更新2019年1月24日

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

There is a googlePlaces API search results div that is appended to the input

如果您在代码段中引用{hintText …}内容,那么从技术上讲,该代码不会附加到输入中. < input>具有结束标记(/>),因此没有添加任何内容. {hintText …}代码被附加在< input>之后.因此它是< input>的同级.这听起来像是很小的细节,但却有所作为.

the number of results is retrieved, and that value becomes the innerHTML of a dynamically updated label associated with this input.

好的,这样可以消除一些混乱.您的OP表示您的< input>中包含动态文本.但实际上,您的< label>中有动态文本.同样,这是一个很大的差异.

如我之前对Use semantic HTML first的评论中所述,请尽可能避免使用ARIA属性.在这种情况下,不是在< input>上使用aria-labeledby,而是在< 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>

上面的代码有

>将属性添加到< label> (指向< input>)
>将ID添加到< input>
>从< input>中删除aria-labeled.

当您跳到输入字段时,将在< 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个搜索结果”.

标签：reactjs,accessibility,javascript
来源： https://codeday.me/bug/20191108/2006883.html