Created by The Paciello Group

1. Accessible User Experience
Handbook
created by

2. @TheBillyGregory

3. This is part handout and part workbook. You will find
resources to support each module as well as descriptions
of the breakouts and space to make notes.
Feel free to take notes and document breakout exercises
during the day. The might be useful later on.

4. OUR AUDIENCE

5. Breakout
As a group, impair one of
the following, and find out
what barriers there are to
browsing the internet.
• Vision
• Hearing
• Physical
• Cognition and learning
Breakout notes

6. Breakout
As a group, create a
persona based on the
previous breakout. Age or
situation can mean multiple
impairments, so the brief
description should include:
• Their profile
• Impairments and
requirements
• Technology they use
• Their attitude
Breakout notes

7. Resources
• An alphabet of accessibility issues – Pastry Box Project
• Designing for inclusion - The Web Accessibility Initiative
• Personas – Just Ask, Accessibility in user centered
design

8. INCLUSIVE DESIGN
PRINCIPLES

9. Take a 10 minute walk
around the building and
outside, find some design
fails and successes to
share with the group.
Bonus points if you find
one related to your
persona.
Breakout Breakout notes

10. Look at BBC web content
and mobile apps and
identify positive and
negative examples of the
inclusive design principles.
Describe how they impact
disabled users:
• Puts people first
• Is familiar
• Gives control
• Offers choice
• Adds value
Breakout notesBreakout

11. Resources
• How to design for accessibility - BBC GEL
• inclusivedesignprinciples.org - Paciello Group
• Designer Resources - WebAIM

12. ASSISTIVE TECHNOLOGIES

13. Breakout
Navigate BBC content and
note down challenges when:
• Keyboard only
• One handed (with your
less used hand)
• Zoom magnification on
• Screen reader on
More information is included
in the following pages.
Breakout notes

14. Keyboard only
Disconnect your mouse and avoid the mouse pad so you are
only using your keyboard. Basic keyboard shortcuts:
• TAB: moves to next focusable item
• SHIFT+TAB: moves to previous focusable item
• ESC: closes a dialog, stop
• CTRL and +: zoom in
• CTRL and -: zoom out
• Space, Page Down: Scroll down a frame.
• Shift+Space, Page Up: Scroll up a frame.
• Home: Top of page.
• End: Bottom of page.

15. Zoom
• Desktop: in any browser/platform combination hit CTRL
plus + until you reach 200% or more
• iOS: Settings → General → Accessibility → Zoom
• Android: Settings → Accessibility → Magnification
Gestures

16. MacOS Voiceover
To enable VoiceOver: Menu → System Preferences,
Accessibility → VoiceOver then select Enable
VoiceOver. The shortcut is Command+F5.
Next select Open VoiceOver training and complete the
steps.
Keyboard shortcuts are on the next slide.

17. MacOS Voiceover commands
The VoiceOver (VO) activation key is CTRL+OPTION, then hit
the required shortcut.
• TAB: move to next focusable item
• SHIFT+TAB: move to previous focusable item
• VO + Right arrow: reads next item
• VO + left arrow: reads previous item
• VO+U: opens the rotor, use the L+R arrow keys to move
between menus, Up + Down arrow keys to move up and
down.
• VO+H: moves to next heading
• VO+L: moves to next list
Using VoiceOver to evaluate web accessibility by WebAim

18. iOS Voiceover
To enable VoiceOver, navigate to Settings → General →
Accessibility → VoiceOver
Then, touch and slide the white Off button (beside the word
VoiceOver) to the right to enable VoiceOver.
Once in the On position, the button changes color to
indicate VoiceOver is enabled.

19. iOS Voiceover
Action Gesture
Switch VoiceOver on/off Triple-click the home key
Speak an element Single tap
Activate an element Double tap
Scroll Flick three fingers
Rotor Turn a dial with two fingers
Zoom Three-finger double tap
Jumps to the previous / next Rotor item Swipe up / down
Select previous / next Swipe left / right
Read all from top to bottom / bottom to top Two-finger swipe down / up
Next / previous page Three-finger swipe right / left
Speak additional information
(such as position on screen, pagination, position in a
table, and so on)
Three-finger tap
Pass-through gesture Two-finger tap and hold
Play / pause media
(audio, video, voice memos, photos) Two-finger double tap
Screen curtain on / off Three-finger quadruple tap
Mute / un-mute VoiceOver Three-finger triple tap

