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

Question

我看过一些Web模板，它们的HTML标签名为Screen Reader Text ，如下所示：

<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标记和控件的标签对所有用户有用，而不仅仅是语音浏览器的用户，因为语音浏览器会忽略将内容放置在屏幕之外的尝试。

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