Question

我有一个网页，其中包含一个<textarea>，该网页使用JavaScript来利用tab键之类的键盘输入来缩进行等，就像普通的文字处理器或文本编辑器一样。

在确保屏幕阅读器可以访问我的网页时，在这种情况下如何处理Tab键？用户可以在网页上进行制表，但是当他们制表到textarea时，他们无法制表，因为制表符用于文本区域的目的不同。

确保屏幕阅读器与此无关的最佳解决方案是什么？

Answer 1

很好的问题，感谢您考虑可访问性。这个问题不仅适用于屏幕阅读器用户，还适用于那些存在移动性问题且无法使用鼠标而只能依靠键盘进行输入的用户。

使用 tab 键允许文本缩进是提供文本区域的自然选择。解决该问题的一种方法是允许 esc 使您退出“编辑模式”，以便使 tab 键现在可以自然地将焦点移至下一个对象。

我猜您有一个键盘事件处理程序，它为 tab 调用preventDefault()。如果用户按下 esc ，请通过自然地弹出标签来更改您处理标签的方式（即，不要调用preventDefault()）。要返回“编辑模式”，用户可以按 enter 或他们可以关闭文本区域，然后再将其选中（即，进入焦点的“编辑模式”）。

WCAG 2.1.2的一个关键点是

如果[跳离对象]比未修改的箭头或跳格键或其他标准退出方法需要更多的内容，则建议用户将焦点移开。

因此，如果您使用 esc ，则需要一些屏幕指示，告诉用户按 esc 然后按 tab 来移动焦点离开对象，这些方向应该通过aria-describedby与<textarea>关联，以便屏幕阅读器知道它。

<div id="foo">Press ESC then TAB to move the focus off the field</div>
<label for="stuff">Enter your info here</label>
<textarea id="stuff" aria-describedby="foo"></textarea>

Answer 2

可能有几种可能的解决方案。

1。为tab覆盖textarea的默认行为（您可以在用户点击tab时更改tabindex或焦点更改）。

2。您可以在页面上提供快捷方式（例如CTRL+M的组合键）来更改TAB的行为。

Answer 3

根据UI Events / Keyboard Event Types / keydown

如果键是 Tab 键，则默认操作必须是将文档焦点从当前关注的元素（如果有）转移到新的关注元素，如焦点事件类型所述

因此，只要在Web浏览器中实现此功能，就不得使用 Tab 键进行缩进。一个不错的选择是处理在行首使用空格键来添加正确数量的空格（或制表符），并结合其他快捷方式（例如缩进多行）

如何处理使用Tab键的文本区域的可访问性制表符？

3 个答案: