Alert Images Lack Alternate Text

[andrewnordlund]

For the alerts on https://wet-boew.github.io/wet-boew-styleguide/design/alerts-en.html each type: Success, Info, Alert, and Danger.

The type of alert is identified in 2 or 3 ways:

1. The shape of the icon
2. The colour of the icon and background of the text and left side of the <div>.
3. Optionally a <h#> heading

Since the heading is optional, then the only identifying features are an image and a colour. If the heading is missing, how is a blind user to know they're in an alert section, and what kind of section they're in?

In its current implementation, doesn't this fail F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information?

[ghost]

There already a discussion about this in the main repo.

wet-boew/wet-boew#8886

I am just a volunteer on this GitHub project.

[andrewnordlund]

No, the issue at wet-boew/wet-boew#8886 is not a duplicate of this issue.

That issue is about use of role="alert" in the alert.

This is about providing SR users with an equivalent of the visual cues you see on the screen. If you have a warning (https://wet-boew.github.io/wet-boew-styleguide/design/alerts-en.html#warning), sighted users can see the icon and perhaps the colour and know they're in a section giving a warning. A blind user won't get that information, unless it's part of the text.

Since the icon (warning, info, etc.) does convey information, then equivalent information needs to be given to screen reader users.