How Cool Accessibility Tools Can Make Your Life Easier

BEFORE SESSION

Get phone ready with presentation & notes on podium

Click View > Present

Select Closed Captions

Select Pointer (turns it red)

Start phone stopwatch

Start audio/video

START SESSION

Welcome to my talk on “How Cool Accessibility Tools Can Make Your Life Easier”.

5 seconds

Hello!

(from Neuschwanstein Castle in Bavaria, Germany)

Kat Shaw

Senior Frontend Developer at Lullabot

Accessibility (a11y) advocate

@katannshaw

2

My name is Kat Shaw, I’m a Senior Front-end Developer at Lullabot and an accessibility advocate. You’ll notice the term “a11y” on the slide which stands for accessibility. The 11 stands for the number of had letters between “a” and “y” in the word accessibility. I’ll use this term throughout the talk.

25 seconds

Why are we here?

To learn about some cool accessibility (a11y) tools that will assist you in identifying and fixing a11y issues on a daily basis with the end goal of making the web accessible to all.

3

SO WHY ARE WE HERE? We’re here to learn about some cool a11y tools that will assist you in identifying and fixing a11y issues on a daily basis with the end goal of making the web accessible to all.

15 seconds

39,906,328

Americans with a disability as of 2015 according to the U.S. Census Bureau

4

According to the U.S. Census Bureau “disability statistics” report in 2015, it’s estimated that americans with a disability numbered 39,906,328! With a total population of 316,450,569, that’s 12.6% of our total population.

25 seconds

1,000,000,000

World population with some form of a disability according to the World Bank

5

According to the World Bank “disability inclusion” report in 2019, 15% of the world’s population, or one billion people, experience some form of disability.

10 seconds

What will we cover?

  • Web-based tools
  • Browser tools
  • Drupal tools
  • OS tools
  • Desktop tools

6

WHAT WE WILL COVER? In 45 minutes we will quickly cover:

13 seconds

“The power of the Web is in its universality. Access by everyone regardless of disability is an

essential aspect.”

– Tim Berners-Lee, inventor of the World Wide Web

7

A great quote from the inventor of the world wide web Tim Berners-Lee is “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” I think that his quote really sums up what we’re all trying to accomplish by creating an equal web for all.

20 seconds

What are our goals?

By the end of this session you should be able to:

  • Download & install a11y tools
  • Use a11y tools for evaluation
  • Create a new path for applying
    needed fixes to your sites using
    results from these a11y tools

8

WHAT ARE OUR GOALS? Hopefully by the end of this session, you should be able to:

31 seconds

Let’s get started!

9

3 seconds

1.

Web-based tools

Exclusively online, it’s best to bookmark these tools to your browser, and use them as needed.

10

Web-based tools are used exclusively online. It’s best to bookmark these tools to your browser so that you can use them as needed. Great companies like The Paciello Group, Deque, and WebAIM are always creating new open source tools, so it’s important to keep your eyes open for new ones all of the time.

16 seconds

Web-based tools

11

1 Accessible Colors

What is it? Tool to manually check color contrast.

Pros: Gives you a couple of suggestions to pass color contrast.

Cons: No slider to easily change color on your own. They're working on new features.

2 AChecker Web Accessibility Checker

What is it? Checks single HTML pages for accessibility conformance.

Pros: Can enter a URL, HTML file upload, or paste HTML markup; Gives you detailed results with links to more details and repair suggestions. Widely-used in Canada from what I hear.

Cons: Can only test one page at a time; A very old-school look.

3 Color Palette Contrast Checker

What is it? Color palette cool.

Pros: Can add multiple colors at once for a palette. Can add/remove black and white text to swatches.

Cons: Testing standards are not customizable as it only tests for 4.5:1 and as it only tests for a color contrast of 4.5:1 under WCAG 2.1 AA. No slider to easily find your own replacement colors.

4 Contrast Ratio

What is it? Test colors contrast using hsla, rbga, and hex.

