Designing Accessible Web Sites

Designing Accessible Web Sites • Rick Hill, Webmaster • College of Engineering

Presentation Goals • Define web accessibility • Why is it important? • Why should you do it? • Identify the issues involved • Explore design standards • Discuss methods to create and maintain accessible sites • Identify resources

Accessibility Defined • The qualities of a website that allow people to use it even when they are working under limiting conditions or constraints • Allows more people to use a site in more situations • Provides web content to people with disabilities • Allows web content to be presented using adaptive technology

Users Limitations • Functional Limitations • Visually Impaired (includes color blindness) • Hearing Impaired • Mobility Impaired • Cognitively Impaired • Situational Limitations • Device Limitations • Browser Limitations

Scope of Functional Disabilities • The American Foundation for the Blind claims 900,00 visually impaired US computer users • A Harris Poll, June 2000, showed that 43% of US adults with disabilities use the Internet • WHO reports 15% to 30% of the population have functional limitations that can affect their ability to use technology • According to a Georgia Institute of Technology survey, almost 10% of internet users reported having a disability

Scope of Functional Disabilities • A 1999 US Department of Commerce survey reported that in the US: • 7.3 million had vision problems • 6.9 million had hearing problems • 6.3 million had difficulty using their hands • 2.9 million had a learning disability • Statistics point to an increasing population of people with functional limitations as the population ages

Goals of Accessible Design • Make web-based information and services available to people with disabilities • Make web-based information and services available to the widest audience

How the Disabled Use the Web • Visually Impaired • Screen readers • Screen magnifiers • Text browser • Braille display • Hearing impaired • Braille display • Direct connection to hearing aid • Turn up the volume

How the Disabled Use the Web • Mobility impaired • Speech control • Keyboard guards and overlays • Slow keys and on-screen keyboards • Replacement mice and switches • Cognitive disabilities • Most neglected disability • Require clear and simple content • Alternate presentations of data

What is the problem? • Web sites use design techniques, scripts, images and graphics in ways that make the content inaccessible or difficult to use • Graphic content without text equivalent • Images, charts, Flash, PDF’s • Complex navigation • Video and audio clips without captions or transcripts • Require a mouse or specific browser • Not user-centric

The Solution: Standards • Define standards for web accessibility • Create tools that support the standard • Adaptive technologies are designed to interpret websites designed to the standards • Authoring tools are designed to integrate the standards into web designs • Validation tools are designed to help determine standards compliance • Author web sites and pages to comply with the standards

Pro and Con • Pro • Since pages are designed to standards, the author need not know which adaptive technology is being used by the client nor do they have to test pages using different adaptive tools • Con • The standards are not specific enough, so they are subject to interpretation • No tool can fully automatically test or create accessible web pages

The Standards • W3C’s Web Accessibility Initiative (WAI) • Published guidelines, implementation methods, and priority checkpoints under the Web Content Accessibility Guidelines (WCAG). • No force of law • US Rehabilitation Act Section 508 • Subpart B - Technical Standards § 1194.22 • Based on WCAG Priority A standards • Emphasizes end results and enforceability

Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues

Federal Legislation • Americans with Disabilities Act, Title II • Communications must be as effective for those with disabilities as for those without • Rehabilitation Act, Section 504 • Establishes requirement to make programs, services and activities accessible • Rehabilitation Act, Section 508 • Provides standards to use in evaluating the accessibility of web pages and other electronic communication

Federal Impact • After June 25, 2001, technology must meet 508 standards. • Enforcement covers all Federal agencies • Applies to web pages as they are updated or added • Applies to Assistive Technology Act funding • 1998 act provides funding to states for maintaining technology-related assistance programs for the disabled • California is a recipient

California State Impact • State agencies adopt accessibility standards • California State Webmasters Style Guide • California Department of Education • Both 508 and W3C used • BUT: Government Code Section 11135.d(2) "... state governmental entities ... using electronic or information technology, either indirectly or through the use of state funds by other entities, shall comply with the accessibility requirements of Section 508 of the Rehabilitation Act of 1973..."

Impact on California Public Colleges and Universities • California Community College system ruled that 508 applies system wide • California State University System initially ruled that 508 does not apply • In December 2004, CSU Executive Order 926 states - "Section 11135 of the California Government Code was amended ... to clarify that Section 508 of the 1973 Rehabilitation Act applies to the CSU. "

And what about UC? • No system wide policy or standard • Campuses have standards or statements: • UC Berkeley - Resources, no policy or standard • UC Davis - Pending policy, 508, resources • UC Irvine - Resources, no policy or standard • UC Merced - Statement, no resources, no policy • UC San Diego - Resources,no specific policy • UC San Francisco - Guidelines, W3C, resources • UC Santa Cruz - Pending policy, 508, resources • UCLA - No policy, W3C, resources

Better Web Design • Refocus on purpose of your web site • Design to current web standards • Reevaluate site and page navigation • Provides additional redundancy • Improved page load speeds • New skills • Potentially easier to maintain

