Practical accessibility
for inclusive web

by Sasha

All content should be available to all peoples

15% of world's population

have some form of disability

WHO Fact Sheet: November 2016:

Disability affects 50% of US adults aged 75+ years old

Permanent disabilities

  • blindness
  • color blindness
  • dyslexia
  • hearing loss
  • learning disorder
  • cerebral palsy
  • intellectual disability
  • multiple sclerosis
  • cognitive disorder
  • rheumatoid arthritis
  • attention deficit (hyperactive) disorder (ADHD)

Temporary disabilities

  • broken limbs
  • eye injuries
  • hearing injuries
  • head trauma

Situational disabilities

  • sunlight
  • multi-tasking
  • holding a baby with one arm
  • e at your desk
  • no headphones handy
  • content is not in your native language

Accessibility benefits

Accessibility benefits

  • inclusion and empowerment
  • usability for everyone
  • SEO - Google is deaf and blind
  • more clients, customers, donors

Accessibility and the law

Section 508

WCAG 2.0

Section 508

  • in the US
  • applies to federally funded orgs and projects
    ex. higher ed, government orgs, non-profits
  • new rules will be enforced Jan 2018 - essentially becoming WCAG 2.0
  • general business requirements on their way in 2018
  • 1st fine - maximum 55k-75k USD, subsequently - maximum 150k USD

WCAG 2.0

  • World Wide Web Consortium's Web Content Accessibility Guidelines
  • worldwide
  • 3 levels: A, AA, AAA
  • UN countries adopt their own version but generally at WCAG 2.0 AA

WCAG 2.0 in Canada

Section 508

WebAIM's Section 508 Checklist:

WCAG 2.0

WebAIM's WCAG 2.0 Checklist:

Checklists vs project roles

Project Manager → Information Architect → UX Designer →
UI Designer → Developer → Content Manager

Checklists vs project roles

Project Manager → Information Architect → UX Designer → UI DesignerDeveloperContent Manager

Everyone needs to be involved in accessibility

Planning for accessibility

Include accessibility as a standard not optional item on separate line in proposals

Start addressing accessibility from the very beginning of each project and continue through launch

Captions and transcripts need to be written and integrated as alternatives to video and audio content

Accessibility and UX

Accessibility and UX

  • use temporary & situational disabilities to include accessibility in user stories
  • include accessibility testing in user testing

Design for accessibility

Optimize contrast for legibility

Can you read me?

Can you read me?

Can you read me?

Can you read me?

Can you read me?

Can you read me?

Text:Background 1:4.5

Color contrast tools

Color Contrast Checker

COLOR SAFE (palette picker)

Color Contrast Tools list from WebAxe

Don't use Color alone

Use font style, underlines, other styles to clearly indicate links

Don't use Color alone give direction: Click the blue link to donate

Don't use shape alone give direction: Click the circle button to donate

Color Blindness Tools

Colorblind Web Page Filter

Colorblinding (Chrome extension)

Color Oracle (software Mac + PC)

Accessibility design tips

  • collaborate with developers and listen to their accessibility concerns
  • make things functional before making them pretty
  • consider assistive technology in your design process
  • don't reproduce features that are already available in browser and assistive technology

Develop for accessibility

Headings for accessibility

  • make them meaningful
  • only one <h1> per page
  • don't skip levels

Headings for accessibility

Headings for accessibility

Accessible images

Accessible images

  • decorative images belong in CSS
  • use empty alt="" so screen readers ignore it

Accessible images

If you must embed text in image...

... use alt="short text alternative"

Accessible images

Simple informative images...

  • use alt="short text alternative"
  • or use alt="short label"
    + caption with short descriptive text

Accessible images

For complex and/or long images...

  • use alt="short label
    + location of long text alternative"
  • + long text alt on the same or linked page

Text alternatives decision tree:

Accessible images

Hide long text alt with screen reader-specific styles

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	position: absolute !important;
	white-space: nowrap;
	height: 1px;
	width: 1px;
	overflow: hidden;

Accessible images

SVG are images too

Green rectangle
A light green rectangle with rounded corners and a dark green border.


DOM order matters

  • screen readers go in DOM order
  • try not to use flexbox order
  • try navigating a website using the TAB key

Focus states matter

If your CSS uses ...

:focus, :focus {outline: none}

... fix it

Add skip links

#skip {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;

#skip:focus {
	position: static;
	width: auto;
	height: auto;

Accessible links

Accessible links

  • use meaningful link text
  • not "click here" or "read more" or the URL

Meaningful link text

Meaningful link text

Accessible links

Add text specifically for screen readers


  Read more
  about magical unicorns

  follow us on twitter


Use appropriate clickable elements

Accessible clickable elements

  • links to other URLs should use <a>
  • buttons that change something on the current page should use <button>
  • buttons that submit forms should use <input type="submit"> or <button type="submit">

Don’t use a <div> or <span> for hamburger menus

Accessibility through semantic HTML5 elements

  • HTML5 offers great sectioning tags with baked-in accessibility
  • use <header> <nav> <main> <aside> <footer> <form>
  • set lang attribute ex: <html lang="en-CA" etc. etc.

Accessible forms

Use proper "for" and "id" attributes to connect form fields and labels

Don't disable zoom

  • look for <meta name="viewport"> and remove minimum-scale=1.0 maximum-scale=1.0 user-scalable=no
  • look for @-ms-viewport {} and remove zoom:1.0


The Accessible Rich Internet Applications Suite

  • labels specifically for screen readers
  • helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies
  • identify elements on the site (role="navigation"), states (aria-expanded="false"), and design patterns (create navigation for apps).

WAI_ARIA example

Collapsable accordion: closed

WAI_ARIA example

Collapsable accordion: open

Aliquam tincidunt velit sit amet.

ARIA further reading

Dev accessibility tools


Wave features

  • section 508 and WCAG 2.0 A/AA
  • free in-browser testing
  • free Chrome extension
  • premium API

More accessibility web tools

  • Tota11y:
    • doesn’t test for everything but will test for:
      • alt text and confusing link text
      • color contrast
      • heading structure
      • form labels
      • ARIA landmarks
    • Javascript file that places button on site
    • free Chrome extension
  • HTML_CodeSniffer:
    • test for: Section 508 and WCAG 2.0 A/AA/AAA
    • copy/paste code for quick testing
    • free bookmarklet for in-browser testing

More accessibility web tools

  • Pa11y:
    • test for Section 508 WCAG 2.0 A/AA/AAA
    • web dashboard
    • JSON web service
    • command line
  • Axe:
    • javascript library and returns the violations
    • free JS library
    • free Chrome extension (in dev tools)
  • Web Accessibility Evaluation Tools List:

WordPress and accessibility

Accessibility dev tips

  • use accessibility tools to assess themes, plugins etc
  • don’t check accessibility at the end just before going live
  • just because you can make/use all sorts of fancy JS effects don't mean you should
  • make decent code that assistive technology can use
  • don't just rely on checklists and plugins: user testing is better

Next step for a more inclusive web

  • implement tools in your workflow
  • educate yourself about accessibility
  • educate others about accessibility
  • user testing ftw

Go out and make an
accessible and inclusive web!

Thank you!