Closed Blackbaud-MattGregg closed 4 years ago
@Blackbaud-MattGregg Was the a11y error reported by an automated test, or was it a manual check by you? Curious if you can provide more info on the error you are seeing? Is this for RE NXT exclusively, or something you're also seeing on SKY UX 2/3?
This isn't an automated test. This came back as a finding from the 3rd party audit we have going for RE NXT. It makes sense to me. The visual icon is communicating there is a problem/error and then what the problem is. This should be communicated in text for a screen reader user too.
This is in SKY UX as well. Anytime the error status indicator is used for an error (e.g., under input in URL validation, date picker, etc.) this is can issue. Could the solution here be to fix on the status indicator which is used everywhere? I don't know if this indicator is only used for errors or if there would be another meaning in some contexts (i.e., warning). We should probably address this same issue with the yellow warning icon as well.
@Blackbaud-MattGregg are you referring to an invalid form input? Or the error component? https://developer.blackbaud.com/skyux/components/error#demo
Ah. Sorry. The invalid form input.
Gotchya. That particular image is a background image, which inherently has some accessibility issues. However, if this concern is specifically around an invalid input, maybe the aria-invalid
should be used as an alternative?
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute
We should also probably apply the ARIA role alert
to that error div.
Would this be a good fit?
Yes, aria-invalid would also be good to add. It shouldn't be true just because there isn't a value and the field is required though.
Adding an alert role is trickier I think given the different ways this error message can show up. When it's character-level validation, it should use alert because I think it's aria-live value would be assertive instead of polite causing a notification on every keystroke instead of when there is a break in typing. I think our approach to notifications in forms is something to look at more holistically at some point.
Ok sounds good. Thanks for the feedback! Would the aria-invalid
attribute satisfy this issue for the time being?
Nope. It needs to have the "Error: " text added to icon representation in the front to indicate this is what the content is about.
We now have the Status Indicator for this. If there are instances in our existing components of the old style then lets file new issues for those as we see them. Closing this issue for now.
Expected behavior
For error messages across the system component, the error icon used as background image needs a text equivalent ("Error: "). These are under input field and in the modal footer for example.
Actual behavior
There is no text equivalent
From RE NXT accessibility audit.