Making Web Accessibility Sexy

Making Accessibility Sexy
<head> Conference
26 October 2008

Ann McMeekin

I know Jeremy had his tongue ﬁrmly in his cheek when he showed this slide, but I saw more than a few heads nod in agreement when it went up on the screen.

http://www.ﬂickr.com/photos/pinkmoose/688904405/

When we think of accessibility, we often think of disability aids, and for the most part it turns out that...

... accessibility really ain't that exciting.

quot;Although the world is
full of suffering, it is
also full of
overcoming it.quot;
Helen Keller

Unfortunately, what often happens when people think about the needs of people with disabilities, they begin to think about how different their lives would be if they had that disability, and
become bogged down in fear of how that might change their lives. I'd like to see more people get past that feeling and focus on the needs of users who have come to terms with their
disabilities and just want to get on with the rest of their lives.

http://www.missability.com/knittingcompetition1.html

Just because you've got ugly boring crutches doesn't mean you can't do something to make it funky and suit your style or personality.
At http://scriptingenabled.org/ I met Denise, who runs http://enabledbydesign.org/ a site designed to share information about more attractive disability aids. Just because you've got a
disability, doesn't mean you want to have a house that looks like a run-down hospital orthopedic ward.

http://www.ﬂickr.com/photos/kakadu/33597191/

A great example of how something that would previously be considered impossible, or at the very least, incredibly difﬁcult, can be made accessible.

Braille labels - in my opinion, adds to the aesthetics of the labels rather than takes away from it.

http://www.ﬂickr.com/photos/adactio/89778576/

http://www.ﬂickr.com/photos/captainchaos/28809368/

Rather than have a lift or an ugly ramp, the wheelchair ramp at the Vatican is simply stunning, and must be a wonderful experience for everyone who uses it, disabled or not.

http://www.ﬂickr.com/photos/girlthursday/234154245/

I did a long search on ﬂickr for sexy accessibility, found this and thought it was a great idea...

... it was only after seeing the previous photo that I realised I'd been walking past the same thing which had been implemented at a nearby shopping centre for several months without even
realising. A shining example of beautifully integrated accessibility.

http://www.designcouncil.org.uk/en/Case-Studies/All-Case-Studies/OXO-Good-Grips/

Products were initially visualised with the needs of someone with arthritis in mind...

quot;The OXO GOOD GRIPS Swivel Peeler is
simply the best peeler you will ever try! The
sharp, stainless steel blade glides through
even the toughest fruit and vegetable skins
with ease. The soft, comfortable handle
cushions your hand as you peel, and is
non-slip, even when your hands are wet. quot;

OXO Good Grips Swivel Peeler

... but if you read the product description, disability doesn't get a mention. It's presented as something which is good for everyone, and has sold very well, and is available in mainstream
shops. This is how more aids and products should be designed and marketed.

http://www.ﬂickr.com/photos/slimcoincidence/514131930/

... even when it seems that some things might never be made accessible - Braille Playboy - because even blind people want to read it for the articles!

quot;Limitations are the
soil from which
creativity grows.quot;
Jeffrey Zeldman, A List Apart, May 12 2000
http://www.alistapart.com/articles/5k

Many designers feel that accessibility puts too much of a constraint on their ability to create beautiful websites - I believe that this quote holds true, even though it was made eight years ago.

http://www.sylloge.com/5k/original.html

http://www.sylloge.com/5k/entries/41/s.html

Space Invaders, in javascript, in 5k, and it's totally playable. I love this. It's a stunning example of what can be done when someone puts their skill and talent to use within constraints.

How can I make
accessibility sexy?

1. Think about the
needs of all your
users

keyboard accessibility
captions and transcripts
clear and simple language

users

friendly neighbourhood
accessibility person

2. Focus on standard
interaction before
adding complex
interaction

http://www.news.bbc.co.uk non-javascript version

I wish just a little more thought had gone into this, so that the extra tabs weren't visible. As it is, users who see this could get the impression that they're getting a lesser experience. If you
concentrate on the simple interaction ﬁrst, and then add the bells and whistles, everyone gets a great experience.

http://www.news.bbc.co.uk javascript version

3. Big is
beautiful
http://icant.co.uk/easy-youtube/

Lots of feedback that the bigger buttons and clearer icons are easier to use for those who are older, or those who have cognitive impairments.

text size no less than 75%

Some users (such as those with tunnel vision) need to downsize the text, and if it is set below 75%, it may become too small to be readable.

line-height of 1.2 - 1.6 x
http://24ways.org/examples/css-for-
accessibility/lineheight.html

links

text-decoration: none;
border-bottom: 1px #000 solid;
padding-bottom: 2px;

focus

http://24ways.org/code/css-for-accessibility/
5.txt

Making the focus, hover and active states the same means that users can get the same look and feel when the keyboard focus hits a link as they would if they moused over it. Active is
required to be the same as focus and hover, because IE doesn't recognise focus, and uses active instead.

icons and buttons

It's not just about disability - I got an iPhone recently and have found that if the icons and buttons are too small, it can be very difﬁcult to click on them.

white space

(but not too much)

Too much whitespace makes it difﬁcult for those using screen magniﬁcation to track where they're going in the page. The same is also true on the iPhone.

4. Include
accessibility content
in your design

http://www.boston.com/bigpicture/2008/10/days_of_autumn.html

I love that the Boston Globe has taken time to write great captions for each picture and make them visible for everyone, rather than hidden away behind longdesc attributes or d links.

Two ways of doing the same thing. Use whichever way works for you.

Skip link that's been incorporated into the site design, rather than being something thats kind of hidden out of the way like it's embarrassing.

decorative images only
background-image: url (image
location);
or

alt=quot;quot;

Use of alt=quot;*quot; is no longer recommended as screen readers can now cope with images with null or empty (altquot; quot;) alt text.

styled text
vs
images of text
vs
image replacement

CSS styled text is best. Images of text and image replacement have the same issues (i.e., that they can't be resized), so keep the use of these to a minimum.

ALL CAPS or no caps
vs
text-transform: uppercase;
text-transform: lowercase;

Text in ALLCAPS is most often spelled out and that can make content difﬁcult to understand. Use standard case and text-transform it to look the required way.

http://www.alistapart.com/articles/zebrastripingdoesithelp/

Zebra striping is often helpful for screen magniﬁcation or users with cognitive issues.

http://www.paciellogroup.com/resources/contrast-analyser.html

One of my all-time favourite tools. Test all your colour schemes using this, and the luminosity algorithm. If the colours you've been given aren't quite right, then use the sliders to tweak them.
Often, you can stay within the margin of quot;it's just your monitorquot; keeping the brand people and the users happy.

Accessibility
without
Creativity

Happy Users!
http://www.ﬂickr.com/photos/purrr/126597849/

Thank you.
Any questions?
Ann McMeekin
ann@equalweb.net
http://www.equalweb.net

Making Web Accessibility Sexy

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Viewers also liked

Viewers also liked (8)

Similar to Making Web Accessibility Sexy

Similar to Making Web Accessibility Sexy (20)

Recently uploaded

Recently uploaded (20)

Making Web Accessibility Sexy