为啥我们在 HTML 中没有 role=logo？

Posted 2023-04-13

【中文标题】为啥我们在 HTML 中没有 role=logo？

【英文标题】：Why do we not have role=logo in HTML?为什么我们在 HTML 中没有 role=logo？

【发布时间】：2021-09-15 11:32:54

【问题描述】：

我不喜欢使用图像作为网站徽标，我更喜欢使用具有设计字体样式的文本...由于它们只是文本，浏览器和爬虫可能不理解它的含义，我一直想知道我是如何做到的可以初始化我的基于文本的徽标以被 html 识别。

所以我想到了做这样的事情：

<h1 role="logo">Stack Overflow</h1>

但这是不正确的，因为 HTML 中没有像 role=logo 这样的东西。

我该怎么做？

【问题讨论】：

和role="img"有什么区别？

role="img" 适用于图像徽标，您是否建议将其用于基于文本的徽标？

【参考方案1】：

如果您希望浏览器和辅助技术将某物解释为图像，您可以使用ARIA img role。但是不要将它放在<h1> 元素上，因为role="img" 属性将用图像替换标题的语义。而是将其包装在<span> 中并将role 属性放在it 上，以保留标题。另外，不要忘记您的 aria-label 属性。

不要这样做：

<!-- don't do this -->
<h1 role="img" aria-label="Logo">Logo</h1>

<!-- because it gets interpreted as this -->
<img >

如果必须的话：

<!-- if you must, do this -->
<h1><span role="img" aria-label="Logo">Logo</span></h1>

<!-- because it gets interpreted as this, preserving the heading -->
<h1><img ></h1>

但是，我想不出强制浏览器将您的文本徽标视为图像有什么实际好处。将其保留为普通的<h1> 就可以了。

【参考方案2】：

现有的 ARIA img 角色似乎涵盖了您的用例。 Quoting the docs:

应作为单个图像使用的任何内容集（其中 可能包括图像、视频、音频、代码 sn-ps、表情符号或其他 content) 可以使用 role="img" 来识别。

【讨论】：

在这种情况下，它不应该放在<h1> 上。

我必须感谢这一点，结合@Sean发布的指令以及我刚刚从Mozilla阅读的内容，我完全明白了。