javascript - 我可以在标题和重要文本上使用 tabindex 吗？

Question

我正在使用[screenreader plugin for chrome] 1和MacOS 内置的画外音实用程序测试我的网站。当我从一个可交互元素切换到另一个时，屏幕阅读器会读取标签或 aria-label。但是，如果没有放在tabindex="0"标题和其他重要项目（如产品名称、产品描述、定价信息、免责声明、说明等）上，则焦点永远不会放在这些项目上，屏幕阅读器也不会宣布它们。

我想放在tabindex="0"标题和重要文本上，但我读过我应该只放在tabindex可交互的项目上。

我只是没有正确使用屏幕阅读器吗？我在这里想念什么？我希望用户能够概览页面上的所有重要信息。用户仅仅在输入和按钮之间跳转是不够的。

标签： javascripthtmlaccessibilitywai-ariascreen-readers

Answer 1

正如您所说，这只是对屏幕阅读器的不熟悉。

您不想添加tabindex="0"所有内容，因为这会使那些不使用辅助技术的人的键盘导航变得困难（太多焦点停止）。

此外，任何获得焦点的东西都应该是交互式/可点击的，因为您已经阅读过，所以它也会让 AT 用户感到困惑！

本指南将有助于学习如何使用 NVDA 屏幕阅读器，JAWS 和 Orca 也有类似的指南。

大多数人有两种基本的导航方式。上下箭头可以转到下一项和上一项，数字键 1-6 在标题之间跳转（分别为 h1-h6）足以绕过大多数设计良好的网页。