Creating an Accessible Character Counter
taught by: Russ Weakley
Session Summary
How can you create a character counter to be accessible for all users? Ideally we want it to provide immediate feedback for sighted users, and less verbose feedback for screen readers users. This presentation will take a deep-dive into this complex component.
Description
We will explore accessible HTML markup, how to hide the on-screen information from screen readers, and then how to provide screen readers with less verbose information. We will explore aria-describedby, aria-hidden, aria-live as well as some JavaScript solutions.
Practical Skills
- How to use accessible HTML markup to create basic form controls and labels.
- How to programatically associate instructions with form controls.
- How to use ARIA states and properties including aria-describedby and aria-hidden, and aria-live.