html – 出于可访问性原因隐藏文档大纲中的标题

当视觉设计不需要明确的标题时,我有一个关于确保良好文档结构的问题.

对主页采用以下示例HTML.

SAEpe minus soluta illum?


在该标记中,存在清晰的标题结构(即,h1> h2> h3).
但是,我们已经同意“我们的团队”< h2>标题不需要显示,因为它是由视觉设计暗示的.但是,对于良好的文档结构(出于可访问性原因)这一点非常重要.
我们要不要…
>显示’我们的团队’< h2>使用“.visuallyhidden”类前往屏幕阅读器和搜索引擎？ (即将内容隐藏在屏幕外的那个)
>将“团队”部分中的所有< h3>更改为< h2> s？从内容的角度来看,这感觉不对,因为他们觉得它们应该包含在他们自己的标题下.
>跳过’我们的团队’< h2>前进并直接前往< h3>.跳过标题级别似乎也不正确.
边注,
我注意到gov.uk(通常被誉为一个很好的可访问性网站)这样做.他们隐藏了@H_404_30@为他们的’所有类别’标题.而且,他们隐藏了< h2>在’支持链接’的页脚
https://www.gov.uk/browse/benefits
隐藏标题似乎是明智的,但我看到很多人发布谷歌将如何将其视为黑帽SEO策略.
我认为除了几个隐藏的标题会引发谷歌的任何惩罚,但是可能在@H_404_30@ s上做这将是一个问题.
任何关于这个问题的想法将不胜感激！


最佳答案
我不担心这里的SEO处罚.多年解决你想要解决的问题表明这种影响要么没有,要么可以忽略不计.
在您的示例中,< h2>没有内容,它直接导致< h3>.在那种情况下,我总是想添加一些内容,因此它不是一个硬视觉/音频跳跃.实际上,如果我在屏幕阅读器中按标题导航,那么我在< h2>下就没有内容,所以它可能已经感觉有点奇怪了.
无论如何,如果你认为你真的不需要“团队”文本(视觉上或其他方面),那么你可以完全删除它并将其他文本提升为< h2>.
所以从你的三个选项：



Show the ‘Our Team’  heading for screen readers and search engines using a .visuallyhidden class? (i.e. one which hides content off-screen)



咩.在我看来,要么有内容支持它,要么没有.在您的示例中,没有内容可以支持它.如果您决定在视觉上隐藏文本,请不要在屏幕外进行,因为它可以插入RTL翻译,请查看clipped text(有很多示例,恰好有一些最近的调整).



Change all the s in the ‘team’ section to be s? This doesn’t feel right from a contents perspective,as they feel like they should be contained under their own heading.



这样做.我倾向于原则上同意Teams保证自己的标题.但要做到这一点,我认为你需要Teams< h2>下的内容.如果没有内容会去那里并且您删除了团队< h2>,那么这是您的下一个最佳选择.



Skip the ‘Our Team’  heading and go straight to . Skipping heading levels doesn’t seem right either.



不.对于大多数审计员来说,这是WCAG的失败(我会失败).

html – 出于可访问性原因隐藏文档大纲中的标题

猜你在找的HTML相关文章