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

Question

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

Navigation

#1 by (5 votes)

5

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

For example:

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

However, HTML5 already defines a main element.

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

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

html html5

asked by anonymous 23.07.2014 / 03:40

1 answer

Rank database [# 1 of 10] How to have your site featured on the right side on Google

score 5 · Accepted Answer

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

Reference :

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 ARIA semantic value, as they all indicate (implicitly or explicitly) their role as main .

¹ The example <main role="main"> has an explicit role value that overwrites the value of% implicit% of the element, but since the explicitly assigned value is the same as the implicit default value, role becomes redundant in this case.

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