MAKING YOUR WEBSITE WORK FOR EVERYONE Natalie MacLees @nataliemac Accessibility testing digita11y 

INCLUSIVE DESIGN & ACCESSIBILITY 

WHAT IS ACCESSIBILITY? ? 

Accessibility 
 means making the 
 web usable for 
 people with disabilities. 

One in four adults in the U.S. has a disability that impacts 
 major life activities 

Permanent Temporary Situational ! ! ! 

Accessibility 
 means making the 
 web usable for 
 people with disabilities. 

Accessibility 
 means making the 
 web usable for 
 everyone. 

Web accessibility is the degree to which a website is usable by as many people as possible. LAURA KALBAG 

LEGAL CONSIDERATIONS " 

ACCESSIBILITY IS A CIVIL RIGHT # 

Is your website accessible? 

Chances are… NO. 

WebAIM Million 

98% had identifiable accessibility issues 

WCAG Web Content Accessibility Guidelines 1.0 May 1999 2.0 December 2008 2.1 June 2018 

A AA AAA WCAG Compliance Levels 

A11Y TIPS 

1. Select colors with enough contrast 

Trendy theme design. Trendy theme design. 

2. Don't use color as the only means of conveying information 

Message Message Message Message $ Message $ Message % Message % Message 

3. Everything accessible and functional with keyboard only 

Home About Contact Home About Contact 

4. Provide a way to stop or pause animations 

Video by George Morina from Pexels Here is some important text for you to try and read while the birds run around… 

5. Provide meaningful text alternatives to non-text content 

Transcript Transcript Captions Descriptions Alt Text Captions & ' ( Audio Video Image 

6. AVOID IDIOMS, JARGON, ABBREVIATIONS, AND OTHER NONLITERAL WORDS 

Accessible websites follow the WCAG (Web Content Accessibility Guidelines). 

7. CREATE CLEAR CONTENT AT AN APPROPRIATE READING LEVEL 

Yoast SEO Grammarly Hemingway 

8. USE HEADINGS,
 SUBHEADINGS, AND
 LISTS CORRECTLY 

H1: Title of page or post Intro paragraph H2: Section header Section paragraphs with some information H3: Subsection header Subsection paragraphs with some information H2: New section header Section paragraphs with some information 

9. BE INTENTIONAL WITH LINK TEXT 

To download the documents, click here. Download the documents. 

https://training.wp-accessible.org/ 

WAVE wave.webaim.org 

Automatic checker caveats 

Thank You! Natalie MacLees hiredigitally.com Download presentation slides: https://speakerdeck.com/nataliemac ) 

RESOURCES Accessibility Toolkit: hiredigitally.com/accessibility-toolkit WAVE: wave.webaim.org Koa11y: open-indy.github.io/Koa11y/ Axe: deque.com/axe Alternative text for images: make.wordpress.org/accessibility/ handbook/content/alternative-text-for-images/ Hemingway: hemingwayapp.com Grammarly: grammarly.com Yoast SEO: wordpress.org/plugins/wordpress-seo/ 

RESOURCES WP Accessibility: wordpress.org/plugins/wp-accessibility/ Creating accessible PDF documents: gla.ac.uk/myglasgow/ digitalaccessibility/documents/pdfdocuments/ Create accessible PDFs: section508.gov/create/pdfs Create accessible digital products: section508.gov/create Color contrast checker webaim.org/resources/contrastchecker/ 

BIBLIOGRAPHY Prevalence of Disabilities and Health Care Access by Disability Status and Type Among Adults, CDC August 2018: cdc.gov/mmwr/volumes/67/ wr/mm6732a3.htm?s_cid=mm6732a3_w WebAIM Million: webaim.org/projects/million 10 Tips for Publishing Accessible Content: palantir.net/blog/10-tips- publishing-accessible-content Majority of websites are inaccessible to blind users: sdtimes.com/ softwaredev/report-majority-of-websites-are-inaccessible-to-blind- users/