Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

Test CSS Background images

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

This is the text inside the DIV no role of image and not aria label

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.






CONTACT US

For a quote or just to chat about your organization's needs


EMAIL

help -at- can-adapt.com
(replace -at- with you know what)

PHONE

613-806-9005

SOCIAL MEDIA