際際滷

際際滷Share a Scribd company logo
Bristol ID&D
3 June 2019
Jon Gibbins .j { } Dotjay Ltd
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Photo credits: LG, Gould, Larson, DiC, Apple
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Photo credit: Jon Gibbins with thanks to Drake Music Project
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
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
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Dont you mean sympathy?
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Most of us have a connection to
accessibility
Ageing
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
is about understanding people
is about understanding people
and the barriers that they face
is about understanding disabled people
and the barriers that they face
is a human right
is just good design
4 main disability types
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
 Speech output (screen readers)
 Braille output
 Magnification
 Voice input
 Switch access
 Captions
 Subtitles
 Audio description
 Sign language interpretation
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Mobile experiences
Why mobile accessibility?
Mobile accessibility features
2 main interaction methods



Interaction methods
1. Explore by touch



Interaction methods
2. Gesture navigation
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
you do
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
CAPS
 Harder to read (dyslexia)
 Capitals can cause different reading by screen
readers, even shouting
Emphasis
Skip to content vs Skip to main content
con tent vs con tent
Hyphenation
iOS
enewsletter ehneyewsleta = e njusletr (sounds Russian)
e-newsletter ee newsletter = inuzletr (correct)
Android
enewsletter eh newsletter = enuzletr (wrong e
sound)
e-newsletter ee newsletter = inuzletr (correct)
Compound words
Compound words are commonplace
 Homepage
 Sitemap
 "Signup" announced as "signup" in VoiceOver iOS
Spaces and hyphens are your friends.
Read / Reading
Reeding vs Redding
<h2>Get reading</h2> = Get Redding
<a href="#">Read more</a> = Red more
Date format
ambiguity, clarity (e.g. US versus UK)
01 03 2015
could be 1st of March
or 3rd of January
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)
It really neednt be






Tips




Next steps
Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)




Thanks!
67

 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

More Related Content

Experiencing digital accessibility using your smartphone (Bristol ID&D, June 2019)