Pros: Can test with named color, hsla, rbga, and hex; Can easily swap colors

Cons: Have to manually select different variants (i.e. named color, hsla, rbga, and hex); Testing standards are not customizable; No slider to easily find your own replacement colors.

5 HTML CodeSniffer

What is it? Bookmarklet that scans page and returns a11y results.

Pros: Can be configured for different WCAG levels and Section 508; Includes error, code snippet, and suggested fix.

Cons: Suggested fixes are not that thorough; You have to click through each error in the tool

6 JavaScript Bookmarklets for Accessibility Testing

What is it? Use JavaScript to highlight roles, states, and properties for accessibility on a page.

Pros: Accessible to screen reader users; Works on any browser or device; Drag and drop install links; Inaccessible demo page for testing; <iframe> testing

Cons: Have to install them individually instead of within one tool unless you install a11yTools extension for Safari macOS

7 Text Spacing Bookmarklet

What is it? Adds a toggle bookmarklet to your bookmarks bar for 1.4.12 Text Spacing.

Pros: Simple bookmarklet can toggle any page to see if it meets the WCAG 2.1 1.4.12 Text Spacing requirement.

Cons: Doesn't give you suggestions for how to fix it. You have to do that on your own.

8 WebAIM Color Contrast Simulator

What is it? Tool to manually check color contrast.

Pros: Has sliders to easily find your own replacement colors; Adjustable WCAG standards; Can view different text (i.e. normal, large); Can create a permalink

Cons: Can only enter hex.

9 WebAIM Link Contrast Checker

What is it? Tool to manually check color contrast for links.

Pros: Has sliders to easily find your own replacement colors; Adjustable WCAG standards; Can view different text combinations; Can create a permalink

Cons: Can only enter hex.

2.

Browser tools

Available as add-ons to your browsers, some of these tools are plugins and extensions, and others can be incorporated the browser’s own developer tools.

12

Browser tools are available as add-ons to your browsers. Some of these tools are plugins and extensions, and others can be incorporated and run from the browser’s own developer tools. Most browser tools have versions in the main browsers like Chrome, Firefox, and Safari.

16 seconds

Browser tools

Chrome text and spacing

Font Finder

WhatFont

13

1 Colorblinding

What is it? Simulates website as a color vision impaired person would see.

Pros: Includes several types of color vision impairment

Cons: Not many; Sometimes it switches back to regular view.

2 ColorZilla

What is it? Eyedropper, color picker, gradient generator, etc. I use it mostly for the color picker on photos.

Pros: Can easily get colors on almost any item on a page, including photos.

Cons: Can't use on PDFs and pattern lab.

3 Contrast Ratio Checker

What is it? Simple contrast ratio checker for web pages.

Pros: Gives details on any selected part of page that’s clicked including text size, WCAG standard met, color ratio, foreground color swatch and hex, and background color swatch and hex; Can click on multiple areas of one page.

Cons: Difficult to get colors from buttons at times as it clicks through when triggered; Can't use on PDFs and pattern lab.

4 High Contrast

What is it? Changes and inverts the color scheme to make pages easier to read for users with visual disabilities.

Pros: Gives some high-contrast filter options; easily see when two or more elements can cause a color contrast issue (i.e. gray background and light gray text).

Cons: It only gives a few high-contrast filter options.

5 Magnifying Glass

What is it? Applies a magnifying glass to any part on a page.

Pros: Lite addon that toggles magnifier with a click.

Cons: Not keyboard accessible, so only mouse users can use this tool.

6 Font Finder

What is it? Font inspector to get CSS styles of a selected element.

Pros: Gives you a lot of useful details on an element, including text and spacing.

Cons: It can sometimes be a little slow.

7 WhatFont

What is it? Easy-to-use font inspector to get CSS styles of a selected element.

Pros: Gives details on any selected part of page that’s clicked including font name, font weight, family, style, size, line height, color, and an example of the font’s output.

Cons: Can't use on PDFs and pattern lab.

