How to not Fail at Building Accessible Web Applications

This site is also available as a slideshow.

Get to know your users

• 👩🏻‍🦯
  Users with visual impairments
• 😩
  Users with cognitive limitations
• 🧏🏿
  Users with auditory impairments
• 🎨
  Users with different color perceptions
• 🏎️
  Users with epilepsy or motion sickness
• ⌨️
  Users with physical impairments
• 📱
  Users who cannot afford expensive hardware

Step 1: Begin by building and testing the HTML layer

Consider multiple possible semantic HTML layers which would work as a base

Document your thoughts as you go!

It may be necessary to add minimal amounts of JavaScript to test any widgets that we want to add.

Add a few choice ARIA attributes to improve the accessibility of your markup

• Add a descriptive aria-label to each ul unordered list
• Indicate link to current page with aria-current="page"
• Add role="list" to all lists where we are going to change the display property with CSS (See Blog Post on "Fixing Lists" by Scott O'Hara)

Example: HTML-only Navbar

<details> elements are a great HTML-only fallback!

Add skip links to improve navigation for keyboard users

What are all of the points that we need to consider to make the HTML of a website accessible?

Step 2: Add a CSS layer to implement the design

Style skip links so that they are hidden except when focused

.skip-link {
	/* ...styles for skip link... */

	&:not(:focus) {
		@extend %sr-only;
	}
}

Connect CSS rules to ARIA attributes to ensure HTML is correct

/* Use CSS rules to enforce the accessibility of the current link
within the navbar. If it is visually correct, it will also be
semantically correct. */
a[aria-current='page'] {
	text-decoration: underline;
	text-decoration-color: $active-color;
	text-decoration-thickness: 3px;
	text-underline-offset: $spacer-xs;
}

See Blog Post on "Using CSS to Enforce Accessibility" by Adrian Roselli

Define CSS properties to tweak the theme based on CSS media features

@media (prefers-reduced-motion: no-preference) { /* ❤️ 🏎️ */
	--grid-row-transition: grid-template-rows #{$speed} #{$easing};
	--visibility-transition: visibility #{$speed} #{$easing};
}

@media (forced-colors: active) { /* ❤️ 🎨 */
	--forced-colors-link-border-width: 0;
	--forced-colors-action-margin: #{$navbar-focus-outline-width};
	--forced-colors-link-decoration: underline;
	--forced-colors-navbar-toggler-width: 10rem;
}

@media (pointer: fine) { /* ❤️ 📱 vs. 🖱️ */
	--pointer-fine-navbar-meta-font-size: #{$small-font-size};
	--pointer-fine-navbar-meta-spacer: #{$spacer-xs * 0.5};
}

Important Media Queries

• prefers-reduced-motion — ALWAYS reduce motion when a user requests it to prevent possible epileptic event or motion sickness 🏎️
• forced-colors, prefers-contrast, and prefers-color-scheme indicate different user color needs 🎨
• pointer and hover can indicate usage of mobile devices 📱

Use a color contrast checker to ensure that all color combinations pass at least the WCAG 2.0 AA level

Ensure focus Styles have sufficient contrast!

With focus-visible we can turn off focus rings for users who are navigating with a mouse.

/* double ring for focus to improve contrast */
&:focus {
	border-color: $navbar-link-hover-color;
	outline: 2px solid $navbar-lightened-bg;
}
/* Remove outline styles when keyboard not being used */
&:focus:not(:focus-visible) {
	border-color: transparent;
	outline: none;
}

Example: Navbar with only HTML and CSS

Step 3: Add JavaScript to improve the design

Progressively-enhance <details> elements to become a toggle button using aria-expanded

needed here "only" to add animation to submenu toggle and hover

<sub-menu>
	<details>
		<summary>
			...
		</summary>
		<ul role="list"
				aria-label="...">
			...
		</ul>
	</details>
</sub-menu>

<sub-menu>
	<button type="button"
					aria-expanded="false">
		...
	</button>
	<div>
		<ul role="list"
				aria-label="...">
			...
		</ul>
	</div>
</sub-menu>

Hook CSS styles for showing/hiding the menu to the aria-expanded attribute

This ensures that the attribute is correctly defined on the button

sub-menu {
	button[aria-expanded='false'] + div {
		/* styles for collapsed submenu */
	}

	button[aria-expanded='true'] + div {
		/* styles for expanded submenu */
	}
}

Example: Navbar with HTML, CSS and JavaScript

When else may I need want JavaScript?

First rule of ARIA

If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

Know your widgets

How to test your web application

Automate some checks with WAVE web accessibility evaluation tool or Accessibility Insights.