The following markup got an error from the validator:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bla Bla Bla</title>
</head>
<body>
<h1 role="banner">Bla Bla Bla</h1>
<section role="main">
<h1>Bla Bla Bla</h1>
<p>Bla Bla Bla</p>
</section>
<p role="contentinfo"><small>Bla Bla Bla</small></p>
</body>
</html>
The error is: Error: Attribute role not allowed on element h1 at this point.
Does that mean role="banner" must be on header element?
An ARIA role can be assigned to any HTML element. From the WAI-ARIA docs:
However, there are various restrictions on what certain elements can be given as a role, mostly to prevent the implicit semantics from getting you into a muddled state with your explicit semantics.
If you look at tables in the W3C HTML5 specification linked to above, you’ll see under "Implicit ARIA semantics" that a
h1without ahgroupancestor must have a role of eitherheadingortab, if set.That’s why you’re getting the validation error.
You’ll also see from those tables that
headhas a strong native semantic ofno role, meaning you can’t set that either – it must be set topresentation. I’m not sure if that’s what you meant since you have noheaderelement in your sample.If you did have a
headerelement then yes, you can set its role tobanner– in fact that’s all you’re allowed to set it to (if you set it at all). That’s also covered by those tables I’ve linked to above.You could also try putting the
h1inside asectionwith abannerrole – that would have been my first attempt at fixing this.