IT Accessibility Committee

Accessible Accessible Images and Images and

Visual ElementsVisual ElementsPrepared by The NYS Forum IT Accessibility CommitteePrepared by The NYS Forum IT Accessibility Committee

http://www.nysforum.org/accessibility/resources/curriculum/http://www.nysforum.org/accessibility/resources/curriculum/imagesimages

Presented by Michael B. ShortPresented by Michael B. Short

Accessible Images and Accessible Images and Visual ElementsVisual Elements

OBJECTIVE: OBJECTIVE: You will be able to list You will be able to list four techniques by which four techniques by which information conveyed visually will be information conveyed visually will be available to all visitors, and identify available to all visitors, and identify under which circumstances each is under which circumstances each is appropriate.appropriate.

Accessible Images and Accessible Images and Visual ElementsVisual Elements

Using plain-text pages leads to Using plain-text pages leads to unattractive and intimidating web sites unattractive and intimidating web sites – people like graphics!– people like graphics!

Using visual elements alone to convey Using visual elements alone to convey information risks excluding some of information risks excluding some of your visitorsyour visitors

Providing textual information only also Providing textual information only also excludes some visitorsexcludes some visitors

Providing information in alternative Providing information in alternative formats ensures all users can access at formats ensures all users can access at least one form of itleast one form of it

Using Colors to Convey Using Colors to Convey InformationInformation

If You Are Colorblind…If You Are Colorblind…

Can you tell for sure which items are red?

Using Colors to Convey Using Colors to Convey InformationInformation

Using Colors to Convey Using Colors to Convey InformationInformation

Using Colors to Convey Using Colors to Convey InformationInformation

A Better Way!A Better Way!

Why use images at all?Why use images at all?

Which version of the page makes a more effective sales pitch?

Images can serve as Images can serve as shorthandshorthand

Question marks Question marks can mean can mean “About” or “FAQ” “About” or “FAQ” (Frequently (Frequently Asked Questions)Asked Questions)

Magnifying glass Magnifying glass can mean can mean “Search”“Search”

What About the Images?What About the Images?

Photo of old person’s very wrinkled eyes

About Madame Sylvia’s

Find a Store

Ingredients

With the appropriate alt attribute, your images can convey meaningful information

What About the Images?What About the Images?

<img src=“oldeyes.jpg” alt=“Photo of an old person’s very wrinkled eyes”>

<img src=“question.jpg” alt=“Link: About Madame Sylvia’s”>

<img src=“magglass.jpg” alt=“Link: Find a Store”>

<img src=“bowl.jpg” alt=“Link to Ingredients”>

Here’s the HTML code for these images, with a descriptive alt attribute added to each img

element

For More Complex For More Complex Images …Images …

LIKE:

ArtworkPie ChartsMulti-Layered Bar ChartsLine ChartsMaps

NOTE: NOTE: Always Take Off Into the WindAlways Take Off Into the Wind was used was used with artist Noel Beebe’s kind permission.with artist Noel Beebe’s kind permission.

A Close-Up ViewA Close-Up ViewImage Code:

<img src="ialways.jpg" alt="Always Take Off Into the Wind by Noel Beebe"

longdesc="alwaystakeoffintothewind.txt" >

Link Code:

<p><a href="alwaystakeoffintothewind.txt">Link

to Text Description</a></p>

longdesc attribute’s value is link to text file’s path

Anchor links to the text file

The Text FileThe Text File

“Always Take Off Into the Wind by Noel Beebe

“Our cover piece for the Spring 2004 issue of flashquake features a creature that is half-human, half-insect, in a fantasy landscape. The skull of the creature has ridges of bone that form a triangular pattern on the forehead. The same bony ridges encircle the eyes like a pair of aviator goggles. The creature seems to be wearing a jumper of the type worn by infants.

The creature’s transparent wings seem too delicate to lift the weight of the body. The creature takes the foreground with bright colors compared to the mysterious dark tangle of tree trunks that form the background.”

The longdesc AttributeThe longdesc Attribute

Used with the Used with the imgimg element element

Can link to a text or HTML file Can link to a text or HTML file containing a description of the containing a description of the image image

Value is the path/filename of the Value is the path/filename of the descriptiondescription

When Less Is MoreWhen Less Is More

This is Item 1.

This is Item 2.

This is Item 3.

We wanted something a little jazzier than the standard round bullet, so we used an image of an attractive fleur-de-lis. But does this image add any information to this bulleted list (beyond proof of our obviously well-developed aesthetic sense)?

When Less Is More: When Less Is More: What NOT To DescribeWhat NOT To Describe

<img src=“rrsbullet.gif” alt=“ “>

Graphical bullets or images that do not impart

information

Images used as separators (e.g., graphic lines)

“Spacer” images Can use space between or just beginning and ending quotation marks for “empty alt”

Linking an Image to Linking an Image to Description Within PageDescription Within Page

We used a picture of our favorite bird, the Indigo Bunting, to illustratean article on occasionalvisitors to bird feeders in our area. The image hasan alt attribute, but alsohas a description of the bird further down on the page.

Linking an Image to Linking an Image to Description Within PageDescription Within Page

<a name=“bunting”>

<a href=“#bunting” name="Link to information about Indigo Buntings">

<img src="bunting.jpg" alt="Photo of a male Indigo Bunting">

</a>

Method 1 – Using the Image as a Link

Linking an Image to Linking an Image to Description Within PageDescription Within Page

<a name=“bunting”>

<img src="bunting.jpg" alt="Photo of a male Indigo Bunting" longdesc=“#bunting”>

Method 2 – Using the longdesc attribute of the img element

Using Images for Using Images for NavigationNavigation

You sometimes see images used as web site navigation, such as in the example on the left.

Using Images for Using Images for NavigationNavigation

Here the images you saw earlier are used as navigational buttons for the Berry, Berry, Goode law firm’s web site.

Each button is a link to a section of the site, and the links are duplicated in plain text at the bottom of the section.

Using Images for Using Images for NavigationNavigation

<a href="vision.html" name="vision">

<img src="visionbutton.gif" alt="Link to a Glimpse of Our Vision">

</a>

<a href="mission.html">Mission</a>

Two different ways of getting to the same place!

The Problems With The Problems With ImagesImages

Images add to overall page Images add to overall page download/size.download/size.

What if visitor has turned off images What if visitor has turned off images (as some do who use dial-up (as some do who use dial-up connections)?connections)?

Can’t set relative to page sizeCan’t set relative to page size

Better Option for Better Option for Navigational ButtonsNavigational Buttons

The navigational buttons illustrated above were The navigational buttons illustrated above were created using plain text, styled using CSS.created using plain text, styled using CSS.

Other Variations on CSS Other Variations on CSS ThemeTheme

Modify button borders to emulate Modify button borders to emulate raised buttonraised button

Change styling for button links (e. Change styling for button links (e. g., remove underlining)g., remove underlining)

Add spacing between buttonsAdd spacing between buttons Use the “:hover” event to change Use the “:hover” event to change

background / foreground colorsbackground / foreground colors

Same CSS file, 6 lines Same CSS file, 6 lines changedchanged