Section 508 for EERE Web Sites May 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 tag).

Complex Data Tables (h) Complex data tables use markup (headers/ids) to associate data cells and header cells –EERE Standards ExampleEERE Standards Example RedDot does not render headers/ids properly – so add a contact link –WebAim’s TutorialTutorial

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.Download Adobe Reader Communication Standards about PDFs.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. – Name: –Web Aim’s Form TutorialWeb 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)PPT 3.4 MB EERE alt text standards EERE QA checklist Section508.gov WebAim WebAim's 508 checklist (PDF 58 KB)PDF 58 KB Guidelines for Accessible and Usable Web Sites: Observing Users Who Work with Screen ReadersGuidelines for Accessible and Usable Web Sites: Observing Users Who Work with Screen Readers

Questions?