Browser tools

14

1 Accessibility Insights (SHOW VIDEO!)

What is it? Provided by Deque, this helps developers quickly find and fix accessibility issues. Gives two options (FastPass and Assessment).

Pros: Includes a “highlight code” tool; FastPass runs 2 tests to find the most common a11y issues in less than 5 min.; Assessment walks through a guided process for accessing a11y compliance

Cons: It can be overwhelming for some users, especially newbies to a11y. I definitely recommend tooling around with it, and looking for online tutorials when needed. Let’s watch a video "Introduction to Accessibility Insights for Web" (2:53) @ https://youtu.be/U6NY8Cxym5g

2 Axe (launched from developer tools)

What is it? Provided by Deque, this tool is a lightweight a11y testing tool using axe core.

Pros: Includes a “highlight code” tool; Based on axe core, which is very stable and widely used; Easy to use and gives a lot of details with errors found and fixes.

Cons: You have to upgrade to axe Pro to enable scoping.

3 SiteImprove Accessibility Checker

What is it? Evaluates and gives an overview of a11y issues found on a page, and provides recommended fixes.

Pros: Includes a “highlight code” tool; Easy to use; Gives a lot of details on issue and fix.

Cons: Takes a lot of clicks to get between different errors via UI.

4 The Paciello Group - ARC Toolkit

What is it? Set of a11y tools to identify a11y problems in WCAG 2.0, 2.1, EN 301 549, and Section 508.

Pros: Quick loading; Returns detailed info; Highlights issues; Contains code snippet, error, and recommendation; Can filter test results.

Cons: None.

5 WAVE Accessibility Extension

What is it? Injects icons and indicators into the page to give feedback on a11y for manual evaluation.

Pros: Widely-used a11y tool; Displays errors on the page; Easy to learn

Cons: None

6 Web Developer

What is it? Adds a toolbar button with various web developer tools.

Pros: Easy to use toolbar that finds accessible and inaccessible elements on a page using the tab display; Gives an amazing amount of information about a page and/or form including tab order; Great for use during development, testing, and QA.

Cons: Not much! It can sometimes involve a lot of clicking between tabs.

7 Web Disability Simulator

What is it? Simulates how people with disabilities see the web.

Pros: Options given include Sight, Mobility, Read and write, and Concentration.

Cons: None.

Browser tools

Chrome developer tools

CSS

Mobile Simulation

Accessibility

15

1 CSS

What is it? View and change CSS using the inspect tool.

Pros: By right-clicking on an element and clicking Inspect, you can add or edit the CSS for elements.

Cons: None.

2 Mobile Simulation

What is it? Simulate a web page in different mobile devices.

Pros: Contains several device options; Can change orientation of page (landscape and portrait); Can add more devices to your list.

Cons: A limit to the devices you can add to your list.

3 Accessibility Pane

What is it? View a11y tree, ARIA attributes, and computed a11y properties of DOM nodes.

Pros: Gives you a lot of useful information to improve the a11y on the page.

Cons: None

4 Color picker

What is it? Measures color contrast ratio.

Pros: Easy to use; Shows properties on the actual element along with its color contrast

Cons: None

5 Lighthouse audit

What is it? Audit tool for several different types of audits including a11y.

Pros: Gives you mobile and desktop device options; Gives you a list of issues and fixes for each issue.

Cons: Can be a little bit hard to understand when reviewing the results at times.

6 Firefox Accessibility Inspector

What is it? List of items in the a11y tree that can be drilled down and evaluated for a11y issues.

Pros: Drills down to each element and gives brief report of potential issues; Links to a MDN web docs page with details, examples, and a solution.

Cons: Can be tedious to click through all of the elements; Doesn’t display an overview; Maybe be difficult to navigate for a newbie.

7 Page Inspector

What is it? Inspect any element on a page in Firefox.

Pros: Add/edit elements on a page to see how they can be made accessible.

Cons: None.

8 Responsive Design Mode

