Slide 1

Slide 1 text

An overview of the available tools Radimir Bitsov @radibit Better development strategy for web a11y

Slide 2

Slide 2 text

@radibit

Slide 3

Slide 3 text

@radibit Radimir Bitsov Front-end engineer who ❤ web performance, accessibility, and interface animation.

Slide 4

Slide 4 text

@radibit @radibit GitHub · Twi er · CodePen

Slide 5

Slide 5 text

@radibit What is Web Accessibility?

Slide 6

Slide 6 text

@radibit “…the degree to which a website is accessible by as many people as possible” Laura Kalbag, 
 Designer & Writer, Ind.ie Accessibility For Everyone

Slide 7

Slide 7 text

@radibit It’s not about a few people Nearly 1 in 5 people have a disability in the EU Web A11y helps people with physical, mental, vision, hearing challenges and more. A lot of different groups!

Slide 8

Slide 8 text

@radibit # $

Slide 9

Slide 9 text

@radibit % &

Slide 10

Slide 10 text

@radibit Everyone might experience impairments h ps://www.microso .com/en-us/Design/inclusive The persona spectrum helps to foster empathy and to scale a solution to a broader audience.

Slide 11

Slide 11 text

@radibit “What if there was no such thing as a normal human being? If there’s no normal, there’s no edge cases – just diverse people changing from one moment to the next.” Kat Holmes, 
 Director of Inclusive Design, Microso

Slide 12

Slide 12 text

@radibit Web a11y should be an integral part of an ethical and empathetic development process

Slide 13

Slide 13 text

@radibit A11y Tooling ⚒

Slide 14

Slide 14 text

@radibit Color and Contrast

Slide 15

Slide 15 text

@radibit Color Oracle h p://colororacle.org/ Open source, cross-platform application which simulates common color vision impairments.

Slide 16

Slide 16 text

@radibit

Slide 17

Slide 17 text

@radibit

Slide 18

Slide 18 text

@radibit

Slide 19

Slide 19 text

@radibit Colorable h p://jxnblk.com/colorable/ Find a safe color combination with predefined colors according to the WCAG standards.

Slide 20

Slide 20 text

@radibit Color Safe h p://colorsafe.co/ Create an accessible color pale es based on WCAG guidelines of text and background contrast ratios.

Slide 21

Slide 21 text

@radibit

Slide 22

Slide 22 text

@radibit Color Contrast Sketch Plugin h ps://github.com/getflourish/Sketch-Color- Contrast-Analyser Calculates the color contrast of two layers and evaluates it against the WCAG.

Slide 23

Slide 23 text

@radibit Readability

Slide 24

Slide 24 text

@radibit Readability Analyzer h ps://datayze.com/readability-analyzer.php Calculate the readability of a passage of text.

Slide 25

Slide 25 text

@radibit Readability Analyzer h ps://datayze.com/readability-analyzer.php Aim for a Flesch Reading Ease level between 50 – 60.

Slide 26

Slide 26 text

@radibit Use simple word and phrases h ps://plainlanguage.gov/guidelines/words/use- simple-words-phrases/ Plainlanguage.gov's list of simpler words.

Slide 27

Slide 27 text

@radibit Plain English words and phrases h ps://www.wikiwand.com/en/ List_of_plain_English_words_and_phrases

Slide 28

Slide 28 text

@radibit h p://www.handcoding.com/presentations/be eraccessibility/

Slide 29

Slide 29 text

@radibit Screen Readers

Slide 30

Slide 30 text

@radibit JAWS h ps://www.freedomscientific.com/Products/ Blindness/JAWS Jaws (Job Access With Speech) is a proprietary screen reader for Windows from Freedom Scientific.

Slide 31

Slide 31 text

@radibit NVDA h ps://www.nvaccess.org/ NVDA (NonVisual Desktop Access) is a free (open source) screen reader for Windows from NVAccess.

Slide 32

Slide 32 text

@radibit Screen Reader Basics: NVDA -- A11ycasts #09

Slide 33

Slide 33 text

@radibit VoiceOver h ps://www.apple.com/accessibility/mac/vision/ Integrated screen reader available in macOS and all Apple devices.

Slide 34

Slide 34 text

@radibit

Slide 35

Slide 35 text

@radibit h ps://developer.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/

Slide 36

Slide 36 text

@radibit A11y Audit

Slide 37

Slide 37 text

@radibit aXe h ps://www.axe-core.org/ Comprehensive accessibility checker for detecting issues on your website or web app.

