search

wet-boew / wet-boew-styleguide

A style guide for the Web Experience Toolkit.
http://wet-boew.github.io/wet-boew-styleguide/index-en.html
35 stars 32 forks source link

Alert Images Lack Alternate Text #403

Open andrewnordlund opened 2 years ago

andrewnordlund commented 2 years ago

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 commented 2 years ago

There already a discussion about this in the main repo.

https://github.com/wet-boew/wet-boew/issues/8886

I am just a volunteer on this GitHub project.
andrewnordlund commented 10 months ago

No, the issue at https://github.com/wet-boew/wet-boew/issues/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.