Learn Accessibility by Building a Quiz - Step 16

Tell us what’s happening:
Describe your issue in detail here.

I would like a bit explanation of some of these attributes
what does all this mean
role=“region” aria-labelledby=“”

Challenge: Learn Accessibility by Building a Quiz - Step 16

Link to the challenge:

A role provides semantic meaning for an element, which is used by assistive technology, such as screen readers, to provide better descriptions and support for elements so the person listening to the page knows what the element is and does.

The aria-labelled attribute allows us to set an accessible name for an element. This allows screen readers to tell the user what the name of the element is. For example, if there are three section elements on the page and each section has a unique accessible name, then a screen reader user navigating the page by landmarks will know which section they are currently on because they will hear that section’s accessible name.

1 Like

Add the following aria-labelledby attributes to the section elements:

  • student-info
  • html-questions
  • css-questions

Then, within each section element, nest one h2 element with an id matching the corresponding aria-labelledby attribute. Give each h2 suitable text content.

The solution is given below:

Mod edit: Removed Solution

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.