Accessibility in Responsive web design

8,842 views

Published on

A brief introduction on how accessibility can be incorporated into an responsive web site.

Because of the amount of useful links in the slides we have left the download option enabled to make it a little easier for you get access to them

Published in: Design

Accessibility in Responsive web design

  1. 1. Building Inclusive andResponsive websites Chris Bush UX Practice Lead - wearesigma.com @wearesigma / @suthen
  2. 2. GeekTweet#RWDa11yBest tweet will win a copy of“design meets disability”.If you don’t win it - buy it!
  3. 3. TOPICS• TYPES OF IMPAIRMENT• ACCESSIBLE DESIGN• ACCESSIBLE CODE• REVIEWING YOUR SITES
  4. 4. TYPES OF IMPAIRMENT
  5. 5. TYPES OF IMPAIRMENT Vision Hearing Ability to see, or process visual information Ability to hear, or process acoustic information› Motor Cognitive Ability in mentally demanding areas such as Ability to interact with a device reading, memory, attention, or complex accurately and quickly concepts or language Modified from the BBC GEL Accessibility guidelines
  6. 6. TYPES OF IMPAIRMENT – LONG TERM Vision Hearing Blindness, low vision & colour blindness Hearing loss› Motor Cognitive Dyspraxia, RSI, arthritis and cerebral palsy Downs syndrome, Aspergers and dyslexia Modified from the BBC GEL Accessibility guidelines
  7. 7. TYPES OF IMPAIRMENT – TEMPORARY Vision Hearing Forgot my glasses Watching a video in a noisy environment› Motor Cognitive Temporary injury such as a broken wrist Hangover!
  8. 8. START WITH DESIGN
  9. 9. DON’T PENALISE YOUR USERS The use …but the cases and content UI may be should not different… be.
  10. 10. THINK ABOUT INTERACTION Design hit areas to be finger friendly
  11. 11. THINK ABOUT INTERACTION Design hit areas to be input device friendly
  12. 12. THINK ABOUT COLOUR 2.7 million people in the UK are colour blind
  13. 13. CHECK COLOUR CONTRAST Photoshop to therescue, sort of. Other tools include Visolve and Sim Daltonism
  14. 14. CHECK COLOUR CONTRAST Anything missing? Not sure? Try the Juicy studio Contrast tester
  15. 15. DESIGN FOR READABILITY 10-15 words on a lineClear visual hierarchy Adequate line-heights (120-150%) A goodbackground contrast without flicker
  16. 16. SOLID FOUNDATIONS
  17. 17. ARIA The Accessible Rich Internet ApplicationsSuite, defines a way to make web content more accessible to people with disabilities. It especially helps with dynamic content and advanced user interfaces • Landmark roles • States and properties
  18. 18. ARIA: LANDMARK ROLES Quick <header role=“banner”> <div id=“search” role=“search”> navigation between <nav role="navigation"> known content <aside role= groups <div id=“main” role=“main”> “complimentary”> <footer role=“contentinfo”>
  19. 19. ARIA: LANDMARK ROLES <header role=“banner”> <div id=“search” role=“search”> Don’t over <nav role="navigation"> use them <aside role= <div id=“main” role=“main”> “complimentary”> No-one likes a chatty <footer role=“contentinfo”> screen reader
  20. 20. UNDERSTANDING ROLES Using ARIA in HTML.
  21. 21. ARIA: LANDMARK ROLES
  22. 22. ARIA: LANDMARK ROLES Banner
  23. 23. ARIA: LANDMARK ROLES Search
  24. 24. ARIA: LANDMARK ROLES Navigation
  25. 25. ARIA: LANDMARK ROLESWhat the screen reader says JAWS says: “Banner region start” and “Banner region end”. NVDA 2012.3 says: “Banner region start” at the beginning of the banner landmark. VoiceOver on IOS says: “Landmark start” and “Landmark end”. Does not say which landmark it is. Talkback on Android says : “Banner” at the beginning of the landmark but does not identify the end of the landmark.
  26. 26. ARIA: LANDMARK ROLESImproving the experience for mobile<navid=“popnav"aria-label=“Popular Navigation"role="navigation">Mobile iOS 6“Popular Navigation, Landmark start”Mixed support on older devices, soyou should include meaningful text withinlandmarks to help users identify thecontext.
  27. 27. AVOIDING VERBOSITYBAD EXAMPLE<div class="ottSidekickFeedLeadArticleWrapper "> <a id="ott_sidekick1_lead_article_image_link" href=“http://news.sky.com/story/1020776" class="Article" onclick="{removed}"> <img title="Autumn Statement: Osborne Tightens The Screw" alt="Autumn Statement: Osborne Tightens The Screw" src="-90x90.jpg"></a></div><div class="ottSidekickFeedLeadArticleContents"> <h4 class="hbx-lid"> <a href="http://news.sky.com/story/1020776" title="Autumn Statement: Osborne Tightens The Screw" onclick=“{removed}”>Autumn Statement: Osborne Tightens The ...</a> </h4> <p title="Chancellor George Osborne will warn there are no &quot;miracle cures&quot; as he admitsmore drastic action is needed to balance Britains books.">Chancellor George Osborne will warn there are no"miracle cures" as he admi...</p></div>
  28. 28. AVOIDING VERBOSITYGOOD EXAMPLE <h2 class=" secondary-story-header"> <a href="/news/uk-england-beds-bucks-herts-20603182" rel="published-1354669877163" class="story"> <img alt="Euromillions logo" src="http://news.bbcimg.co.uk/media/images/30185-1.jpg"> Deadline day for £64m lotto prize</a> </h2> <p>The highest lottery prize ever to remain unclaimed - nearly £64m - will go to good causes if the winner doesnot come forward by 23:00 GMT. </p>
  29. 29. CODE FOR SIMPLICITYLANDMARK ROLES BAD EXAMPLE<form id="search" method="get" action="/help/search.htm" role="search"> <label for="query" id="searchlabel" class="hidden">Search</label> <input type="text" id="query" name="query" class="searchinput" value="" placeholder=“Enter a search term”/> <input id="searchsubmit" name="searchsubmit" type="image" value="Search" src="/u-gofotzyp/search.gif" /></form>
  30. 30. WHERE DID MY ZOOM GO? Keep pinch- zoom enabled
  31. 31. CHECKING YOUR WORK
  32. 32. • Some great checklists available http://www.iheni.com/mobile-accessibility-tests/ http://www.w3.org/WAI/WCAG20/quickref/• Listen to your sites on screen readers (Try turning your monitor off)• Automated testers like achecker.ca Great learning device• Expert reviews RNIB – See it right Abilitynet Independent evaluators
  33. 33. RESOURCES
  34. 34. GREAT ACCESSIBILITY SITES• http://www.w3.org/WAI• http://webaim.org• http://achecker.ca/• http://www.bbc.co.uk/accessibility• http://www.abilitynet.org.uk/myway www.iheni.com• http://www.rnib.org.uk/professionals/webaccessibility/designbuild/P ages/design_build.aspx• http://usability.com.au/2008/09/accessible-forms-using-wcag-2-0ARIA guides• http://www.w3.org/WAI/intro/aria.php• http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html
  35. 35. COLOUR• http://juicystudio.com/services/luminositycontrastratio.php• http://www.ryobi-sol.co.jp/visolve/en/• www.colourblindawareness.org• www.24ways.org/2012/colour-accessibility• www.wearecolorblind.com• http://michelf.ca/projects/sim-daltonism/READABILITY• http://informationarchitects.net/blog/100e2r/• http://www.plainenglish.co.uk/free-guides.html• http://webaim.org/techniques/writing/
  36. 36. THANKS!chris.bush@sigma.sewearesigma.com@wearesigma / @suthen

×