Validation Errors for HTML 5

Question

I'm getting a crazy set of errors. I'm using Bootstrap code and have not edited it. So why is this showing an error?

A link element with a sizes attribute must have a rel attribute that contains the value icon or the value apple-touch-icon.

…

Bad value banner for attribute role on element nav.

To see the same thing live, go to https://validator.w3.org/nu and enter: www.iqtests4kids.com/

Answer 1

Maintainer of the W3C HTML checker (validator) here. The rel=apple-touch-icon-precomposed error is because I recently updated the checker to conform to HTML spec requirements for sizes:

The sizes attribute is used with the icon link type. 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.

About the error for role=banner on nav, that’s because the checker conforms to requirements in the ARIA in HTML spec that nav must not have any role other than navigation.

But note that the ARIA in HTML spec also states the following requirement:

Web developers should not set the ARIA role and aria-* attributes to values that match the implicit ARIA semantics defined in the table.

And requirements in “the table” cited state that the implicit semantics of nav are navigation.

Therefore, if you use role=navigation with nav, the checker will emit a warning.

So bottom line is, per the ARIA in HTML requirements, nav should never have an explicit role.

Answer 2

Looks like the Validator is happier with:

<link rel="apple-touch-icon".....

instead of

<link rel="apple-touch-icon-precomposed"......

And for the other error, you can make the Validator happy by altering the offending role="banner" setting to "role=navigation":

<nav id="main-menu" ..... role="navigation">

either leaving it in and living with the resulting 'Warning' or omit the value completely (the best solution) and the Validator will be happy :)