Adventures in accessibility testing

Phil Sherry at FrontendNE @nonswearyphil Accessibility testing Adventures in…

ALT: Adventures in accessibility testing Simon Sherry at Kuchaman Fort,
Rajasthan, in 2001. (eyefund.info)

ALT: Adventures in accessibility testing Global Accessibility Awareness Day on
May 18th

Adventures in accessibility testing Part one What is accessibility? Temporary
impairments Assistive technology Easy wins: design and code – Intermission @nonswearyphil

impairments Assistive technology Easy wins: design and code – Intermission Part two Browser plugins VoiceOver on macOS & iOS NVDA on Windows Design patterns – Questions Pub @nonswearyphil

! Questions @nonswearyphil Adventures in accessibility testing

Part one

Adventures in accessibility testing “accessibility” often written as: a11y @nonswearyphil

Adventures in accessibility testing “accessibility” often written as: a11y a
+ 11 characters + y = a11y @nonswearyphil

Adventures in accessibility testing “accessibility” often written as: a11y a
+ 11 characters + y = a11y twitter.com/hashtag/a11y @nonswearyphil

Please tag things with… @nonswearyphil Adventures in accessibility testing #a11yatFNE

Phil Sherry at FrontendNE @nonswearyphil Accessibility? What is…

Making websites work for (blind | disabled) people? most people
What is accessibility? – Adventures in accessibility testing

ALT: What is accessibility? – Adventures in accessibility testing Stern
look from a massively unimpressed cat.

Making sites and apps usable for the widest range of
people, including — but not limited to — people with disabilities. you lovely people, after tonight What is accessibility? – Adventures in accessibility testing

This is for everyone. Sir Tim Berners-Lee What is accessibility?
– Adventures in accessibility testing

Phil Sherry at FrontendNE @nonswearyphil Impairments Temporary and situational

ALT: Temporary and situational impairments – Adventures in accessibility testing
Cat in a box, demonstrating a vision impairment.

Stupid dog, sitting on top of a cat, demonstrating a physical impairment.

A dog stressing-out a cat, resulting in a cognitive impairment.

A cat that has only partially loaded due to an environment impairment.

A cat’s member of staff being eaten alive while trying to work.

Phil Sherry at FrontendNE @nonswearyphil Assistive technology A quick look
at…

! Questions @nonswearyphil Adventures in accessibility testing

ALT: A quick look at assistive technology – Adventures in
accessibility testing THERE IS A NON-CAT THING ON THE SCREEN – it’s Joey, Chris’s service dog.

accessibility testing Survey results for types of assistive technology used to access GOV.UK.

accessibility testing Visually-impaired user with a screen magnifier.

accessibility testing Visually-impaired user with motor issues, using a screen magnifier.

accessibility testing User research with a fully-blind user and her Humanware Braillenote Touch.

accessibility testing https://twitter.com/HugoThePinkCat/status/846763206806847489

accessibility testing One of many reasons why the clapping hands emoji is a fucking annoying trend.

accessibility testing Stewie watching Brian puking after hearing that emoji abuse.

accessibility testing A cat kicking-off about the massive abuse of emoji on Twitter.

accessibility testing Poo emoji. Or is it smiling chocolate ice cream? Nah, it’s poo.

Phil Sherry at FrontendNE @nonswearyphil User research A quick word
about…

ALT: A quick word about user research – Adventures in
accessibility testing GOV.UK poster about user research. (github.com/alphagov/govdesign)

Phil Sherry at FrontendNE @nonswearyphil Jack the a11y cat makes
something more accessible Short story

ALT: Short story: Jack the a11y cat makes something more
accessible Jack is complaining about the inaccessible state of his desk.

accessible Jack is trying his best to use his desk, despite lack of human thought.

accessible Jack has kicked the keyboard to the floor because fuck you.

Phil Sherry at FrontendNE @nonswearyphil Design and code Easy wins…

The ultimate decision-maker about whether or not something is accessible,
is whether or not people can use it — not if it is “compliant” Derek Featherstone Easy wins: design and code – Adventures in accessibility testing

