MAD9013

Week 11: Accessibility

Agenda

In-Class Tutorial

Intro to Accessibility

Together we will explore the basics of web accessibility.

Deliverables

In-Class 10

Tabbing & Focus States

Let's make our website more accessible and keyboard friendly with tabbing and focus states.

Due: Fri Nov 17, 2023

 Assignment 10

Page Accessibility Audit

Conduct a thorough audit of the Tabbing & Focus page to ensure it passes accessibility requirements.

Due: Sun Nov 19 2023

# What Does "Accessibility" Mean?

In regards to the web, accessibility means designing and developing our websites so that anyone can successfully use our website, regardless how they interact with it.

As discussed in the video above, accessibility can be a very complex topic. In this course are only going to scratch the surface of what can be done to make websites fully accessible for all. However, implementing the basics that we will cover will create a solid foundation and that will solve a large percentage of common accessibility needs. We will cover:

  • Review and implement proper HTML semantics (this on its own goes a long way!)
  • Color contrast
  • Skip links, tabbing and keyboard navigation
  • aria-labels and screen readers

It’s about everyone

Accessibility is about every human—not just extreme cases. Sometimes it’s easier to think in terms of extremes because it gives us a goal, but making our website work better for extremes also makes it work better for everybody else.

The great thing about the web and computers is that they empower everybody. It’s our goal to help every human accomplish what they want on our website, regardless of their physical, mental, or technological capabilities.

# Impairments

Looking at specific impairments helps us narrow in on specific issues and fixing these issues helps our website work for everyone else.

There are lots of different impairments that can affect human beings. But it’s important thing to remember is that these impairments can be temporary—as an example: a broken arm.

# Visual

Visual impairments are issues that affect eyes, e.g. blindness, partial or full; colour blindness; cataracts; glaucoma; age; etc.

# Things we can do

  • Allow text to be resized (using rem)
  • Have good contrast in colours
  • Test for colour blindness related issues
  • Make sure the website works well with screen readers
  • Use proper alt attributes
  • Don’t autoplay any sound

# Mobility and dexterity

Mobility and dexterity impairments primarily affect people’s arms and hands, e.g. missing a hand, limited movement, difficulty with fine control, trouble holding a mouse, termors or shakes, etc.

# Things we can do

  • Recognize and prepare for the fact that not everybody will use a mouse
  • Make the website keyboard accessible
  • Increase hit areas of links and buttons

# Auditory

Impairments that affect a person’s ability to hear, e.g. deafness, partial deafness, etc.

# Things we can do

  • Provide text captions and subtitles
  • Don’t rely on sound for indicators.
  • Don’t autoplay any sound

# Cognitive

Generally considered something that affects a person’s brain, e.g. dyslexia, memory issues, problem solving issues, attention deficits, hyperactivity, reading abilities, etc.

# Things we can do

  • Make it clear where in the website the user is
  • Organize your content correctly & use proper headings
  • Make the text easily scannable
  • Clearly mark links
  • Use lots of images and graphics
  • Don’t autoplay any sound

# Tools

There are a few things that you should check on every website—at least—to help with accessibility.

WARNING

The tools are still no replacement for proper user and accessibility testing.

  • Bump the font-size up and down to make sure the layout doesn’t break: at least 2 sizes up and 2 sizes down; to make sure you site works with different default styles.
  • Disabled images and see what happens to the layout without them.
  • Disable the CSS to get an idea of what content is available to screen readers.
  • Check the website with Sim Daltonism (opens new window) to look for colour blindness related issues.
  • Run your website through one or all of the validators.
  • Check all the pages with a screen reader like VoiceOver.

Check out this accessibility checklist for more. (opens new window)

# Helpful Tools

# Screen readers

Screen readers are accessibility tools to help users with poor vision or complete blindness get the content of a website read out to them.

They parse the content and understand the semantics and read the text out loud. The HTML semantics are interpreted and turned into understandable words.

Many screen readers also present lots of features to help users move around the screen with their keyboard.

Some popular screen readers:

# VoiceOver

VoiceOver is the screen reader built into Apple’s operating systems, both desktop and mobile. It doesn’t require any installation, just needs to be turned on.

Here’s some shortcut keys for using VoiceOver:

Command + F5 — Turn VoiceOver on/off
Control — Pause VoiceOver
Control + Option + Right Arrow — Move to next item
Control + Option + Left Arrow — Move to previous item
Control + Option + U — Open the rotor (Use arrow keys to navigate)
Control + Option + Command + H — Next heading (+ Shift for previous)
Control + Option + Command + L — Next link
Control + Option + Command + G — Next graphic
Control + Option + Command + X — Next list

Links

# To Do Before Week 12

Self-Directed To Do

Watch the following videos before week 12:

Last Updated: 8/23/2023, 5:02:30 PM

← Week 12: Animations, Transitions & Transforms →