Difference between using the main element versus a div with role="main"?

Asked

Viewed 1,863 times

5

Thinking in terms of accessibility, described by WAI-ARIA, you need to define the element with the main content of the page with role="main", in order to improve the accessibility of the page for users who rely on assistive technologies.

For example:

<html>
...
<body>
    ...
    <div role="main">
        Conteúdo principal da página
    </div>
    ...
</body>
</html>

However, HTML5 already defines an element main.

My question is, if I replace the above code with this code below, will the assistive tools provide the same functionality? Semantically, <div role="main"> is equal to <main>? That is, the <main> has a role="main" implicit?

<html>
...
<body>
    ...
    <main>
        Conteúdo principal da página
    </main>
    ...
</body>
</html>
html html5

1 answer

5


The element main has the semantics role="main" implicitly by default.

Reference (in English):

Language feature  |  Default implicit ARIA semantic  |  Restrictions
____________________________________________________________________________________
main element      |  main role                       | Role must be either document,
                  |                                  | application, or main

<main>, <div role="main"> and <main role="main">¹ have the same value of ARIA semantics, as they all indicate (implicitly or explicitly) their role as main.

¹ The example of <main role="main"> has a value role which overrides the value of role implicit element, but since the value explicitly assigned is the same as the default implicit value, the role="main" becomes redundant in this case.

Note that my reply so far refers only to updated browsers and screen readers. There are older programs that support role="main" but do not support the element main which is a relatively recent addition to HTML5, so <main role="main"> may be useful for compatibility with outdated programs. (reference (in English)).

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.