为什么 HTML 中没有 role=logo？
Why do we not have role=logo in HTML?
我不喜欢使用图像作为站点徽标，我更喜欢使用具有设计字体样式的文本...因为它们只是文本，浏览器和抓取工具可能不理解它代表什么，我一直想知道我如何初始化我的基于文本的徽标以被 HTML.
识别
所以我想到了这样做：
<h1 role="logo">Stack Overflow</h1>
但这不正确，因为 HTML 中没有类似 role=logo 的东西。
我该怎么做？
您的用例似乎已包含在现有 ARIA img 角色中。 Quoting the docs:
Any set of content that should be consumed as a single image (which
could include images, video, audio, code snippets, emojis, or other
content) can be identified using role="img".
如果您希望浏览器和辅助技术将某物解释为图像，您可以使用 ARIA img role。但是不要将它放在 <h1> 元素上，因为 role="img" 属性将用图像替换标题的语义。而是将其包装在 <span> 中并将 role 属性放在 上，以保留标题。另外，不要忘记您的 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>.
我不喜欢使用图像作为站点徽标，我更喜欢使用具有设计字体样式的文本...因为它们只是文本，浏览器和抓取工具可能不理解它代表什么，我一直想知道我如何初始化我的基于文本的徽标以被 HTML.
识别所以我想到了这样做：
<h1 role="logo">Stack Overflow</h1>
但这不正确，因为 HTML 中没有类似 role=logo 的东西。
我该怎么做？
您的用例似乎已包含在现有 ARIA img 角色中。 Quoting the docs:
Any set of content that should be consumed as a single image (which could include images, video, audio, code snippets, emojis, or other content) can be identified using role="img".
如果您希望浏览器和辅助技术将某物解释为图像，您可以使用 ARIA img role。但是不要将它放在 <h1> 元素上，因为 role="img" 属性将用图像替换标题的语义。而是将其包装在 <span> 中并将 role 属性放在 上，以保留标题。另外，不要忘记您的 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>.