html - 使用屏幕阅读器文本的优势

Question

我已经看到一些具有名为Screen Reader Text的 html 标签的 web 模板，如下所示：

<label for="name" class="screen-reader-text">Name:</label>

它的 CSS 将是：

.screen-reader-text {
    position: absolute;
    top: -999em;
    left:-999em;
}

但我的 PC 浏览器中没有显示任何内容。它是什么？问候。

score 3 · Accepted Answer

视觉浏览器将隐藏该内容，因为 CSS 本质上将其置于屏幕之外。屏幕阅读器将忽略该 CSS 并正常阅读内容。基本上，该站点试图使页面具有视觉吸引力，同时使视障用户可以访问。

score 2 · Accepted Answer

这里的标签就是label标签。该元素被定义为属于该类screen-reader-text。这个名字没有魔法。它只是一个指定的名称，也可能是foobar。样式表定义该类中的元素位于浏览器窗口之外。

这是不好的做法，因为label控件的标记和标签对所有用户都有用，而不仅仅是语音浏览器的用户，它们忽略了将某些东西放在屏幕外的尝试。

编码可能有特殊原因，但无法从给出的信息中猜测出来。

2 回答 2