javascript - NVDA读出datepicker当前单元格选择位置

标签 javascript accessibility screen-readers nvda

我在这里设置了一个 fiddle https://jsfiddle.net/j49gz3g3

<div class="container">
    
    <div class="row">
        <div class="form-group">
            <label for="dt">Birth Date</label>
            <input type="text" name="dt" id="dt" placeholder="" class="nl-datepicker" />            
        </div>
    </div>
</div>

使用键盘箭头键在日期之间导航时,NVDA 会读出

Friday, May 12 2016 row 3

Thursday, May 4 2016 column 5

而预期输出是

Friday, May 12 2016

Thursday, May 4 2016

是否有办法避免读取单元格位置(第 3 行,第 5 列)?或者这是涉及数据的表的标准行为?

所有主流浏览器(即 IE、FF、Chrome)都会发生这种情况

PS:还附上截图供引用。

enter image description here

最佳答案

这是使用数据表时的标准屏幕阅读器行为。

另一种方法是使用 role="application"来编写一个小部件,但是可访问的小部件是很棘手的事情,所以我建议您就这样保留它。使用屏幕阅读器的用户已经习惯了这种行为。

我最近创建了一个有关可访问表最佳实践的页面。如果您有兴趣,这里是:http://haltersweb.github.io/Accessibility/tables.html

关于javascript - NVDA读出datepicker当前单元格选择位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37211386/

相关文章:

html - 链接不包含在 Wave 可访问性评估工具中显示错误的文本

css - 编写此类数据设计的首选可访问且语义正确的方法是什么?

javascript - 在 HTML 中创建网格

javascript - 如何仅在用户更新字段时调用函数,而不是在动态更新字段时调用函数

Javascript API - 使用 ZoomLevel 调用 nokia.maps.map.Display 会导致 map 容器 div 填充整个页面

html - 使用单选按钮组中断键盘焦点

javascript - 如何在 jQuery 中使用 "setTimeout"?

html - 在对话框中使用 <h1> 在语义上是否正确?

android - 有什么方法可以让 "hide"成为屏幕阅读器的 View ,就像 HTML 中的 "aria-hidden"一样?

html - 处理屏幕阅读器的屏蔽数字