Accessibility costs too much, plus we don’t have time. most
developers Easy wins: design and code – Adventures in accessibility testing

ALT: Easy wins: design and code – Adventures in accessibility
testing Business man being business-as-fuck.

Meh, we can just bolt that shit on at the
end, right? most developers Easy wins: design and code – Adventures in accessibility testing

testing A cat eats a dog’s face for being an idiot.

testing A 19th-century painting which was unintentionally defaced during restoration.

Easy wins: design and code – Adventures in accessibility testing
Where I was previously mobile ﬁrst… 1. Mobile 2. Desktop

Easy wins: design and code – Adventures in accessibility testing
Where I was previously mobile ﬁrst… I’m now screen reader ﬁrst. 1. Screen reader 2. Mobile 3. Desktop

Phil Sherry at FrontendNE @nonswearyphil Design Easy wins…

testing A cat demonstrating the “if I fits, I sits” principle.

testing Application progress menu, small viewport version.

testing Black cat hiding in plain sight, in despair of human stupidity.

testing Lea Verou’s contrast checker tool (leaverou.github.io/contrast-ratio)

testing Four black cats, alike in every single way. No idea which is real. Nope.

testing Application progress menu, no selection.

testing Application progress menu, obvious selection on focus.

testing A cat giving a high-five.

testing Application progress menu, nice big hit areas.

testing A cat who doesn’t give a fuck about your shit.

testing new `prefers-reduced-motion` media query (webkit.org/blog/7477)

testing macOS accessibility preferences option to reduce motion.

Phil Sherry at FrontendNE @nonswearyphil Code Easy wins…

Phil Sherry at FrontendNE @nonswearyphil

Just add alt tags, yeah? most developers Easy wins: design
and code – Adventures in accessibility testing

testing Death glare from a feline HTML enthusiast.

testing Alternative text is an attribute attached to an element, or “tag”. <alt text=“”> <img /> </at> <img alt=“” /> ❌ ✅

Phil Sherry at FrontendNE @nonswearyphil Forms A word about…

testing Cat filling in a tuna import duty form.

testing FrontendNE sign-up form.

testing FrontendNE sign-up form in VoiceOver on macOS.

testing FrontendNE sign-up form – revised.

Phil Sherry at FrontendNE @nonswearyphil Roles and ARIA A word
about…

ALT: A word about roles and ARIA – Adventures in
accessibility testing A cat ponders accessibility matters over breakfast.

A word about roles and ARIA – Adventures in accessibility
testing 1.<div role=“banner”> 2.<div role=“navigation”> 3.<div role=“main”> 4. <div role=“article”> 5. <div role=“region”> 6. <div role=“complementary”> 7.<div role=“contentinfo”>

accessibility testing Browser showing divs with explicit roles.

testing 1.<header role=“banner”> 2.<nav role=“navigation”> 3.<main role=“main”> 4. <article role=“article”> 5. <section role=“region”> 6. <aside role=“complementary”> 7.<footer role=“contentinfo”>

accessibility testing Browser showing semantic elements with explicit roles.

testing Browsers take care of the following landmark roles: <header> maps to role=“banner” * <nav> maps to role=“navigation” <main> maps to role=“main” <article> maps to role=“article” <section> maps to role=“region” <aside> maps to role=“complementary” ** <footer> maps to role=“contentinfo” * * if not within an article or section element ** recently proposed

testing 1.<header> 2.<nav> 3.<main> 4. <article> 5. <section> 6. <aside> 7.<footer>

accessibility testing Browser showing semantic elements with implicit roles.

accessibility testing VoiceOver rotor showing landmarks.

accessibility testing Luke Stevens’ book, The Truth About HTML5 (Apress / thetruthabouthtml5.com)

accessibility testing FrontendNE sign-up form – revised.

accessibility testing W3C’s guide to Using ARIA (w3c.github.io/using-aria)

Phil Sherry at FrontendNE @nonswearyphil Performance A word about…

ALT: A word about performance – Adventures in accessibility testing
Cats who heard there was a mouse around here somewhere.

A whole bunch of cats. (Yes, it’s Photoshopped, but shush. Believe.)

