design and construction of accessible web sites michael burks chairman internet society sig for...

Design and Construction of

Accessible Web SitesMichael Burks

Chairman

Internet Society SIG

For

Internet Accessibility for People with Disabilities

June 22, 1999

San Jose, CA

[email protected]

Agenda9:00 - 9:30 Introduction

9:30 - 10:00 Web Site Design Concepts

10:00 - 10:30 Break

10:30 - 12: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.


Elements to Make a Site AccessibleVision 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.


Elements to Make a Site AccessibleVision Disability Issues• Provide a transcript or audio description of videos.

• Make sure ALT tags provide a meaningful description of the visual material.


Elements to Make a Site AccessibleHearing Disability Issues• Provide close captioning for all videos.

• Provide an online transcript or description of audio material


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



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.



3. Use headings and other organizational elements correctly.• Use heading elements to organize your document.

• Do not use heading elements to create an effect.



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.



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.



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.



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!



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.



9. Background Images:

• Use images that do not distract the user.

• Makes sure the image does not make the text difficult to read.



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,

e-mail, fax, or phone.



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



Linked

Linking to a style sheet means linking to a separate file where the styles that affect your document are stored. A <Link> tag is used to refer to the style sheet.



EmbeddedAn embedded style block allows the author to embed the style into each

of the individual documents. This block is included in the <head> 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.



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.



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: http://www.w3.org/Style/CSS/


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: http://www.w3.org/XML/

http://www.w3.org/XML/


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.

design and construction of accessible web sites michael burks chairman internet society sig for...

Documents