Ensure ARIA regions, landmarks and HTML sections are identifiable

Description

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.

  1.  

    1. Acceptance Criteria

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>

Severity: 3

  1.  

    1. Internal Comment:

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>

Status

Assignee

Unassigned

Reporter

Mark Sadecki

Accessibility - Severity

2

Accessibility - Frequency

5

Accessibility - Effort

4

Deadline

None

Platform Area

None

Priority

CAT-3
Configure