Inclusive design: real accessibility for everyone
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Inclusive design: real accessibility for everyone

on

  • 2,011 views

This presentation gives an introduction to inclusive design, including 10 principles of inclusive design, where it came from, and how to implement it in a project. Code examples include media queries ...

This presentation gives an introduction to inclusive design, including 10 principles of inclusive design, where it came from, and how to implement it in a project. Code examples include media queries and viewport.

Statistics

Views

Total Views
2,011
Views on SlideShare
1,931
Embed Views
80

Actions

Likes
2
Downloads
47
Comments
0

5 Embeds 80

http://architecture.sitefinity.com 49
http://lanyrd.com 19
http://www.techgig.com 9
http://translate.googleusercontent.com 2
http://techgig.in 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Inclusive design: real accessibility for everyone Presentation Transcript

  • 1. Hi! Im Chris Mills! cmills@opera.com @chrisdavidmillshttp://www.slideshare.net/chrisdavidmills http://dev.opera.com
  • 2. I work at Opera‣ Open standards evangelist and education agitator ‣ dev.opera.com ‣ Talks too much a lot! ‣ Lobbies lots of universities‣ Obsessed by accessibility ... to a point‣ HTML5/CSS3 wrangler‣ Heavy metal drummer
  • 3. What is inclusive design?‣ I call it "real accessibility" ‣ Not just about disabled people ‣ Also considers mobile users ‣ Low bandwidth users ‣ And everyone else!
  • 4. What is inclusive design?‣ Branding‣ UX‣ Usability‣ And other exciting buzzwords!
  • 5. Design with diversity inmind http://www.flickr.com/photos/usarmyafrica/4919901589/
  • 6. What is inclusive design?Its just good design!
  • 7. <rant>It is like going to the doctor for a check-up, but thenhaving to hire an independent consultant to tell youwhether the doctor knew what they were talkingabout (or not), or (pick your favourite analogy)
  • 8. <rant>It is like going to the doctor for a check-up, but thenhaving to hire an independent consultant to tell youwhether the doctor knew what they were talkingabout (or not), or (pick your favourite analogy) $$$ 
 

  • 9. <rant>‣ Yes, not everyone can afford usability labs, accessibility testing sessions, focus groups, mobile testing suites ... yadda yadda
  • 10. Code <rant>!Yes, it is challenging to make a page accessiblewhen youve got video, Ajax, user-generatedcontent, CMSs, and the boss has decided it needsto conform to WCAG 2.0 AAA...
  • 11. Code <rant> #2!...but it is bloody impossible when your pagetemplates look like this:<font
