如何使用使用选项卡按钮的文本区域处理可访问性的选项卡？

Question

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

在确保屏幕阅读器可以访问我的网页时，在这种情况下如何处理 Tab 键？用户可以在网页周围textarea使用 Tab 键就好了，但是当他们用 Tab 键进入时，他们无法退出它，因为 Tab 键在 textarea 中被用于不同的目的。

确保屏幕阅读器不会遇到此问题的最佳解决方案是什么？

Answer 1

很好的问题，感谢您考虑可访问性。此问题不仅适用于屏幕阅读器用户，也适用于其他有移动问题且无法使用鼠标而仅依赖键盘输入的用户。

您试图防止的问题是WCAG 2.1.2 No Keyboard Trap。

使用tab键来允许文本缩进是为 textareas 提供的自然之举。解决该问题的一种方法是让esc您退出“编辑模式”，以便tab键现在可以自然地将焦点移动到下一个对象。

我猜你有一个键盘事件处理函数调用preventDefault()的tab。如果用户按下esc，通过让它自然冒泡来改变你处理选项卡的方式（即，不要调用preventDefault()）。要返回“编辑模式”，用户可以按enter或者他们可以从 textarea 跳出然后跳回它（即，进入“编辑模式”onfocus）。

WCAG 2.1.2 的一个关键点是

如果 [tabbing off the object] 需要的不仅仅是未修改的箭头或 tab 键或其他标准退出方法，则建议用户使用将焦点移开的方法。

因此，如果您使用esc，您将需要一些屏幕指示，告诉用户按下escthentab将焦点从对象上移开，并且这些指示应与<textarea>通孔相关联，aria-describedby以便屏幕阅读器知道它。

<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

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

tab1.覆盖for的默认行为textarea（当用户点击选项卡时，您可以更改 tabindex 或焦点更改）。

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