What is it? Simulate a web page in different mobile devices.

Pros: Contains several device options; Can change orientation of page (landscape and portrait); Can easily take a screenshot.

Cons: A limit to the devices you can add to your list.

Browser tools

Browser and device testing tools

Browserstack

16

Browserstack

What is it? App and browser testing tool.

Pros: Can test countless browser, app, device, and OS combinations.

Cons: A paid service from $29/mo - Enterprise

3.

Drupal tools

Both core and contributed modules that assist with accessibility.

17

Drupal tools incorporate both core and contributed modules that assist with accessibility. Some were developed exclusively for accessibility, while others help with accessibility in different ways that we'll discuss now.

14 seconds

Drupal tools

Core modules

Responsive Images

Text Editor/WYSIWYG

Views

Upcoming

Claro Admin Theme (video 2:15)

Olivero Theme (proof of concept)

18

1 Responsive Images

What is it? Loads images specifically sized for the user's screen based on the breakpoints.

Pros: Images load faster because they're optimized for mobile devices; Fallback support for IE8

Cons: Can have somewhat of a learning curve for some; I suggest following the modules documentation and tutorials

2 Text Editor/WYSIWYG

What is it? Based on CKEditor, User interface on text fields allowing HTML input.

Pros: Can limit what HTML input is allowed with different text formats (i.e. Basic HTML, Full HTML), HTML elements, and CSS selectors; Quick-edit option available.

Cons: Having structured content is very important, so relying on text editors is not a good idea. It should be used minimally.

3 Views

What is it? Present content in different ways including lists, posts, galleries, tables, maps, graphs, menu items, blocks, reports, forum posts, etc.

Pros: Add more descriptive aria-label attribute values to "Learn More" links; Shorten output to make content easier to read; Add a11y markup via the Views UI.

Cons: Some limitations in Views; can be frustrating.

4 Claro Admin Theme (SHOW VIDEO!)

What is it? A D8 admin theme developed by Lullabot as an alternative to Seven. See 2:15 video @ https://www.youtube.com/watch?v=-aFkS0_LEVs

Pros: A11y has been one of the most important factors during development; Clean look while also adding more design vs. Seven admin theme.

Cons: Still has issues in the queue that are being worked on.

5 Olivero Theme

What is it? A D9 theme to replace Bartik as the default Drupal theme.

Pros: A11y has been one of the most important factors during development; Clean, fresh, and responsive.

Cons: Still has issues in the queue that are being worked on; Needs a port to D8.

Drupal tools

19

1 Block ARIA Landmark Roles

What is it? Adds additional ARIA landmark and ARIA labels elements to blocks via the configuration form.

Pros: Makes your blocks accessible for screen reader users using ARIA.

Cons: If the user adds landmark roles to HTML5 elements, then they become redundant. It's important to know the rules to landmark roles.

2 Block Class

What is it? Adds CSS classes to any block through the block configuration

Pros: Can add multiple blocks for easier theming.

Cons: Easy to lose where CSS classes are set with a larger team who doesn't communicate or provide documentation.

3 CKEditor Accessibility Checker

What is it? Plugin from CKEditor.com that inspects content created in the text editor/WYSIWYG.

Pros: Provides real-time test results with fixes as user enters content in text editor; Some items include an auto-fix option.

Cons: Right now Drupal is wanting it to be in core however it's based on an old QuailJS library so that's stopped that from happening. Happily, there is an issue "#2731373: Include Axe accessibility tester in CKEditor" so that it will be included in a stable core release.

4 Contact + Contact Storage

What is it? Contact form with storage mechanism provided submitted messages, which are fully-fledged entities in D8.

Pros: Completely accessible contact form; Access to edit messages; Customize redirects and button text; Views integration

Cons: Large forms can become cumbersome

5 Pathauto (requires Token and CTools)

What is it? Auto-generates URL/path aliases for content.

Pros: Creates user-friendly (i.e. accessible) URL paths.

Cons: None.

