I want to learn more about how to make webpages more accessible, so I've spend the last few hours reading about WAI-ARIA. Still, the whole concept isn't quite clear to me - HTML5 is part of that confusion.
I apologize if this question is maybe a bit long, but I think it needs a bit of explanation where I'm coming from.
When I learned HTML, it was HTML 4. That meant, e.g. a header looked like this:
<div id='nav'> <!-- HTML content --> </div>
I understand that this does nothing for accessibility as it just informs the browser that there is a generic div element, identified by the id 'nav', whereas 'nav' could also be 'parrot' or 'raspberry-jam'. So while 'nav' maybe seem semantic for humans, a machine can't treat it right, no screen reader can inform the user that the content he/she wants to access is located inside the page navigation.
Thats where the ARIA roles come into place, right? Because using
role=nav passes important information to assistive technology (the id is optional of course):
<div id='nav' role='navigation'> <!-- HTML content --> </div>
That way a screen reader can inform the user that the element is used as navigation.
Now HTML5 comes into place, introducing the
nav element. Using HTML5, the whole example could look like this (id is optional again):
<nav id='nav'> <!-- HTML content --> </nav>
One of the great benefits of HTML5 is alleged to improve semantics, because now, screen readers/assistive technology don't need the ARIA role anymore, they can interpret the element by itself. Is this true? I've also read that one should use
<nav role="navigation"> to make sure also older versions can also interpret the element.
This leads me to the question: What do the new HTML5 elements do to semantics after all - why should I favor e.g.
<nav role="navigation"> over
<div role="navigation">? Apparently the WAI-ARIA specification is much more complete than the HTML5 specification regarding accessibility - are there any best-practice guides or something like that?