为什么矢量皮肤有一个不可见的 h2，通过设置 css top： -9999 来'Navigation menu'文本？

Question

我在另一个网站上看到了不可见的标题，其中的内容是网站的名称，但 css 更彻底;

visibility: hidden, text-indent: -9999em etc

我想知道，因为我正在修改矢量皮肤以用作我网站的皮肤，并且我正在更改它周围的 html。

它是为了可访问性吗？屏幕阅读器？它有什么优点？

这是来自维基百科页面的来源：

<div id="mw-navigation">
<h2>Navigation menu</h2>
<div id="mw-head">
<div id="p-personal" role="navigation" class="" aria-labelledby="p-personal-label">
<h3 id="p-personal-label">Personal tools</h3>

Answer 1

通常，如果标题被图像替换，则出于可访问性和SEO原因，这样做。在正常状态下，图像将被视为标题，如果由屏幕阅读器阅读，文本内容将清楚地表明它的内容。