Practical accessibility
for inclusive web


by Sasha Endoh@sashmographsashaendoh.com

All content should be available to all peoples


15% of world's population

have some form of disability



WHO Fact Sheet: November 2016: http://www.who.int/mediacentre/factsheets/fs352/en/


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

http://webaim.org/articles/laws/usa/

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

http://webaim.org/articles/laws/world/

WCAG 2.0 in Canada

http://webaim.org/articles/laws/world/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

webaim.org/resources/contrastchecker/

COLOR SAFE (palette picker)

colorsafe.co

Color Contrast Tools list from WebAxe

webaxe.org/color-contrast-tools/

Don't use Color alone

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

Don't use Color alone

...to give direction: Click the blue link to donate


Don't use shape alone

...to give direction: Click the circle button to donate

Color Blindness Tools

Colorblind Web Page Filter

toptal.com/designers/colorfilter

Colorblinding (Chrome extension)

chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa

Color Oracle (software Mac + PC)

colororacle.org

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

wordpress.com

Headings for accessibility

wordpress.com

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: http://4syllables.com.au/articles/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

wordpress.com

Meaningful link text

wordpress.com

Accessible links


Add text specifically for screen readers



  Twitter



  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

WAI_ARIA


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

wave.webaim.org

Wave features

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

More accessibility web tools

  • Tota11y: khan.github.io/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: squizlabs.github.io/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: pa11y.org/
    • test for Section 508 WCAG 2.0 A/AA/AAA
    • web dashboard
    • JSON web service
    • command line
  • Axe: deque.com/products/axe
    • javascript library and returns the violations
    • free JS library
    • free Chrome extension (in dev tools)
  • Web Accessibility Evaluation Tools List: w3.org/WAI/ER/tools/

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!


Slides: https://www.sashaendoh.com/talks/a11y-wcmtl/


Sasha Endoh@sashmographsashaendoh.com