ARIA标题角色的正确使用方法

Question

我想知道是否有人知道 role=heading 这个aria属性可以用于非文本元素（例如图片）吗？

例如：

<img alt="..." role="heading" aria-level="1">

提前感谢。

- phillyville

Answer 1

为什么不直接使用...

<h1><img alt="..."></h1>

...相反呢？这似乎具有相同的功能，但避免了ARIA是否受支持的问题。

这也对搜索引擎友好（SEO），因为Web爬虫将知道 的内容被用作标题并相应地对待它，而几乎不太可能查看aria属性。

- BrendanMcK

---

我认为这是因为标题并不总是与页眉相同。例如，页眉将包括标题，但还包括副标题、日期信息、作者信息等。此外，您无需担心ARIA是否受支持，它只是一个属性，因此通过包含它不会破坏任何内容。 - ian

这里的问题是关于标题（headings），而不是页眉（header sections），所以我不确定您的评论如何适用或改变了此内容。从ARIA规范可以清楚地看到，ARIA标题角色映射到Hn元素，而不是更大的页眉/页脚部分。 - BrendanMcK

使用OP的代码意味着您依赖用户拥有足够新的浏览器+屏幕阅读器版本才能使其正常工作；而对于Hn元素的屏幕阅读器支持非常成熟。使用Hn也是指示元素为标题的正确HTML方式，并且被屏幕阅读器、索引器和其他人广泛理解。当您无法在常规语义HTML中正确表达基础含义时，ARIA角色确实是一种后备机制。我建议仅在无法在此处使用Hn的某些强制性原因时才使用OP的技术。 - BrendanMcK

是的，使用OP的代码需要足够新的版本，但既然他们正在询问如何最好地使用它，那么我建议不要使用那个代码。然而，这并不意味着标题角色映射到标题元素。请参见http://oaa-accessibility.org/example/15/作为示例，我也不同意您对ARIA规范的阅读，它非常清楚地从sectionhead派生 - “标签或总结其相关部分主题的结构。”这可以包括几个元素，其中一个可能是标题元素。我建议OP同时使用角色和标题。 - ian