size="6">My
top
level
heading</font><br><br><font
size="2">My
first
paragraph</font><br><br><font
size="2">My
second
paragraph</font>
  • 12. Oh, and...Accessibility and usability do not have to be ugly!!!!
  • 13. Da rootz of Inclusive design http://www.flickr.com/photos/darpi/212323100/
  • 14. Frank Lloyd Wright said..."All fine architectural values are human values, elsenot valuable." http://www.flickr.com/photos/usonian/4231430254/
  • 15. The wisdom of Dieter RamsGood design is:‣ Innovative ‣ Honest‣ Useful ‣ Long lasting‣ Aesthetic ‣ Thorough‣ Understandable ‣ Environmentally-friendly‣ Unobtrusive ‣ ConsistentAbove all, it is as little design as possible http://www.vitsoe.com/en/gb/about/dieterrams/
  • 16. Inclusive design - 10principles‣ Equitable ‣ Preventative‣ Flexible ‣ Tolerant‣ Simple and intuitive ‣ Effortless‣ Perceptible ‣ Accommodating‣ Informative ‣ Consistent
  • 17. Taking it to the Web http://www.flickr.com/photos/luc_viatour/4247957432/
  • 18. A plan for implementation...Might look like this‣ Plan‣ Execute‣ Follow guidelines‣ Maintain
  • 19. Plan‣ Keeping it on brand‣ User experience‣ Research and testing steps‣ Content strategy
  • 20. Execute‣ Market and user research‣ Visual design‣ UI/Interaction design‣ IA‣ Choice of tools‣ Development
  • 21. Follow guidelines‣ Design principles and best practices‣ Accessibility guidelines (add common sense)‣ Usability best practices‣ Web standards (and browser hacks!)
  • 22. Maintain‣ Review content (esp. user generated)‣ Allow easy feedback, and listen to your customers‣ Deal with problems quickly, and be honest about mistakes‣ Always strive to do things better, make small iterative improvements
  • 23. Lets go back to thoseprinciples‣ Equitable ‣ Preventative‣ Flexible ‣ Tolerant‣ Simple and intuitive ‣ Effortless‣ Perceptible ‣ Accommodating‣ Informative ‣ Consistent
  • 24. 1. Equitable‣ Be welcoming, and dont discriminate‣ Consider the needs of diverse users from the get go‣ User experience cant and shouldnt be IDENTICAL for all users‣ Provide different user experiences with equally valuable outcomes
  • 25. 1. Equitable - how?‣ Text alternatives for critical AV content‣ Adaptive layouts using technologies like media queries and viewport‣ Keyboard accessibility and good ol semantic HTML‣ General thought for fallbacks and graceful degredation
  • 26. 2. Flexible‣ Provide different options for different users, contexts and devices, locales‣ This choice will be appreciated, and more users will find your site accessible and usable
  • 27. 2. Flexible - how?‣ Again, adaptive layouts, keyboard accessibility, progressive enhancement‣ That layered approach - structure, style, behaviour‣ Think carefully about how you use things like CAPCHAs and Ajax‣ Think about an international audience
  • 28. 3. Simple and intuitive‣ Be as obvious as you can‣ Dont assume its usable just because you can use it‣ Keep removing features that arent absolutely necessary‣ Add signposts and user hints‣ "Dont make me think"
  • 29. http://www.flickr.com/photos/rickyromero/2672913333/
  • 30. 3. Simple and intuitive -how?‣ Create prototypes as early as possible‣ Test!‣ Justify new features - dont just add them without thought
  • 31. 4. Perceptible‣ Be clear with content and features‣ Make sure the user understands why they are there, what they can do, and where to go next
  • 32. 4. Perceptible - how?‣ Think about how different devices and users process different types of content‣ Make your copy meaningful and straightforward‣ Again provide alternatives and choices, and make your site adaptive‣ Careful about hiding things from certain users
  • 33. How to hide things, vol. 1‣ Use inline JavaScript handlers‣ And generate loads of content that isnt in the DOM‣ Put important content inside images without alternatives‣ Dont provide :focus as well as :hover‣ Use display: none; and visibility: hidden;
  • 34. 5. Informative‣ Provide feedback and help options‣ Again, choices are good‣ Be predictable and consistent‣ Keep the user dialogue going, and show you care‣ Manage user expectations/frustrations
  • 35. 5. Informative - how?‣ Keep navigation and other site features consistent and predictable‣ Provide help pages if needed‣ And multiple contact options‣ And make sure your users get responses!‣ Be friendly and approachable‣ Dont make unrealistic promises
  • 36. Bad promises‣ Making statements like ‣ "All enquires answered within 24 hours" ‣ "Site is WCAG AAA conformant" ‣ "Site is mobile web compliant"‣ Is really stupid!‣ Instead say that youve made reasonable steps to make your site accessible to a wide variety of users, and then make it easy to contact you if a problem is still found
  • 37. 6. Preventative...‣ ...as in, preventative medicine‣ Closely related to "Informative"‣ Guide users carefully through processes (forms is the big one)‣ Help to minimise errors and engender trust
  • 38. 6. Preventative - how?‣ Clear form <labels>‣ Accept a variety of data formats‣ Guide the user interactive pathway as much as you can‣ Provide early feedback‣ Test! test test test‣ We should do the work, not the users
  • 39. Ajax for instant feedback
  • 40. 7. Tolerant‣ Follows on very closely from preventative‣ Indicate errors precisely‣ Be supportive‣ Build user confidence
  • 41. 7. Tolerant - how?‣ Indicate what errors have been made, and how to fix them‣ Do this in a variety of ways to suit different users‣ Provide success messaging, as well as error messaging
  • 42. 8. Effortless‣ Again, make your apps as simple and intuitive as possible‣ "Dont make me think"‣ Dont expect too much at once‣ Dont pressure your users unduly
  • 43. 8. Effortless - how?‣ Consistent navigation and other common elements‣ Remove as many features as possible‣ Make copy concise and easy to read‣ Dont do stupid things like having time limits to fill in forms
  • 44. 9. Accommodating‣ Common sense after youve gone through the rest of this preso!‣ Effortless, simple and intuitive, flexible all come into play here
  • 45. 9. Accommodating - how?‣ Make your interfaces invisible and your interactions effortless‣ Make your interfaces adaptive with media queries and viewport
  • 46. http://www.flickr.com/photos/keso/205413979/
  • 47. 10. Consistent‣ Also common sense after youve gone through the rest of this preso!‣ Consistent layout, navigation, branding, style‣ Make the whole experience comfortable for existing users, and welcoming for new ones
  • 48. 10. Consistent - how?‣ Apply existing brand guidelines‣ Apply existing conventions‣ Use existing guidelines and best practices‣ Use web standards!
  • 49. The BBC - greatconsistency
  • 50. Code — cooooool!! http://www.flickr.com/photos/mafleen/3780072133/
  • 51. Media queries and viewport<meta
name="viewport"
content="width=400"><link
rel="stylesheet"
type="text/css"
media="screen
and
(max‐width:
980px)"
href="narrowdesktop.css"><link
rel="stylesheet"
type="text/css"
media="screen
and
(max‐device‐width:
550px),
screen
and
(max‐width:
550px)"
href="mobileview.css">
  • 52. Keyboard accessibilitya:focus,
a:hover
{

...}
  • 53. Fallbacks<video
...
>

<object
type="application/x‐shockwave‐flash">

</object></video><p>Jim:
Hello
Helen!</p><p>Helen:
Hello
Jim,
how
are
you?</p><p>
...
</p>
  • 54. Bonus points‣ Also good for mobile device users and low bandwidth users, who may not want to download a hulking great video‣ Also good for users in a noisy environment
  • 55. Its not rocket surgery!‣ A lot of this is obvious when you think about it‣ Its nothing new to many of us‣ But a lot of people still dont get this right‣ And this plan could be useful to many of you
  • 56. Thanks! cmills@opera.com @chrisdavidmillshttp://www.slideshare.net/chrisdavidmills http://dev.opera.com
  • 57. Licensing and creditsContent largely adapted from/inspired by thefabulous work of Sandi Wassmer:•SXSW 2011 Inclusive Design - http://www.slideshare.net/SandiWassmer/sxsw-2011-inclusive-design-7258927•Ten principles of inclusive design - http://www.culture.gov.uk/what_we_do/telecommunications_and_online/8161.aspxContent published under creative commons:http://creativecommons.org/licenses/by-nc-sa/2.5/