Writing Accessible HTML

In this lecture:

  • What is A11Y?
  • DOM vs. A11Y Tree
  • Assisted-Technologies & "Landmarks"

What is A11Y?

  • People are multiply abled across our senses, mental abilities, and physical abilities
  • Accessibility involves tools and practices to ensure content is usable for everyone

DOM (Document Object Model) Tree
vs
Acessibility Tree

  • DOM: HTML declares a document tree, where <html> is the root parent element.
  • Accessibility Tree: HTML also produces a different tree for ARIAs (Accessible Rich Internet Applications)
  • Let's inspect this example site in Chrome or Firefox.

WCAG 2.0 POUR Model

  • Perceivable: Can everyone perceive all of the elements on the page? Examples: alt attribute for img
  • Operational: Can everyone interact with the website regardless of disability? Examples: Navigable content (keyboards) or flash thresholds.
  • Understandable: Can all users understand the content on the site? Examples: terminology/discourse or consistent navigation and layout
  • Robust: Is the content accessible on all kinds of devices, including assistive technologies? Examples: Consistent and well-documented use of name and role attributes.

Perceivable: Can everyone perceive all of the elements on the page?

  • Adjustable font sizes
  • Alternative text descriptions for images
    <img src="path/luna.png"
         alt="Close up profile of a yellow lab dog smiling from ear to ear." />

POUR with Landmarks: Can everyone perceive, operate, and understand the website robustly across devices?

Screen reader demo on YouTube.

Landmarks

  • Create landmarks with appropriate HTML5 elements: nav, header, main, proper headings (h1, h2, h3, ...), aside, and footer
  • Let's review our demo with defined landmarks