search

blackbaud / skyux2

SKY UX 2 is the new version of Blackbaud’s user experience framework that implements Blackbaud design patterns. It extends the framework to abstract many complexities of modern web development and takes advantage of Angular 2 to increase the tooling, testing, and performance available.
https://developer.blackbaud.com/skyux
MIT License
32 stars 65 forks source link

Error icons need text equivalent (1.3.1) #2350

Closed Blackbaud-MattGregg closed 4 years ago

Blackbaud-MattGregg commented 5 years ago

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.

Blackbaud-SteveBrush commented 5 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?

Blackbaud-MattGregg commented 5 years ago

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-AlexKingman commented 5 years ago

@Blackbaud-MattGregg are you referring to an invalid form input? Or the error component? https://developer.blackbaud.com/skyux/components/error#demo

Blackbaud-MattGregg commented 5 years ago

Ah. Sorry. The invalid form input.

Blackbaud-AlexKingman commented 5 years ago

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?

Blackbaud-MattGregg commented 5 years ago

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.

Blackbaud-AlexKingman commented 5 years ago

Ok sounds good. Thanks for the feedback! Would the aria-invalid attribute satisfy this issue for the time being?

Blackbaud-MattGregg commented 5 years ago

Nope. It needs to have the "Error: " text added to icon representation in the front to indicate this is what the content is about.

Blackbaud-TrevorBurch commented 4 years ago

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.

Blackbaud-TrevorBurch commented 4 years ago

https://developer.blackbaud.com/skyux-indicators/docs/status-indicator