Slide 38

Slide 38 text

@radibit

Slide 39

Slide 39 text

@radibit Sonarwhal h ps://sonarwhal.com/ A linting tool that will help you with your site's accessibility, speed, and security.

Slide 40

Slide 40 text

@radibit

Slide 41

Slide 41 text

@radibit Lighthouse h ps://developers.google.com/web/tools/lighthouse/ Lighthouse is an open-source, automated tool integrated into the Chrome DevTools for improving the quality of web pages.

Slide 42

Slide 42 text

@radibit

Slide 43

Slide 43 text

@radibit Automated Testing

Slide 44

Slide 44 text

@radibit PA11Y h ps://github.com/pa11y/pa11y Your automated accessibility testing pal. It runs HTML CodeSniffer from the command line for programmatic accessibility reporting.

Slide 45

Slide 45 text

@radibit

Slide 46

Slide 46 text

@radibit h ps://open-indy.github.io/Koa11y/

Slide 47

Slide 47 text

@radibit AATT h ps://github.com/paypal/AATT Automated Accessibility Testing Tool (AATT) according to the WCAG standards.

Slide 48

Slide 48 text

@radibit AATT + NemoJS h p://nemo.js.org/ AATT can be integrated into NemoJS testing framework to run accessibility analysis during automated unit testing.

Slide 49

Slide 49 text

@radibit AccessibilityJS h ps://github.com/github/accessibilityjs Client side accessibility error scanner.

Slide 50

Slide 50 text

@radibit More resources

Slide 51

Slide 51 text

@radibit Funkify h p://www.funkify.org/ Funkify is a Chrome extension that helps you experience the web and interfaces through the eyes of people with different abilities and disabilities.

Slide 52

Slide 52 text

@radibit

Slide 53

Slide 53 text

@radibit a11y.css h ps://ffoodd.github.io/a11y.css/ CSS file which indicates potential accessibility related issues in the HTML files. It can be used as a bookmarklet.

Slide 54

Slide 54 text

@radibit a11y.css h ps://ffoodd.github.io/a11y.css/ CSS file which indicates potential accessibility related issues in the HTML files. It can be used as a bookmarklet.

Slide 55

Slide 55 text

@radibit revenge.css h p://heydonworks.com/revenge_css_bookmarklet/ CSS bookmarklet that notifies developers for problems in their HTML code.

Slide 56

Slide 56 text

@radibit revenge.css h p://heydonworks.com/revenge_css_bookmarklet/ CSS bookmarklet that notifies developers for problems in their HTML code.

Slide 57

Slide 57 text

@radibit Cupper h ps://thepaciellogroup.github.io/cupper/ Documentation builder created with web accessibility in mind for organizing inclusive components.

Slide 58

Slide 58 text

@radibit WebAIM h ps://webaim.org/ Amazing collection of resources, trainings, evaluation tools (WAVE, Colour Checker etc.) on web accessibility.

Slide 59

Slide 59 text

@radibit Inclusive Components h ps://inclusive-components.design/ Pa ern library of common interface components with focus on inclusive design.

Slide 60

Slide 60 text

@radibit “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, 
 Engineer & Computer Scientist

Slide 61

Slide 61 text

@radibit Resources • h ps://abookapart.com/products/accessibility-for-everyone • h ps://www.microso .com/en-us/Design/inclusive • h p://colororacle.org/ • h p://jxnblk.com/colorable/ • h ps://github.com/getflourish/Sketch-Color-Contrast-Analyser • h ps://datayze.com/readability-analyzer.php • h ps://plainlanguage.gov/guidelines/words/use-simple-words-phrases/ • h p://www.handcoding.com/presentations/be eraccessibility/ • h ps://www.axe-core.org/ • h ps://sonarwhal.com/ • h ps://developers.google.com/web/tools/lighthouse/

Slide 62

Slide 62 text

@radibit Resources • h ps://github.com/pa11y/pa11y • h ps://open-indy.github.io/Koa11y/ • h ps://github.com/paypal/AATT • h p://nemo.js.org/ • h ps://github.com/github/accessibilityjs • h p://www.funkify.org/ • h ps://ffoodd.github.io/a11y.css/ • h p://heydonworks.com/revenge_css_bookmarklet/ • h ps://thepaciellogroup.github.io/cupper/ • h ps://webaim.org/ • h ps://inclusive-components.design/

Slide 63

Slide 63 text

@radibit Thank you @radibit Slides: h p://bit.ly/web-a11y-tooling