Successfully reported this slideshow.
Your SlideShare is downloading. ×

Experiencing digital accessibility (FEL 2018)

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 88 Ad

Experiencing digital accessibility (FEL 2018)

Download to read offline

If empathy is about understanding people, accessibility is about understanding people and the barriers that they face. Getting your own experience of accessibility helps you to put yourself in the shoes of others and keep accessibility in mind when building and testing your sites and applications.

In this talk, Jon Gibbins gives a practical introduction to accessibility for front end designers and developers. He will walk through some typical accessibility barriers and situations where an accessible user experience does not necessarily come from simply adhering to accessibility guidelines. Find out how you can easily experience accessibility for yourself using something you likely have in your pocket – a smartphone. Leave with some tips under your belt and a grasp of some technical fundamentals that are often the missing piece of the puzzle for developers' understanding of accessibility.

If empathy is about understanding people, accessibility is about understanding people and the barriers that they face. Getting your own experience of accessibility helps you to put yourself in the shoes of others and keep accessibility in mind when building and testing your sites and applications.

In this talk, Jon Gibbins gives a practical introduction to accessibility for front end designers and developers. He will walk through some typical accessibility barriers and situations where an accessible user experience does not necessarily come from simply adhering to accessibility guidelines. Find out how you can easily experience accessibility for yourself using something you likely have in your pocket – a smartphone. Leave with some tips under your belt and a grasp of some technical fundamentals that are often the missing piece of the puzzle for developers' understanding of accessibility.

Advertisement
Advertisement

More Related Content

Similar to Experiencing digital accessibility (FEL 2018) (20)

Advertisement

Recently uploaded (20)

Experiencing digital accessibility (FEL 2018)

  1. 1. Front Endgineers London 19 September 2018 Jon Gibbins
  2. 2. Photo credits: LG, Gould, Larson, DiC, Apple
  3. 3. Photo credit: Jon Gibbins with thanks to Drake Music Project
  4. 4. “Getting your own experience of accessibility helps you to put yourself in the shoes of others and keep accessibility in mind when building and testing your sites and applications” – Jon Gibbins, Nov 2007
  5. 5. Most of us have a connection to accessibility
  6. 6. Mobile experiences
  7. 7. Ageing
  8. 8. is about understanding people
  9. 9. is about understanding people and the barriers that they face
  10. 10. is about understanding disabled people and the barriers that they face
  11. 11. …is a human right
  12. 12. …is just good design
  13. 13. 4 main disability types
  14. 14. blind, partially sighted
  15. 15. Deaf, deaf, hard of hearing
  16. 16. limited movement or control
  17. 17. dyslexia, autism…
  18. 18. • Speech output (screen readers) • Braille output • Magnification • Voice input • Switch access
  19. 19. • Captions • Subtitles • Audio description • Sign language interpretation
  20. 20. Text alternatives
  21. 21. • • •
  22. 22.
  23. 23. 45
  24. 24. 46
  25. 25. Writing style • Make your point clear first then explain • One point per paragraph • Use short line lengths wherever possible • Helps people who are deaf, have dyslexia, dementia or other cognitive and learning disabilities
  26. 26. CAPS • Harder to read (dyslexia) • Shouting, caps can cause different reading by screen readers
  27. 27. Emphasis “Skip to content” vs “Skip to main content” “con tent” vs “con tent”
  28. 28. Hyphenation iOS enewsletter “ehneyewsleta” = ˌe njuːsletər (sounds Russian) e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct) Android enewsletter “eh newsletter” = ˌenuːzˌletər (wrong “e” sound) e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct)
  29. 29. Compound words Compound words are commonplace • Homepage • Sitemap • "Signup" announced as "sig–nup" in VoiceOver iOS Spaces and hyphens are your friends.
  30. 30. Read / Reading “Reeding” vs “Redding” <h2>Get reading</h2> = “Get Redding” <a href="#">Read more</a> = “Red more”
  31. 31. Date format ambiguity, clarity (e.g. US versus UK) 01 03 2015 could be “1st of March” …or “3rd of January”
  32. 32. Date format "2013" = “twenty thirteen inches” “Date expected in dd/mm/yyyy format” “millimetres” in some speech engines
  33. 33. Long numbers Phone numbers Company numbers <span> trick <span>0123</span>4567 CSS 3 speak-as: digits Very poor support but should improve
  34. 34. Why mobile accessibility?
  35. 35. Mobile accessibility features
  36. 36. 2 main interaction methods
  37. 37. • • • Interaction methods 1. Explore by touch
  38. 38. • • • Interaction methods 2. Gesture navigation
  39. 39. • • • • •
  40. 40. …you do
  41. 41. • • • • • •
  42. 42. …It really needn’t be
  43. 43. • • • Tips
  44. 44. • • • • Next steps
  45. 45. • • • • Thanks!
  46. 46. 87
  47. 47. • • https://www.w3.org/TR/WCAG21/ • • https://www.w3.org/WAI/WCAG21/Techniques/ • • https://www.w3.org/WAI/WCAG21/Understanding/ • • https://www.w3.org/WAI/WCAG21/Understanding/conf ormance • • https://www.w3.org/WAI/WCAG21/quickref/ References

