Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
` Designing Accessible Web Sites Rick Hill, Webmaster College of Engineering ` Why are you here? • Converting an existing site? • Creating a new site? • Create accessible web standards? • Required knowledge for a project? • Just curious? • Other needs? ` Who are you? • Webmaster? • Web designer? • Web database programmer? • Administrator? • Researcher? ` Who are you? • How many sites do you work with? • Use a GUI authoring tool or hand code? • Use cascading style sheets (CSS)? • Use validation tools? • Accessibility experience? ` Class 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 • • Device Limitations Browser Limitations • Situational Limitations ` Scope of Functional Disabilities • The American Foundation for the Blind claims • • • 10 million visually impaired in the US and over 900,00 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 • 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 • ~12% of the US have some type of work disability • Statistics point to an increasing number 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 • • • Braille display Direct connection to hearing aid Captioned audio and multimedia • Hearing impaired ` How the Disabled Use the Web • Mobility impaired • • • • Speech control Keyboard guards and overlays Slow keys and on-screen keyboards Replacement mice and switches • • • Most neglected disability Require clear and simple content Alternate presentations of data • Cognitive disabilities ` 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 specific browser or mouse Not user-centric ` The Solution: Standards • Define standards for web accessibility • Create tools that support the standard • • • Adaptive technologies that interpret websites designed to the standards Authoring tools that integrate the standards into web designs Validation tools that help determine standards compliance • Author web sites and pages to comply with the standards ` Pro and Con • Pro • Since pages are designed to standards, authors 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 • • • Subpart B - Technical Standards § 1194.22 Based on WCAG Priority A standards Emphasizes end results and enforceability • US Rehabilitation Act Section 508 ` Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Social maturity ` Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Social maturity ` 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 • UC Federally funded sites may need to comply ` California State Impact • State agencies adopt accessibility standards: • • • • California State Webmasters Site Compliance with Government Code Section 11135.d(2) which references Federal Rehabilitation Act Section 508 Priority 1 and 2 level checkpoints of the Web Content Accessibility Guidelines 1.0 (WCAG 1.0 “AA” Conformance Level) Recommended best practices from the California Department of Rehabilitation ` Impact on California Public Colleges and Universities • California Community College system ruled that 508 applies system wide • California State University System required by legislation to comply with 508 • • • 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. " California State University's Accessible Technology Initiative All CSU sites Section 508 compliant by 2012 ` And what about UC? • No legislative requirement • No system-wide accessibility policy - yet! • Former UC President Atkinson 2001 letter to UC chancellors pledged to: • " ...ensure that the digital technologies we use for academic and administrative purposes are accessible to all of our students, faculty, and staff " ` And what about UC? • Electronic Accessibility at the University of California • System-wide groups discussing issues • Draft policy • Exploring acquisition of testing/validation tools ` And UC Davis? • ADA challenge - UC Davis and UC Berkeley • Expanded to include web accessibility issues • • • Adopted August 2006 Applies to official and department sites sites Added accessibility requirements • UC Davis web policy PPM 310-70 • • Minimum standard is 508 Implementation in process ` And UC Davis? • Support resources available or planned • • • • • • Implementation plan being drafted Training, tools and web resources? Web templates Web developers forum Content Management System Video captioning services ` Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Social maturity ` Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Social maturity ` 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 • Better search rankings • More usable sites ` Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Social maturity ` Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Social maturity ` Funding Issues • The costs to respond to an ADA challenge • • • Other accommodation Redesign to meet a deadline External review • • Grant funding Web requirements • Section 508 has implications for research • Potentially lower web maintenance costs ` Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Ethics ` Reasons to Do It • Compliance with regulatory and legal requirements • Produces better web design and implementation • Funding issues • Ethics ` Ethics • UCD Principles of Community • It’s the right thing to do! ` Time for a Movie ` How Do I Do It? • Author sites/pages that are compliant to 508 standards • Check sites/pages for compliance to the standard • Maintain compliant sites/pages • Go beyond 508 standards when possible • • Worldwide Web Consortium (W3C) Web Accessibility Initiative (WAI) Web Accessibility Guidelines (WCAG) Use best practices ` 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 ` The Basic Design Process • Take a user-centric approach to design • You do not control the user experience, only content • Create a map of your site and check that it is logically arranged/linked • Make sure that page navigation is is consistent and clear • Create a site map page to assist navigation • Make sure that content is current and will be maintained ` Use Valid HTML or XHTML • Use current (X)HTML standards in design • • HTML 4.01, XHTML 1.0, XHTML 1.1 Use CSS in lieu of deprecated font/layout tags • Specify the DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • Markup and CSS won’t validate without it • Declare the natural language type <html lang="en"> ` Use Valid HTML or XHTML • Engineering: <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> • Use W3C web standards when possible • WaSP - Web Standards Project • Validate the HTML • Validate the CSS ` Other Good Practises • Use percentages and ems • Optimize page sizes and included image sizes to decrease page load speeds • Consider using a design tool that allows template driven design ` Section 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) • ALL images MUST have an "alt" attribute • The content of "alt" attribute is a matter of style and judgment • Do not label a link as "Link to" in the "alt" text • Validation tools will check to see if "alt" attribute exist but cannot interpret their content ` Section 508 Standards (a) • Blank "alt" attribute (alt="") can be used for appropriate images but ALL images need an "alt" attribute • • Appropriate for images that convey no information A blank alt attribute is alt="", that is quotequote not quote-space-quote • Background graphic and patterns do not require "alt" attribute (in fact they can’t take one) ` Section 508 Standards (a) • "alt" text should be kept short - less than 1024 • characters Use "longdesc" attribute to provide a link to a page with a larger amount of information "longdesc" pages should be simple, text only "longdesc" pages could provide a link back to an anchor on the calling page • • ` Section 508 Standards (a) • Image examples • Image <img src="logo.gif" width="10" height= "10" alt="Company Logo" longdesc="logoinfo.html"> • Image links <a href="index.html"><img src="logo.gif" width="10" height="10" alt="Homepage></a> • Image map hot spots <img src="banner.gif " width="500" alt="Navigation Banner" usemap="#banner"> <map name="banner"> <area href="home.html" alt="Homepage" shape="rect" coords="0,0,110,24"> <area href ="services.html" alt="Services" shape="rect" coords="111,0,215,24"> … ` Section 508 Standards (a) • Image types • • • Image Buttons <input type="image" src="logon.gif" alt="Logon" name="logon"> Decorative and spacer (no information) <img src="spacer.gif" width="1" height="1" alt=""> Information rich, like charts and graphs <img src="chart.gif" width="360" height="220" alt="Growth of visually impaired internet users" longdesc="chart.html"> • Building Accessible Websites by Joe Clark addresses providing text equivalents for many other types of images (hit counters, maps) ` 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 • MediaWorks provides captioning services • MAGpie, the Media Access Generator • Many methods discussed on the WebAIM site • Example ` Section 508 Standards (b) • Basic Process • Issues • • • Formats - one or many? Scripted vs unscripted source • • Timeliness Commencement Ceremony Podcasting • Text or PDF equivalent ` 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 style sheets are disabled • Organize pages in a consistent, logical manner • Don’t substitute styles for the structural • • elements of HTML like headings, paragraphs, and lists Example 1: Pure CSS Example 2: Transitional CSS ` Section 508 Standards (d) • Test pages with styles turned off • • • Use the web developer for Mozilla/Firefox Disable styles in Internet Explorer • • Web Accessibility Toolbar Internet Explorer Developer Toolbar Use a text-only browser like Lynx either on your own system or by using the campus computers • • Lynx for Windows Lynx for OS X ` 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) • Don't use server-side image maps • Use client-side maps (next section) instead • There is no way to make server-side image maps accessible • • • No local images to label with a text equivalent The "active regions" in the map only display a set of coordinates The server calculates the destination URL based on coordinates it is sent from a mouse click • Redundant text links are required ` 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 • Example: <img src="navbar.gif" usemap="#Navigation_Map" alt="Navigation Bar"><map name="Navigation_Map"> <area shape="rect" coords="157,14,239,31" href="http://site.org" alt="Home"> <area shape="rect" coords="245,14,325,31" href="http://site.org/news" alt="News"> <area shape="rect" coords="331,14,412,31" href="http://site.org/services" alt="Services"> <area shape="rect" coords="417,14,501,31" href="http://site.org/comments" alt="Comments"> <area shape="rect" coords="505,12,586,31" href="http://site.org/search" alt="Search"></map> ` Section 508 Standards (f) • Another example with complex shapes <img src="usamap.jpg" width="436" height="220" border="0" usemap="#usa_map" alt="Map of US districts"> <MAP NAME="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 (which we won’t address) ` Section 508 Standards (h) scope method (simple table) <table summary="Schedule”> <tr> <th> </th> <th scope="col" >Spring</th> <th scope="col" >Summer</th> <th scope="col" >Autumn</th> <th scope="col" >Winter</th> </tr> <tr> <th scope="row" >Betty</th> <td>9-5</td> <td>10-6</td> <td>8-4</td> <td>7-3</td> </tr> <tr> <th scope="row" >wilma</th> <td>10-6</td> <td>10-6</td> <td>9-5</td> <td>9-5</td> </tr> <tr> <th scope="row" >Fred</th> <td>10-6</td> <td>10-6</td> <td>10-6</td> <td>10-6</td> </tr> </table> ` Section 508 Standards (h) scope method (more complex) <table> <tr> <th> </th> <th colspan="2" scope="col">Winter</th> <th colspan="2" scope="col">Summer</th> </tr> <tr> <th > </ th > <th scope="col" >Morning</th> <th scope="col" >Afternoon</th> <th scope="col" >Morning</th> <th scope="col" >Afternoon</th> </tr> <tr> <th scope="row">Wilma</th> <td>9-11</td> <td>12-6</td> <td>7-11</td> <td>12-3</td> </tr> … </table> ` Section 508 Standards (h) id/header method (complex) ` Section 508 Standards (h) <table border="1"> <caption>Travel Expense Report</caption> <tr> <th></th> <th id="c2">Meals</th> <th id="c3">Hotels</th> <th id="c4">Transport</th> <td id="c5">subtotals</td> </tr> <tr> <th id="r2">San Jose</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td id="r3" >25-Aug-97</td> <td headers="c2 r2 r3">37.74</td> <td headers="c3 r2 r3">112.00</td> <td headers="c4 r2 r3">45.00</td> <td></td> </tr> ... <tr> <th id="r10">Totals</th> <td headers="c2 r10">196.27</td> <td headers="c3 r10">442.00</td> <td headers="c4 r10">162.00</td> <td headers="c5 r10">800.27</td> </tr> </table> ` Section 508 Standards (i) (i) Frames shall be titled with text that facilitates frame identification and navigation. ` Section 508 Standards (i) • 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 <frame> elements All pages referenced in a frameset should have a meaningful <title> in their <head> • Include a <noframes> element to provide content to browsers that do not support frames ` Section 508 Standards (i) <frameset rows="*,80" cols="*" framespacing="0" frameborder="yes" border="0" bordercolor="#000033"> <frameset cols="150,*" frameborder="NO" border="0" framespacing="0"> <frame src="navigation.html" name="navigationFrame" scrolling="no" noresize title="Navigation Frame"> <frame src="content.html" name="contentFrame" title="Content Frame"> </frameset> <frame src="banner.html" name="bottomFrame" frameborder="yes" scrolling="NO" noresize bordercolor="#0000EE" title="Banner Frame" > </frameset> <noframes> Your browser doesn't support frames. Please go <a href="frameless.html">here</a> for a frame free version of the page. </noframes> ` Section 508 Standards (i) ` Section 508 Standards (i) <head> ... <title>Navigation Frame</title>... </head> <body>... <head> ... <title>Main Content Frame</title> ... </head> <body>... <head> ... <title>Banner Frame</title> ... </head> <body>... ` Section 508 Standards (j) (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) • Flickering images or text can cause problems for people with photosensitive epilepsy • Example: CAUTION! Anyone sensitive? ` Section 508 Standards (k) (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 • CSS can be used to create a text-only version • Example - print style ` Section 508 Standards (l) (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 essential information is lost if scripting is disabled • Don't say "No Javascript, too bad" • Script-generated HTML follows the same accessibility rules as "static" HTML • Make all scripts directly accessible to assistive technologies or use an alternate method of providing equivalent functionality (HTML link) Keyboard accessibility is a good measure • ` Section 508 Standards (l) • Different screen readers provide different degrees of support for event handlers • • Use device-independent event handlers OR use more than one event handler • • • Use "ommousedown" with "onkeydown" Use "onmouseup" with "onkeyup" Use "onclick" with "onkeypress" • Avoid using scripting when HTML will do ` Section 508 Standards (l) • <noscript> is no longer preferred • Avoid pop-up and new windows if possible • • Form validation Provide a non-script alternative • Many sources for accessible Javascript techniques • Web Accessibility, Web Standards and Regulatory Compliance has a nice overview ` Section 508 Standards (m) (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 §1194.21(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 • PDF and QuickTime • How to include without repetition ` Section 508 Standards (n) (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 Organization of form elements can be enhanced by proper (X)HTML • • • label/for/id fieldset legend ` Section 508 Standards (n) • Use the <label> 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 <label> 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 • Use <fieldset> and <legend> to group input elements ` Section 508 Standards (n) Before: <form> <table> <tr> <td><em>FIRST NAME: </em></td> <td><input type="text" name="firstname"> </td> </tr> <tr> <td><em>LAST NAME: </em></td> <td><input type="text" name="lastname"> </td> </tr> </table> <p><input type="submit" value="submit"></p> </form> ` Section 508 Standards (n) After: <form> <fieldset> <legend>Customer:</legend> <p><label for="first"> First Name:</label> <input type="text" name="firstname" id="first"></p> <p><label for="last"> Last Name:</label> <input type="text" name="lastname" id="last"></p> </fieldset> <p><input type="submit" value="submit"></p> </form> ` Section 508 Standards (n) • Checkboxes: <fieldset> <legend>Select your pizza toppings:</legend> <input id="ham" type="checkbox" name="toppings" value="ham" /> <label for="ham">Ham</label><br /> <input id="pepperoni" type="checkbox" name="toppings" value="pepperoni" /> <label for="pepperoni">Pepperoni</label><br /> <input id="mushrooms" type="checkbox" name="toppings" value="mushrooms" /> <label for="mushrooms">Mushrooms</label><br /> <input id="olives" type="checkbox" name="toppings" value="olives" /> <label for="olives">Olives</label> </fieldset> ` Section 508 Standards (n) • Radio Buttons: <fieldset> <legend>Choose a shipping method:</legend> <input id="overnight" type="radio" name="shipping" value="overnight" /> <label for="overnight">Overnight</label><br /> <input id="twoday" type="radio" name="shipping" value="twoday" /> <label for="twoday">Two day</label><br /> <input id="ground" type="radio" name="shipping" value="ground" /> <label for="ground">Ground</label> </fieldset> ` Section 508 Standards (n) • Select list: <label for="favcity">Choose your favorite city?</label> <select id="favcity" name="select"> <option value="1">Amsterdam</option> <option value="2">Buenos Aires</option> <option value="3">Delhi</option> <option value="4">Hong Kong</option> <option value="5">London</option> <option value="6">Los Angeles</option> <option value="7">Moscow</option> <option value="8">Mumbai</option> <option value="9">New York</option> <option value="10">Sao Paulo</option> <option value="11">Tokyo</option> </select> ` Section 508 Standards (n) • Fieldsets can be nested and styled • More information: • • WebAIM Web Accessibility, Web Standards and Regulatory Compliance ` Section 508 Standards (o) (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 chore • • to wait for the assistive technology to work through and announce each of the standard navigational links To alleviate this problem there must be a mechanism for users to skip repetitive navigational links Skip navigation links can be placed anywhere, but are generally placed at the top of the page ` Section 508 Standards (o) • Often a "Skip to content" in the top left corner • skips over repetitive titles, graphics and global navigation links as well as page navigation links Skip navigation link code • • Just before the navigation links <a href="#content">Skip to page content</a> Just before the main page content: • Example <a name="content"></a> ` Section 508 Standards (o) • Should these links be visible or not? • • • If they are visible, it changes the appearance of the site for sighted users If they are invisible, there may be implications for mobility impaired users and users who are vision impaired (not blind) More descriptive labeling potentially can be applied to invisible links (since the label doesn’t take up screen real estate) ` Section 508 Standards (o) • Methods to create invisible navigation skip links: • • • Skip navigation link attached to a small (1 pixel) image with descriptive "alt" text Use normal text, but set background and foreground colors to be the same Use CSS to move the link off the visible page page to the left <a href="#main" id="main" class="skip">Skip to page content</a> CSS: a.skip {position: absolute; left: -1000em; width: 20em;} ` Section 508 Standards (p) (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 ` The Standard Versus The Intent • 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? Does context provide meaning? • • If so, an empty alt may be OK even though the image has meaning A captioned picture for example ` Checking For 508 Compliance • Basic tests • • • Use a text only browser (lynx) Disable styles and JavaScript (web designer tool) Use the fangs emulator in Firefox ` Checking For 508 Compliance • Browser Tools • Mozilla/Firefox • • • • • • • Web developer Fangs Screen Reader Emulator Colour Contrast Analyser Juicy Studio Accessibility Toolbar Accessibar Firefox Accessibility Extension TotalValidator ` Checking For 508 Compliance • • Internet Explorer • • Web Accessibility Toolbar Internet Explorer Developer Toolbar Text-only browser • • Lynx for Windows Lynx for OS X • Free online tools • • • Ramp Personal Edition WAVE Cynthia Says ` Checking For 508 Compliance • • Extensions to Dreamweaver WebAIM List and Review of free tools • • • • Deque (Free personal use version too) HiSoftware SSB Technologies Jim Tatcher comparison • Commercial Tools ` Let's Evaluate Some Pages! ` Special cases: PDF, Flash and AJAX ` Flash Accessibility • WebAIM tutorial • Adobe general accessibility • Adobe Flash Guidelines • Flash can enhance some accessibility • • • • • Multiple ways of presentation Scalability Keyboard accessibility Engaging content Self-voicing ` Flash Accessibility • Some browsers may not support Flash • Most Flash content cannot be made natively accessible to screen readers • • • Make content accessible to the screen reader Make content self-voicing Provide an accessible alternative to the content • • • color contrast consistent navigation user-centric design • HTML accessibility concepts apply to Flash ` PDF Accessibility • WebAIM Tutorial • Adobe general accessibility • Adobe PDF Guide (PDF) • Scanning a document into PDF creates a "PDF Image Only" file that is a graphic representation of the document with no associated text • Generally unreadable by assistive technology ` PDF Accessibility • Scanning a document into PDF and then running it through OCR ("optical character recognition") technology converts the text images into searchable text • • This is more accessible Such documents must be checked carefully for accuracy ` PDF Accessibility • Printing a file directly into PDF format converts • • the electronic information into a digital representation of the document that is somewhat readable to assistive technology. Writing a document inside Adobe Acrobat can also result in a document that is more usable by assistive technology. Adobe on-line conversion ` PDF Accessibility • Many assistive browsers support selected PDF elements through Acrobat Reader • To take advantage of these features, PDF documents need to be tagged • • • To convey document structure and content To resize and reflow content in browser windows To use the Read Out Loud feature ` AJAX Accessibility • AJAX stands for Asynchronous JavaScript And XML • • • Allows web applications high levels of interactivity without the standard type of clientserver interaction Overview of AJAX AJAX Example ` AJAX Accessibility • AJAX will not work in all web browsers • Pages must function with Javascript disabled • WebAIM AJAX article • Many accessibilty issues yet to be addresses • • Identifying content changes Efforts are under way ` Final Thoughts • Be as accessible as possible: the standards will change • • • Additional refinements in Federal standards will happen - in review now WCAG 2.0 has been released 508 is currently being revised • Stay abreast of UC, UC Davis and Federal policies that may apply to you • UC Davis webmaster site • Campus/UC accessibility plan and resources to come ` Final Thoughts • Site conversion • • • • • • If you can't convert completely, make a plan Analyze the requirements and create a standards statement for your organization Make the easiest changes immediately Make the changes to templates, style sheets and other elements that will impact the greatest number of pages Outline how and when you will address other needs Document progress toward the plan ` Designing Accessible Web Sites Rick Hill, Webmaster College of Engineering