6 Style Guide

What is it? Visual testing page for Drupal themes that displays all theme elements.

Pros: Easily test all of your theme elements for a11y issues on one page.

Cons: Page is long; Includes issues with Drupal core.

4.

OS tools

Accessibility tools that can be installed on the operating system on your computer.

20

Operating System accessibility tools are already installed on the operating system on your computer. Because of this, they generally work very well because they've generally undergone thorough testing by the company or group who has created them before they were released. There are of course exceptions to this rule...IE anyone?

20 seconds

OS tools

Mac tools

Mac Accessibility Tools (including VoiceOver and Text to Speech)

Includes:

  • Voice Control
  • VoiceOver Screen Reader
  • Hover Text
  • Siri
  • Text to Speech
  • Dark Mode
  • Dictation
  • Zoom

21

1 Voice Control

What is it? Control you Mac with your voice.

Pros: Makes using a Mac easier for all including those without use of their limbs and/or visual disabilities.

Cons: It's not perfect.

2 VoiceOver DEMO VOICEOVER SCREENREADER

What is it? Built-in screen reader.

Pros: Allows those with visual and other disabilities to browse the web.

Cons: Can be difficult to toggle with the newer keyboards; Has a learning curve; Proprietary product.

3 Hover Text

What is it? Gives a bigger, higher resolution version of text when pressing Command button.

Pros: Really helps those with visual disabilities.

Cons: None

4 Siri

What is it? Voice-controlled personal assistant.

Pros: Helps you to quickly find and open files and perform other tasks (i.e. reminders, text messages, etc.)

Cons: It's not perfect.

5 Text to Speech

What is it? Reads text aloud to you from any site or document when highlighted.

Pros: Has several different voices and languages; Can free up your time

Cons: None

6 Dark Mode

What is it? Transforms desktop and apps to a dark color scheme.

Pros: Easier on the eyes for those with sensitive eyes.

Cons: Doesn't work perfectly on all sites; Doesn't work well when inverting colors.

7 Dictation

What is it? When you talk, the Mac types.

Pros: Works in over 40 languages; Can use for searching the web, writing an email, etc.

Cons: None

8 Zoom

What is it? Magnify your screen by up to 20 times.

Pros: Helpful to those with visual disabilities.

Cons: None.

OS tools

Windows tools

Windows Accessibility Tools (including Narrator and Magnifier)

  • Narrator Screen Reader
  • Magnifier
  • Cursor and pointer size
  • Cortana
  • Speech recognition
  • High contrast display
  • Read in braille (beta)
  • Color filters

22

1 Narrator Screen Reader

What is it? Windows-based built-in screen reader.

Pros: Allows those with visual and other disabilities to browse the web.

Cons: Proprietary product.

2 Magnifier

What is it? Magnify all or part of your screen.

Pros: Helpful to those with visual disabilities.

Cons: None.

3 Cursor and pointer size

What is it? Change pointer color and size.

Pros: Helpful to those with visual disabilities.

Cons: None.

4 Cortana

What is it? Voice-controlled personal assistant.

Pros: Helps you to quickly find and open files and perform other tasks (i.e. reminders, text messages, etc.)

Cons: It's not perfect.

5 Speech recognition

What is it? Dictate documents, email, or the web via your voice.

Pros: Can run locally.

Cons: None.

6 High contrast display

What is it?

Pros: Helpful to those with visual disabilities.

Cons: None

7 Read in braille (beta)

What is it?

Pros: Helpful to those with visual disabilities.

Cons: In beta.

8 Color filters

What is it?

Pros: Helpful to those with visual disabilities.

Cons: None.

5.

Desktop tools

Once downloaded, these tools can be used from your computer’s desktop. These generally incorporate a GUI.

23

Desktop tools are downloaded and installed onto your computer or device and can be used from your computer’s desktop. These generally incorporate a GUI, or a Graphical User Interface.

13 seconds

Desktop tools

24

1 Microsoft Office Accessibility Checker