Catsplosion. Many cats on the same rug.

Not even sure where to begin with this one. Some kinda cat launchpad.

Mog on the Tyne’s cats, available for many concurrent users.

ALT: Intermission – Adventures in accessibility testing An excluded kitteh
is locked out of an inaccessible kitchen.

Intermission

Phil Sherry at FrontendNE @nonswearyphil Accessibility testing Adventures in… Phil
Sherry at FrontendNE

Part two

impairments Assistive technology Easy wins: design and code – Intermission Part two Browser plugins VoiceOver on macOS & iOS NVDA on Windows Design patterns – Questions Pub

Phil Sherry at FrontendNE @nonswearyphil Browser plugins A very quick
look at…

ALT: A very quick look at browser plugins – Adventures
in accessibility testing WAVE plugin for Chrome.

in accessibility testing aXe plugin for Chrome.

in accessibility testing aXe plugin for Chrome, showing a bunch of errors.

in accessibility testing Tenon plugin for Chrome, by @KarlGroves.

in accessibility testing Google’s Accessibility plugin for Chrome.

in accessibility testing WCAG’s Accessibility Audit plugin for Chrome.

in accessibility testing Google’s Chromevox plugin for Chrome.

in accessibility testing Google’s Chromevox plugin for Chrome – just say No.

in accessibility testing Google’s Accessibility Experiment pane in Chrome.

in accessibility testing Search for how to activate Google’s Accessibility Experiment pane in Chrome.

in accessibility testing Accessible Technology (software) list on Trello

in accessibility testing Ghostery privacy plugin for Chrome.

Phil Sherry at FrontendNE @nonswearyphil Screen readers A quick look
at…

A quick look at screen readers – Adventures in accessibility
testing VoiceOver on macOS VoiceOver on iOS NVDA on Windows

Phil Sherry at FrontendNE @nonswearyphil VoiceOver on macOS Testing with…

ALT: A quick look at screen readers – Adventures in
accessibility testing A map of VoiceOver key commands for macOS

accessibility testing Key commands for turning on VoiceOver on macOS.

accessibility testing Key commands for turning on VoiceOver’s rotor on macOS.

accessibility testing VoiceOver Utility’s web rotor options.

accessibility testing VoiceOver Utility’s web rotor showing the headings menu on GOV.UK.

accessibility testing VoiceOver Utility’s verbosity options.

accessibility testing Apple’s VoiceOver Getting Started Guide. (apple.com/voiceover/info/guide)

Phil Sherry at FrontendNE @nonswearyphil VoiceOver on iOS Testing with…

accessibility testing VoiceOver’s rotor on iOS

