为屏幕添加注释 reader 以告诉客户

Question

基本上我有一个客户需要我们向他们的网站添加一些信息，基本上会在代码中添加一个注释，可访问性 reader 可以这样说：

If you need assistance viewing this website please call (Insert Phone Number here).

如果只是正常浏览，没有辅助功能，则此注释不需要显示在网站前端reader。

这可能吗？是否有我们可以添加到网站的元标记之类的东西？

Answer 1

只需用 position:fixed 隐藏顶层的文本，左移：-9000 像素。它应该被读取但不可见。

几句话。辅助功能不仅适用于盲人！

Answer 2

考虑一下键盘用户也可能从中受益。为此，有很多 "skip nav" 或 "jump to content" 模式可以满足您的需求，包括对键盘用户友好的模式。

我 made a CodePen example 的键盘友好型跳过导航，但这是代码...

HTML

<a href="#Skip">Skip Navigation</a>

<main id="Skip">
  <h1>The Page Is About This</h1>
  <p>
    This is some page content
  </p>
</main>

CSS

a[href="#Skip"] {
  display: block;
  color: #fff;
  background: #000;
  margin: 0;
  padding: .5em 1em;
  font-weight: bold;
}

a[href="#Skip"]:link,
a[href="#Skip"]:visited {
  color: #fff;
  text-decoration: none;
}

@media screen and (min-width: 62em) {
  a[href="#Skip"] {
    position: absolute;
    left: -1000px;
    z-index: 2;
  }
  a[href="#Skip"]:active,
  a[href="#Skip"]:focus,
  a[href="#Skip"]:hover {
    display: block;
    top: 0;
    left: 0;
  }
}

在您的情况下，您可以将 link 更改为 phone 数字：

<a href="tel:888-888-8888" id="a11yCall">Call us if you...</a>

然后将 CSS 关闭 href 或 class 或 id 属性：

a#a11yCall { ... }

Answer 3

没有"accessibility reader"这样的常见事物。

您可能会考虑 "screen reader"，但只有一小部分人在使用这些工具，并且它们对视力不佳的人没有任何好处，例如使用屏幕放大镜或一些其他特定工具（增强对比度，...），也不会给患有听觉、认知或肌肉骨骼疾病的人带来任何好处。

只有盲人使用屏幕 reader 需要帮助的假设是设计无障碍网站的首要问题。

拥有非盲人无法访问的内容也是一种歧视。

现在，如果您真的还想要专为屏幕 reader 用户设计的笔记，请使用 aria-label。不要使用任何 CSS 技巧。

为屏幕添加注释 reader 以告诉客户

Add a note for the screen reader to tell the customer

accessibility

screen-readers

HTML

CSS