Editor's Notes

  • Good evening, everyone.
  • This is relatively new talk based on some old ideas.
    I’ve been thinking about this for around 5 years now.
    It encapsulates my take on accessibility.
    Please excuse my hearing… and my tiredness!
    Digital accessibility consultant on web and mobile
    Training, testing, development, UX, mentoring, policy and organisational change
    Self-taught web developer since 1999
    Digital accessibility since 2003
    Mobile specialist since 2012
    Passionate about accessibility – why?
    I don’t have a disability as such (wears glasses, APD, bad back)
    Let me tell you the story of my journey to working with accessibility in mind

    Short version: “What’s accessibility all about for me?”

    Many accessibility presentations will kick off with an explanation of what accessibility is all about, why you should be thinking about it.
    Corporate Social Responsibility.
    The legal aspects (ADA, 508).
    The benefits.
    Proven Return On Investment
    You may have heard that the Internet’s biggest blind user is Google.
    Accessibility is good for SEO.
    Accessibility can save you time and helps make your applications more robust. No, really! Adding accessibility into applications makes automated testing easy.
    There’s a good case study for the business case from Legal & General (http://www.w3.org/WAI/bcase/legal-and-general-case-study)

    Developers:
    Often see accessibility as having to jump through hoops for little gain.
    It’s such a hassle.
    Why should I do it?
    For me:
    It’s a challenge.
    It’s on a par with testing, security and documentation. You don’t have to do it, but you should.
    I think it’s cool!
    Most importantly, I’ve seen what accessibility can do.
    I’m going to kick off with why I do accessibility…
  • Jon’s earliest experience of “geek”

    Smart watches / phones:
    Jon first saw these in a book in the 80s and thought, “Woah, that’s pretty cool!”

    Technology is cool! But also enabling!
    LG watch phone: 1.3 inch full touch screen, 3G+ connectivity, video call capabilities, Voice recognition software, Bluetooth v2.1 with A2DP, MP3 player.
  • Jon’s first experience of accessibility – a talking clock used by his blind mother.
  • Jon has a passion for music. He plays guitar, sings, writes songs…
    At university, he got to work with disabled musicians to develop accessible music composition and performance software.

    The point is that we need to think outside the box a little.
    We need to find ways to empathise.
    And that’s what this experience with disabled musicians did.
  • November 2007
    Started assembling my accessibility video tour.
    Needs updating, but still helpful to understand how the technology is used.
    https://lab.dotjay.com/notes/assistive-technology/videos/
  • Why is getting your own experience important?
  • Another way to talk about accessibility is through analogies. I like analogies.
    Any parents in the audience?

    More on analogies:
    https://dotjay.com/2007/11/analogies-for-accessibility
  • You don’t know what it’s like unless you experience it for yourself.
    You can get an idea of what it's like from friends, but you don't know it until you become a parent yourself.
    Experiencing assistive technology for yourself or taking part in disability simulations won’t tell you what it’s like to be disabled.
    You cannot simulate disability effectively enough to understand what it is like to live with any disability.
  • Robin Eames on Twitter last week:
    https://twitter.com/robinmarceline/status/1039311147738906624
    https://twitter.com/robinmarceline/status/1039321725756891136
  • Experiencing digital accessibility helps *build empathy* with your users, 20% of which have some form of disability.
    [Statistic is for England & Wales, 2011]

    Accessibility is not all about code or compliance; it’s about people.

  • Out of interest, do we have people with a disability here today?

    Jon wears glasses
    Jon’s mum went blind
    Jon’s dad has Alzheimer’s disease
    Jon has friends who are deaf
  • How many smart phones in pockets?
    How many iOS
    How many Android?
    Others?

    Of particular interest to Jon… mobile accessibility:
    Small screens
    40-pixel (7mm+) finger is big on small targets
    Can be hard to reach some parts of the screen
    Small text sizes is like having low vision
    Small input devices
    Tiny keys
    Environment (hands-free, noise, rain)
    Eyes-free usage, e.g. in car, is like being blind

    More on mobile later.
  • I don’t know about you, but everyone I know is ageing.
    As we get older, we are likely to experience multiple disabilities of different types.
  • Who can think of their own story about accessibility?

    I like to get good balance and something for everyone.

    What roles do we have in the room?
    How many developers? How many testers?
    Who is not technical?

    Who has some knowledge of accessibility?
    Who has used a mobile screen reader?
    WCAG?
  • I’m not going to talk about compliance or the law today, unless you ask me to.
    Inclusion and accessibility is about people, not laws or even just code.
  • Important!
    For me, accessibility is as important as security, or performance, or documenting your code.
  • Who are disabled people?
  • Blind
    Screen reader users
    Need text equivalents for everything
    Keyboard access is essential
    Page structure is really important
    https://youtube.com/watch?v=L962p6fzF7Y

    Partially sighted
    Need to be able to control text size
    Contrast must be good
    Large areas of white space can be a nuisance
  • Hearing loss
    Deaf = Deaf community ∴ sign language more likely to be first language (BSL instead of English, for example)
    Need visual equivalents for any audio
  • Spinal injury such as paraplegia, quadriplegia
    Cerebral palsy
    Parkinson’s disease

    Mobility impaired
    Small targets can be difficult to use
    Might not be able to use a mouse
    May not even be able to use a keyboard
    https://youtube.com/watch?v=cSSgndQ5mVs
  • Cognitively impaired
    Remove distractions
    Break content up into sections
    Use clear fonts
    Do not justify text
  • Disabled people don’t always fall neatly into the 4 main disability types
    People have diverse needs
    Equally, people may use a diverse range of access tech and settings
    Older users, for example, could fall into any of the above groupings (limited dexterity, hearing and vision)

    Ageing
    We are all subject to ageing
    Spans various disabilities and user groups
    Often first-time users
    Note: Older people, like young children, find primary solid color easier to see and draw meaning from than pastel colors, etc.

    Hidden disabilities
    Often, we have images of people with extreme disabilities in mind (totally blind, amputees, wheelchair users, totally deaf, etc.)
    Many of us have mild disabilities (e.g. people who wear glasses) or hidden disabilities
    Dyslexia
    Chronic fatigue / pain (fibromyalgia)
    Epilepsy
    Photo sensitivity

    Temporary disability
    Broken bones, e.g. someone with a broken arm cannot use a mouse.
    Repetitive strain injury
    Tiredness
  • Situational limitation
    Hands-free while driving.
    Hearing a phone call in noisy environments.
    Touch screen devices in bright light or wet weather.
    Small keyboards require dexterity.
    Notice the difference of “limitation” as opposed to “disability” (https://www.w3.org/WAI/EO/wiki/Situational_terminology)
    Terms like “device disabled” or “situational disability” dilutes the definition of disability and accessibility.

    Cultural inclusion
    Language; not everyone understands English.
    Colours have different meanings or associations all over the world. Red is often associated with stop, errors, or passion in Western cultures. In China, red can relate to celebration or good luck.
    Even shape and iconography

    Technology
    Particular software and hardware requirements or preferences
    User requirements can be diverse.
    Technology issues include user preference, for a particular hardware feature, for example. You cannot account for user preference, you can only build for flexibility.
    Mobile users can be limited by data allowances.
  • Vision impairment
    Uses a screen reader or screen magnifier
    Physical impairment
    Only use a keyboard, may use voice recognition software and/or switch access
    Equally, people may use a diverse range of different access technology and settings
  • Deaf or hard of hearing
    Requires captions for audio content
  • Let’s look at a simple example, just to make a point.

    Text alternatives provide equivalent information for users who cannot access the information in the content (image)

    The problem: people without vision cannot perceive content without text
    Screen reader users
    Text browsers
    Search engines
    Low bandwidth users

  • Misconception: “I must always add alternative text”
  • “Fell logo jiff”
  • Note: Decorative and redundant images may also be presented through CSS – no alternative text needed.
    Use the simple alternative text decision tree
  • Another reason that experiencing accessibility is important.
    It helps you better understand the context.
  • Experience is the first step towards understanding.
    Without experience, poor choices are made.
    Without understanding, things you design or build may be inappropriate or incoherent.
    Here’s an example of an incoherent.

    Photo
    Just because you add something “accessible”, doesn’t mean that it makes sense.
    Design stage is important for establishing context and making sense of the answers before they become problems.
  • In short, plenty.
    The guidelines don’t tell you everything.
    There are some fun things that can go wrong.
  • Here’s another example of where someone added something to make life easier for users, but ended up causing havoc.

    Keyboard access and focus:
    Logical order is generally left to right, top to bottom
    Adding tabindex values of >0 can cause strange focus order
    Generally best to let the order of elements in the source code determine the focus order
  • The guidelines don’t tell you everything…
  • Use short line lengths: seven to ten words per line (WCAG 80 characters long)
    Considerations for deaf people
    WCAG covers subtitles and captioning, and even sign language
    BUT must realise that for members of the Deaf community, English (or any "native" language) is a second language.
    Techniques for the The Cognitive and Learning Disabilities Accessibility Task Force (COGA)
    See W3C COGA Techniques (Working Draft)
  • We have language selection in WCAG, but what about pronunciation?
    Something that often gets missed is the text itself – the words we use.
    Clear text is essential to providing good user experiences for all users, but especially for users of assistive technology such as screen readers.
    Using semantic markup helps
    But screen readers can still get things wrong

    Notes:
    Screen reader software takes text found on screen – on a website, for example – and tries to create synthetic speech from it to help people understand what's on the screen. Think of Stephen Hawking's speech synthesizer (http://www.hawking.org.uk/the-computer.html).
    Problems arise when the software can't quite figure out what is meant by the text it finds.
    Certain text does not result in clearly understandable announcements from screen readers. While not a requirement under WCAG 2.0, these things should be considered for the best user experience for people who use assistive technologies.
    Not just an issue for screenreader users, but also people with dyslexia.
  • Many compound words have become so commonplace that they have become acceptable in day-to-day use:
    bookmark
    grandfather
    newspaper
    weekend
    website
  • An interesting thing to note in VoiceOver: it sometimes reads numbers strangely.
  • So, accessibility is contextual.
    How do we best build for accessibility then?!
  • Why am I picking out mobile accessibility here?
    Easily available – iOS and (most) Android devices
    Quick to learn
    Good way to get experience of AT
    Great for quick testing on actual AT

    “Mainstream” features with accessibility benefits
    SMS
    Video calls
    Voice assistants, such as Siri, Cortana, etc.

    FaceTime used by deaf people
    Custom vibrations as ringtone equivalents
    Speeches given using iPad with Proloquo
    HueVue app that helps color blind people identify colors
    Braille:
    V-B-Reader app (Android) that enables Braille to be read using vibrating touch screens
    Touch-screen Braille writer
    Innovative assistive technology that’s useful to all users!
    Apple’s Siri voice recognition
    Google Voice’s voicemail transcription
    Custom vibrations (iPhone setting and Android app)

  • Shared experiences comparable to temporary disability
    in the car (blind)
    at concerts (hard of hearing)
    small text (low vision)
    “fat fingers” on small screens / keyboards (hand tremors)
    broken bones (crutches)
    http://www.w3.org/WAI/mobile/experiences

    Opportunity
    For users
    Cheaper technology
    Easier to learn
    Easier to access services
    For business
    Reaching as wide an audience as possible
    Reaching untapped spending power
  • Modern mobile devices have a wide variety of accessibility features built in, particularly iOS and Android.
    Let’s just take a look at screen readers.
  • We’ll look at “explore by touch” first; gesture navigation is explained in the next slide. Also, more general notes about these interaction methods are in the notes on the next slide.
    Explore by touch:
    is spatial
    requires users to become aware of the layout of a page/screen
    can be tedious for general use and things can be missed by users
    but is by far the best way to interact with on-screen keyboards and is a bit like touch typing
  • Focus: Slightly different concept on mobile than on desktop.
    Gesture navigation:
    is sequential, typically following the reading order of a page/screen
    allows users to interact with one element of a page/screen at a time, similar to how you interact with the keyboard on desktop applications
    uses a virtual focus cursor, which is roughly equivalent to keyboard focus and tabbing around an interface
    often makes more sense to users (provided reading order makes sense) and things are less likely to be missed
    Both of these methods are now used in iOS and Android
    Both methods available in iOS since iPhone OS 3 was released with the iPhone 3GS in June 2009
    Android TalkBack Explore by Touch mode available since Android 4.0 (Ice Cream Sandwich) in October 2011
    Android TalkBack Gesture mode available since Android 4.1 (Jelly Bean) in June 2012
    Gesture navigation on Android does not behave in exactly the same way as VoiceOver on iOS, but it is similar
    These interaction methods are becoming a de facto standard on mobile devices
  • We know what assistive technology is, but how does it work?
  • Accessibility APIs
    Often the missing piece of the puzzle for developers' understanding of accessibility.
    Present user interfaces as information rather than a purely graphical medium, translating an application’s user interface into information that assistive technology can understand
    Allow an application’s user interface to be changed by the assistive technology
    Provide a common vocabulary we can use when talking about accessibility
  • Accessible object properties provide information which allows multi-modal access to content.
    Name, role, and state are important properties to be aware of.
    Accessible Events inform assistive tech about changes to the otherwise static DOM-based representation. For example, virtual buffer in JAWS.
  • Accessible object properties provide information which allows multi-modal access to content.
    Name, role, and state are important properties to be aware of.
    Accessible Events inform assistive tech about changes to the otherwise static DOM-based representation. For example, virtual buffer in JAWS.
  • role: check box
    name: Open new windows in a new tab instead
    state: checked
  • An accessible name is required and identifies an object. It is short and does not necessarily describe the object.
  • So, why isn't this the normal approach to accessibility?
    I think disability is difficult for some people to think or talk about.
    People may feel uncomfortable.
    I think this is down to poor understanding, social stigmas, lack of experience.
    But there are more problems at play…
  • Don’t just be the accessibility guy/gal
    Shared responsibility
    Raise awareness
    Teach
    Learn
  • Think about accessibility as early as possible
    Bake it into your process, wireframes, etc.
    Fix accessibility before it hits the screens
    Documenting accessibility as you go will help future iterations
    Accessibility more likely to:
    get baked into prototypes
    persist through development
    make it into production at an acceptable level
  • Accessibility in continuous integration: code linting, checks as part of release procedures, etc.
    BS 8878
    Not a set of development guidelines
    Project management roadmap for ensuring that web products are built in an accessible way
  • Solutions are contextual – accessibility is contextual. Context is King, especially on mobile.
    It’s not necessarily about what you know; it’s about knowing what to look up and where.
  • Include disabled people in personas
    Different disabilities, different needs
    Older people (often first time users)
    Plan to test with similar people

    Annotate
    Fix accessibility before it hits the screens
    Documenting accessibility as you go will help future iterations
    Annotate wireframes with accessibility detail
    Show structure, headings, labels, order
    Headings
    Focus order
    Grouping
    Structure
    Colour contrast
  • Questions?

×