search

indiana-university / rivet-docs

Website and documentation for Rivet, Indiana University’s design system for web application development
https://rivet.iu.edu/
BSD 3-Clause "New" or "Revised" License
7 stars 3 forks source link

Alert role on inline error messages causes screen reader problems #11

Closed mmeller75 closed 5 years ago

mmeller75 commented 5 years ago

Inline error messages have role="alert".

https://rivet.iu.edu/components/overlays/alerts/#standalone-inline-alerts https://rivet.iu.edu/components/forms/text-input/#inline-validation-states

The alert role is causing problems for screen readers: either the error message is announced instead of the label for the form field or the label is announced by not the error message. The example code (as shown with the inline validation states) connects the error message to the form field with aria-describedby. Removing the alert role allows the ARIA description to work properly.

Note: An alert role would be appropriate for a page level alert.

levimcg commented 5 years ago

@mmeller75 Thanks for opening this! We'll make sure to get the docs updated ASAP.