20. Android Talkback
To enable TalkBack, navigate to Settings → Accessibility
→ TalkBack then switch the button to On.
A ‘Use TalkBack’ confirmation screen will appear. When
used for the first time a tutorial will be launched.
Ensure the device volume is turned up as TalkBack doesn’t
automatically adjust the volume if muted.
See: Mobile-testing-guide-0.1_26-10-2016.doc for more
details

21. Android Talkback
Action Gesture
Switch TalkBack on/off
Through Settings → Accessibility → TalkBack
Or
Press and hold the off button, wait for the vibration
then hold two fingers down.
Note: This only works if the Accessibility Shortcut
has been enabled in the accessibility settings
screen
Speak an element Single tap
Activate an element e.g. a button or edit box Double tap
Scroll Two-finger slide
Zoom (built in screen magnification, when enabled) One-finger triple tap
Select next item Swipe right / down
Select previous item Swipe left / up
Move to first item on screen Up then down
Move to last item on screen Down then up
Move slider down
(such as volume) Left then right

22. Screen reader cheat sheet
Action MS Narrator iOS VoiceOver
Desktop
iOS VoiceOver
Mobile
Android TalkBack ChromeVox
Set-up Settings > Change
PC Settings > Ease of
Access
System Preference >
Accessibility
Settings > General >
Accessibility
Settings >
Accessibility
Ctrl + Alt + Z
Toggle reader on/off Windows logo key +
Ctrl + Enter
⌘ + F5 (set up) triple tap
home
(set up) power
button
Shift + Search + A +
A
Pause/resume
reading
Caps lock + M, or
Ctrl
Ctrl 2 finger tap (set up) volume key Ctrl
Read all from
selected
Caps lock + H Ctrl + ⌥ + a 2 finger swipe down (set up) shake Shift + Search + R
Next / Previous Caps lock +
right/left arrow key
Ctrl + ⌥ + (> or <
arrow)
Swipe right or left Swipe right or
down, or left or
down
Shift + Search + up
or down arrow key
Activate item Caps lock + Space
bar
Ctrl + ⌥ + Space bar 1 finger double tap 1 finger double tap Enter
Initiate
context/rotor menu
n/a Ctrl + ⌥ + u Hold and twist 2
fingers
Swipe down or up
then right
n/a
Help menu - - - Ctrl + ⌥ + h Pinch in - - - Shift + Search + h
Set-up/learn the shortcut to enable/disable the native screen reader first!
https://confluence.dev.bbc.co.uk/display/accessibility/Screen+Reader+Basics+and+Cheat+Sheet

23. Resources
• Testing with iOS VoiceOver – The Paciello Group
• Testing with screen readers – Webaim
• Accessibility testing with Android Talkback – The Paciello
Group

24. BBC ACCESSIBILITY
GUIDELINES

25. BBC Mobile Accessibility Guidelines - design
1. Colour contrast
2. Colour and meaning
3. Styling and readability
4. Structure
5. Content order
6. Touch target size
7. Spacing
8. Content resizes
9. Actionable elements
10. Visible Focus
11. Consistency
12. Choice
13.Adjustability
14. Flicker

26. Notes

27. Government Digital Service – do’s and
don’ts for designing for accessibility

28. Resources
• BBC Mobile accessibility guidelines (MAG) - BBC
• Web accessibility for designers infographic – Webaim
• Do’s and don’ts of designing for accessibility –
Government Digital Service

29. TOOLS

30. Breakout
Review the designs provided and identify barriers of access
for your persona within your teams using one or more of
the following tools:
• The Color Contrast Analyser – downloadable app
• Google Dev Tools - Chrome
• Web Developer Toolbar - Firefox
• WAVE – Chrome extension or online tool
• Stark – Plug-in for Sketch

31. Breakout notes

32. ACCESSIBILITY IN DESIGN
DOCUMENTATION

33. Breakout
Using both the accessible UX principles and guidelines
look at your designs and identify fixes that better support
your persona, and document requirements for accessibility.
The following pages provide a list of what accessibility
requirements should be met and documented in designs.

34. Accessibility requirements must be
annotated in the designs prior to sign off
1. Colour contrast
2. Colour and meaning
3. Styling and readability
4. Structure
5. Content order
6. Touch target size
7. Spacing
8. Content resizes
9. Actionable elements
10. Visible Focus
11. Consistency
12. Choice
13.Adjustability
14. Flicker

