Contents: Why mobile accessibility is important for everyone How has legislation effected accessibility on mobile WCAG 2.1 Built-in accessibility features on mobile Mobile accessibility downfalls: -Navigation -Layout -Providing use of context Examples of common accessibility issues

1. Breakfast Briefing
Mobile Accessibility
1
Keith Allan
Harjit Dhanda

2. @uservision
Agenda
2
„ Introduction
„ About us
„ Why mobile accessibility is important for everyone
„ How has legislation effected accessibility on mobile
„ WCAG 2.1
„ Built-in accessibility features on mobile
„ Mobile accessibility downfalls
„ Navigation
„ Layout
„ Providing use of context
„ Examples of common accessibility issues
„ WCAG 2.1 success criteria issues

3. @uservision
About us
3
Keith Allan Harjit Dhanda

4. @uservision 4
Why is mobile accessibility
important for everyone?

5. @uservision
Impaired vision
Blindness, low vision, colour blindness
Deafness or impaired hearing
Deaf and hard of hearing
Motor difficulties
Inability to use a mouse, limited motor control
Cognitive impairments or learning disabilities
Learning disability, distractibility, dyslexia
Making the web accessible for all
Making a mobile site or
app accessible means
making sure it can be used
by as many people as
possible. This includes
those with:

6. @uservision
Mobile Vs Desktop
6Source: Comscore

7. @uservision
Mobile Usage
7

8. @uservision
Mobile Usage
8

9. @uservision
Inclusive Design Principles
Persona Spectrum
We use the Persona Spectrum to understand related mismatches and motivations across a spectrum
of permanent, temporary, and situational scenarios.

10. @uservision
Inclusive Design Principles
Different people benefit
In designing for someone with a permanent disability, someone with a situational limitation
can also benefit.

11. @uservision
£294 bn
Spending power of
disabled people
15%
Internet users
have access needs
Benefits of mobile accessibility

12. @uservision 12
Legislation and mobile accessibility

13. @uservision
How has legislation effected Accessibility?
Equality Act 2010
13
Anti-discrimination
legislation for UK
It includes all of
society and not just
disabled people
Service providers
need to be proactive
Changes are made based on what is termed as “Reasonable Adjustments”

14. @uservision
EU Accessibility Legislation
14
This includes health, security, councils,
government agencies and education.
Aims to bring all public sector
websites and apps up to an
accessible standard
This has transposed into UK Law as
The Public Sector Bodies (Websites
and Mobile Applications)
Accessibility Regulations 2018

15. @uservision
Accessibility Regulations in the UK
Public Sector Bodies (Websites and Mobile Applications) (No. 2)
Accessibility Regulations 2018
All public sector organisations have a legal duty to make sure their
websites and mobile meet accessibility requirements by
„ September 2019 - New websites
„ September 2020 - Existing websites
„ 23rd June 2021 - Mobile applications
Comply with WCAG 2.1 Level AA
Only applies to mobile applications downloaded onto your device
15

16. @uservision
Accessibility Statement
16
Accessibility statements needs to be available on the website or
alongside other information when downloading the mobile app
Public sector bodies must provide an accessibility statement detailing
the accessibility of the website or mobile app
The accessibility statement of the website must sit on the organisation's
website

17. @uservision
Apps that will be affected by the regulations (example)
17

18. @uservision
Web Content Accessibility Guidelines (WCAG)
WCAG 2.1 and mobile accessibility
„ WCAG- de-facto standard for web accessibility for 21 years
„ Designed to be technology agnostic
„ Currently on WCAG 2.1 (soon to update to 2.2)
„ Three levels of compliance - Level A, Level AA and Level AAA.
„ The guidelines state that websites or mobile apps can be made more accessible by using the
POUR (Perceivable, Operable, Understandable and Robust) principles.
18

19. @uservision
Web Content Accessibility Guidelines – WCAG 2.1
Do I know
something exists
PPerceivable
Can I Interact
with it?
OOperable
Do I know what it
means and act on
it?
UUnderstandable
Is the code clean and
everything is assigned
values, roles and names
RRobust

20. @uservision 20
Timeline
Mobile Tech &
Accessibility
Standards &
Legislation

21. @uservision 22
Built-in accessibility features

22. @uservision
Accessibility
23

23. @uservision
Built in screen readers for mobile
24
VoiceOver on iOS
TalkBack on Android

