我不喜欢使用图像作为网站徽标，我更喜欢使用具有设计字体样式的文本...由于它们只是文本，浏览器和爬虫可能不理解它的含义，我一直想知道我是如何做到的可以初始化我的基于文本的徽标以被 HTML 识别。
所以我想到了做这样的事情：
<h1 role="logo">Stack Overflow</h1>
但这是不正确的，因为 HTML 中没有像 role=logo 这样的东西。
我该怎么做？
【问题讨论】：
role="img"有什么区别？
role="img" 适用于图像徽标，您是否建议将其用于基于文本的徽标？
标签： html attributes semantic-markup
如果您希望浏览器和辅助技术将某物解释为图像，您可以使用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 alt="Logo">
如果必须的话：
<!-- 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 alt="Logo"></h1>
但是，我想不出强制浏览器将您的文本徽标视为图像有什么实际好处。将其保留为普通的<h1> 就可以了。
【讨论】：
现有的 ARIA img 角色似乎涵盖了您的用例。 Quoting the docs:
应作为单个图像使用的任何内容集（其中 可能包括图像、视频、音频、代码 sn-ps、表情符号或其他 content) 可以使用 role="img" 来识别。
【讨论】：
<h1> 上。