html - 将 tabindex 附加到标题
问题描述
我目前正在研究我的网站的可访问性,特别是针对使用屏幕阅读器导航的盲人。
我确实设法通过仅使用 tabindex 删除了在使用 tab 导航时应该跳过的锚点,但我希望屏幕阅读器软件在用户导航到 h1/h2/h3.. 标签时读取自定义文本。
我确实尝试将 tabindex="1" 附加到标题标签,但没有成功。
这是我面临的问题的一个例子:
我们的服务清单
- 网页设计
- 平面设计
- 品牌推广
在当前示例中,屏幕阅读器软件在使用选项卡导航时可以正确读取列表项,因为它们是锚标记,但它会避开“我们的服务列表”标题。
是否有任何类型的“alt”属性可以附加到标题以解决此问题?如果不可能,我将在每个带有 alt 标签的标题之前添加一个透明的 1 像素图像,如下所示:
<a href="#"><img alt="List of our services" src="/1pixelimage.jpg"></a>
<h2>List of our services</h2>
但是,我认为这是不正确的,我可能会错过真正的方法。
解决方案
我搞砸了 tabindex 值和标题上缺少标题属性。
此标题可使用选项卡热键导航,并为屏幕阅读器再现音频标题:
<h2 tabindex="0" title="List of our services">List of our services</h2>