Is role="banner" allowed on h1?

StackOverflow https://stackoverflow.com/questions/13393578

  •  29-11-2021
  •  | 
  •  

Frage

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?

War es hilfreich?

Lösung

An ARIA role can be assigned to any HTML element. From the WAI-ARIA docs:

3.2.7.1 ARIA Role Attribute

Every HTML element may have an ARIA role attribute specified.

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 h1 without a hgroup ancestor must have a role of either heading or tab, if set.

That's why you're getting the validation error.

You'll also see from those tables that head has a strong native semantic of no role, meaning you can't set that either - it must be set to presentation. I'm not sure if that's what you meant since you have no header element in your sample.

If you did have a header element then yes, you can set its role to banner - 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 h1 inside a section with a banner role - that would have been my first attempt at fixing this.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top