"显示"向盲人和有视力障碍的访客发送信息

时间:2016-10-21 00:05:51

标签: html html5 wai-aria disability

我想"显示"向访问我网站的所有盲人和视障用户发送消息。它会说:

  

我们检测到屏幕阅读器当前处于活动状态。如果我们可以采取任何措施让您在本网站上的浏览体验更轻松,请发送电子邮件至email@email.com与我们联系

如果不将其显示给常规访问者,我将如何在HTML中执行此类操作?

2 个答案:

答案 0 :(得分:2)

如果您在屏幕阅读器上查看https://www.webaccessibility.com/best_practices.php,则会出现“跳至内容”链接,该链接未在页面上显示,但会被屏幕阅读器关注。这是第一个集中注意力的事情,因此如果屏幕阅读器用户不希望每次加载页面时都跳过顶部的相同导航控件,他们就可以直接跳到内容。

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

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

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

答案 1 :(得分:1)

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

将链接放在标有“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>