Transcript Everything in it’s right place

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 Duex
View 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.