Accessibility for designers & developers.

Hi! I’m Ally Palanzi.

Lead Engineer at Stitch Fix

@mylifeasalllly

allypalanzi.com/a11y-tech-rebalanced

Accessibility (a11y) refers to the design of products, devices, services, or environments for people who experience disabilities.

In 2001 the World Health Organization redefined disability as: “a mismatch in interaction between the features of a person’s body and the features of the environment in which they live.”

Our work can create or remove mismatches in interaction.

The impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world.

W3C Accessibility

By designing with disabilities in mind, we create better products for everyone.

Disability affects all of us at some point.

  • Permanent
  • Temporary
  • Situational
How four categories of impairments (touch, see, hear, and speak) apply to users in mild, moderate, and severe instances. Microsoft Design

Ok, but why should we care?

a.k.a. what to tell your boss

It’s better for business

  • Device independence
  • Usability
  • Design for older users
  • SEO

Case studies show that accessible websites have better search results, reduced maintenance, and increased audience reach.

W3C Accessibility Overview

Accessibility supports social inclusion, allowing us to hire more diversely & reach a diverse audience.

Scary legal things!!

Many countries are recognizing and acting upon the need to ensure access to the web for people with disabilities.

Web Aim

A common approach throughout the world is for nations to adopt the Web Content Accessibility Guidelines.

USA 🇺🇸

Section 508 of the Rehabilitation Act means that all users, regardless of disability status, can access technology.

Australia 🇦🇺

World Wide Web Access: Disability Discrimination Act Advisory Notes requires equal access for people with a disability where it can reasonably be provided.

Europe 🇪🇺

EU Charter of Fundamental Rights Article 21 prohibits discrimination based on grounds of disability, among others.

...and more!

WebAIM World Laws

And if this still doesn't convince your stakeholders...

Ask for forgiveness later

Accessible Design

Make sure there is enough contrast between text and its background color.

example of The Verge logos in different colors stating if they pass accessibility colors or not

Don't indicate important information using color alone

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius dicta quisquam molestiae inventore, nesciunt id facilis. Voluptate exercitationem odio explicabo veritatis accusamus voluptatibus quod. Culpa maxime dolorem iure nesciunt eum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius dicta quisquam molestiae inventore, nesciunt id facilis. Voluptate exercitationem odio explicabo veritatis accusamus voluptatibus quod. Culpa maxime dolorem iure nesciunt eum!

Pair values of colors together (not only hues) to increase contrast

examples of good colors
examples of bad colors

Design accessible forms

Fields should have labels that are always present, error messages should be clear

examples of good colors
examples of bad colors

Make links descriptive

Descriptive links help users provide context for where the link will take them. Uses of click here and read more should be avoided in most situations. This is also helpful for SEO!

The best thing about cats is they are so cute.
The best thing about cats is they are so cute. Click here to learn more.

Accessible Markup

Use semantic HTML

  • Limit div soup, strip unnecessary HTML elements
  • Use headings h1-h6 for content structure
  • Avoid skipping headings in the same sections
  • It’s okay to have multiple of the same heading on a page.
W3C HTML5 Semantic Elements

Use the correct HTML elements

  • <header> for headers
  • <nav> for navigation
  • <section> for grouping page sections together
  • <article> for grouped content
  • <aside> for supplemental sidebar information
  • <cite> for citations
  • <footer> for footers
  • ...and more!

HTML Landmarks

  • These landmarks help define specific areas that a user might want to seek out and can save them a lot of time.
  • <header> for role="banner"
  • <main> for role="main"
  • <nav> for role="navigation"
  • <footer> for role="contentinfo"
  • <aside> for role="complementary"

HTML document should have a language attribute



						<html lang="en">

Build accessible forms

  • Always have labels, don’t rely on placeholder text
  • Labels should not disappear on form focus
  • Use fieldset and legend for larger forms like a checklist
  • Always, always, always use semantic HTML form markup. Don't alter other elements to behave like forms

						<label for="name">Name:</label>
						<input id="name" type="text" name="name">
						
						<fieldset>
						 <legend>Select your pizza toppings:</legend>
						
						 <input id="ham" type="checkbox" name="toppings" value="ham">
						 <label for="ham">Ham</label>
						 <input id="pepperoni" type="checkbox" name="toppings" value="pepperoni">
						 <label for="pepperoni">Pepperoni</label>
						</fieldset>

Write good alt text for your images



// good
<img src="catomg.jpg" alt="cute fluffy cat">
//bad
<img src="catomg.jpg" alt="image of animal">

For decorative images

  • Alt text should be blank (works in every browser)
  • Role should be presentation (limited in some browsers)


	<img src="border.png" alt="" role="presentation">

Focus States

  • NEVER remove focus states from elements
  • Design better ones or leave them as-is
  • These should not be subtle – they should stand out so users can tell what item they are tabbing to

						*:focus {
						outline: none; //BAD!!!
						}

Know when to use buttons vs. links

  • Linking to something outside the page? Use an anchor tag
  • Performing an action on the page? Use a button

Accessible Inline SVGs

SVGs are often used as icons on interactive elements in sites. The SVG should have a title or description, then you can use the aria-labelledby attribute to tell the screen reader what element to use to describe the SVG.



 Green rectangle
Sitepoint Tips for Creating Accessible SVG

If an experience cannot be made accessible, create another route for assistive tech.

Maps, charts, graphs might be more accessible as HTML tables.

Allow viewport zooming

Support keyboard navigation

  • Users should be able to tab through the entire page
  • Don’t allow “keyboard traps”

Sites should have a Skip Navigation feature

example of skip navigation link on healthcare.gov

Accessible JavaScript

Single pages applications

  • Notifying screen readers of display changes by programatically setting focus on elements
  • Notify users of errors

Use semantic markup

  • JavaScript applications are still the web, we can't forget the fundamentals and not use semantic HTML!

Modals 🙈

  • Notify screenreaders of modals with focus
  • Ensure escape key closes the modal
  • Don't allow users to tab to anywhere else on the page besides what is displayed within the modal

Testing best practices

  • Navigate the page with your keyboard
  • Add accessibility to your project checklist just as you would any other function or feature
  • Include a11y in your device/browser QA process
  • Test early and often!

Screen Readers

A program that helps visually impaired people navigate a computer. There are many different versions, that are often paired with a specific browser. The most common:

  • NVDA in Firefox
  • VoiceOver in Safari
  • JAWS in Internet Explorer
  • ChromeVox in Chrome

Chrome Lighthouse Audit

screenshot of lighthouse audit tool

axe Browser Extension

screenshot of axe developer tools

Tota11y bookmarklet

screenshot of tota11y bookmarklet on Curbed

Colour Contrast Analyser screenshot of colour contrast analyser

Tools & Resources:

Accessibility is everyone’s responsibility

  • Don’t hesitate to push back on inaccessible designs
  • Semantic HTML goes a long way

Questions?

Thank you!

@mylifeasalllly

#techrebalanced

@mylifeasalllly