Section 508 for EERE Web SitesMay 10, 2007

Presenters:

Kevin Eber

Shauna Fjeld

Overview

• Why should we care about accessibility?• Screen reader demonstration• Section 508 Standards• Questions

Why Should I Make My Sites Accessible?

• Disabilities affect more people than you think.– In the U.S., one in five people has some kind of disability and

one in 10 has a severe disability. That's approximately 54 million Americans.

– In 2001, 7.7 million people in the U.S. were blind or visually impaired.

– The Web has significant benefits for people with disabilities.

Why Should I Make My Sites Accessible?

• For government Web sites in particular, it's the right thing to do.

• For government Web sites, it's the LAW.

Section 508

• In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities.

• Under Section 508, agencies must give disabled employees and members of the public access to information that is comparable to the access available to others.

Section 508 Guidelines

• 12 requirements• Requirements most likely to affect you

– Alternative text for graphics/multimedia

– Using color to convey content

– Tables of data

– Web content that requires plug-ins/applets

– Electronic forms

Alternative Text for Graphics

• (a) A text equivalent for graphics – Alt text is read by screen readers in place of images

• A screen reader is a software program that reads the contents of the screen aloud to a user.

Screen Reader Demonstration

Why Alt Text Is Cool

• Finally, a chance to be descriptive!• You can write a large block of alt text and your

Web page doesn’t get visibly longer – (alt text allows 1,024 characters -- roughly 200 words).

• It makes you think about your image choices

Captions and Alt Text

• Captions should complement the alt text, not duplicate it. A visitor using a screen reader will hear both.

• If the information about the image would benefit the sighted user as well, it should probably (but not always) be in a caption instead of in the alt text.

• Captions are not required but are very helpful to give your images context.

Simple Decorative Images

• For images that add no relevant content, use empty alt text, i.e. alt=“”

• For images that add only minimal content, a brief description is all that is necessary.– Example: A simple drawing of a house:

• alt="Illustration of a house."

Linked Images

• If the image is linked, describe the destination of the link — not the image.– Example: If the DOE seal links to the DOE site, the code

should be: • alt="U.S. Department of Energy“

• Do not use “Link to” in alt text

Graphical Text

• If you use a graphic text, your alt text should contain all of the text in the graphic.– Example: If your graphic says "Wind Energy," your alt text should

also say "Wind Energy".

• For graphics with ampersands (e.g. "&") spell out "and" in the alt text, e.g. if the graphic says “Publications & Photos" the alt text should be “Publications and Photos".

Complex Photos and Illustrations

• The alt text should convey the same information the sighted user gets from the image.

• Imagine reading the document aloud over the telephone. What would you say upon encountering this image to make it comprehensible to the listener?

Examples

Special Cases

• Technical illustrations• Org charts and flow charts• Charts and Graphs• Complex maps (GIS) and other no win images

Technical Illustrations

• Don’t be afraid to use long descriptions for technical illustrations.– alt=“Illustration of the Czochrakski process for making

single-crystal silicon. Heater coils surround a cylindrical crucible that holds molten silicon. A wire holding a seed of single-crystal silicon is being pulled up, and below it a silicon ingot is forming from the molten silicon.”

Org Charts

• Org charts: Provide a text version.

Flow Charts

• Flow charts: either describe or provide a description in your text. – The next slide shows an example of a biomass flow chart

with alt text that directs readers to the text that follows the flow chart.

Charts and Graphs

• Provide a detailed text description• Supply the data in an HTML table• Describe the trend.

Complex Maps and GIS images

• Too hard to describe in alt text, so text at page bottom gives users a place to go for assistance.

Alt Text Style

• When you are constructing alt text, if it is a sentence, use sentence case. If it is a title, use title case.– Example: Photo of an alternatively fueled bus headed

toward a shelter at Zion National Park.

– Example: Wind Powering America

Use Descriptive Terms

• Photo of• Illustration of• Diagram of• Organizational chart of• Graph of • Chart of• Flow chart of

Don’t Use Non-Descriptive Terms

• Picture of• Drawing of• Image of• Graphic of

Questions?

Multimedia - Video and Flash

• (b) Accessible alternatives for multimedia– Video:

• first choice: synchronized captions

• second choice: text script

– Audio: text script or captions

Color

• (c) Color is not used solely to convey important information.

 Simple Data Tables• (g) Simple data tables have the column and row

headers appropriately identified (using the <th> tag).

 Complex Data Tables

• (h) Complex data tables use markup (headers/ids) to associate data cells and header cells– EERE Standards Example

• RedDot does not render headers/ids properly – so add a contact link

– WebAim’s Tutorial

Using Scripting to Display Content

• (l) Pages that use scripting languages to display content, or to create interface elements such as navigation must be accessible.– Javascript Pop up menus

– Mouseover navigation

• Must be an alternative to using a mouse.

Applets and Plug-ins

• (m) Web pages that require an applet or plug-in to see the content must include a link to download it.– PDFs

• Download Adobe Reader.

• Communication Standards about PDFs.

– Others: QuickTime, RealPlayer– Flash (not required because it is built-in)

Electronic Forms

• (n) Text labels are associated with form fields.– <label for=“name">Name:</label> <input type=“text" id="name">

– <label>Name: <input type=“text”></label>

– Web Aim’s Form Tutorial

Other 508 Standards

• (d) Web pages should be readable without an associated style sheet

• (e) Pages with server side image maps should include redundant text links

• (f) Client-side image maps should be used instead of server side image maps where possible

• (i) Frames must have a title attribute that describes the frame’s purpose or content

Other 508 Standards

• (j) Page elements do not flicker at a rate of 2 to 55 cycles per second• (k) A text only page can be used as an alternative when there is no

other way to make a page accessible• (o) An anchor link is provided to skip over repetitive navigation links• (p) If a Web page requires that a user finish a task in a certain

amount of time, they have the ability to request more time.

Resources:

• Today’s presentation (PPT 3.4 MB)• EERE alt text standards• EERE QA checklist• Section508.gov• WebAim • WebAim's 508 checklist (PDF 58 KB)• Guidelines for Accessible and Usable Web Sites: Observing Users Who

Work with Screen Readers

Questions?