Associate the name of the list programmatically so that a screen reader user hears the list name when navigating by links and interactive elements #2514
A clear and concise description of what the bug is.
Associate the name of the list programmatically so that a screen reader user hears the list name when navigating by links and interactive elements. See image and Recommendations.
Source
https://airtable.com/appRFUc45sF4yWFut/tbl51inE74gEWlB0x/viwG9G4vAjsjQEh4g/recFjuBuOdtxPlY0R?blocks=hide
Describe the bug
A clear and concise description of what the bug is.
Associate the name of the list programmatically so that a screen reader user hears the list name when navigating by links and interactive elements. See image and Recommendations.
https://www.adapacific.org/event/the-role-of-person-centered-planning-for-employment-support/
Recommendations
Add an id to the H2 "More Upcoming Events"
Then, reference that id on the
for the associated list using aria-labelledby.. See screenshot.
When a screen reader user navigates through the links they will first hear the name of the list or the heading and this will give context to the list.
https://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_for_link_purpose#:~:text=With%20the%20aria-labelledby%20attribute%2C%20authors%20can%20use%20a,purpose%20of%20the%20link%20unambiguous%20%28see%20example%201%29.
Screenshots
If applicable, add screenshots to help explain your problem.