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

Question

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

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

其 CSS 将为:

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

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

Answer 1

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