使用屏幕阅读器文本的优点

Question

我见过一些网页模板，其中包含名为屏幕阅读器文字的html标签，如下所示：

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

它的CSS将是：

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

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

Answer 1

可视浏览器会隐藏该内容，因为CSS实际上将其置于屏幕之外。屏幕阅读器将忽略该CSS并正常读取内容。基本上，该网站正在尝试使视觉吸引用户可以访问视觉上的页面。

Answer 2

此处的标记是label标记。该元素被定义为属于类screen-reader-text。这个名字没有神奇之处。它只是一个指定的名称，也可以是foobar。样式表定义该类中的元素位于浏览器窗口之外。

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

编码可能有特殊原因，但不能从给出的信息中猜到。