Web accessibility strategies for the new decade

Web
Accessibility
Strategies for the
New Decade
http://usercentered.com/wrlc2020/slides.html
Andrew Stevens
2020 WRLC Annual
Meeting

Web Accessibility in 2020
Some of the things we’ll cover:
● Review of recent news
● Recent accessibility-related litigation
● Evolving accessibility standards
● Evolving browser support

Web Accessibility in 2020
And how tools and solutions have evolved
● Site accessibility strategies
● Automated tools
● Manual testing techniques

Accessibility Lawsuits Increasing
Number Of Federal Website Accessibility Lawsuits Nearly Triple, Exceeding 2250 In
2018 | ADA Title III https://www.adatitleiii.com/2019/01/number-of-federal-
website-accessibility-lawsuits-nearly-triple-exceeding-2250-in-2018/
2019 Was Another Record-Breaking Year for Federal ADA Title III Lawsuits | ADA
Title III https://www.adatitleiii.com/2020/02/2019-was-another-record-breaking-
year-for-federal-ada-title-iii-lawsuits/

Accessibility Lawsuits Increasing

Making Cheap Pizza Accessible Again
Domino's Pizza LLC v. Robles - SCOTUSblog https://www.scotusblog.com/case-
files/cases/dominos-pizza-llc-v-robles/

Another Interesting Case
INSIGHT: A Lawsuit Against Adult Entertainment Sites Might Clarify ADA
https://news.bloomberglaw.com/us-law-week/insight-a-lawsuit-against-adult-
entertainment-sites-might-clarify-ada
○ Suris v. Mindgeek Holdings Sarl, 1:20-cv-00284 – CourtListener.com
https://www.courtlistener.com/docket/16714136/suris-v-mindgeek-holdings-sarl/

Recent Developments in Standards
● Web Content Accessibility Guidelines (WCAG) 2.1
○ W3C Recommendation 05 June 2018
https://www.w3.org/TR/WCAG21/
○ Almost 10 years after WCAG 2.0 became a recommendation (December 11, 2008)
● The Section 508 Update | Section508.gov (2017)
https://www.section508.gov/blog/accessibility-news-the-section-508-Update

WCAG 2.1
More attention given to:
● Mobile technology
● Low vision
● Cognitive disabilities

WCAG 2.1
What’s New in WCAG 2.1 | Web Accessibility Initiative (WAI) | W3C
https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/

WCAG 2.1
● Orientation
○ Content does not restrict its view and operation to a single display orientation, such as portrait
or landscape.
● Pointer Gestures
○ Have alternatives to gestures (e.g., buttons to mimic gesture effects like zooming)
● Pointer Cancellation
○ Being able to abort mistaken clicks or presses.
● Use of Correct Label in Name
○ Control labels and visually presented names need to be consistent.
● Motion Actuation
○ Motion-activated functions need to have alternates

WCAG 2.1
● Reflow
○ Content can be presented without loss of information or functionality, and without requiring
scrolling, in the following dimensions:
○ Vertical scrolling content at a width equivalent to 320 pixels
○ Horizontal scrolling content at a height equivalent to 256 pixels
● Non-Text Contrast
○ Non-test interface elements (e.g., button borders) need to have appropriate (3:1) contrast.
● Text Spacing
○ Line height (line spacing) to at least 1.5 times the font size;
○ Spacing following paragraphs to at least 2 times the font size;
○ Letter spacing (tracking) to at least 0.12 times the font size;
○ Word spacing to at least 0.16 times the font size.

WCAG 2.1
● Content on Hover or Focus
○ Dismissable: A mechanism is available to dismiss the additional content without moving pointer
hover or keyboard focus, unless the additional content communicates an input error or does not
obscure or replace other content;
○ Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved
over the additional content without the additional content disappearing;
○ Persistent: The additional content remains visible until the hover or focus trigger is removed,
the user dismisses it, or its information is no longer valid.
● Identify Input Purpose
○ Will allow for some complex forms to be fully or partially completed in a programmatic manner.
● Status Messages
○ Status messages for actions (e.g, a confirmation for an online reservation) are presented to
assistive technologies, not just visually.

WCAG 2.2
Web Content Accessibility Guidelines (WCAG) 2.2
https://www.w3.org/TR/WCAG22/
First Public Working Draft 27 February 2020
New Features in WCAG 2.2 https://www.w3.org/TR/WCAG22/#new-features-in-
wcag-2-2
Main new addition so far:
Making page region of focus visible

Revised 508 Standards
Major changes in the Revised 508 Standards include:
Focus on Functionality - Organizes by functionality instead of product type, to keep pace with advances in technology.
Industry Alignment - Incorporates Web Content Accessibility Guidelines (WCAG) 2.0, developed by the World Wide Web Consortium (W3C), an
international community that creates web standards. Clarifies applicability to websites, electronic documents and software.
Content Accessibility - Requires all public-facing official agency business content, as well as specific categories of non-public-facing content that is
official agency business, to be accessible.
Synchronized Tools and Tech - Clarifies that software and operating systems must interoperate with assistive technology.
Expanded Marketplace - Incorporates by reference selected international standards like WCAG 2.0, and harmonizes with European Commission ICT
Standards (EN 301 549), to create a larger marketplace of accessibility solutions.

Assistive Technology
Latest WebAIM Screen Reader Survey
WebAIM: Screen Reader User Survey #8 Results
https://webaim.org/projects/screenreadersurvey8/
Key takeaway: Respondents with disabilities are more likely to use a mobile screen
reader than respondents without disabilities.

Evolving browser technology
ARIA (Accessible Rich Internet Applications) vs HTML
HTML and continuing advancement in browser support for accessibility-related
HTML is making it easier to develop highly accessible pages with plain HTML
Invokes the first rule of ARIA https://www.w3.org/TR/using-aria/#rule1
“If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already
built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do
so.”
ARIA is still highly useful for many applications, especially more complex web
applications, but…..

Evolving Browser Technology
We run the risk of making pages “overly” accessible with redundant code that, at
best, adds bloat and unnecessary complexity.

“Compound” Accessibility
People might have multiple complications accessing web content
For example:
● Low vision and reduced motor capability
● Color blindness that might decrease contrast ratios between certain color
combinations

So how do we proceed?
● Testing
○ Both manual and automated have their strengths and weaknesses.
● Managing the content creation process
○ Baking in accessibility into content creation tools.
○ Providing resources to help content creators make their content accessible.
○ Developing accessibility auditing strategies.

So how do we proceed?
Different workflows
● Centralized vs decentralized content development.
● Amount of power content producers have over markup and styling.
● Types of tools used for content creation (do they produce accessible content by
default?)
The tools and strategies that are best for you will be partially determined by your
specific content creation environment.

Automated Tools
Single-page accessibility scanners:
WAVE Web Accessibility Tool
https://wave.webaim.org/
axe: Accessibility Testing for Development Teams
https://www.deque.com/axe/
Accessibility Reference | Tools for Web Developers | Google Developers
https://developers.google.com/web/tools/chrome-devtools/accessibility/reference
Koa11y Download
https://open-indy.github.io/Koa11y/

Automated Tools
Multi-page
Domain Accessibility Audit
https://github.com/MSU-NatSci/DomainAccessibilityAudit
FAE – Functional Accessibility Evaluator
https://fae.disability.illinois.edu/
Pa11y
https://pa11y.org/

Automated Tools
Web Accessibility Evaluation Tools List
https://www.w3.org/WAI/ER/tools/

Other Tools and Links
Color Contrast Checkers
WebAIM: Contrast Checker
https://webaim.org/resources/contrastchecker/
Accessible Colors | WCAG 2.0 AA and AAA color contrast checker
https://accessible-colors.com/
Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this
easy! https://contrast-ratio.com/

Color Contrast Checkers
Color Contrast Analyzer - Chrome Web Store
https://chrome.google.com/webstore/detail/color-contrast-
analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll
A11y accessibility check for text colour on background image
https://www.brandwood.com/a11y/
Color Contrast Tools | Web Axe (big list of tools)
https://www.webaxe.org/color-contrast-tools/

