Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Inclusive design: real accessibility for everyone

2,541 views

Published on

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.

Published in: Technology, Design

Inclusive design: real accessibility for everyone

  1. 1. Hi! Im Chris Mills! cmills@opera.com @chrisdavidmillshttp://www.slideshare.net/chrisdavidmills http://dev.opera.com
  2. 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. 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. 4. What is inclusive design?‣ Branding‣ UX‣ Usability‣ And other exciting buzzwords!
  5. 5. Design with diversity inmind http://www.flickr.com/photos/usarmyafrica/4919901589/
  6. 6. What is inclusive design?Its just good design!
  7. 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. 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. 9. <rant>‣ Yes, not everyone can afford usability labs, accessibility testing sessions, focus groups, mobile testing suites ... yadda yadda
  10. 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. 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. 12. Oh, and...Accessibility and usability do not have to be ugly!!!!
  13. 13. Da rootz of Inclusive design http://www.flickr.com/photos/darpi/212323100/
  14. 14. Frank Lloyd Wright said..."All fine architectural values are human values, elsenot valuable." http://www.flickr.com/photos/usonian/4231430254/
  15. 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. 16. Inclusive design - 10principles‣ Equitable ‣ Preventative‣ Flexible ‣ Tolerant‣ Simple and intuitive ‣ Effortless‣ Perceptible ‣ Accommodating‣ Informative ‣ Consistent
  17. 17. Taking it to the Web http://www.flickr.com/photos/luc_viatour/4247957432/
  18. 18. A plan for implementation...Might look like this‣ Plan‣ Execute‣ Follow guidelines‣ Maintain
  19. 19. Plan‣ Keeping it on brand‣ User experience‣ Research and testing steps‣ Content strategy
  20. 20. Execute‣ Market and user research‣ Visual design‣ UI/Interaction design‣ IA‣ Choice of tools‣ Development
  21. 21. Follow guidelines‣ Design principles and best practices‣ Accessibility guidelines (add common sense)‣ Usability best practices‣ Web standards (and browser hacks!)
  22. 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. 23. Lets go back to thoseprinciples‣ Equitable ‣ Preventative‣ Flexible ‣ Tolerant‣ Simple and intuitive ‣ Effortless‣ Perceptible ‣ Accommodating‣ Informative ‣ Consistent
  24. 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. 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. 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. 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. 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. 29. http://www.flickr.com/photos/rickyromero/2672913333/
  30. 30. 3. Simple and intuitive -how?‣ Create prototypes as early as possible‣ Test!‣ Justify new features - dont just add them without thought
  31. 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. 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. 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. 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. 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. 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. 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. 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. 39. Ajax for instant feedback
  40. 40. 7. Tolerant‣ Follows on very closely from preventative‣ Indicate errors precisely‣ Be supportive‣ Build user confidence
  41. 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. 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. 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. 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. 45. 9. Accommodating - how?‣ Make your interfaces invisible and your interactions effortless‣ Make your interfaces adaptive with media queries and viewport
  46. 46. http://www.flickr.com/photos/keso/205413979/
  47. 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. 48. 10. Consistent - how?‣ Apply existing brand guidelines‣ Apply existing conventions‣ Use existing guidelines and best practices‣ Use web standards!
  49. 49. The BBC - greatconsistency
  50. 50. Code — cooooool!! http://www.flickr.com/photos/mafleen/3780072133/
  51. 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. 52. Keyboard accessibilitya:focus,
a:hover
{

...}
  53. 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. 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. 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. 56. Thanks! cmills@opera.com @chrisdavidmillshttp://www.slideshare.net/chrisdavidmills http://dev.opera.com
  57. 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/

×