Inclusive design: real accessibility for everyone

2,315 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
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,315
On SlideShare
0
From Embeds
0
Number of Embeds
81
Actions
Shares
0
Downloads
55
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • \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

    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/

    ×