35. Accessibility requirements checklist
1. Colour contrast
Colour contrast ratios are documented in the designs for:
• Typography
• Icons
• Glyphs
• Text equivalents
• Form elements
• Buttons
• Hover, focus and selected states

36. Accessibility requirements checklist
2. Colour and meaning
Alternatives for colour that convey meaning are provided
for:
• Graphs
• Charts
• Form instructions
• Infographics
Colour is used to reinforce meaning for:
• Form instructions
• Products areas

37. Accessibility requirements checklist
4. Styling and readability
• Editorial images are not provided as background images
OR an accessible alternative is provided.
• GEL typography styles are used
• Italics are not used for paragraphs
• Non-linked text is not underlined

38. Accessibility requirements checklist
5. Structure
• Visible, well written headings are provided.
• The heading level for text has been documented.
• Lists and what type of list they are has been
documented.
• Landmark regions has been documented.
• The structure is consistent across templates.

39. Accessibility requirements checklist
5. Content order
• The content order has been documented
• The content order groups related information
• Where images and link text are to the same resources
this has been documented.
6. Touch target size
• All touch targets are 7mm or 5mm with a 2mm exclusion
zone.
• Touch target size is documented in the design

40. Accessibility requirements checklist
7. Spacing
• The content order has been documented
• The content order groups related information
• Where images and link text are to the same resources
this has been documented.
8. Content resizing
• The ability to zoom is documented in the design

41. Accessibility requirements checklist
9. Actionable elements
• The content order has been documented
• The content order groups related information
• Where images and link text are to the same resources
this has been documented.
10. Visible focus
• Hover and focus states are documented
• Selected states are document
• Browser defaults are not used
• All states meet the colour contrast requirements

42. Accessibility requirements checklist
11. Consistency
• Structure is consistent across templates
• Content and focus order is consistent across templates
• Behavior is consistent across templates
• Focus order and behaviour is consistent with web and
platform standards
• Editorial (visible and hidden) is consistent across
templates
• Where possible standard components are used
• If non-standard components are used they behave in an
expected manner

43. Accessibility requirements checklist
12. Choice
• Alternative layouts are provided where logical.
• Filters are provided where logical.
• More than one way is provided for completing complex
or unfamiliar tasks.
13. Adjustability
• Volume controls are provided for media
• Colours can be adjusted.
• Subtitles can be adjusted.

44. Accessibility requirements checklist
14. Flicker
• Pause / stop buttons are provided
• Pause / stop buttons are high in the content order or
easy to find.
• Settings allow users to choose their preferences.

45. USER RESEARCH

46. Breakout
Based of the designs you have reviewed today what type of
usability study would you do?
• Interviews, diary studies, surveys
• A/B testing
• Usability testing
Also think about:
• Profile of testers (disability, background etc.)
• Accommodations necessary
• Particular areas to test

47. Breakout notes

48. BBC ACCESSIBILITY
SUPPORT

49. The BBC Accessibility Team
• Gareth Ford Williams – Head of Accessibility
• Rebecca Nancarrow – Principle Accessibility Specialist
• Jamie Knight – Senior Accessibility Specialist
• Emma Pratt Richens – Senior Accessibility Specialist
• Michael Mathews – Senior Accessibility Specialist
• Nigel Megitt – Exec Product Manager, Media Platform
• Paul Bebey- Access Technology Manager

50. The BBC Accessibility Team
Responsible for:
• Training and knowledge sharing
• GEL accessibility
• Accessibility Champions Network
• Standards and guidelines
Not responsible for:
• Website or application accessibility
• Audits

51. Accessibility Champions Network
• Include people from all disciplines
• Get additional training
• Are not responsible for accessibility
• Act as a point of contact for teams
Contact Emma Richens for more information about:
• Champions in your area
• Becoming a Champion
• Email distribution list
• BBC Accessibility Champion Slack Channel

52. BBC Guidelines
Mobile Accessibility Standards and Guidelines
• For UX, developers, editorial and QA
• Technology agnostic guidelines
• iOS, Android and Web techniques
• Includes test criteria

53. BBC Guidelines
HTML Accessibility:
• For developers and QA
• Unambiguous and testable
• Includes test criteria

54. BBC Guidelines
Assistive Technology Testing:
• For UX, development and QA
• A guideline not mandate
• Covers desktop and mobile

55. BBC Guidelines
GEL – How to design for accessibility
• For User Experience and design
• Rationale
• Principles
• Considerations

56. Training
• List training here

58. THANK YOU