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

2019-11-08 08:36:58 阅读：227 来源： 互联网

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

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

我尝试在标签上设置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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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