how to improve ux by implementing accessibility

37
How to improve UX by implementing accessibility Radek PAVLÍČEK, Blind Friendly Web

Upload: radek-pavlicek

Post on 01-Jul-2015

1.006 views

Category:

Technology


3 download

DESCRIPTION

Accessibility is often connected to the needs and demands of people with impairement. This presentation - by means of practical examples - shows that vast majority of users can benefit from accessibility.

TRANSCRIPT

Page 1: How to improve UX by implementing accessibility

How to improve UX by implementing accessibility

Radek PAVLÍČEK, Blind Friendly Web

Page 2: How to improve UX by implementing accessibility

Hi. My name is Radek and I am member of Blind Friendly Web team.

Page 3: How to improve UX by implementing accessibility

I am also an author of blog Poslepu.cz and I work as accessibility consultant.

Page 4: How to improve UX by implementing accessibility

In this presentation I would like to go on with topic, which I presented at WebExpo

conference 2012.

Page 5: How to improve UX by implementing accessibility

What is accessibility good for?

Page 6: How to improve UX by implementing accessibility

Availability – user must be able to get

on the web.

Page 7: How to improve UX by implementing accessibility

Controlability – user must be able to

operate the web.

Page 8: How to improve UX by implementing accessibility

Understandability – user must understand

the web.

Page 9: How to improve UX by implementing accessibility

Orientation – user must be able to find the way

through the web.

Page 10: How to improve UX by implementing accessibility

Time – user must be able to fullfil his

or her task in reasonable time.

Page 11: How to improve UX by implementing accessibility

Accessibility is often perceived as a matter of handicapped people only.

Page 12: How to improve UX by implementing accessibility

One accessibility to rule them all?Can we fully fullfil needs of all of the

users?

Page 13: How to improve UX by implementing accessibility

Demands and needs of particular groups of people with impairement vary.

Page 14: How to improve UX by implementing accessibility

Removing barrier for one group could create barrier

for another.

Page 15: How to improve UX by implementing accessibility

Real life example. Orientation around this swimming pool was no problem for my

blind colleague.

Page 16: How to improve UX by implementing accessibility

Although this swimming pools looks very similar to the previous one, it was designed primarily for the needs of wheelchair users and there

were no natural guidelines for the blind. That is why the orientation for them was very complicated.

Page 17: How to improve UX by implementing accessibility

This lowering is very suitable for wheelchair users, but is not good for the blind, because they don´t know where is the

border between the sidewalk and the road.

Page 18: How to improve UX by implementing accessibility

Special kind of cobbles makes this lowering accessible also for the blind.

Page 19: How to improve UX by implementing accessibility

Some adaptations are useful only for users with special

needs

Page 20: How to improve UX by implementing accessibility

Sign language

Page 21: How to improve UX by implementing accessibility

Audio description of movies

Page 22: How to improve UX by implementing accessibility

Hidden headings

Page 23: How to improve UX by implementing accessibility

But the rest is useful for vast majority of users

Page 24: How to improve UX by implementing accessibility

Audio information Barrier-less

From accessibility adjustement of this tram profit also those, who travel with pram, or passengers, who use audio information about particular stops to be informed where they are and where they must get off.

Page 25: How to improve UX by implementing accessibility

Real life examples

Page 26: How to improve UX by implementing accessibility

Subtitles are useful not only for people with hearing impairement, but also for those, who do not

understand spoken language very well.

Page 27: How to improve UX by implementing accessibility

Missing text alternative

There is no button which I can click on.

Page 28: How to improve UX by implementing accessibility

Explicit association of controls with their labels

When you create explicit association, the clickable area is larger, because you can

click also on the label.

Page 29: How to improve UX by implementing accessibility

Keyboard shortcuts – you can operate the web in very effective way.

Page 30: How to improve UX by implementing accessibility

Proof, that accessibility is beneficial to all users, can be found in this report.

Page 31: How to improve UX by implementing accessibility

Scope of the investigation

1 000 home pages

39 000 pagesin total

50 users with variety of

impairements

User testing

Automated testing

Page 32: How to improve UX by implementing accessibility

Completed tasks

Although control group, that consists of non-disabled web users, was able to complete all the tasks, blind users on low accessibility websites completed only 67 %.

Page 33: How to improve UX by implementing accessibility

Duration

On low accessibility sites both groups were slower and they need more time to complete their tasks. In other words, on high accessibility sites they were able to complete their tasks faster and easier.

Page 34: How to improve UX by implementing accessibility

Remember

Accessible web is beneficial to all users, not only to users with

impairement.

Page 35: How to improve UX by implementing accessibility

More info about accessibility

Page 36: How to improve UX by implementing accessibility

Contact info

[email protected]@radlicek

Page 37: How to improve UX by implementing accessibility

Photo credits• www.fotopedia.com/items/flickr-415742494 • www.flickr.com/photos/11407072@N03/2194359747/• www.flickr.com/photos/60207590@N00/2344734563• http://commons.wikimedia.org/wiki/File:Brno,_Mendlovo_n%C3%A1m%C

4%9Bst%C3%AD,_%C5%A0koda_13T_%C4%8D._1923.jpg

• www.flickr.com/photos/nationaalarchief/4025536029/• www.flickr.com/photos/cornelluniversitylibrary/3678984206/• http://4.bp.blogspot.com/__1B7eTIn3jM/SoMylQ_RqWI/AAAAAAAAAAw/

F8u_jtyp3IA/s400/Learn-Hiragana.jpg• http://www.sons.cz/docs/bariery/sons_inet1_01_2010.pdf