Message state (info/warning/etc) is expressed in a css class and background, not in aria a11y property

Description

The CSS background image conveys information and is missing text alternative for assistive technology users.

RECOMMENDATION:
RULE:
The alternative text for informative or actionable CSS images MUST be available as programmatically-discernible text in the HTML content.

HOW TO FIX:
Fix this issue by using ONE of the following techniques:

1. Use an aria-label or aria-labelledby attribute to provide alternative text.

<a href="http://www.facebook.com/dequesystems" class="fb" aria-label="Deque's Facebook page"></a>
<span class="fbicon" role="img" aria-label="Facebook"></span>

2. Use CSS clipped text to provide screen reader accessible (non-visible) alternative text.

<a href="https://www.facebook.com/dequesystems" class="fb">
<span class="sr-text">Deque's Facebook page</span>
</a>

.sr-text {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%) ;
clip-path: inset(50%);
padding: 0;
border: 0;
height: 1px;
width: 1px;
white-space: nowrap;
overflow: hidden;
}

REFERENCE:
Deque University: https://dequeuniversity.com/class/images2/alt-text/background
W3C-WAI tutorial: https://www.w3.org/WAI/tutorials/images/

BACKGROUND:
People who are blind cannot see images on a page. In order to give people who cannot see an image access to the information conveyed by the image, it must have a text alternative. The text alternative must describe the information or function represented by the image. Screen readers can then use the alternative text to convey that information to the screen reader user.

It is not possible to provide alternative text by adding an alt attribute directly to CSS background images. Images that convey content should not generally be placed in CSS. However, if it is necessary to do so, you can add alternative text to informative and actionable CSS images using other methods.

Environment

None

QA Kickoff Check-In

Usage described in documentation
Demonstration of all states
Interactive state (screen readers)
Visual regression tests
Unit tests
Navigation (only keyboard / only mouse)
Component render legibly

QA Demo Check-Out

P2 plugin
Browsers (Edge/IE11/Firefox/Chrome/Safari)
Resizing
Zoom in/out
Navigation (Keyboard/Mouse)
Focus
Element status (At Rest/Pressed/Selected/Read Only/Disabled)
Cursors
Tooltips
Audio

Activity

Show:
Maciej Szpyra
September 24, 2020, 9:49 AM

It turns out it’s not obvious how to fix that problem and if it is problem at all. We can proceed after feedback from our a11y consultants.

Assignee

Maciej Szpyra

Reporter

Maxim Leizerovich

Labels

None

Changelog entry text

None

Needs Doc

None

Story Points

1

Components

Sprint

None

Affects versions

Priority

Major
Configure