Funding Issues • The costs to respond to an ADA challenge • Other accommodation • Redesign to meet a deadline • External review • Section 508 has implications for research • Grant funding • Web requirements

How Do I Do It? • Pick a standard(s) • 508 • W3C • Author sites/pages that are compliant with standards • Check sites/pages for compliance to the standard • Maintain compliant sites/pages

It’s an Art! • There are no tools available that will automatically create an accessible site/page • There are no tools available that will automatically determine if a site/page is compliant with any standard • You will need to supplement any tool with your understanding and interpretation of the standards

Use Valid (X)HTML and CSS • Accessible design is based on valid HTML • Use current HTML standards in design • HTML 4.01 or XHTML1.0 • Use CSS in lieu of deprecated font/layout tags • Specify the DOCTYPE • Validate the HTML • Validate the CSS <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Using 508 Standards

Section 508 Standards (a) • (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

Section 508 Standards (a) • Image types • Image • Image links • Decorative and spacer (no information) • Building Accessible Websites by Joe Clark addresses many other types of images types <img src="logo.gif" width="10" height= "10" alt="Company Logo" longdesc="logoinfo.html"> <a href="default.html"><img src="test.gif" width="10" height="10" alt="Company Logo></a> <img src="spacer.gif" width="1" height="1" alt="">

Section 508 Standards (a) • The content of "alt" attribute is a matter of style and judgment • "alt" text should be kept short - less than 1024 characters • Use "longdesc" link to provide a larger amount of information • Validation tools will check to see if "alt" attribute exist but cannot interpret their content

Section 508 Standards (b) • (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

Section 508 Standards (b) • At a minimum, you should provide a transcript of all audio content • Provide synchronized audio transcription with multimedia presentations (captions) • If possible, include video descriptions • MAGpie, the Media Access Generator • Many methods discussed on the WebAIM site

Section 508 Standards (c) • (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

Section 508 Standards (c) • Do not rely solely on the color of an element on your page to convey meaning • "Items in red are required" is bad • "* Items marked with an asterisk are required" is better • Foreground (text) and background colors must provide sufficient contrast to allow users with different type of color blindness or those using a monochrome screen to view information

Section 508 Standards (c) The Good The Bad

Section 508 Standards (c) The Ugly

Section 508 Standards (d) • (d) Documents shall be organized so they are readable without requiring an associated style sheet.

Section 508 Standards (d) • Make sure that if you use styles (CSS) that pages are usable if the stylesheets are disabled • Organize pages in a consistent, logical manner • Don’t substitute styles for the structural elements of HTML like headings, paragraphs, and lists • Testing pages with styles turned off • Example: Pure CSS

Section 508 Standards (e) • (e) Redundant text links shall be provided for each active region of a server-side image map.

Section 508 Standards (e) • In general: Don't use server-side image maps • There is no way to make server-side image maps directly accessible • Redundant text links are required • Use client-side maps (next section) which are accessible rather than server-side maps

Section 508 Standards (f) • (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

Section 508 Standards (f) • Each <AREA> in the image map is assigned an "alt" attribute • An example with complex shapes <img src="usamap.gif" width="436" height="220" border="0" align='center' usemap="#big_usa_map" alt="Click on your state to find out what is happening in your area."> <MAP NAME="big_usa_map"> <AREA SHAPE=POLY COORDS="5,11,32,15,41,41,40,76,67,75,124,75,124,50,109,52,104,38, 90,6,48,8,13,0,6,0,8,9,8,10,10,11,10,11" HREF="/usa/pacwest/default.asp" ALT="Pacific Northwest: AK, WA, ID, OR"> <AREA SHAPE=POLY COORDS="93,7,172,8,172,31,171,46,174,83,184,84,186,91,187,105,186, 117,147,116,140,118,105,117,105,75,125,78,123,50,111,51,104,37,91,7,95,7,104,8,104,8" HREF="/usa/rockymtn/default.asp" ALT="Rocky Mountain Region: CO, UT, WY, MT"> ... </MAP>

Section 508 Standards (g) • (g) Row and column headers shall be identified for data tables.

Section 508 Standards (g) • Cells should be labeled appropriately • If they contain pure data use <TD> • If they contain column or row header titles use <TH> • <TH> cells make the header stand out and they can be identified by assistive technology • Format <TH> cells with styles • Use the <CAPTION> tag and "summary" attribute to further enhance table accessibility

Section 508 Standards (g) <TABLE border="1" cellpadding="0" summary="Today’s lunch menu showing salad, entree and dessert."> <CAPTION>Today's Lunch</CAPTION> <TR> <TH>Salad</TH> <TD>Caesar </TD> </TR> <TR> <TH>Entree</TH> <TD>Chicken Divan</TD> </TR> <TR> <TH>Dessert</TH> <TD>Chocolate Mousse</TD> </TR> </TABLE>

Section 508 Standards (h) • (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

Section 508 Standards (h) • Data cells (<TD>) must be associated with appropriate column and row headers cells (<TH>) to give them meaning • Methods • scope attribute • id and headers attributes • axis attribute

Designing Accessible Web Sites