Everything in it’s right place

Revisiting website accessibility

Jeff Coburn

Senior Web Specialist

Institute for Community Inclusion

What is website accessibility?

Let’s go back a step and ask:

‘What is the web?’

Jeff’s definition of the web without using google or wikipedia

The web is a collection of text and media elements (video files, audio files, images, maps, charts, tables) enclosed in a markup language (HTML).

Back to web accessibility; is there a catchier, more hip way of saying this?

• Yes, Universal Design. Or ‘Barrier Free’ design is also quite popular this season.

What is Universal Design for the web?

(without using google or wikipedia)• To provide every element on our page in it’s

most usable form, and then enclose it in proper markup.

(with google)• “Addresses design in the concept of the

needs of all people - of all ages and ability.”-UVM

Is there a difference between an accessible

website and a universally designed website?

– Is there a possible metaphor to the physical world you could use? Perhaps it could be a story?

It is important to understand you can have a site that is accessible by the letter of the law, and pass all the “Bobby” automated test, but still be wretched to use.

What is an usable website?

1. Usable by all users, regardless of ability or disability.

2. Accessible to all situations (old technology, disability, connection speed, device type).

3. Has logical and organized layout and navigation.

4. Takes advantage of assistive technologies:• Screen readers• Headpointers / keyboard only users

How is a web site made usable?

1. Properly crafted elements:• Are always coded to standards (W3.org)• Separate content from style using CSS.• Use a logical and organized layout.• Provide alternatives and captions for media elements• Are tested and double checked. Again. And again.

2. Thus resulting in:A clean and usable site that is usable to all people in almost all situations.

Separating Style from Content

M.I.T. Strata Center

Separating Style from Content

With Style Sheet

Separating Style from Content

Without Style Sheet

Separating Style from Content

With High Contrast Style Sheet

Separating Style from Content

With Style Sheet

Separating Style from Content

WITHOUT Style Sheet

Note: this is a different slide from the last.

Separating Style from Content

With High Contrast Style Sheet

Logical Layout?

Thank you WebAIM.org

Nope.

Logical Layout

Thank you WebAIM.org

Thank you WebAIM.org

Check to make sure you have not:

• Required a specific browser (IE)• Required the use of JavaScript • Designed for only one style sheet• Used unannounced pop-ups• Used images alone to convey message• Used color alone to convey message

Test to see if you can:

• Operate under certain conditions

– Use with style sheets, scripting and images disabled– Without use of mouse (keyboard only)– Use with alternate style sheet (high contrast / large text)– With screen reader JAWS (demo version available, try FANGS!)

• Pass a validation test at w3.org• Pass an online tools such as: Cynthia Says, LIFT,

WAVE, WebXact.

Like other testing efforts – replicate actual environment or characteristics of possible respondents.

Bonus tips

• If you use media elements (Flash, movies, audio, charts, images) provide captions, alt tags, text alternatives etc.

• If your navigation is a long list, consider providing it as an HTML list (ul, li).

Bonus Tips DuexView Source

• If you see lots of table/tr/td tags, you are abusing tables for layout. Not great.

• If you see lots of font, size and color tags, you are mixing form and function. Not great. CSS is your friend.

• If you don’t see any h1, h2, p, or li tags, you are probably not using properly formed html tags. Not great.