Emma Pratt Richens
Digital Accessibility Specialist
Digital A11y 101
Accessibility
Space key, arrow keys, or swipe to navigate through slides.
Digital A11y 101
Space key, arrow keys, or swipe to navigate through slides.
Accessibility
accessibility
a + 11 letters + y
#a11y
- How I understand accessibility
- Hands-on assistive technology and settings
- Guidelines, the law and getting started
- Useful code know-how
- Discussion: what it all means to YOU
- Challenge: YOUR next step
Accessibility
- How I understand accessibility
- Hands-on assistive technology and settings
- Guidelines, the law and getting started
- Useful code know-how
- Discussion: what it all means to YOU
- Challenge: YOUR next step
Accessibility
Accessible means
everyone can use it
Accessibility
Accessible means
everyone can use it
Accessibility
everyone =
you
Accessibility
me
next
busy
deaf
ASD
old
crisis
thai
CP
you
Accessibility
me
accessible =
no
impassable
barriers
contrast
familiar
subtitles
affordances
few, big targets
clear
icons
keyboard
next
busy
deaf
ASD
old
crisis
thai
CP
Microsoft Inclusive Design Toolkit - Persona Spectrum
Accessibility
Disability
Jamie Knight & Lion - BBC Accessibility Specialist
Impairment
+ Environment
Accessibility
Impairment
+ right Environment
Accessability
Accessibility
Accessibility
- How I understand accessibility
- Hands-on assistive technology and settings
- Guidelines, the law and getting started
- Useful code know-how
- Discussion: what it all means to YOU
- Challenge: YOUR next step
Accessibility
Accessibility
Assistive Technology
Accessibility
Assistive Technology
Accessibility
| Action | MS Narrator | MacOS VoiceOver | iOS VoiceOver | Android TalkBack | ChromeVox |
|---|---|---|---|---|---|
| Set-up | Settings > Change PC settings > Ease of Access | System Preferences > Accessibility | Settings > General > Accessibility | Settings > Accessibility | Ctrl + Alt + Z |
| Toggle on / off | Windows logo key + Ctrl + Enter | cmd + F5 | (set up) triple press home | (set up) power button | Shift + Search + A + A |
| Pause / resume | Caps lock + m, or Ctrl | Ctrl | 2-finger tap | (set up) volume key | Ctrl |
| Read from selected | Caps lock + h | Ctrl + alt + a | 2-finger swipe down | (set up) shake | Shift + Search + R |
| Next / Previous | Caps lock + right / left arrow key | Ctrl + alt + right / left arrow key | Swipe right / left | Swipe right or down / left or down | Shift + Search + up / down arrow key |
| Activate item | Caps lock + Space bar | Ctrl + alt + Space bar | 1-finger double tap | 1-finger double tap | Enter |
| Rotor / context menu | n/a | Ctrl + alt + u | Hold and twist 2 fingers | Swipe down / up and then right | n/a |
| Help menu | - - - | Ctrl + alt + h | Pinch in | - - - | Shift + Search + h |
Keyboard - try to navigate with only Tab, Shift + Tab, Enter, Space bar, and Esc
Screen Reader - note: not all screen reader users are blind
- tip for mobile/tablet: set-up / learn the shortcut toggle first
- How I understand accessibility
- Hands-on assistive technology and settings
- Guidelines, the law and getting started
- Useful code know-how
- Discussion: what it all means to YOU
- Challenge: YOUR next step
Accessibility
WCAG: Web Content Accessibility Guidelines
- 1.0 published 1999
- 2.0 published 2008
- 2.1 update published 2018 - AA
- 2.2 updated scheduled 2021
- 3.0 in progress to be W3C Accessibility Guidelines
Accessibility
Legislation
- UK: Equalities Act 2010
- UK: Public Sector Web and App Regulations 2018
- EU: Web Accessibility Directive 2016
- USA: Section 508 1998 of Rehabiliation Act 1973
Accessibility
50% by wireframes
95% before any code is written
Alex Lowndes, BookingGo Senior Test Engineer
Start the thinking early, plan for it, design for it ....
Accessibility
Colour
Focus
Labels
Accessibility
Colour - contrast
- meaning
- actionable elements
Focus
Labels
Accessibility
Accessibility
Colour - contrast
- meaning
- actionable elements
Focus - interactive is focusable
- visible focus & content order
- modals, menus and traps
Labels
Accessibility
Accessibility
Accessibility
Colour - contrast
- meaning
- actionable elements
Focus - interactive is focusable
- visible focus & content order
- modals, menus and traps
Labels - meaning & associations
- headings, links, buttons, forms
- alternative text
Accessibility
main
heading
button label
link text
form
label
sub heading
Accessibility
Accessibility
Put people first - in equivalent ways
Use familiarity
Give control
Offer choice
Add value
Accessibility
Inclusive design principles...
Accessibility
- How I understand accessibility
- Hands-on assistive technology and settings
- Guidelines, the law and getting started
-
Useful code know-how
- Discussion: what it all means to YOU
- Challenge: YOUR next step
Accessibility
The progressive approach
- HTML that functions for a screen reader
- CSS that scales and responds to screen size
- JS that improves and enhances interaction
Accessibility
Valid semantic HTML
-
<div class="page-wrapper"> <div class="heading">My lazy page</div> <div class="copy">This is an example of <span class="red">lazy</span> code.</div> </div> -
<main> <h1>My semantic page</h1> <p>This is an example of <em>semantic</em> code.</p> </main>
Accessibility
Page title and headings
<head> <title>My page</title> </head>
<body>
<h1>My page</h1>
<p>Introduction to my page.</p>
<h2>Subheading</h2>
<p>Subheadings label parts of copy.</p>
<h3>Sub-subheading</h3>
<p>Heading levels nest semantically.</p>
<h2>Subheading again</2>
<p>Headings give content structure.</p>
</body>
Accessibility
Forms and labels
<form action="/search" aria-label="Search">
<label for="q">Search term:</label>
<input id="q" name="q" type="text">
<input type="submit" value="Search">
</form>
Accessibility
Links vs. buttons
<a href=""> <button>
Accessibility
ARIA - landmarks, labels, live regions
- 1st rule: don't use ARIA if alternatives are available
- landmarks built-in to HTML
<header> has role of banner at top level (1)
<nav> has role of navigation
<main> has role of main (1)
<footer> has role of contentinfo at top level (1)
<aside> has role of complementary
<section> has role of region with accessible name
<form> has role of form with accessible name - aria-label, aria-labelledby, aria-describedby
- aria-live - polite v. assertive
Accessibility
Modals & focus management
Accessibility
- How I understand accessibility
- Hands-on assistive technology and settings
- Guidelines, the law and getting started
- Useful code know-how
- Discussion: what it all means to YOU
- Challenge: YOUR next step
Accessibility
Accessibility
- How I understand accessibility
- Hands-on assistive technology and settings
- Guidelines, the law and getting started
- Useful code know-how
- Discussion: what it all means to YOU
- Challenge: YOUR next step
Accessibility
Do something differently
Accessibility
Thank you!
Accessibility
Thank you for letting me share my thoughts and understanding of digital accessibility with you.
I'm Emma Pratt Richens an accessibility specialist at the BBC, with a background in front-end web development and user interface design.
Digital A11y 101 @EmmaJ_PR Accessibility Space key, arrow keys, or swipe to navigate through slides.
Digital A11y 101
By Emma Pratt Richens
Digital A11y 101
A brief flexible presentation intended for complete web/app teams.
- 1,522
