Jon Kuperman
Cloudflare
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
CloseLearn 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
Table of Contents
Introduction
Section Duration: 27 minutes
Jon Kuperman introduces the course by providing the course website, exercises, and giving a brief personal history.
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.
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.
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.
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
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.
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.
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.
Jon demonstrates the solution to the screen reader exercise.
Accessible HTML
Section Duration: 26 minutes
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.
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.
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.
Students are instructed to find and fix the provided code's accessibility problems.
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
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.
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.
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
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.
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.
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.
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.
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.
Students are instructed to make a skip link so the users can skip to the main content.
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
Jon discusses visual considerations including color contrast, visual impairment, notification proximity, resources to help rate color contrast and visual accessibility, and colors in forms. A demonstration of simulating visual impairment using the NoCoffee add on is also provided in this segment.
Jon discusses setting the language of a webpage, deviations from the webpage language, and fixing markup errors. A students question regarding if there are any accessibility boilerplates is also covered in this segment.
Jon demonstrates how to interact with accessibility preferences that can set user preferences for web page visuals including reduce motion. These settings can be accessed by to allow the CSS to swap out animations with more subtle effects.
Jon demonstrates setting the MacOS accessibility preferences to a prefered color scheme and using that information to set a web page's color scheme. Students are then instructed to read the user's dark/light mode preference and set the background color accordingly.
Jon live solves the visuals exercise.
Tooling
Section Duration: 11 minutes
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.
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
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.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops