Website Accessibility, v2

Jon Kuperman

Jon Kuperman

Cloudflare
2 hours, 52 minutes CC
Website Accessibility, v2

Course Description

Learn how to make your website applications accessible to a wider audience. Use keyboard shortcuts and navigation to help both power users and those with disabilities. Make sure your website works well with screen readers and explore using ARIA to make even the most complex UI's fully accessible!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: June 8, 2021

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 27 minutes
  • Introduction
    Jon Kuperman introduces the course by providing the course website, exercises, and giving a brief personal history.
  • What is Accessibility
    Jon discusses what it means to make a website or application more accessible, describes some similar fields, and provides some statistics of disabilities in the United States. One of the main goals of this course is to make the web usable for people with disabilities.
  • Ways People Use the Web
    Jon discusses the various ways people use the web including keyboard only, a head wand, mouth stick, single switch, and a screen reader. Student questions regarding if it can be determined if a user is using assistive technology and if all websites and applications would benefit from becoming more accessible are also covered in this segment.
  • Curb Cut Effect and Q&A
    Jon discusses the curb cut effect and how it can similarly be applied to web accessibility. The Curb-Cut Effect is when and investment in one group of people cascades to improve broader well-being. Student's questions regarding what point in the software lifecycle should accessibility be thought about and if adding accessibility helps with SEO are also covered in this segment.
  • Accessibility Standards
    Jon discusses the web content accessibility guidelines, the levels of compliance, and a checklist for recommendations on how to make a website more accessible. Student questions regarding what UC is and what ARIA is are also covered in this segment.

Screen Readers

Section Duration: 15 minutes
  • Screen Readers
    Jon discusses what a screen reader is, how it works, what they help people do, some popular screen readers, and provides some links to get set up with a screen reader. Mac OS have built in screen readers which is demonstrated in this segment.
  • Alternative Text & Captions
    Jon discusses how alternative text can be used by screen readers to provide a description of an image, skip over decorative images, and audio captions. The drawbacks of using alternative text for SEO instead of accessibility is also covered in this segment.
  • Screen Reader Exercise
    Students are instructed to install a screen reader, turn down their monitor's brightness or look away, and complete the form on the provided webpage using only audio. Student's questions regarding if it's possible to analyze a user uploaded image to generate alternative text and if there is a difference between having a div with a background image and an image tag are also covered in this segment.
  • Screen Reader Solution
    Jon demonstrates the solution to the screen reader exercise.

Accessible HTML

Section Duration: 26 minutes
  • Accessible HTML
    Jon discusses elements that have semantic meanings, elements that provide built-in functionality, and their effect on user accessibility. A table of WebAIM recommendations for semantic markups is also provided in this segment.
  • Accessible Form Field Labels
    Jon demonstrates how to make form fields more accessible to screen readers by using label tags to label input fields and make screen reader only content. Labels can be used implicitly or explicitly with the same effect. Student's questions regarding if a label should be visually hidden, if the input is a child of the label if for is required, and when ARIA level elements are read by screen readers.
  • Buttons
    Jon demonstrates some of the drawbacks from having a clickable element be something other than a button. Steps to take with a semantic element to make a non button more accessible are also covered in this segment.
  • Accessibility Problems Exercise
    Students are instructed to find and fix the provided code's accessibility problems.
  • Accessibility Problems Solution
    Jon live solves the accessibility problems exercise and describes how to turn off the screen reader. Student questions regarding if a link would be a good place for an ARIA label, if there is a negative impact from using a div with a role button, if it's better to use a nav tag with anchors or an unordered list with li elements, and how to notify a user of a redirect on click are also covered in this segment.

ARIA

Section Duration: 17 minutes
  • ARIA
    Jon discusses different aria labels, roles, states, properties, CSS selectors, and how they can be used to provide more information to a screen reader. ARIA is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities. Student questions regarding what happens when there are multiple aria-label or aria-describeby labels and when to use aria-autocomplete are also covered in this segment.
  • Live Regions & ARIA Exercise
    Jon discusses live regions and how to alert the user of a change on the application, the different settings that can be applied, and where it can be used. Students are then instructed to use live regions to announce to the user when the count updates.
  • ARIA Solution
    Jon live solves the ARIA exercise. Student questions regarding if there is a way to control how often an update is read and what element gets the aria-live region are also covered in this segment.

Focus Management

Section Duration: 34 minutes
  • Focus Management
    Jon discusses focus management, how to provide necessary clues for the currently active item, and keyboard shortcuts. Keyboard shortcuts can be used for faster navigation for both users with disabilities and power users.
  • Skip Links
    Jon discusses skip links and how they can be used to help users skip over large headers and navigation to jump to the main content by hitting tab. How to make a skip link and the WebAIM recommendations are also covered in this segment.
  • Focus Management Q&A
    Jon answers student questions regarding how to make a notification sound play, how to get started with an existing code base, and how to find where to put aria tags and alt tags.
  • Tab Navigation
    Jon discusses using the tab and shift key to navigate through a website, tabbable elements, and how to make a non tabbable element tabbable. Drop down menus will need to be opened before navigating and children of drop down menus are navigated via the arrow keys.
  • Active Element & Tab Trapping
    Jon discusses a DOM API called active element which returns the currently focused element and tab trapping to send users back to the first stored focused element when they reach the last focus element and walks through of how to use active element and tab trapping on a modal. A students question regarding the conditional with keyCode 9 is also covered in this segment.
  • Skip Link Exercise
    Students are instructed to make a skip link so the users can skip to the main content.
  • Skip Link Solution
    Jon live solves the skip link exercise. A students question regarding why the skip link is visible if it's for visually impaired users is also covered in this segment.

Visual Considerations

Section Duration: 28 minutes

Tooling

Section Duration: 11 minutes
  • Accessibility Linters & Dev Tools
    Jon discusses and provides some resources for tooling to help get started with accessibility including linters, design systems, and developer tools. A brief demonstration of the axe-core devtools and lighthouse on the course website and a student's question regarding how the design systems allow you to grab the functionality without having the UI is also covered in this segment.
  • Additional Resources
    Jon provides a list of resources for continued learning about accessibility including company websites and links to check out the accessibility community.

Wrapping Up

Section Duration: 9 minutes
  • Wrapping Up
    Jon wraps up the course by performing an accessibility audit on a website and walking through some of the common issues that occur. A student's question regarding internationalization resources is also covered in this segment.
Learnt about Web Accessibility! When you make your website accessible; Everyone benefits!
Isaac Agboola

Isaac Agboola

the_isaacagbola

Website Accessibility v2 by Jon Kuperman on Frontend Masters was a fantastic course to get started on improving sites. Accessibility was overlooked on previous projects I was involved in but now I know what to do going forward.
Diana Le

Diana Le

dianale_dev

I just completed "Website Accessibility, v2" by Jon Kuperman on Frontend Masters! And I realize how terrible I did accessibility as a frontend engineer in the past. I am already applying everything I learned in this course to my everyday work.
Hung Viet Nguyen

Hung Viet Nguyen

hung_dev

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now