向盲人和视障访客“显示”信息答案

【问题标题】："Displaying" a message to blind and visually impaired visitors向盲人和视障访客“显示”信息
【发布时间】：2022-01-08 00:10:07
【问题描述】：

我想向所有访问我网站的盲人和视障用户“显示”一条消息。它会说：

我们检测到屏幕阅读器当前处于活动状态。如果我们可以做任何事情来让您在本网站上的浏览体验更轻松，请发送电子邮件至 email@email.com 向我们发送您的请求

如何在不向普通访问者显示的情况下在 HTML 中执行此类操作？

【问题讨论】：

你的标题是盲人/视力障碍者，你的身体是屏幕阅读器。所以你只对屏幕阅读器用户感兴趣？
请注意，并非所有屏幕阅读器用户都是盲人，也并非所有低视力用户都使用屏幕阅读器。此外，如果您建议您检测到某些 SR 用户使用了辅助技术，他们可能会大吃一惊。
我问这个问题的主要原因是，大约 3 年前，我随机阅读了一位盲人用户在我的一个网站上发表的评论，该用户写道他/她喜欢我的网站。那时我不知道盲人可以使用网络。现在我已经有时间更新了同一个网站，我想给那个（或任何其他使用屏幕阅读器的用户）一个机会给我留下一些关于他们的浏览体验的反馈，这样我就可以成功了对他们更好。
啊。上下文有帮助。我仍然会在下面使用@vcurd 的答案，因为它适用于所有用户，包括其他辅助技术的用户。例如，低视力用户的数量远远超过盲人用户，但他们并不经常使用屏幕阅读器。

标签： html accessibility wai-aria

【解决方案1】：

如果您在屏幕阅读器打开的情况下查看https://www.webaccessibility.com/best_practices.php，则会有一个“跳至内容”链接，该链接未显示在页面上，但被屏幕阅读器聚焦。这是第一件事，因此如果屏幕阅读器用户不想每次加载页面时都跳过顶部的相同导航控件，他们可以直接跳到内容。

此内容可用于屏幕阅读器，但在页面上不可见。这是在该站点上使用以下 CSS 完成的：

#skiplink {
    height: 0;
    width: 0;
    position: absolute;
    left: -1000px;
}

现在，因为该元素是一个锚点 (a)，所以它默认获得焦点。如果您想强制屏幕阅读器文本成为页面上的第一个可聚焦元素，我建议将其放在 <body> 内容的顶部或附近，或为其赋予 tabindex="0" 属性。

【讨论】：

【解决方案2】：

虽然我很欣赏您的意图，但可能还有其他用户在浏览您的网站时也遇到了问题。这些可能与可访问性或一般可用性有关，因此我建议将链接提供给所有用户。

将链接放在标有“contentinfo”角色（以支持旧版浏览器）的页脚中的地址元素内应该允许屏幕阅读器用户通过地标角色定位链接，并为其他用户提供该功能也是。

<footer role="contentinfo">
	<address>
	    If you have any problems browsing this site please <a href="mailto:email@email.com">contact webmaster</a>.
	</address>
</footer>

【讨论】：

address 标签用于物理地址。
@ShannonYoung：不，it’s for contact information 用于页面（或article）。这可以包括邮政地址，但不限于此（并非所有邮政地址都适合address）。