I need help about section and aria-labelledby. I have seen on forum what other people have done so I passed step 14 of ‘‘Learn accessibility by building a quiz’’ but I am not quite clear what did they do with section elements and also what is ‘‘aria-labelledby’’? If there is anybody who can help me I would be thankful for it.
If you have a question about a specific challenge as it relates to your written code for that challenge, and you’ve tried to solve it at least 3 times so far and still need some help, just click the Ask for Help button located on the challenge (it looks like a question mark).
This button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.
Thank you.
aria-labelledby is a special attribute that helps screen reader users differentiate an element from all the other elements on the page. In technical terms, it gives an element an “accessible name”. The accessible name will be announced with the element by the screen reader. The accessible name also helps with other type of assistive technology, such as speech recognition software.
In the case of these sections, they are acting as regions, which screen reader users can use as navigation landmarks, and thus they must have an accessible name, which we can add using aria-labelledby. If they don’t have an accessible name, then when a screen reader user navigates to each region they will just hear “region” and won’t know what the region is for. With an accessible name then they will hear both the accessible name and “region” and they will know what region they have navigated to.
Teaching some of these accessibility concepts (such as aria attributes) can be tricky, especially if you have no experience with screen readers and other assistive technology. I’m not sure something like aria-labelledby can be taught adequately in this small step format. But I have recently suggested a fix to step 16 to try and make it a little clearer. Hopefully that will help.
Thank you for your help, appreciated.