Color Blindness Simulators
Coblis — Color Blindness Simulator https://www.color-blindness.com/coblis-color-
blindness-simulator/
Toptal Color Blind Filter
https://www.toptal.com/designers/colorfilter/
Colorblindly - Chrome Web Store
https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhh
mnjgdfijgg?hl=en

Binary file (specifically PDF and MS Office) accessibility
Create and verify PDF accessibility, Acrobat Pro https://helpx.adobe.com/acrobat/using/create-verify-pdf-
accessibility.html
PDF Accessibility Overview https://www.adobe.com/accessibility/pdf/pdf-accessibility-overview.html
Make your Word documents accessible to people with disabilities - Office Support
https://support.office.com/en-us/article/make-your-word-documents-accessible-to-people-with-
disabilities-d9bf3683-87ac-47ea-b91a-78dcacb3c66d
Create Accessible Documents | Assistive Technology Initiative | George Mason University
https://ati.gmu.edu/resources/accessibility-resources/create-accessible-documents/

Video Accessibility
Many tools (Camtasia, etc) have built-in accessibility features… use them.
Automatic transcription, captioning & instant translation | Speechlogger
https://speechlogger.appspot.com/
Youtube’s automatically generated transcripts can be copied

Language
ReadabilityFormulas.com https://readabilityformulas.com/freetests/six-
readability-formulas.php
Readable | Free Readability Test Tool
https://www.webfx.com/tools/read-able/
CMS Tools
CKEditor Accessibility Checker https://ckeditor.com/cke4/addon/a11ychecker

Manual Testing
Human Intervention Is Required for the following:
● Is the alt text accurate given the context?
● Are descriptions easy to understand?
● Do the headings represent the correct hierarchy?
● Is the HTML semantic?
● Does the application UI behave as expected?

Manual Testing
However:
● With screen reader testing and manually verifying compliance with guidelines
and best practices.
○ Requires a good bit of knowledge
■ both in use of accessibility evaluation software and current standards, but also
development/UX techniques for remediation
○ But learning the basics of manual testing is well worth it!

Manual Testing
Screen reader tips
Keyboard Shortcuts for JAWS
https://webaim.org/resources/shortcuts/jaws
Keyboard Shortcuts for NVDA
https://webaim.org/resources/shortcuts/nvda
Manual code review checklist
WebAIM: WebAIM's WCAG 2 Checklist
https://webaim.org/standards/wcag/checklist

Manual Testing
NVDA demonstrations
Screen Reader Basics: NVDA - A11ycasts
https://youtu.be/Jao3s_CwdRU
Accessibility Testing with the NVDA Screenreader - Deque Systems
https://youtu.be/Vx1vSd5uYS8
Learn NVDA: Hotkeys and Commands - The American Foundation for the Blind
https://youtu.be/PrrljNEpMVg

Simplified Manual Testing
Step 1 - Turn off images

Step 2- Turn off css
.no {CSS}

Step 3- Verify media has captions and transcriptions that are easily accessible via a
keyboard.

Step 3 - Unplug mouse

Step 4 - Use keyboard to interact with forms
<form>

Step 5- Slide back chair until you can can’t comfortably read text.
Use a wireless keyboard if necessary.

Step 6: Simulate reduced cognitive ability

Step 6: Simulate reduced cognitive ability
+

More reasons to give a *#%! about manual
testing
Accessible sites have always performed better in search engines.
● Due to content being better exposed to search engine crawlers
● And there is some evidence that some search engines give accessible content a rankings boost.
Manual accessibility testing forces one to pay close attention to many interactive
site elements.
● This close attention to site interactions can only increase the quality of UX.

Final Thoughts
Helping make ensure that site content remains accessible is no a trivial task.
Standards evolve, browser and assistive technology evolves, implementation of
standards and remediation requires a decent bit of skill and knowledge.
That being said, we shouldn’t let any of this discourage us in our attempts to make
our sites as accessible as possible.

Web accessibility strategies for the new decade

More Related Content

Similar to Web accessibility strategies for the new decade (20)

Recently uploaded (20)

Web accessibility strategies for the new decade

Editor's Notes