What is it? Tool that identifies a11y issues in all kinds of Office docs (i.e. Word, Excel, etc.)

Pros: One-click scanning tool that shows results in real-time as you enter content; Gives you steps to fix the issue

Cons: Can be buggy in that some issues don't show up

2 Google Docs Accessibility Tools & Best Practices

What is it? Tools and tips to make Google docs more accessible.

Pros: Complete list of tools and tips; Easy to apply to new and existing docs.

Cons: No built-in a11y scanning tool.

DEMO: https://docs.google.com/document/d/1S949_7HmPNFHmj4SmMENnSGKHNBBsSN3azx8_1ThloQ/edit

3 Acrobat PDF Accessibility Checker DEMO BELOW

What is it? Tool that identifies a11y issues in PDF docs.

Pros: Because it's an Acrobat tool testing PDF docs, it goes deep into the doc.

Cons: For some users, it can be difficult to figure out how to completely fix a doc (i.e. tables); Even if issues are fixed in source docs, sometimes they don't translate to PDF doc.

DEMO:

Desktop tools

Screen readers

JAWS Screen Reader (Windows - paid software)

NVDA (Windows)

Orca Screen Reader

25

1 JAWS Screen Reader (Windows - paid software)

What is it? Very popular Windows-based screen reader. JAWS = Job Access With Speech

Pros: Has a lot of backing, documentation, videos, and community.

Cons: Expensive with $90/year home license to $1200/year pro license; High learning curve; Difficult to toggle on/off

2 NVDA (Windows)

What is it? Windows-based screen reader provided by NV Access. NVDA = NonVisual Desktop Access.

Pros: Free; Getting more popular

Cons: High learning curve; Difficult to toggle on/off

3 Orca Screen Reader

What is it? Open source screen reader from the GNOME project. Orca = killer whale (because of JAWS and DOS Flipper)

Pros: Open source

Cons: Not auto-installed on Linux computers; Must be downloaded at https://linux.softpedia.com/get/Utilities/Orca-224-13083.shtml

Desktop tools

26

1 Photosensitive Epilepsy Analysis Tool (PEAT)

What is it? Trace Center's tool to identify seizure risks in web content and software.

Pros: Free; Can run on a Mac only.

Cons: Windows-only or dual-boot Mac w/Windows

2 The Paciello Group - Color Contrast Analyser (Mac and Windows)

What is it?

Pros: Can run on Windows and Mac; Quick-loading tool; Can enter several color types besides hex; Includes color picker; Shows example text;

Cons: Can't pull from Google docs or PDFs

3 The Paciello Group - Web Accessibility Toolbar (WAT) (Windows only)

What is it? Toolbar with several options to check for a11y.

Pros: Contains a lot of great features including Resize, CSS, Images, Color, Structure, Tables, etc.

Cons: Windows and IE-only

Thanks!

Any questions?

You can find me at:

@katannshaw

on

Twitter and LinkedIn

27

Ok that’s it. You can find me at @katannshaw on Twitter and LinkedIn. Thank you for your time. Does anyone have any questions?

11 seconds

Credits

Special thanks to all the people who made and released these awesome slide resources for free:

  • Presentation template by SlidesCarnival
  • Watercolor textures by GraphicBurguer

28

I want to give a special thanks to several great resources.

5 seconds

Credits

Special thanks to the following photographers from Unsplash:

  • "Yellow road for the blind in subway" by Martin Sanchez
  • "Blue legos" by Iker Urteaga
  • "Directional sign" by Nick Fewings
  • "Highway 212 forest road" by Matt Duncan
  • “Lagoon” by Anuj Chauhan

29

Credits

Special thanks to the following resources on accessibility:

30

Disclaimer

All rights reserved. This presentation is for learning purposes only. While sharing it with others on your team and the Drupal community is perfectly fine, using this presentation for monetary purposes is now allowed.

31

How Cool Accessibility Tools Can Make Your Life Easier - Google Slides