how to improve ux by implementing accessibility - webexpo 2013 edition

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

Upload: radek-pavlicek

Post on 09-May-2015

688 views

Category:

Design


4 download

DESCRIPTION

Accessibility is very closely connected with other web developement domains, and brings benefits to all users (similarly to the real world). By way of practical examples I demonstrate how implementing accessibility could make life of your users easier and happier.

TRANSCRIPT

Page 1: How to improve UX by implementing accessibility - WebExpo 2013 Edition

How to improve UX by implementing accessibility

Radek PAVLÍČEK, Blind Friendly Web

Page 2: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Do you like CAPTCHA?

CAPTCHA is one of the accessibility issues which is struggling for everybody.

Page 3: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Accessibility is for the majority, not the minority

Page 4: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Accessibility

≠handicapped people

only

Page 5: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Although a lot of people have accessibility connected to handicapped people only…

Page 6: How to improve UX by implementing accessibility - WebExpo 2013 Edition

…accessibility is not just about them. Accessibility is beneficial to a lot of other users (elderly, children, user of mobile

devices, etc.).

Page 7: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Some adaptations are useful only for users with special

needs

Page 8: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Sign language

Page 9: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Audio description of movies

Page 10: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Hidden headings

Page 11: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Skip to links

Page 12: How to improve UX by implementing accessibility - WebExpo 2013 Edition

But the rest of accessibility adjustements is useful for

vast majority of users

Page 13: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Real life examples

Page 14: How to improve UX by implementing accessibility - WebExpo 2013 Edition

State of the art in certain areas - accessibility is a part of design.

Page 15: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Low floorAudio information

From accessibility adjustment 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 16: How to improve UX by implementing accessibility - WebExpo 2013 Edition

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

understand spoken language very well.

Page 17: How to improve UX by implementing accessibility - WebExpo 2013 Edition

What can I do to help my users?

Page 18: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Very often, the difference is

in details

Page 19: How to improve UX by implementing accessibility - WebExpo 2013 Edition

#1Focus on

the core message

Page 20: How to improve UX by implementing accessibility - WebExpo 2013 Edition
Page 21: How to improve UX by implementing accessibility - WebExpo 2013 Edition
Page 22: How to improve UX by implementing accessibility - WebExpo 2013 Edition

#2How can I upgrade without a button?

Page 23: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Missing text alternative

There is no button which I can click on.

Page 24: How to improve UX by implementing accessibility - WebExpo 2013 Edition

#3Bigger area, better

user experience

Page 25: How to improve UX by implementing accessibility - WebExpo 2013 Edition
Page 26: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Explicit association of controls with their labels

When you create explicit association of form element and its description/label, the

clickable area is larger, because you can click also on the label.

Page 27: How to improve UX by implementing accessibility - WebExpo 2013 Edition

#4Fast and furious

Page 28: How to improve UX by implementing accessibility - WebExpo 2013 Edition

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

Page 29: How to improve UX by implementing accessibility - WebExpo 2013 Edition
Page 30: How to improve UX by implementing accessibility - WebExpo 2013 Edition

#5Money, money,

money…

Page 31: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Do you know when you refuse money from your potential customers?

Page 32: How to improve UX by implementing accessibility - WebExpo 2013 Edition

When your payment gateway is inaccessible to some of them.

Page 33: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Proof & Reason

Page 34: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Time is an important quantity of accessibility.

Page 35: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Better accessibility, faster task completion.

AccessibleInaccessible

Page 36: How to improve UX by implementing accessibility - WebExpo 2013 Edition

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

Page 37: How to improve UX by implementing accessibility - WebExpo 2013 Edition

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 38: How to improve UX by implementing accessibility - WebExpo 2013 Edition

What can I do when I want to offer my

users a better experience?

Page 39: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Have accessibility in mind

Page 40: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Integrate accessibility into all parts of your developement process.

Accessibility

Page 41: How to improve UX by implementing accessibility - WebExpo 2013 Edition

There are a lot of methodologies and guidelines which could help you.

Page 42: How to improve UX by implementing accessibility - WebExpo 2013 Edition
Page 43: How to improve UX by implementing accessibility - WebExpo 2013 Edition
Page 44: How to improve UX by implementing accessibility - WebExpo 2013 Edition
Page 45: How to improve UX by implementing accessibility - WebExpo 2013 Edition
Page 46: How to improve UX by implementing accessibility - WebExpo 2013 Edition
Page 47: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Accessibility is nota feature.

It represents how you think about

people.

Page 48: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Smartphones with iOS or Android have many built-in accessibility features and are accessible

out of the box.

Page 49: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Accessibility is an integral part of developement process at Seznam.cz

Page 50: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Benefits

Page 51: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Accessibility can bring you more money,

Page 52: How to improve UX by implementing accessibility - WebExpo 2013 Edition

…positive feedback…

Page 53: How to improve UX by implementing accessibility - WebExpo 2013 Edition

…and more satisfied users and customers.

Page 54: How to improve UX by implementing accessibility - WebExpo 2013 Edition

Contact info

[email protected]@radlicek

Page 55: How to improve UX by implementing accessibility - WebExpo 2013 Edition

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