I'm currently working at improving the accessibility of a site. I'm using the TotalValidator tool to check the accessibility issues there, and the icons on the
The icons there use this format:
<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" />
I searched about this topic and this format seems to be correct, but the accessibility report throws:
The 'sizes' attribute is not allowed here.
Does anyone knows how I should replace it? Thank you!
According to @Darek Kay, this documentation refers that:
The sizes attribute gives the sizes of icons for visual media. [...] The attribute must not be specified on link elements that do not have a rel attribute that specifies the icon keyword or the apple-touch-icon keyword.
NOTE: The apple-touch-icon keyword is a registered extension to the predefined set of link types, but user agents are not required to support it in any way.
Thank you!