首页 > 解决方案 > 将 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>

但是,我认为这是不正确的,我可能会错过真正的方法。

标签: html

解决方案


我搞砸了 tabindex 值和标题上缺少标题属性。

此标题可使用选项卡热键导航,并为屏幕阅读器再现音频标题:

<h2 tabindex="0" title="List of our services">List of our services</h2>

推荐阅读