HTML - 图标和 apple-touch-icon 中的可访问性

Posted 2023-03-10

【中文标题】HTML - 图标和 apple-touch-icon 中的可访问性

【英文标题】：HTML - Accessibility in icons and apple-touch-icon

【发布时间】：2020-09-25 06:18:46

【问题描述】：

我目前正在改进网站的可访问性。 我正在使用 TotalValidator 工具来检查那里的可访问性问题，以及

上的图标

那里的图标使用这种格式：

<link href="/full/path/to/the/image/120.png" rel="apple-touch-icon" />
<link href="/full/path/to/the/image/152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="/full/path/to/the/image/167.png" rel="apple-touch-icon" sizes="167x167" />
<link href="/full/path/to/the/image/180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="/full/path/to/the/image/192.png" rel="icon" sizes="192x192" />
<link href="/full/path/to/the/image/128.png" rel="icon" sizes="128x128" />

我搜索了这个主题，这种格式似乎是正确的，但是可访问性报告抛出：

此处不允许使用“尺寸”属性。

有谁知道我应该如何更换它？谢谢！

【问题讨论】：

根据specs，sizes 是一个有效的link 属性。我没有看到您的示例有任何问题，因此我建议联系 TotalValidator 支持。

感谢您的回答并参考文档。也许 size 属性对 rel="icon" 有效，但对 rel="apple-touch-icon" 无效？

检查文档，你是对的：w3.org/TR/html52/document-metadata.html#the-link-element 对于这种情况，该工具可能有点过时了。感谢您的帮助！

【参考方案1】：

根据@Darek Kay，this documentation 指的是：

sizes 属性给出了视觉媒体图标的大小。 [...] 不得在没有指定 icon 关键字或 apple-touch-icon 关键字的 rel 属性的链接元素上指定该属性。

注意：apple-touch-icon 关键字是对 预定义的链接类型集，但不需要用户代理 以任何方式支持它。

谢谢！