24. @uservision
Basic gestures for screen readers on mobile
25
Explore by touch- Screen reader announces each
element as you drag your finger over the screen
Swipe right to move focus to the next element
Swipe left to move focus to the previous element
Double tap to interact with an element (link,
button, interactive controls)

25. @uservision 26
• Layout/Design
• Navigation
• Providing use of context
Common mobile accessibility downfalls:

26. @uservision 27
Layout

27. @uservision
Colour contrast
WCAG 1.4.3 Level AA - Contrast (Minimum)
28
Websites Apps

28. @uservision
Alternative Text
WCAG 1.1.1 Level A - Non-text Content
29
`<td>
<img alt="" style="height: 18px;
width: 19px;"
src="/~/media/images/table/table-
tick-
trnsp.gif?h=18&amp;w=19&amp;la
=en" width="19" height="18"><br>
</td>`
`alt="Included"`
`alt="not Included"`
Websites Apps

29. @uservision
Responsive design
WCAG 1.4.10 Level AA - Reflow
30
iPadiPhone
Websites Apps

30. @uservision
Responsive design
31
WCAG 1.4.10 Level AA - Reflow
Websites Apps

31. @uservision 32
Navigation

32. @uservision
Skip to content links
WCAG 2.4.1 Level A - Bypass blocks
Help users skip over repeated blocks on content
Link needs to be made visible when it receives
'keyboard' focus.
33
Websites

33. @uservision
Visible focus
WCAG 2.4.7 Level AA - Focus Visible
34
iPhoneAndroid
Websites Apps

34. @uservision
Access all elements by gesture controls
WCAG 2.1.1 Level AA - Keyboard
Users need to be able to access all interactive
elements on the page.
Access all elements when assistive technology is
activated
iPhone and iPad are both supported by mouse and
keyboard input
35
Websites Apps

35. @uservision
Access all elements by gesture controls
36
Custom UI controls
Provide another mechanism for
user interaction
Websites Apps

36. @uservision
Access all elements by gesture controls
37
Navigation menu
User able to access the elements within this
menu with screen reader activated?
Secondary navigation?
Websites Apps

37. @uservision
Meaningful Sequence and Focus Order
WCAG 1.3.2 Level A - Meaningful Sequence
WCAG 2.4.3 Level A - Focus Order
Focusable components receive focus in an order that
preserves meaning and operability
When the sequence in which content is presented affects
its meaning, a correct reading sequence can
be programmatically determined.
38
Websites Apps

38. @uservision 39
Providing use of context

39. @uservision
Informative links
WCAG 2.4.4 Level A - Link Purpose (In Context)
40
Websites Apps

40. @uservision
Dynamic Content
WCAG 4.1.3 Level AA - Status Messages
41
Websites Apps

41. @uservision
Forms- Associate labels to form fields
WCAG 1.3.1 Level A - Information and Relationships
WCAG 2.4.6 Level AA - Headings and Labels
Labels need to be available visually and programmatically
WCAG 3.3.2 Level A - Labels or Instructions
42
Websites Apps

42. @uservision
Forms
WCAG 1.3.1 Level A -
Information and Relationships
WCAG 2.4.4 Level A –
Link Purpose (in Context)
43
Websites Apps

43. @uservision
Forms- Grouping Form fields
WCAG 1.3.1 Level A -
Information and Relationships
44
Websites Apps

44. @uservision 45
Resources for Developers

45. @uservision
Accessibility Inspector in Xcode
46

46. @uservision
Documentation for Developers
Android Design Guidelines
https://developer.android.com/design
iOS Design Guidelines
https://developer.apple.com/design/human-interface-guidelines/
47

47. @uservision 48
Summary

48. @uservision
Summary
49
Mobile accessibility impacts on us all
Consider your legal duty to make mobile accessible for all your users
Use native controls and native coding techniques
Test your site and app on mobile devices

49. 55 North Castle Street
Edinburgh
EH2 3QA
United Kingdom
Tel: 0131 225 0850@UserVision
www.uservision.co.uk
Thank you!
Upcoming courses and Events
• CPUX-F course 10-12 Nov
• CPUX-UT: 17-19 Nov
• Designing UX Workshop: 26 Nov
• Usability & UX - Foundation Certification: 8-10 Dec
hello@uservision.co.uk
10% discountusing code:BREAKFAST10 uservision.co.uk/training