ftourangeau
commented
1 year ago Page: Course Overview page Lesson 1: Overview of electronic Passport Next Generation Lesson 2: Domestic Print Lesson 3: Observation Print Lesson 4: Manual QA Lesson 5: Reports
Description: Visible and accessible headings are different from each other. For example: • Visible heading: "Lesson 1: Overview of electronic Passport Next Generation" • Accessible heading: "Incomplete Lesson 1: Overview of electronic Passport Next Generation" The "Incomplete" status will be replaced with the "Complete" one when all elements in the section are opened and/or selected. But
-
the change is not programmatically determined through role
-
"Complete/Incomplete" status is not displayed for sighted users
-
The change of the completing status should be announced for AT users.
-
"Incomplete" information should be provided for all users (Not only for screen reader users). Nobody should be at a disadvantage.
Recommendation:
• Visible and accessible headings should be the same. The best practice is to implement all headings using native HTML <h> elements (according to "First Rule of ARIA Use")
• Use aria-live containers for heading elements
So all users will have the same information and be notified in time. For example:
<div role="status"> (or <div role="region" aria-live="polite">)
<h1>Complete - Lesson 1: Overview of electronic Passport Next Generation</h1>
</div>
Screen reader users can hear when a component is Completed or Incomplete but users not using a screen reader will always see the normal title - For accessibility all users should be able to see the completion status of a component / block / article (same info as screen reader)