如何创建一个用户受损的可访问网站：不用鼠标上网？

Posted 2023-03-25

【中文标题】如何创建一个用户受损的可访问网站：不用鼠标上网？

【英文标题】：How to create a user-impaired accessible website: surfing without a mouse?

【发布时间】：2014-10-30 15:37:08

【问题描述】：

我使用 Backbone.js 和 Marionette.js 创建了一个网页，该网页主要包含一个引导手风琴视图，当点击手风琴标题时显示项目列表。还可以单击每个项目，这将显示与该特定项目相关的详细信息的隐藏 div。

我想让可能不使用鼠标的人访问此网站（也许他们有视力障碍并使用屏幕阅读器？也许他们只是不喜欢点击东西？不管怎样。）我是认为这意味着能够按 Tab 键进入手风琴，按 Space 或 Enter 打开手风琴，Tabbing down （或向下箭头键？）通过列表项，然后使用 Space 或 Enter 显示所选项目的隐藏div。

我发现很难找到有关如何添加此类功能的信息，因为诸如“如何制作无需鼠标即可使用的可访问网站”之类的搜索大多会出现关于开发人员的博客应该为页面添加可访问性，而不是如何这样做。

目前，页面并没有真正响应任何键盘按钮。您可以分享的任何提示或资源将不胜感激。我一直在摆弄 ARIA 角色标签，但我要么做得不对，要么不是这里的答案。

【问题讨论】：

按钮、表单域和链接都应该像被点击一样被聚焦：你使用它们吗？否则，SO 不适合解决如此广泛的问题；仅针对带有某些代码的精确问题。

这是手风琴内可访问性（和语义标记）的一个非常好的实现：sitepoint.com/introducing-accessible-accordion-widget

非常感谢。我想我现在拥有了我需要的一切。

【参考方案1】：

你必须使用tabindex

https://developer.mozilla.org/en-US/docs/Web/API/htmlElement.tabIndex

屏幕阅读器会自动读取 activeElement 的任何元素