Accessibility 101


Published on

Accessibility 101 - With particular reference to visual impairment

Published in: Technology, Health & Medicine
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Accessibility 101

  1. 1. Accessibility 101With particular reference tovisual impairmentBarry BriggsUser Experience ArchitectCode Computerlove04/03/2012
  2. 2. Accessibility != Blind1.  Visual impairment •  Blind, colour-blind2.  Audio impairment •  Deaf, hard of hearing3.  Mobility impairment •  Restricted or impaired movement of hands, head etc4.  Learning difficulties5.  Other mental health considerations •  See the Mental Capacity Act 2005 for a better explanation
  3. 3. That said…This presentation will focus on visual impairment
  4. 4. Visual Impairment The most common and the easiest to address
  5. 5. Colour–blindness
  6. 6. Colour blind•  It’s a Male gene thing – Women have gotten off lightly•  Different types of colour blindness, some more common than others•  Effects 8% of the male population•  Roughly 1 in 25 people looking at our websites
  7. 7. Google analytics Typical view From
  8. 8. Google analytics Orange and green look same What you typically see if you’re colour-blind From
  9. 9. Let’s look at that statistic again•  1 in 25 people looking at our websites are colour-blind•  Which means that last month, approximately: •  13,000 colour-blind people looked at Trans-Pennine Express •  11,000 colour-blind people looked at Travis Perkins •  5200 colour-blind people looked at Late Deals•  This is not a minor issue
  10. 10. TPE Colour-blind view
  11. 11. Travis Perkins Colour-blind view
  12. 12. Late Deals Colour-blind view
  13. 13. Some key take-outs•  Greens, reds, oranges and blues are virtually indistinguishable•  It’s not safe to rely on colour and contrast levels to distinguish content•  Whenever possible use shape as well as colour as a differentiator
  14. 14. iChat software From
  15. 15. iChat softwareWhat you typically see ifyou’re colour-blind From
  16. 16. iChat softwareWhat you typically see if Use shapes toyou’re colour-blind help differentiate From
  17. 17. Further reading on colour-blindness••••••
  18. 18. Blindness
  19. 19. Blindness•  1 in 5 people likely to have some form of visual accessibility issue•  Blind people look to buy stuff on internet just like everyone else •  Not always practical to go high street shopping •  They need and want to spend money like everyone else •  eCommerce in own home allows them to use their own assistive devices and shop at their own speed •  Estimated potential spend of £80m a year•  This is a big potential audience•  It’s also a big missed opportunity for eTailers failing to provide accessible browsing & purchasing options
  20. 20. Ignore at your peril•  Equalities act 2010 bans “unfair treatment of people because of protected characteristics they have” •  Age, disability, gender reassignment, marriage and civil partnership, pregnancy and maternity, race, religion or belief, sex, sexual orientation•  Disney class action lawsuit in USA •  Settled out of court so they didn’t have to fix the issues •  RNIB now suing them in the UK•  RNIB also suing BMI Baby•  Target sued in USA for about $10m
  21. 21. From
  22. 22. Screen readers•  Screen reader software “reads” aloud what’s on the screen•  JAWS is the most common screen reader •  75% market share •  Works on desktop applications and websites •  Has several “helper” features integrated into IE to make browsing easier•  However…
  23. 23. JAWS•  JAWS is expensive•  It’s a big investment/initial purchase•  The price puts people off updating What the hell???•  Lots of people still using older versions From
  24. 24. JAWS•  Version 7 •  was the first to work with Windows XP •  was the first version to receive mass adoption •  still has very large user base•  Version 13 is the latest •  works with Vista and Windows 7 •  can just about cope with very basic inline updates •  limited user base at present time
  25. 25. How do people use JAWS?•  Pages are scanned, not read1.  Page loads and screen reader reads out the <TITLE> tag •  Hence meaningful titles are critical2.  While they’re navigating people will use a Link List •  A popup window that lists all inks on a page3.  Once they think they are on right page people will use a List of Headings •  A popup that lists all the <H?> tags on a page, along with their heading level •  Think of it like a simplified “document outline”4.  Once an appropriate heading has been found, screen reader will read out the content under that heading•  Advanced users speed up the voice to make page scanning faster
  26. 26. JAWS Link list <a href=“#”>Link Text</a> From
  27. 27. JAWS Heading listHeading/Subheading Heading level eg: <H2> From
  28. 28. Common accessibility errors•  Text alternatives – A •  Use alt tags for significant/relevent images •  Not for spacer images! •  Intelligent use of, not over used otherwise its gibberish•  Form labels and input fields – A •  Form layouts require fieldsets and legends to make sense •  eg: radio buttons – lots of yes/no options & no connected question•  HTML Lang(uage) of page – A •  specify its English so screen readers get right pronunciations •  JAWS has automatic language detection – JAWS has an accent!•  Link/anchor text – A •  “click here” & “find out more” are evil – remember the link list? •  Anchor text should contain descriptive copy •  Eg: “More about our accommodation” •  Link “title” attributes clash with link text – link text is preferred
  29. 29. JAWS Link list What the hell??? From
  30. 30. More common accessibility errors•  Page titles – A •  First thing screen reader says and invaluable for orientation •  Should state page name, section name, and site name•  Tables for layouts rather than tabular data – A •  If it’s not tabular data, tables are bad, mmmmm, okay? •  Reader says "table with x columns and x rows” •  If you MUST display other content in a table add summaries to explain what the table is about – sets expectations re: jumbled content, or allows the user to skip past it completely•  Headings – AAA •  H1 and H2 quite common but not always used correctly •  Non-visually impaired users derive structure from colour and font size but visually impaired users need semantic mark-up •  Vital to give sense of structure to page
  31. 31. Some key take-outs•  If screen reader can’t see it, blind users can’t either•  Semantic mark-up, effective copywriting and well structured documents are vital •  Helps orientation, page scanning and content location •  Front-load paragraphs so can tell meaning from first few words •  Forms should use field sets and label tags to group questions and answers together semantically•  DOM updates not detected by most popular screen readers •  Screen Reader tech lags far behind standard browser tech•  AAA links to change font size are pointless •  Visually impaired users know how to change the font size!! •  Box ticking exercise •  Actually a hindrance – first thing screen readers says is “ay-ay-ay” – makes website sounds like a deranged Scouser
  32. 32. And some other interesting points•  “Skip to content” vs “Skip to navigation” •  Why should every page have a skip to content link? •  Why not make the content first and have a skip to navigation? •  Screen readers can bypass all this anyway and bring up a Link Lists•  Automatically playing videos drown out screen reader •  If videos are Flash screen reader cannot stop or mute the video •  If videos are HTML5 screen reader probably can’t display it (yet) •  Traps the user on the page as they cant hear the Link List to navigate off the page •  And imagine the further horror if the video loops indefinitely!!•  Flash sites and loading pages are the devil… •  Reader cannot detect any content - utter silence and no way off the page•  “dot dot dot” is a really annoying convention •  See “ay-ay-ay” L•  JAWS identifies itself as Internet Explorer •  Querying User Agent is pointless
  33. 33. The screen reader’s silence is deafening
  34. 34. The screen reader cannot And the video offers thebe heard over this video reader no way of stopping it
  35. 35. Challenges for us as an agency
  36. 36. Potentially easy fixes•  Content hierarchy, page layout & structure •  Meaningful page titles •  Relevant headings – even on the homepage •  Linear content-grouping so page can be scanned •  Sensible use of image alt tags •  Sensible use of link anchor text•  How do we make all this fool-proof so clients using a CMS can’t break all our carefully planned content?
  37. 37. The trickier issues•  Lack of triggers for DOM updates – how do we handle: •  Inline add to basket? •  Images & galleries in lightboxes? •  Login boxes as overlays? •  Smart/autocomplete search boxes •  Calendar & date picker controls•  How do we provide a rich, interactive and engaging experience for non-visually impaired users while still making it a serviceable and usable experience for visually impaired users?
  38. 38. The end Thanks for listening JA big thank you to Clare Davidson from SimpleUsability andBarry Hill for an inspired talk on Accessibility In Practice; toNorthern User Experience (Leeds chapter) for hosting theaforementioned talk; and to everyone who’s examples I havepilfered (with credits) in this presentation.