Description

Here are some examples of CSS background and inline CSS Content images. I've added an aria-label for alternate text and role="img" . At the bottom of the page there is a results table with testing on assitive technology for reverse video modes, and screen readers.

Findings

• VoiceOver and NVDA are well supported across browsers.
• JAWS was fine in Chrome. In IE and FF, it was OK on DIV, but role="img" and aria-label on span doesn't read in IE and FF
• Reverse video OK on Mac, iOS, and ZoomText on Windows
• Removing CSS by any means predictably removes images
• Windows High Contrast omits background images but is OK with inline CSS.
• Predictably the aria-label on the div overrides the text in the div. (example 4)
• Surprisingly, placing a role="img" on the div causes the text in the div not to read in JAWS and NVDA in FF and and doesn't work read text in JAWS 16 with IE11. (example 5)
• not having img role allows the text in div to read in screen reader (Example 6)

Example 1 css background in a div

Example 2: css background in a span

Example 3 - CSS content

This is a sentence and there should be a CSS image now...

and this is the sentence after it.

Example 4

Note: colour contrast is off on this. It is a test for screen readers.

Example 5

Note: colour contrast is off on this.

Example 6

Note: colour contrast is off on this.

Code Used

Example 1

HTML

<div class="bg-1" role="img" aria-label="my favorite kitten blah blah" tabindex="-1">

CSS

.bg-1 {background-image:url(images/doubletrouble.jpg);
background-size: 80px 60px;
background-repeat: no-repeat;}

Example 2

HTML

<span style="display:block; width:60px; height:80px" class="bg-1" role="img" aria-label="my favorite kitten nah nah" tabindex="-1"></span>

CSS

same as above

Example 3

HTML

<p>This is a sentence and there should be a CSS image now...<span class="myid" role="img" aria-label="W3C logo"> </span>and this is the sentence after it.</p>

CSS

.myid:before
{
content:url('http://www.w3.org/2008/site/images/logo-w3c-screen-lg');

Example 4

<div class="bg-1" role="img" aria-label="my favorite kitten blah blah" tabindex="-1">
This is the text inside the DIV that has the aria label</div>

CSS

same as example #1, 2 above

Example 5

<div class="bg-1" role="img" tabindex="-1">
This is the text inside the DIV no aria label aria label</div>

Example 5

<div class="bg-1" tabindex="-1">
This is the text inside the DIV no role of image and not aria label</div>

Accessibility Support technology used

• Table cells with a ** and red background = fail
• Table cells with a * and yellow background = discuss whether OK or bad

	1 css background in a div	2: css background in a Span	3: CSS inline content
Windows High Contrast	*BG image not visible	*BG image not visible	image visible
ZoomText 10.1 Reverse video	*BG image visible	*BG image visible	image visible
Stylish FF plugin turn off CSS	*BG image not visible	*BG image not visible	**image not visible
MacBook Accessibility Reverse video	BG image visible	BG image visible	image visible
iPhone Accessibility Reverse video	BG image visible	BG image visible	image visible
IE11/JAWS16	**No image or aria-label announcement	**No image or aria-label announcement	**No image or aria-label announcement
CHROME41/JAWS16	Announces image, aria-label reads	**No image or aria-label announcement	Announces image, aria-label reads
FF36/JAWS16	Announces image, aria-label reads	**No image or aria-label announcement	Announces image, aria-label reads
IE11/NVDA2015.1	Announces image, aria-label reads	Announces image, aria-label reads	Announces image, aria-label reads
CHROME41/NVDA2015.1	Announces image, aria-label reads	Announces image, aria-label reads	Announces image, aria-label reads
FF36/NVDA2015.1	Announces image, aria-label reads	Announces image, aria-label reads	Announces image, aria-label reads
VoiceOver in Safari	Announces image, aria-label reads, (announce image is "crisp, well lit, no faces")	Announces image, aria-label reads, (announce image is "crisp, well lit, no faces")	Announces image, aria-label reads, (announce image is "crisp, well lit, no faces")
VoiceOver in Chrome	Announces image, aria-label reads, (announce image is "crisp, well lit, no faces")	Announces image, aria-label reads, (announce image is "crisp, well lit, no faces")	Announces image, aria-label reads, (announce image is "crisp, well lit, no faces")
VoiceOver on iPhone	Announces image, aria-label reads	Announces image, aria-label reads	Announces image, aria-label reads

 

Note example 4, 5, 6 were just tested with screen readers.

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.