时间戳

首页 > 解决方案 > 如何使用使用选项卡按钮的文本区域处理可访问性选项卡？

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

问题描述

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

在确保屏幕阅读器可以访问我的网页时，在这种情况下如何处理 tab 键？用户可以很好地在网页上进行选项卡，但是当他们进入网页时，textarea他们无法退出网页，因为在 textarea 中将选项卡键用于不同的目的。

确保屏幕阅读器对此没有问题的最佳解决方案是什么？

标签： htmlaccessibility

解决方案

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

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

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

我猜你有一个键盘事件处理程序，它preventDefault()要求tab. 如果用户按下esc，改变你处理选项卡的方式，让它自然冒泡（即不要调用preventDefault()）。要返回“编辑模式”，用户可以按下enter或者他们可以关闭文本区域，然后返回到它（即，进入“编辑模式”onfocus）。

WCAG 2.1.2 的一个关键点是

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

因此，如果您使用esc，您将需要一些屏幕上的指示来告诉用户按下escthentab以将焦点从对象上移开，并且这些指示应该与<textarea>via相关联，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>

推荐阅读