WAI-ARIA:为什么它建议面包屑导航有一个 link 到当前页面?
WAI-ARIA: Why does it recommend breadcrumbs have a link to the current page?
WAI-ARIA breadcrumb example有以下规则:
The link to the current page has aria-current set to page. If the element representing the current page is not a link, aria-current is optional.
但是,根据我的理解,面包屑中的当前页面不应该是 link,因为这个 link 只会将用户带到他们已经在的页面?这只是对示例的疏忽,还是背后有原因?
当前页面没有使用 link 的可用性理由,从纯粹的用户体验和可访问性的角度来看,它没有任何用处,实际上增加了另一个制表位和可能的混淆。
然而,可访问性并不是孤立存在的,因此我们需要确定对当前页面设置 link 是否还有其他好处。
现在 Stack Overflow 不是讨论 SEO 的地方,但这是经常争论的话题,因为它会根据页面上的 link 数量影响 'link juice' 比例,我不要认为这有任何道理,但这就是您的 SEO 世界,您可以研究/考虑。
另一个原因是如果使用结构化数据,例如schema.org breadcumbList。
虽然有方法可以使用 it just leaves the flexibility there for if using microFormats instead of JSON-LD
结论
如果不使用 link 并更改生成的 'microFormats' 或 'JSON-LD' 很容易,那么最好不要使用 hyperlink面包屑中的当前页面。这将提高可用性和用户体验。
但是,如果由于其他限制,您确实需要一个 hyperlink,那么请确保添加 aria-current="page"
并且可能还有一些 visually-hidden text 表示它是当前页面。
例如: <a href="page" aria-current="page">page name <span class="visually-hidden">(current page)</span></a>
)
WAI-ARIA breadcrumb example有以下规则:
The link to the current page has aria-current set to page. If the element representing the current page is not a link, aria-current is optional.
但是,根据我的理解,面包屑中的当前页面不应该是 link,因为这个 link 只会将用户带到他们已经在的页面?这只是对示例的疏忽,还是背后有原因?
当前页面没有使用 link 的可用性理由,从纯粹的用户体验和可访问性的角度来看,它没有任何用处,实际上增加了另一个制表位和可能的混淆。
然而,可访问性并不是孤立存在的,因此我们需要确定对当前页面设置 link 是否还有其他好处。
现在 Stack Overflow 不是讨论 SEO 的地方,但这是经常争论的话题,因为它会根据页面上的 link 数量影响 'link juice' 比例,我不要认为这有任何道理,但这就是您的 SEO 世界,您可以研究/考虑。
另一个原因是如果使用结构化数据,例如schema.org breadcumbList。
虽然有方法可以使用
结论
如果不使用 link 并更改生成的 'microFormats' 或 'JSON-LD' 很容易,那么最好不要使用 hyperlink面包屑中的当前页面。这将提高可用性和用户体验。
但是,如果由于其他限制,您确实需要一个 hyperlink,那么请确保添加 aria-current="page"
并且可能还有一些 visually-hidden text 表示它是当前页面。
例如: <a href="page" aria-current="page">page name <span class="visually-hidden">(current page)</span></a>
)