可访问性：主页上的 h1？

Question

在可访问性和文档结构方面，主页上的 h1 或主标题应该是什么？

在其他页面上，它大多很简单：页面标题是 h1 的好候选。但是主页上很可能没有标题？

那么你想制作什么 h1 呢？标志？隐藏标题说主页？

Answer 1

这是一个非常好的和困难的问题：

• 如果您可能希望将徽标包含在 <h1> 标记中，请确保不要在链接中包含此徽标。

我曾经有过这种东西：

 <?php if ($homepage) { ?>
    <h1><img src="..." alt="My Website" /></h1>
 <?php } else { ?>
    <a href="/"><img src="..." alt="My Website" /></a>
 <?php } ?>

• 您可以更喜欢为您的主页标题设置一个特定的可见（或隐藏）h1，以便在您的网站中保持连贯的网页结构。

将h1 放在徽标上不会引导屏幕阅读器用户使用标题导航到他期望的内容开头。

没有通用的解决方案，因为它主要取决于您的网站；我会专注于：

• 有一个包含页面标题的h1，
• 此h1 应位于内容的开头，
• 此h1 不应位于链接内，也不应包含链接。

如果您的主页徽标可以回答这些问题，请将您的徽标附在 h1 中，否则请使用特定标题。

Answer 2

您的主页上必须有一些东西，其中包含该页面的标题：徽标、一些文本、包含标题的图像等。不管它是什么：用h1 包裹它标记以将其标记为主标题。

如果没有任何内容（例如，只有一个没有文本的全屏图像），您仍然可以将该图像包装到 h1 并将页面标题写入 alt 属性。