Module: 06 Testing Course - Unit
Multiple section, article, and header elements are present on the page. Whenever multiple landmarks, regions, or sections are present these elements must be programmatically labelled so that there is an accessible name to differentiate these elements.
When there is only one landmark or region, it is still a best practice to label these elements, but when there is only one element of that type (e.g. one article element) it will be more obvious to users which element (such as the article) they are looking for will be.
Developers should use ids on appropriate elements, such as the heading beginning the section or region, and programmatically connect them with their grouping elements through the use of aria-labelledby.
e.g. <section aria-abelledby="duplicate">
<h2 id="duplicate">Duplicate of Recommender</h2>
Let's make the Display Name found in each <header> a Heading element (an H2 seems appropriate). Add a unique ID to the Heading element and reference it via aria-labelledby on the parent <section> element. Alternatively,to avoid having to maintain unique IDs you can use the same variable that populates the Display name as the value of an aria-label attribute on that <section>