In Step 16 the tutorial told us to use both section and role="region".
According to [MDN Web Docs about Region Role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role) states that
Using the [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) element will automatically communicate a section has a role of region if it is given an accessible name. Developers should always prefer using the correct semantic HTML element, in this case <section> , over using ARIA.
And in [MDN Web Docs \<section\> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) also states that for best practice there should be a heading inside the section element for accessibility purposes.
I am now left wondering why do we still need to declare the role and aria-labelledby in the section element in this step?
Thank you
Challenge: Learn Accessibility by Building a Quiz - Step 16
could it be due to “backward compatibility” reasons?!
“labelled by” can be used with “div/span/etc”, and semantically speaking “section” and “div” doesnt have any difference on “page” itself rather for “accessibility tools such as: screen reader”
If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in , instead of re-purposing an element and adding an ARIA role, state or property to make it accessible**, then do so** .
A section element without an assigned accessible name has the role of "section" which doesn’t really do anything as far as accessibility is concerned (it’s the same as if it were a div). But, if you assign it an accessible name, such as by using the aria-labelledby attribute, then it automatically gets assigned the role of "region" by the browser. Since this is automatically assigned by the browser you don’t really need to add role="region" to the section element. There is no harm in doing so, but in general it is preferred that you do not use aria attributes when not needed. So basically what we have here is the use of unnecessary aria attributes that don’t cause any harm.
You only need to add role="region" if are using something other than a section element to create a section/region. But as quoted above, you should always use the semantically correct element, which would be section in this case, and thus you probably will never need to add role="region" to an element unless you are dealing with bad HTML and have no way to change the element being used.
@ILM, as far as changing this step, since adding role="region" will almost never be a thing it is probably not the best example to use to demonstrate roles. Personally, I probably wouldn’t even give these section elements an accessible name with aria-labelledby as I don’t think this form is complex enough to warrant three additional landmark roles. (Landmarks should be kept to a minimum as they are meant to help screen reader users jump to major parts of the page. Having too many pollutes the landmark space and makes them basically equivalent to headers, which screen reader users can already navigate to easily).
The only time you need to use the role attribute is when there isn’t an existing HTML element that provides the role you need. For example, a tab panel needs lots of roles added to the HTML (tablist, tab, tabpanel) because HTML doesn’t provide a native tab panel element. I’m not seeing anything in this course that would require using the role attribute. One thought would be to add better error handling on the form and then you could use the alert role to notify screen reader users of errors. The default error handling provided by the browsers is not that great as far as accessibility goes and most sites serious about accessibility will not rely on it. But that would require JS which this course doesn’t cover, so I guess that’s not a good suggestion
