Character Counter: a11y improvements

[silvalaura]

Accessibility enhancements for Character Counter (#891)

Feedback from Perkins:

Hi Orion. I reviewed the prototype with NVDA/Chrome and VO/Safari and have some feedback for you to consider. The thing that concerns me is that even when using aria-live="polite" the remaining characters announcement might be disruptive to screen reader users when utilized in this way, especially if it were to be a long message that the user is entering into a textarea. What I would suggest is that the live region is implemented in a way that only announces the character limit at a specific interval. For example, you can use Javascript to update the aria-live value from "off" to "polite" when 80% of the characters have been typed. You could also have the value update to "polite" only when a certain number of characters are typed (for example, every 5 characters after the 80% is reached). Finally, you can update aria-live to "assertive" when the user goes over the character limit. I know this might require some scripting but I do believe it would be the best user experience for someone who is blind.

I would also recommend using aria-describedby to associate the <input> with the <div> that has aria-live so that the initial helper text ("4 characters allowed") is announced by screen readers when the field gains focus. The initial helper text is not announced when the page loads because aria-live will only announce a live region when the content inside it changes. I added aria-describedby to the <div> and it works well. It announces "Character Counter Edit Text 4 characters allowed" when the field gains focus, then it only announces the live region updates after that.

AC:

• Improved implementation of aria-live
• Add aria-describedby