Embed Size (px)
Citation preview
An image is worth a thousand words, but...
@TouficSbeiti
285MVisually impaired
39MBlind
246MLow
vision
MISSING
Visually impaired
INCORRECT
POOR
ALT
Alternative text serves several functions
• Screen Readers
• Image file not loaded
• Image file disabled
• Search Engines
alt = Toufic Sbeiti
alt = Montreal Impact fan
alt = Mac user
alt = Laptop user
alt = Ottawa accessibility camp awesome t-shirt
alt = Halloween flower arrangement
alt = Toufic Sbeiti wearing his Ottawa accessibility camp awesome t-shirt and his Montreal Impact hat enjoying a delicious mango juice while working on his confoo presentation on his kitchen table decorated with a nice flower arrangement alt = NOTHING!
Informative Decorative Functional
Complex Groups of images
Images of text
Image maps
Informative Images
Informative
Informative
613-319-1852
613-319-0202
<p><img src=”1.png" alt=”Home phone number”>613-319-1852</p>
<p><img src=”2.png" alt=”Cell phone number”>613-319-0202</p>
1- Images used to label other information
Informative
<img src="dog.jpg" alt="Dog with a bell attached to its collar.">
2- Images used to supplement other information
Off-duty guide dogs often wear a bell. Its ring helps the blind owner keep track of the dog’s location
Informative
<img src="family.jpg" alt="We’re family-friendly.">
3- Images conveying an impression
Informative
<img src="family.jpg" alt=”Angry user.">
4- Images conveying an emotion
Decorative Images
InformativeDecorative
Informative 1- Image used as part of page design
Decorative
<img src="topinfo_bg.png" alt="">
<img src="topinfo_bg.png" role="presentation">
Informative 1- Image used as part of page design
Decorative
Informative2- Image used for ambience
(eye-candy)
Decorative
Don’t miss the impressive Tropical House – a huge greenhouse that displays examples of exotic plant-life from every tropical environment on the planet.
<img src="tree.gif" alt="">
Informative2- Image used for ambience
(eye-candy)
Decorative
Informative 3- Image with adjacent text alternative
Decorative
<p><img src=”1.png" alt=””>Cell phone: 613-319-1852</p>
<p><img src=”2.png" alt=””>Home phone: 613-319-0202</p>
Cell phone: 613-319-1852
Home phone: 613-319-0202
Functional Images
InformativeFunctional
Informative1- Image used alone as a linked logo
Functional
Informative2- Logo image within link text
Functional
Informative 3- image conveying information within link text
Functional
<a href=”step3.html” target=”_blank”>Step 3 Pay the Fees<img src=”newWindow.png" alt=”Open in a new window” /></a>
Informative4- Stand-alone icon image that has a
function
Functional
<img src=”printer.png" alt=”Print this page” />
Informative 5- Image used in a button
Functional
<button><img src=”magnifier.png" alt=”Search”/>
</button>
Images of text
Images of text
Images of text
1- Styled text with decorative effect
Images of text
1- Styled text with decorative effect
Images of text 2- Mathematical expressions
InformativeGroups of images
Group of images
InformativeGroups of images
InformativeGroups of images
<img src=”star-full.png" alt=”Rating of 3 of 5 stars” /><img src=”star-full.png" alt=”” /><img src=”star-full.png" alt=”” /><img src=”star-full.png" alt=”” /><img src=”star-full.png" alt=”” />
1- Multiple images conveying a single piece of information
InformativeGroups of images
2- A collection of images
InformativeGroups of images
2- A collection of images
Image maps
Image maps
Image maps
Image maps
<img alt="map of canada" src="canada-map.gif” usemap="#moc" />
<map id="moc" name="moc”>
<area alt="Quebec” coords="398,426,[...]368,418" href="Quebec.html” shape="POLY”>
<area alt="Ontario" coords="329,471,[...] 352,232,395" href="Ontario.html" shape="POLY”></map>
Image maps
Complex images
Image mapsComplex
Image mapsComplex
Image mapsComplex
1- A text link to the long description adjacent to the image
<p>
<img src="chart.png” alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3">
<br>
<a href="2014-first-qtr.html">Example.com Site visitors Jan to March 2014 text description of the bar chart</a>
</p>
Image mapsComplex
2- A text link to the long description adjacent to the image using figure
and figcaption
<figure role="group"> <img src="chart.png” alt="Bar chart showing monthly
and total visitors for the first quarter 2014 for sites 1 to 3">
<figcaption><a href="2014-first-qtr.html">Example.com Site visitors
Jan to March 2014 text description of the bar chart</a> </figcaption>
</figure>
Image mapsComplex
3- Describing the location of the long description in the alt attribute
<img src="chart.png” alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3. Described under the heading Site visitors full text.">
[…]
<h4>Site visitors full text</h4>
[…]
Image mapsComplex
4- Structurally associating the image and its adjacent long description
(HTML5)<figure role="group">
<img src="chart.png” alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3, described in detail below.">
<figcaption>
<h2>Overview</h2> <p>The chart shows the website hits for the first quarter of 2014 …</p><h2>Values</h2> <table> <tr>…</tr> </table> </figcaption>
</figure>
Image mapsComplex 5- Providing a link to the long
description via longdesc (new page)
<img src="chart.png"alt="Bar chart showing monthly and total
visitors for the first quarter 2014 for sites 1 to 3"longdesc="2014-first-qtr.html">
<a href="2014-first-qtr.html">Long Description</a>
Image mapsComplex 6- Providing a link to the long
description via longdesc (same page)
<img src="chart.png"alt="Bar chart showing monthly and total
visitors for the first quarter 2014 for sites 1 to 3"longdesc="#chart-longdesc">
[…]
<div id="chart-longdesc">[…]
</div>
Image mapsComplex Description containing textual
information
<img src="Toufic.jpg" alt="Toufic Sbeiti" aria-describedby="description">[…]<p id="description"> Toufic Sbeiti, a Montreal Impact fan, wearing the bleu Accessibility Ottawa Camp t-shirt while enjoying a glass of mango juice during the month of October and working late on his presentation for Accessibility Camp Toronto. </p>
Web Developer Toolbar
ANIMATION
Visually impaired
COLOR
TEXT
An alt Decision Tree
An alt Decision Tree
Does the image contain text?
Decorative Image
Use an empty alt attribute
… and the text in the image is also present as real text nearby.
… and the text is only shown for visual effects.
… and the text in the image is not present otherwise.
Image of text
Use the alt attribute to include the text of the image.
An alt Decision Tree
Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there?
Functional Images
Use the alt attribute to communicate the destination of the link or action taken.
An alt Decision Tree
Does the image contribute meaning to the current page or context?
Informative Images
Use a brief description of the image in a way that conveys that meaning in the alt attribute.
… and it’s a simple graphic or photograph.
… and it’s a graph or complex piece of information.
… and it shows content that is redundant to real text nearby.
Functional Images
Use an empty alt attribute.
Complex Images
Include the information contained in the image elsewhere on the page.
An alt Decision Tree
Is the image purely decorative or not intended for the user?
Decorative Image
Use an empty alt attribute
@TouficSbeiti
Thank You!
References• Web Accessibility Tutorials / Images Concepts
http://www.w3.org/WAI/tutorials/images/
• WebAim : Alternative Texthttp://webaim.org/techniques/alttext/
• WebAim: Accessible Imageshttp://www.w3.org/WAI/tutorials/images/complex/
• Visual impairment and blindnesshttp://www.who.int/mediacentre/factsheets/fs282/en/
