Actual Result:
Findable Added Content: Some of the input text fields uses a dynamically changed character counter. Screen reader users may not be notified when the value of the counter changes while others are notified on every keystroke which may be confusing.
Note: The text input is difficult to read/review because it is not all visible on the page because a textbox is used for the form field. Users with low vision or cognitive impairments may have difficulty reviewing/editing the text input. It is recommended to use a textarea element instead of the current form input.
Expected Results
Currently, the character counter is associated with the form field using aria-describedby however this is causing the change to be announced on every keystroke for some screen reader users. Remove the aria-describedby reference to the character counter when users are typing and use the method below to communicate the change while text is being entered.
Use WAI-ARIA aria-live="polite" to notify screen reader users of a content change without a change in focus on the page.
To provide support across browsers:
• The element aria-live="polite" should be present on page load, (when the form is first displayed)
• The message text should be injected dynamically into this element as its immediate child element.
• Toggle aria-live between "off" and "polite" once every 50 characters. This way the screen reader will only announce changes once every 50 characters instead of with every keystroke.
uxdesignz
commented
3 years ago
Actual Result: Findable Added Content: Some of the input text fields uses a dynamically changed character counter. Screen reader users may not be notified when the value of the counter changes while others are notified on every keystroke which may be confusing. Note: The text input is difficult to read/review because it is not all visible on the page because a textbox is used for the form field. Users with low vision or cognitive impairments may have difficulty reviewing/editing the text input. It is recommended to use a textarea element instead of the current form input.
Expected Results Currently, the character counter is associated with the form field using aria-describedby however this is causing the change to be announced on every keystroke for some screen reader users. Remove the aria-describedby reference to the character counter when users are typing and use the method below to communicate the change while text is being entered. Use WAI-ARIA aria-live="polite" to notify screen reader users of a content change without a change in focus on the page. To provide support across browsers: • The element aria-live="polite" should be present on page load, (when the form is first displayed) • The message text should be injected dynamically into this element as its immediate child element. • Toggle aria-live between "off" and "polite" once every 50 characters. This way the screen reader will only announce changes once every 50 characters instead of with every keystroke.