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

` 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 Presentation Goals

` 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 Accessibility Defined

` 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

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

` 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 How the Disabled Use the Web

` 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 What is the problem?

` 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 The Solution: Standards

` 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 Pro and Con

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

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

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

` 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 Legislation

` 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 Federal Impact

` State agencies adopt accessibility standards California State Webmasters Style Guide California Department of Education Both 508 and W3C used BUT: Government Code Section 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 " California State Impact

` 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 of the California Government Code was amended... to clarify that Section 508 of the 1973 Rehabilitation Act applies to the CSU. " Impact on California Public Colleges and Universities

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

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

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

` 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 Better Web Design

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

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

` 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 Funding Issues

` 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 How Do I Do It?

` 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 It’s an Art!

` 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 DOCTYPEDOCTYPE Validate the HTML Validate the CSS <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

` Using 508 Standards

` (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 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 (a)

` (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 MAGpie Many methods discussed on the WebAIM site Many methods Section 508 Standards (b)

` (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 Bad The Good

` Section 508 Standards (c) The Ugly

` (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 Example Section 508 Standards (d)

` (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 (e)

` (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 in the image map is assigned an "alt" attribute An example with complex shapes An example Section 508 Standards (f) <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">... <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">...

` (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 If they contain column or row header titles use cells make the header stand out and they can be identified by assistive technology Format cells with styles Use the 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."> Today's Lunch Salad Caesar Entree Chicken Divan Dessert Chocolate Mousse <TABLE border="1" cellpadding="0" summary="Today’s lunch menu showing salad, entree and dessert."> Today's Lunch Salad Caesar Entree Chicken Divan Dessert Chocolate Mousse Section 508 Standards (g)

` (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 ( ) must be associated with appropriate column and row headers cells ( ) to give them meaning Methods scope attribute id and headers attributes axis attribute Section 508 Standards (h)

` Spring Summer Autumn Winter Betty Spring Summer Autumn Winter Betty Wilma Wilma scope method (simple table)

` (i) Frames shall be titled with text that facilitates frame identification and navigation. Section 508 Standards (i)

` In general: Don’t use frames Frame elements need to be labeled to identify the different frames in a FRAMESET to assistive browsers While not yet widely supported, use the "title" attribute to label elements All pages referenced in a FRAMESET should have a meaningful in their Include a element inside FRAMESETs to provide content to browsers that do not support frames Section 508 Standards (i)

` (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. Section 508 Standards (j)

` (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. Section 508 Standards (k)

` Providing a text only version of your pages is not a solution to making your site accessible It is to be used only if you cannot provide accessibility in other ways Providing a text-only alternative requires the maintenance of two sets of content Section 508 Standards (k)

` (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. Section 508 Standards (l)

` Make sure no information is lost if scripting is disabled Different screen readers provide different degrees of support for different handlers Test using keyboard rather than the mouse Make all scripts directly accessible to assistive technologies or use an alternate method of providing equivalent functionality (HTML link) Section 508 Standards (l)

` Use "alt" attribute to identify that clicking on an image will run a JavaScript: Section 508 Standards (l)

` (m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with § (a) through (l). Section 508 Standards (m)

` Web pages that provide content such as Real Audio or PDF files must provide a link to a plug-in that allows the content to be viewed Content presented via the plug-in must meet other accessibility requirements of 508 Example Section 508 Standards (m)

` (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. Section 508 Standards (n)

` Forms pose accessibility issues when a form element is separated from its associated label The visual proximity of a form element and its label doesn’t mean that a screen reader or an assistive technology user will associate the two Section 508 Standards (n)

` Use the tag and associated "for" attribute to tag labels Identify the exact words to use as the label for the form element and enclose those words in a tag Use the "for" attribute to uniquely identify the form element associated with the label Use the "id" attribute in the associated form element to associate it with the label Section 508 Standards (n)

` FIRST NAME: LAST NAME: FIRST NAME: LAST NAME:

` (o) A method shall be provided that permits users to skip repetitive navigation links. Section 508 Standards (o)

` It can be a tedious and time-consuming to wait for assistive technology to announce each of the standard navigational links To alleviate this problem there must be a mechanism for users to skip repetitive navigational links A skip navigational link can be visible or invisible Example Section 508 Standards (o)

` (p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. Section 508 Standards (p)

` Someone's disability can limit the speed with which they can read, move around, or fill in a web form A page may time out before they are able to finish reading it Many forms, when they time out also delete whatever data has been entered Notify the user if a page is about to time-out Provide a prompt asking whether additional time is needed Section 508 Standards (p)

` Meeting the "letter of the law" is not enough Understanding the reason behind the standards is important in applying them appropriately "alt" attribute content for example Label a logo or use an empty "alt" attribute? Clarity of wording? The Standard Versus The Intent

` Basic tests Use a text only browser (lynx) Disable styles and JavaScript (web designer tool)web designer tool Use a monochrome monitor Free online tools WebXACT (formerly Bobby) WebXACT WAVE LIFT - free report LIFT Checking For Compliance

` WebAIM List and Review of Free Tools WebAIM List and Review Commercial Tools LIFT WebXM Ask Alice Extensions to Dreamweaver and GoLive Checking For Compliance

` Be as accessible as possible: the standards will change Additional refinements in Federal standards will happen WCAG 2.0 in draft Stay abreast of UC, State and Federal policies that may apply to you Final Thoughts

` If you can't convert completely, make a plan Analyze the requirements and create a standards statement for your organization Constructing Accessible Web Sites by Jim Thatcher, et al., discusses how to implement accessibility in the enterprise Make the easiest changes immediately Outline how and when you will address other needs Document progress toward the plan Final Thoughts

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