Region Role and Section - Learn Accessibility by Building a Quiz

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

Link to the challenge:

Our local expert @bbsmooth - is this something that we need to change in the course?

1 Like

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 :slight_smile:

Yes, <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?!

1 Like

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 :grinning:

1 Like

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.

@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 (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 :smile: