HTML

Question

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

如果您在查看本网站时需要帮助，请致电（在此处输入电话号码）。

如果没有辅助功能阅读器，只需正常浏览，就不需要在网站前端显示该说明。

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

Answer 1

考虑键盘用户也可以从中受益。为此，有很多＆＃34;跳过导航＆＃34;或者＆＃34;跳转到内容＆＃34;可以做你想要的模式，包括对键盘用户友好的模式。

我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;
  }
}

在您的情况下，您只需将链接更改为电话号码：

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

并关闭href或class或id属性的CSS：

a#a11yCall { ... }

Answer 2

只需隐藏顶层的文字，其位置为：fixed and left：-9000px。它应该被阅读但不可见。

只需几句话。可访问性不仅适用于盲人！

Answer 3

没有“无障碍阅读器”这样的常见内容。

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

假设只有盲人使用屏幕阅读器需要帮助才是设计可访问网站的第一个问题。

非盲人无法获得的内容也是歧视。

现在，如果你真的想要专门为屏幕阅读器用户设计的便条，请使用aria-label。不要使用任何CSS技巧。

为屏幕阅读器添加注释以告知客户

3 个答案:

HTML

CSS