back to CanAdapt home

Test CSS Background images

Description

Here are some examples of CSS background and inline images, using aria-label and role="image"

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.

Code Used

Example 1

HTML

<div class="bg-1" role="image" 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="image" 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...<div class="myid" role="image" aria-label="W3C logo"> </div>and this is the sentence after it.</p>

CSS

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

Accessibility Support technology used

To be completed

Comments

From Jonathan Avila

I would agree.  So to be clear, we are talking about two issues that impact users with low vision.

1. Use of CSS background  images that convey meaning but have programmatic names via properties such as aria-label
2. Use of inline CSS images that convey meaning and have programmatic names via properties such as aria-label.

While these two issues may sounds the same – CSS images are supposed to be presentational and those background images are rightly removed in high contrast mode and when color are often turned off by the browser to improve reading contrast for users with low vision.  Inline images are considered non-presentational and thus are still displayed in these modes.

So, IMO the CSS background issue is a more egregious issue while the aria-label on inline images is lesser because at least the inline image is visually available.

Without any requirement for the user agent to display accessibility names for inline images it is problematic and raises accessibility support issues.

Use of presentation images with only programmatic indicators seems to meet like a failure – but WCAG doesn’t seem to address this under 1.1.1 or 1.3.1.  Seems like an oversight.  For example, WCAG WG thought wisely in SC 1.4.1 to require a visual indicator of color in addition to a programmatic one – but this didn’t carry over to CSS background images as 1.1.1 and 1.3.1 only require programmatic indicators and not visual.  I think the assumption is that everyone can interpret visual information or else they will be using assistive technology or a browser that has some accessibility feature that compensates.  While that is generally true – background images seem like a safe thing to remove as they are only for background purpose.  The problem is that people are using CSS background images to convey meaning because use of inline images have performance challenges.