Editor's Notes

  • #3: This is relatively new talk based on some old ideas. Ive been thinking about this for around 5 years now. It encapsulates my take on accessibility. 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 dont 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: Whats 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 (Equality Act, EN 301 549, ADA, 508). Im not going to talk about compliance or the law today, unless you ask me to. The benefits. Proven Return On Investment You may have heard that the Internets 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. Theres 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. Its such a hassle. Why should I do it? For me: Its a challenge. Its on a par with testing, security and documentation. You dont have to do it, but you should. I think its cool! Most importantly, Ive seen what accessibility can do. Im going to kick off with why I do accessibility
  • #4: Jons earliest experience of geek Smart watches / phones: Jon first saw these in a book in the 80s and thought, Woah, thats 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.
  • #5: Jons first experience of accessibility a talking clock used by his blind mother.
  • #6: 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.
  • #8: Why is getting your own experience important?
  • #9: 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/
  • #10: 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
  • #11: You dont know what its like unless you experience it for yourself. You can get an idea of what it's like from friends or family, but you don't know it until you become a parent yourself. Experiencing assistive technology for yourself or taking part in disability simulations wont tell you what its like to be disabled. You cannot simulate disability effectively enough to understand what it is like to live with any disability.
  • #12: Robin Eames on Twitter, September 2018: https://twitter.com/robinmarceline/status/1039311147738906624 https://twitter.com/robinmarceline/status/1039321725756891136
  • #15: Well, yes, but no Empathy = I feel with you = youre in a persons head and understand how they feel and what they think. Sympathy = I feel for you = the acknowledgement of the suffering of others. I choose to talk about empathy because disabled people don't want sympathy. They want equality. We build better through exercising empathy rather than sympathy. Empathy requires much more effort in order to achieve better understanding. Some say that it is impossible, or even wrong, to aim for empathy. Using an accessibility feature on your smartphone is going to build sympathy. But what Im suggesting we should all do is going further to achieve better understanding. Don Norman, May 2019 (Design thinker and researcher, co-founder of Nielsen Norman Group) https://theblog.adobe.com/why-i-dont-believe-in-empathic-design-don-norman/ https://www.nngroup.com/articles/sympathy-vs-empathy-ux/ https://www.nngroup.com/articles/empathy-mapping/
  • #16: Beware of lies. We want to build for everyone. But you cannot understand everyone. I don't believe there is such as thing as fully accessible, so I try to avoid using that phrase. It's no easy task making something accessible to every person and accommodate the way they interact with the world. You can only do your best to make things as accessible as you can.
  • #17: Accessibility is not all about code or compliance; its about people. Experiencing digital accessibility helps *build empathy* with your users, 15-20% of which have some form of disability. [15% worldwide statistic from WHO World report on disability, 2011; 20% statistic is for England & Wales, 2011] In 2016, around 75% of disabled people in the UK had used the internet. In 2017, 78%. In 2018, 80%. Numbers are increasing, especially with cheaper means to access using mobile devices. Difficult to estimate regular users. Around 13% of the UK internet population have a disability. [Click-Away Pound Survey 2016] More: http://www.who.int/disabilities/world_report/2011/report/en/ https://www.ons.gov.uk/peoplepopulationandcommunity/healthandsocialcare/disability/articles/nearlyoneinfivepeoplehadsomeformofdisabilityinenglandandwales/2015-07-13 https://www.ons.gov.uk/businessindustryandtrade/itandinternetindustry/bulletins/internetusers/2016#25-of-disabled-adults-had-never-used-the-internet https://www.ons.gov.uk/businessindustryandtrade/itandinternetindustry/bulletins/internetusers/2018 http://www.clickawaypound.com/cap16finalreport.html http://fra.europa.eu/en/theme/people-disabilities
  • #18: Out of interest, do we have people with a disability here today? Jon wears glasses Jons mum went blind Jons dad has Alzheimers disease Jon has friends who are blind, deaf, people who are wheelchair users, people with cerebral palsy
  • #19: I dont know about you, but everyone I know is ageing. As we get older, we are likely to experience multiple disabilities of different types.
  • #20: 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?
  • #23: Inclusion and accessibility is about people, not laws or even just code.
  • #24: Yes, accessibility is a human right
  • #25: For me, accessibility is as important as security, or performance, or documenting your code.
  • #26: Vision blind, partially sighted Hearing Deaf (capital D), deaf, hearing loss Deaf = Deaf community sign language more likely to be first language (BSL instead of English, for example) Motor limited movement or control Cognitive / neurological dyslexic, autistic
  • #27: Disabled people dont 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
  • #28: 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.
  • #30: 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
  • #31: Deaf or hard of hearing Requires captions for audio content
  • #34: iOS mainly, but all this applies to Android now, and to some extent on other platforms too. How many smartphones in pockets? How many iOS? How many Android? Others? 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 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 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 thats useful to all users! Apples Siri voice recognition Google Voices voicemail transcription Custom vibrations (iPhone setting and Android app)
  • #35: 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
  • #36: Modern mobile devices have a wide variety of accessibility features built in, particularly iOS and Android. Lets just take a look at screen readers.
  • #38: Well 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
  • #39: 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
  • #42: iOS Sim Daltonism: https://github.com/michelf/sim-daltonism Android Chromatic Vision Simulator: https://play.google.com/store/apps/details?id=asada0.android.cvsimulator&hl=en_GB Example red-green images: https://i0.wp.com/metro.co.uk/wp-content/uploads/2014/09/1000x665291.jpg?quality=90&strip=all&zoom=1&resize=644%2C428&ssl=1 https://ichef.bbci.co.uk/news/624/cpsprodpb/8D31/production/_102454163_russia-saudi.jpg https://1.bp.blogspot.com/-JJZRuF3G6yA/Vz7o9Jj-GZI/AAAAAAAAAFM/0yFqdffq1y8_HkKK4O7PkhhRwwcceEymgCLcB/s1600/Liverpool-squad-640x400.jpg
  • #43: 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
  • #44: Dont just be the accessibility guy/gal Shared responsibility Raise awareness Teach Learn
  • #45: 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
  • #46: 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
  • #47: You know your work better than I do. You understand the context better than I do. You are better placed to find solutions. I can guide you, but its better if you can teach yourself.
  • #48: Solutions are contextual accessibility is contextual. Context is King, especially on mobile. Its not necessarily about what you know; its about knowing what to look up and where.
  • #49: Another reason that experiencing accessibility is important. It helps you better understand the context. Just look at images, which may: Be purely decorative Be a photo Be a map Be a button Convey simple information Convey complex information
  • #50: 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. Heres an example of an incoherent. Photo Just because you add something accessible, doesnt mean that it makes sense. Design stage is important for establishing context and making sense of the answers before they become problems.
  • #52: In short, plenty. Guidelines are great, but The guidelines dont tell you everything. There are some fun things that can go wrong.
  • #53: Ive seen plenty of examples on the Web where following guidelines has lead to poor accessibility due to lack of understanding: Tabindex WAI-ARIA
  • #54: The guidelines dont tell you everything Interesting things can happen with content. Here are just a few quick examples.
  • #55: 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.
  • #59: Many compound words have become so commonplace that they have become acceptable in day-to-day use: bookmark commonplace grandfather newspaper weekend website
  • #62: So, accessibility is contextual. How do we best build for accessibility then?
  • #64: 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 Include disabled people in personas Different disabilities, different needs Older people (often first time users) Plan to test with similar people
  • #66: Questions?