In Step 16 the tutorial told us to use both section and
[MDN Web Docs about Region Role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role) states that
](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.
[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?
Challenge: Learn Accessibility by Building a Quiz - Step 16
Link to the challenge:
Our local expert @bbsmooth - is this something that we need to change in the course?
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”
maybe reading up on this article could help? happy reading WAI-ARIA: aria-labelledby (Property) • DigitalA11Y
That is a good article.
Can you refer to this one?
That is the first rule of ARIA.
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** .
okay, what’s contradicting here with use of “role” and “labelled by” in “section”? if i may ask, thanks
<section> is a semantic element that already has its own role.
hmmm, that’s why i was ruminating that fact of “backward compatibility” aspect of it, could it be so?!
That is what I suspect.
That is one thing I did not consider,
backward compatibility is also part of accessibility.
Thank you @bappyasif
glad i could help, happy accessibility to us all
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.
@ilenia, 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 (
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