英文:
There should be only one H1 heading on a single page
问题
-
我被无障碍团队告知单个页面上应该只有一个H1。
-
在互联网上的参考链接:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#avoid_using_multiple_h1_elements_on_one_page
-
然后我在我们的一个代码库中看到了这个实现。
<h1 tabindex=0 style="invisible">网站名称</h1>
<h1 tabindex=-1>表单1</h1>
- 这是不正确的实现吗?(还是一个解决方法?)
- 对于普通用户,焦点将位于“网站名称”上,但是它是不可见的。他/她将切换到下一个可聚焦的项目。 (跳过表单1)
- 对于使用屏幕阅读器的人,将会宣布“网站名称”并聚焦在那里,然后切换到下一个可聚焦的项目。 (跳过表单1)
- 我们应该将表单1更改为H2吗?
英文:
-
I was told by the accessibility team that there should be only one H1 on a single page.
-
Ref on the internet: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#avoid_using_multiple_h1_elements_on_one_page
-
Then I saw this implementation in one of our repos.
<h1 tabindex=0 style="invisible">The website name</h1>
<h1 tabindex=-1>form 1</h1>
- Is this incorrect implementation? (or is it a workaround?)
- For normal people, the focus will be on "The website name", but invisible. He/she will tab to next focusable item. (form1 skip)
- For people who using screen reader, "The website name" will announce and focus there, tab to next focusable item. (form1 skip)
- Should we change to form1 to h2 ?
答案1
得分: 3
这是翻译好的部分:
这是一种最佳实践,但不是要求只有一个
。
这是否会影响搜索引擎尚有争议。这是否会影响用户尚有争议。
如果您运行无障碍扫描工具,它可能会将多个
元素标记为需要审查,但不会标记为错误。
您在
上使用tabindex
的代码示例是不良实践。您不应该让可以获得焦点的元素无法与之交互。用户无法点击或选择
,因此不应该具有tabindex。没有必要使标题具有焦点。辅助技术用户,如屏幕阅读器用户,可以使用屏幕阅读器内置的各种快捷键导航到标题。他们不需要使用tab键导航到标题。
英文:
It's a best practice but not a requirement to have a single <h1>.
Whether that affects search engines or not is debatable. Whether that affects users or not is debatable.
If you run an accessibility scanning tool, it might flag multiple <h1> elements as an issue to review but won't mark it as an error.
Your code example that has tabindex
on an <h1> is a bad practice. You do not want to have focusable elements that are not interactive. The user can't click on or select the <h1> so it should not have a tabindex. There's no need to make a heading focusable. Assistive technology users, such as screen reader users, can navigate to headings using a variety of shortcut keys built into the screen reader. They do not have to <kbd>tab</kbd> to the heading.
答案2
英文:
It's a best practice but not a requirement to have a single <h1>.
Whether that affects search engines or not is debatable. Whether that affects users or not is debatable.
If you run an accessibility scanning tool, it might flag multiple <h1> elements as an issue to review but won't mark it as an error.
Your code example that has tabindex
on an <h1> is a bad practice. You do not want to have focusable elements that are not interactive. The user can't click on or select the <h1> so it should not have a tabindex. There's no need to make a heading focusable. Assistive technology users, such as screen reader users, can navigate to headings using a variety of shortcut keys built into the screen reader. They do not have to <kbd>tab</kbd> to the heading.
答案2
得分: 1
建议每页只有一个H1标题,以确保页面结构清晰有意义。重要的是,实践和标准可能会不断发展,搜索引擎试图理解内容。拥有多个H1标题可能会让搜索引擎感到困惑,并分散页面的焦点。通过使用单个H1标题,您可以为特定关键字或主题优化页面,帮助搜索引擎更好地理解内容,从而有可能提高搜索排名。
英文:
It is recommended to have only one H1 heading per page for the purpose of clear and meaningful structure.
It's important practices and standards can evolve search engines trying to understand the content. Having multiple H1 headings may confuse search engines and dilute the focus of your page. By using a single H1 heading, you can optimize your page for a specific keyword or topic, helping search engines understand the content better and potentially improve your search rankings.
答案3
得分: 0
不,不是正确的解决方法,网页必须是语义化的。您必须只使用一个h1。如果您这样做,用于浏览器定位的网络爬虫将工作得更好,对于辅助工具也会更清晰。最好的解决方法是将第二个标题设为h2,或者将这两个标签放在一个h1内,并使用h1内的其他标签进行分隔。
英文:
No, is not the correct workaround the web had to be semantic. You have to use only one h1. If you do that web spyders for browser positioning will work better and it will be clear to accesibility tool. The best workaroun is make the second title a h2 or include the two tags in one h1 and separate it with another tags inside the h1
答案4
得分: 0
只保留一个H1标签或允许同一页上有多个H1标签是一个长期争议的问题。大多数人现在都同意,从效果上来说,只保留一个H1标签更好。
然而,从屏幕阅读器用户的角度来看,最有价值的H1标签,也就是您应该保留的标签,是位于主要内容之前的标签,代表当前页面的特定标题。
用于网站或公司名称的H1标签大多数情况下不太有用。它可以快速返回到主页,但这可能不是最有用的功能,特别是如果您的网站的核心是阅读文章或浏览要购买的产品。快速找到当前文章或产品描述的标题和内容要重要得多。
为特定页面标题保留唯一的H1标签也比为网站/公司名称保留H1标签和为页面的真正标题保留H2标签更容易导航。
理想情况下,您应该首先考虑用户,而不是机器。如果所有网站都为用户做有益的事情,搜索引擎将会适应。反之则不成立。
英文:
Having only one or allowing multiple H1 on the same page is a long standing debate.
Most people nowadays agree that, effectively, it's better to have only one H1.
From a screen reader user perspective, however, the most valuable H1, the one you should keep, is the one which is located right before the main content and which represent the specific title of the current page.
An H1 for the site or company name is most of the time much less useful. It allows to quickly go back to the home page, well, but that's probably not the most useful feature, especially if the core of your site is to read articles or browse products to buy. It's much more important to find out quickly the title and contents of the current article or product description.
Having an unique H1 for a specific page title is also simpler to navigate than an H1 for the site/company name and an H2 for the real title of the page.
Ideally you should think about users first rather than about machines. If all sites do what's good for users, search engines will adapt. The opposite isn't true.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论