Images Best Practice

Basic Images

Last Updated: 12/15/2011

Images, such as a photograph, drawing, diagram, etc., are used to provide visual flair or to convey important information.

Challenges disabled users face with images are:

Missing text descriptions for blind users
Difficult to see due to bad color contrast

Example

Download

New Window

Bullet

Spacer

Snowman

Piggy Bank

Pie Chart depicting Access Keys usage

I use access keys...
Response	% of Respondents
Whenever they're available	22%
Often	13%
Sometimes	24%
Seldom	20%
Never	16%
No Response	5%

Build It
Basic Test
Advanced Test

Alternative text is provided for all images

Regardless of whether an image is decorative or informational it must have an alt attribute:

default.htm (excerpt)

<!—Decorative Images -->
<img alt="" src="img/bullet.gif" />
<img alt="" src="img/spacer.gif" />

<!—Informational Images -->
<li>
    <a href="#" title="Link 1 New Item">Link 1</a> 
    <img alt="New Item" src="img/new.gif" />
</li>
<li>
    <a href="#" title="Link 3 Updated Item">Link 3</a> 
    <img alt="Updated Item" src="img/update.gif" />
</li>
…
<img alt="Pie Chart depicting Access Keys usage" src="img/chart.png" />

Complex images have a detailed description

Complex images (e.g., pie chart, screenshot, etc.) must have a description with them so that a blind user understands what's being shown. In our example, data associated with a pie chart is shown/hidden using the 'View Details' button:

default.htm (excerpt)

<div id="pieChartImage">
<h3>Pie Chart</h3>
<p><img alt="Pie Chart depicting Access Keys usage" src="img/chart.png" /></p>
<p class="center">
<button id="pieChartBtn" title="View Details for Access Keys Pie Chart">View Details</button>
</p>
<table class="hide" id="pieChartTable" summary="Access Keys Usage Survey Response">
    <caption>I use access keys...</caption>
    <thead>
         <tr>
            <th scope="col">Response</th>
            <th scope="col">% of Respondents</th>
        </tr>
    </thead>
    <tbody>
	<tr><td>Whenever they're available</td><td>22%</td></tr>
	<tr><td>Often</td><td>13%</td></tr>
	<tr><td>Sometimes</td><td>24%</td></tr>
	<tr><td>Seldom</td><td>20%</td></tr>
	<tr><td>Never</td><td>16%</td></tr>
	<tr><td>No Response</td><td>5%</td></tr>
    </tbody>
</table>
</div><-- end #pieChartImage -->

images.js (excerpt)

/* Capture Button Title Attribute */
    var arr = [];
    $("button").each(function (i) {
        arr[i] = $(this).attr("title");
    });

    /**************************************/
    /*   PIE CHART TOGGLE       */
    /**************************************/
    $("#pieChartBtn").click(function () {
        $("#pieChartBtn").text() == "Hide Details" ? hidePie() : showPie();
    });

    /* Hide Function */
    var hidePie = function () {
        $("#pieChartBtn").text("View Details");
        $("#pieChartBtn").attr("title", arr[0]);
        $("#pieChartTable").removeAttr("tabindex");
        $("#pieChartTable").hide();
    }

    /* Show Function */
    var showPie = function () {
        /* Swap Out Title text */
        var titleText = $("#pieChartBtn").attr("title").replace("View", "Hide"); ;
        $("#pieChartBtn").text("Hide Details");
        $("#pieChartBtn").attr("title", titleText);
        $("#pieChartTable").attr("tabindex", "0");
        $("#pieChartTable").show();
        $("#pieChartTable").focus();
    }

Ensure high color contrast is used for any imaged text
For imaged text ensure that the text color contrasts well from any background color. A good rule of thumb is this:
- for a light background, use dark text
- for a dark background, use light text
The easiest way to check for high contrast is by using a Color Contrast tool. Here are two popular products on the web:
- Vischeck
- Contrast Analyser

SSA Accessibility Best Practices Library

Basic Images

Example

Download

New Window

Visual Inspection

JAWS

NO TEST METHOD...

MAGic

Basic Images

Example Download New Window

Example

Download

New Window