Design and Construction of Accessible Web Sites Michael Burks Chairman Internet Society SIG For Internet Accessibility for People with Disabilities June 22, 1999 San Jose, CA

Agenda 9:00 - 9:30 Introduction 9: :00 Web Site Design Concepts 10: :30 Break 10: :30 Major Accessibility Issues 12:30 - 2:00 Lunch 2:00 - 3:00 Major Accessibility Issues 3:00 - 3:30 Break 3:30 - 4:00 Exercise 1 - Site Assessment 4:00 - 4:45 Some “New” Developments 4:45 - 5:00 Conclusion

Introduction Objectives Define and understand what web site accessibility is. Learn some basic techniques to make web sites more accessible. Evaluate model web sites. Make a recommendation based on learnings and evaluation techniques.

Introduction Objectives Why are you here? What do you want to learn? What do you expect from this tutorial?

Introduction The Need People who do not read or speak your language Those with small mobile devices. Those with text only browsers. People with disabilities. –50 Million Americans. –750 Million Worldwide.

Introduction The Justification Accessible web sites are designed to be used by the largest group of users possible. This means more visitors for the money. A truly accessible site is well designed and easily navigated. Users can find what they seek. This equals more satisfied users.

Introduction Web Site Accessibility Defined Accessible web sites are designed to be used by the largest group of users possible. Regardless of disability or browser limitation. The goal is to present the material in a manner that is usable by a large number of people using a diverse set of technologies.

Introduction Important Design Factors Good Design is he first element of building Accessible Web sites Awareness that some people are limited in what they can access on a web site. Design and code your web site for all not just a few.

Web Site Design Concepts Elements of Good Design Lay pages out in a consistent manner Good, Clear Navigational Scheme Test the Links Make sure your content is accurate Use Valid HTML 4.0 Test your site with multiple browsers Present your site and documents in a logical manner Consider providing downloadable file for multiple page documents

Web Site Design Concepts Elements of Good Design Don’t Clutter the pages, keep them clean and crisp. Make pages scannable either by eye or screen reader. Know the purpose of your site. Don’t use elements that distract the user from your purpose. Don’t be seduced into using “leading edge” technology for the sake of the technology itself

Major Accessibility Issues Top Issues to Make a Site Accessible Motor Disability Issues Make sure keyboard access is provided throughout the site. Suggestions Do not use scripting to provide links on the page. Make sure a user can tab through the links. Test your pages with voice input software at the minimum.

Major Accessibility Issues Elements to Make a Site Accessible Vision Disability Issues Make sure keyboard access is provided throughout the site. Provide ALT text for all Images on the site. Use client side image maps with ALT text. Use Title Tags on all links. Use colorblind friendly colors. Use colors that contrast well Avoid side by side column layouts.

Major Accessibility Issues Elements to Make a Site Accessible Vision Disability Issues Provide a transcript or audio description of videos. Make sure ALT tags provide a meaningful description of the visual material.

Major Accessibility Issues Elements to Make a Site Accessible Hearing Disability Issues Provide close captioning for all videos. Provide an online transcript or description of audio material

Major Accessibility Issues Important Steps to Accessibility 1. Have a Clear Purpose for Your Site. A site with a clear purpose and mission is easier to organize. If there is no clear purpose the users will become confused

Major Accessibility Issues Important Steps to Accessibility 2. Present a text alternative for every non-text element. Use ALT attributes for Images. Use Title attributes where appropriate such as on Horizontal Rules. Present Transcripts for audio presentations. Provide a descriptive script for video presentations.

Major Accessibility Issues Important Steps to Accessibility 3. Use headings and other organizational elements correctly. Use heading elements to organize your document. Do not use heading elements to create an effect.

Major Accessibility Issues Important Steps to Accessibility 4. When using Imagemaps: Use client side Imagemaps wherever possible and provide ALT attributes on the area tags. If server side Imagemaps are used, provide text equivalent links for each link on the server side Imagemap.

Major Accessibility Issues Important Steps to Accessibility 5. Document Presentation: If you use style sheets make sure your document can be read without them. If you use tables to organize your pages, make sure the pages can be read by a screen reader in a linear fashion.

Major Accessibility Issues Important Steps to Accessibility 6. Provide Clear Navigational Structure: Make your Home Page a directory to your entire site. Provide a Consistent look and feel to your pages. Make it all work together.

Major Accessibility Issues Important Steps to Accessibility 7. Don’t Make Your Pages Browser Specific: Test with as many browsers as possible. Test with Voice Input and Voice Output. Do not write off AOL!

Major Accessibility Issues Important Steps to Accessibility 8. Using Tables for Page Presentation: Use single column tables. Consider embedding tables one inside the other. Test your presentation with a screen reader early in the development cycle.

Major Accessibility Issues Important Steps to Accessibility 9. Background Images: Use images that do not distract the user. Makes sure the image does not make the text difficult to read.

Major Accessibility Issues Important Steps to Accessibility 10. Forms Place the labels for the form fields in a consistent manner. Use the tabindex attribute to determine the tab order of fields. Provide an alternative means to contact your organization, , fax, or phone.

Major Accessibility Issues Important Steps to Accessibility 11. Frames Older browsers do not support them. They are not accessible to all screen readers. Provide a non frames alternative.

Analyzing a Site for Accessibility Choose a site 1. Analyze the general design. 2. Look at the page design 3. How can it be improved?

Some “New” Developments Cascading Style Sheets - CSS There are three types of styles that can be applied in HTML Linked Embedded Inline

Some “New” Developments Cascading Style Sheets - CSS Linked Linking to a style sheet means linking to a separate file where the styles that affect your document are stored. A tag is used to refer to the style sheet.

Some “New” Developments Cascading Style Sheets - CSS Embedded An embedded style block allows the author to embed the style into each of the individual documents. This block is included in the element of the document. Inline An inline style is included in each of the HTML tags you wish to affect. It is included as an attribute within the tag.

Some “New” Developments Cascading Style Sheets - CSS Order of Precedence:  Inline overrides Embedded  Embedded overrides Linked  Linked overrides regular HTML The styles have basically the same syntax and can be used singly of in combination with each other.

Some “New” Developments Cascading Style Sheets - CSS Using Style Sheets Style sheets are used to control the display of a document in the browser. There are several levels of style sheets and they can be used together. Authors will no longer have to depend of clumsy workaround to produce the effects they desire. This also means that the use of style sheets will help curtail the use of techniques that produce in accessible web pages. For more information on style sheets go to:

Some “New” Developments eXtensible Markup Language - XML It is a new language being developed by the W3C Consortium It offers web authors the opportunity to separate content of web pages from the presentation of web pages. Web pages built with XML can be constructed in such a way the user can control how they are displayed. This offers the obvious advantage of letting the user decide what is the best presentation for their “browser ”. For more information go to:

Some “New” Developments Web Presentations for “Non Readers” How do you present information in a form that someone who cannot read your web site can understand? Currently there is a heated discussion going on regarding this topic? What do you think?

Conclusion Accessibility requires awareness. Accessibility is tied to good design. Accessibility is cost effective and efficient. Accessibility is a moving target with changing technology.