accessibility testing Apple’s iOS accessibility guide (help.apple.com/iphone/10/#/iph3e2e4367)

accessibility testing Yahoo’s David Pogue with Joe Danowsky, using iOS VoiceOver

Phil Sherry at FrontendNE @nonswearyphil NVDA on Windows Testing with…

A quick look at screen readers – Adventures in accessibility
testing • JAWS (Job Access With Speech) – £700 • Dolphin’s Guide – £620 • Dolphin’s SuperNova – £1120 • Windows Narrator – free (only in Windows 10) • NVDA (NonVisual Desktop Access) – free

accessibility testing Paciello Group’s page about basic screen reader commands

accessibility testing Understanding screen reader interaction modes, by Léonie Watson.

Phil Sherry at FrontendNE @nonswearyphil Design patterns A look at
some…

ALT: A look at some design patterns– Adventures in accessibility
testing Stealth cat sneaks in when the product owner isn’t looking.

Phil Sherry at FrontendNE @nonswearyphil Heading levels Design patterns

Design patterns: anchor context – Adventures in accessibility testing 1.<p
class=“h1”>Oh dear</p>

class=“h1”>Oh dear</p> 2.<h3 class=“header-h2”>Sigh</h3>

class=“h1”>Oh dear</p> 2.<h3 class=“header-h2”>Sigh</h3> 3.<div id=“h2”><span class=“h1”> 4. OMFG, SRSLY 5.</span></div>

ALT: Design patterns: heading levels – Adventures in accessibility testing
Browser showing regular heading levels with default styles.

VoiceOver showing regular heading levels.

Browser showing suggested multiple header level 1 – just say no.

VoiceOver showing suggested multiple header level 1 – just say no.

Phil Sherry at FrontendNE @nonswearyphil Anchor context Design patterns

Design patterns: anchor context – Adventures in accessibility testing I
went to a clickbait conference, and what happened next blew my mind. Read more.

Design patterns: anchor context – Adventures in accessibility testing 1.<a
href=“#”> 2. Read more 3.</a>.

ALT: Design patterns: anchor context – Adventures in accessibility testing
The context-free “read more” link.

VoiceOver showing lots of context-free “read more” links.

A visually hidden cat. (I had to think pretty hard how to include this one.)

Design patterns: anchor context – Adventures in accessibility testing 1.<a
href=“#”> 2. Read more 3. <span class=“visuallyhidden”> 4. [add some context here] 5. </span> 6.</a>.

Design patterns: anchor context – Adventures in accessibility testing 1..visuallyhidden
{ 2. display: none; 3.}

{ 2. left: -8008135em; 3. position: absolute; 4.}

{ 2. border: 0; 3. clip: rect(0 0 0 0); 4. height: 1px; 5. margin: -1px; 6. overflow: hidden; 7. padding: 0; 8. position: absolute; 9. width: 1px; 10.}

A “read more” link with visually-hidden context.

VoiceOver showing lots of “read more” links with added context.

Design patterns: anchor context – Adventures in accessibility testing 1..visuallyhidden:active,
2..visuallyhidden:focus { 3. clip: auto; 4. height: auto; 5. margin: 0; 6. overflow: visible; 7. position: static; 8. width: auto; 9.}

GOV.UK’s “Skip to main content” link, with focus.

Phil Sherry at FrontendNE @nonswearyphil GOV.UK page header Design patterns

ALT: Design patterns: page header – Adventures in accessibility testing
Standard GOV.UK Elements page header – original markup.

Design patterns: page header – Adventures in accessibility testing 1.<h1
class="heading-xlarge"> 2. <span class="heading- secondary">FrontendNE</span> 3. Adventures in accessibility testing 4.</h1>

Standard GOV.UK Elements page header – original markup, VoiceOver in iOS.

Standard GOV.UK Elements page header – original markup, VoiceOver in macOS.

Standard GOV.UK Elements page header – original markup, NVDA in Windows.

Standard Gov.UK Elements page header – old and revised versions.

Standard Gov.UK Elements page header – old and revised, VoiceOver on macOS.

Design patterns: page header – Adventures in accessibility testing 1.<header
class="page-header"> 2. <h1 class=“heading-xlarge"> 3. Adventures in accessibility testing 4. </h1> 5. <p class=“heading-secondary"> 6. <span class="visuallyhidden">This section is </span> 7. FrontendNE</p> 8.</header>

Design patterns: page header – Adventures in accessibility testing 1..page-header
{ 2. clear: both; 3. display: table; 5. .heading-secondary { 6. display: table-header-group; 7. } 8.}

Standard GOV.UK Elements page header – revised markup, VoiceOver in iOS.

Standard GOV.UK Elements page header – revised markup, VoiceOver in macOS.

Standard GOV.UK Elements page header – revised markup, NVDA in Windows.

Phil Sherry at FrontendNE @nonswearyphil GOV.UK check your answers Design
patterns

Phil Sherry at FrontendNE @nonswearyphil Original GDS version Check your
answers v1.0

ALT: Design patterns: check your answers – Adventures in accessibility
testing Check your answers in the GOV.UK prototype kit. Original version.

testing Check your answers in the GOV.UK prototype kit. Original version, mobile size.

testing Check your answers in the GOV.UK prototype kit. Headings menu in VoiceOver.

testing Check your answers in the GOV.UK prototype kit. VoiceOver in macOS.

testing Check your answers in the GOV.UK prototype kit. NVDA on Windows.

Design patterns: check your answers – Adventures in accessibility testing
Original version ▸ uses a table – isn’t tabular data ▸ lacking in semantics ▸ hard to navigate ▸ not great for users of screen magniﬁers ▸ ridiculously verbose for users of screen readers

Phil Sherry at FrontendNE @nonswearyphil Revised GDS version Check your
answers v2.0

testing Check your answers. New GDS version.

testing Check your answers. New GDS version, mobile size.

testing Check your answers. New GDS version. Headings menu in VoiceOver on macOS.

testing Check your answers. New GDS version. Links menu in VoiceOver on macOS.

testing Check your answers. New GDS version. VoiceOver on macOS.

testing Check your answers. New GDS version. NVDA on Windows.

1.<dl class="check-your-answers multiple-sections"> 2. <div class="set"> 3. <dt class="question item"> 4. Name 5. </dt> 6. <dd class="answer item"> 7. Sarah Philips 8. </dd> 9. <dd class="change item"> 10. <a href="#"> 11. Change <span class="visuallyhidden">name</span> 12. </a> 13. </dd> 14. </div> 15.</dl>

Phil Sherry at FrontendNE @nonswearyphil Revised GDS version Check your
answers v2.1

testing Check your answers. New GDS version with our data.

testing Check your answers. New GDS version with our data, mobile size.

Phil Sherry at FrontendNE @nonswearyphil My new version Check your
answers v3.0

testing Check your answers v3.1. My new version with my page header and our data.

testing Check your answers v3.1. My new version, mobile size.

testing Check your answers v3.1. VoiceOver headings menu on macOS.

testing Check your answers v3.1. VoiceOver links menu on macOS.

testing Check your answers v3.1. VoiceOver reads through the page on macOS.

testing Check your answers v3.1. NVDA reads through the page on Windows.

1.<div class="check-your-answers"> 2. <h2 class="heading-small">Is your business currently registered for anti-money laundering supervision?</h2> 3. <span class="visuallyhidden">Answer: </span> 4. <p>Money laundering regulations number: 45628975</p> 5. <footer class="group"> 6. <p><a href="registered" class="edit">Edit<span class="visuallyhidden"> your answer for “Is your business currently registered for anti-money laundering supervision?”</span></a></p> 7. </footer> 8.</div>

testing Visually-impaired user with a screen magnifier, during a user research session.

testing Angry cat with a box that doesn’t quite meet its needs due to lack of research.

Phil Sherry at FrontendNE @nonswearyphil Quick takeaways And finally…

Quick takeaways – Adventures in accessibility testing • this is
for everyone

for everyone • think screen reader ﬁrst, mobile second, desktop third

for everyone • think screen reader ﬁrst, mobile second, desktop third • use sensible, semantic markup

for everyone • think screen reader ﬁrst, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary

for everyone • think screen reader ﬁrst, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary • sit in on user research

for everyone • think screen reader ﬁrst, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary • sit in on user research • get familiar with assistive technology

for everyone • think screen reader ﬁrst, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary • sit in on user research • get familiar with assistive technology • be responsible for accessibility where you work

ALT: Quick takeaways – Adventures in accessibility testing Accessibility weekly
newsletter. (a11yweekly.com)

for everyone • think screen reader ﬁrst, mobile second, desktop third • use sensible, semantic markup • use ARIA roles if necessary • sit in on user research • get familiar with assistive technology • be responsible for accessibility where you work • be a decent human and help others

Phil Sherry at FrontendNE @nonswearyphil One more thing… And finally,

ALT: One more thing… – Adventures in accessibility testing The
cats at Mog on the Tyne and Westgate Ark await your presence.

ALT: Quick takeaways – Adventures in accessibility testing Pictures of
the guide dog that I’m sponsoring – Una.

That’s all folks

ALT: Who needs a drink? – Adventures in accessibility testing
A cat in need of a drinking partner.

Phil Sherry at FrontendNE @nonswearyphil Questions? Are there any…

Website: philsherry.com Twitter: nonswearyphil Instagram: philsherry Get in touch

Adventures in accessibility testing

Adventures in accessibility testing

More Decks by Frontend NE

Other Decks in Programming

Featured

Transcript