Making Accessible Websites A Workshop for the RECAP 2003 Conference West Chester University, May 16, 2003 Paula Edmiston, The Flying Cat, Inc.   The American with Disabilities Act (ADA) sets standards on websites accessibility. What is Website Accessibility? Access to people with vision, motor, hearing impairments Access to people using alternative technologies such as PDA (Personal Data Assistants) and mobile phones that access the Internet; to people using older technology such non-graphical browsers and slow dial-up connections. Access to people with cognitive and developmental limitations and those with color blindness. Access to assistive technologies such as screen readers and text enlargers. Maintaining an accessible website can be relatively easy and bring you the rewards of being truly accessable to everyone. It's not just the disabled that benefit, but people with older computers and browsers, hand help devices like mobile phones that connect to the Internet, and people with slow, dial-up, connections to the Internet. Images and Alternative Text The most important thing you can do is to use appropriate alternative text on your images. Alternative text is not used just by people with visual impairments; it's used by non-graphical browsers, mobile phone browsers and search engines. It's especially important to provide alternative text for images that are links and image maps. Each image link on a web page should have unique alternative text for voice recognition software to work correctly. Everyone likes a little "eye candy" on their pages. If an image doesn't offer substantial content then give it a blank, or empty, alternative text entry. Screen readers will skip over these images if they contain only a blank space. This image of the Netscape bookmark manager, when included in a guide to using bookmarks, requires an explanatory alt text statement. A bullet on a list might use alt text " * " (a blank space, an asterisk, a blank space) or it might require an empty alt statement: <a href="../images/bullet-blue.gif" alt="" align=left hspace="7" width="10" height="20"> Use client-side image maps that contain alternative text. These image maps can then be rendered as plain text links in a non-graphical browser and by screen readers. Try this accessible image map, graphically, and in lynx: http://www.cs.unca.edu/~edmiston/office.html Then try the inaccessible image map, graphically, and in lynx: http://www.cs.unca.edu/~edmiston/office2.html Editing the Alt Text on an Image In a web page editor such as Netscape Composer or Frontpage, double-click on the image to pop up the "Image properties" window, or select the image, usually a right-click on the image, then select the "Image properties". Find the entry for "Alternative Text" (or, perhaps, "Alternative Representation" in Frontpage). In most versions of Composer this will be in the main tab of the Properties window. In Frontpage you might need to open a tab labeled "General". In Dreamweaver, click on the image to select it and then add the alt text in properties box at the bottom of the window. If the properties box is not visible, right-click on the image and select "Properties" from the popup menu. Compose the alternative text as carefully as the text on the page. If the image isn't a significant contribution to the content press the spacebar once to enter a single blank space. Most non-graphical browsers will interpret a single blank space as an empty attribute and ignore it correctly. View your pages frequently in a text only browser such as Lynx. In my humble opinion if the content works in Lynx, it's pretty accessible. Color Avoid using color on a page to convey significant content. Visitors who are blind or using non-color monitors won't get the information. Select colors for text and links that are highly contrasting with the background color. Be aware that light text on a dark background can cause problems with printing. Frames Framed web sites can be very difficult to navigate and in some cases the frames make it impossible to bookmark pages. Try this site for a framed educational web site in your graphical browser. Now try the URL in Lynx: http://neptune3.galib.uga.edu/ Compare it with my early attempt at presenting a framed study guide. http://www.cs.unca.edu/~edmiston/study/oldframes/ Links and Navigation Compose link text carefully to make sense when read out of context. Avoid "click here". When listing your site navigational links, separate them with a non-link character such as a hyphen (-), tilde (~) or pipe (|) that has a blank space on each side. This: | Home | About | Search | Toolkit | Training | not this Home About Search Toolkit Training As visitors work through your site with a screen reader they may not want to listen to your list of navigation links at the top of every page. Provide a link to jump past the navigation. Use an invisible (transparent) image gif dot to anchor the link so it won't be visible in graphical browsers: <a href="#content"><img src="images/blank.gif" width="1" height="1" alt="Skip past the navigation links" border="0"></a> Look at this page in lynx to see the skip links at the top of the page and links to skip the sample navigation in the above paragraph. Headings Use headings to structure your document logically: H1, H2, H3, H4, H5. This will enhance the useability of your page. Resources There are myriad resources available on the Web to help you learn how to make accessible pages, and to test your pages for accessibility. Governmental and Nongovernmental Section 508 requires federal agencies to provide accessible sites. There does seem to be some question of the requirement applying to organizations receiving federal funding. Some states may adopt the 508 regulations which would apply to public universities. The Rehabilitation Act Amendments Section 508 American with Disabilities Act The Federal Information Technology Accessibility Initiative The Web Accessibility Initiative at the World Wide Web Consortium is an important leader in accessibility. Web standards are very important issues with deeply felt impacts on accessibility. Please spend some time with the Web Standards Project. Their web standards FAQ is a terrific introduction to how to make the most out of the World Wide Web. Tutorials and Guides An excellent discussion of the use of alt text Use of alt texts in images is a good explanation and links collection of alt text howlers. Checklist of accessibility criteria AWARE stands for Accessible Web Authoring Resources and Education, and their mission is to serve as a central resource for web authors for learning about web accessibility. Adobe PDF files and accessibility Understanding effective color contrast is a real eye-opener! This accessibility example contains two versions of a web page, one is not accessible and the other is accessible. The page contains an audio file so you can hear the difference as if you're using a screen reader. This video clip on accessibility from Georgia State University lets you hear what a screen reader sounds like, includes interviews with students, and includes a critique of WebCT. Cascading Style Sheets (CSS) Style sheets are a wonderful development for web page authors. While tags like <h1> are used to logically structure a document, style sheets are used to design the presentation of the content. The very best aspect of style sheets is the ability to define colors and backgrounds in a single file that will apply to every page on a site; then by editing the single style sheet file you can immediately and automagically change the effects of evey page on the site. The trend in web standards will be for individuals to be able to "override" the style sheets selected by the web page author, enabling people with disabilities to customize the look of a web page. When standard HTML tags are used properly to sructure a document and style sheets are used for the presentation of a document, the degree of accessibility is enormously enhanced. Use "external" or "linked" sheets to start, since they can be edited on the fly to make changes that sweep across a site. Once you have settled on your primary style with the external (which means it is in a file by itself) you can look into "embedding" style commands tocreate singular effects. The New York Public Library style guide contains a good overview and even offers some ready-made styles sheets you can use. Guide to Frontpage 98 stylesheets Frontpage 2000 style tips and tricks step by step on style for frontpage 2000 Now that you've probably become excited about the power and flexibility of style sheets, be sure to read the sobering CSS Stylesheet Properties that discusses problems with CSS implementation in older browsers. Accessibility Testing Tools Bobby is a free service for testing the accessibility of your pages. Lynx Viewer gives you an approximate view of your pages in this text-only browser. It also links to a download of the program for more accurate testing. Better, Lynx at scramworks offers a real telnet/lynx experience. Supply your email address as prompted. Need help with using lynx? Try this Lynx Handout Vischeck simulates colorblindness and their Daltonize corrects images for colorblind viewers. Screen Reader Simulation A Prompt is a tool to evaluate the accessibility of a web page.