Accessibility in JavaScript Applications
Learning Paths:
Topics:
Table of Contents
Introduction
Introduction
Marcy Sutton introduces the course by offering a personal history of becoming involved in accessibility.
Course Overview
Marcy gives an overview of what the course will cover, and then discusses how to continually improve the skill of designing websites and web applications inclusively.
Course Materials Setup
Marcy provides instruction for which accessibility tools to install, how to set up the course code, and walks through the structure of the course website.
Tool Considerations
Marcy discusses the choice of which JavaScript framework to use, and whether or not to make designs responsive in the context of accessibility.
Debugging Accessibility
Steps for Debugging Accessibility
Marcy walks through a set of steps which can be taken to discover accessibility issues in websites.
Auditing Slack & GitHub
Marcy walks through accessibility debugging for Slack and GitHub, and demonstrates how to navigate through elements of a page using only the keyboard. Axe is used in the developer console to further analyze issues.
Auditing Google Maps & NY Times
Marcy debugs the Google Maps and NY Times websites, explains the benefits of having a cheat sheet available, and uses VoiceOver, the default screen reader on Macs, for testing.
Hidden vs Visible CSS Rules
Marcy demonstrates how different CSS properties can be used to hide content, including position, visibility, opacity, and display. Whether accessibility information is being passed through is considered for each.
Accessibility Tree
Marcy explains how accessibility information is parsed by the web browser to produce a streamlined interface that can be used by screen readers.
Currently Focused Element
Marcy presents a snippet of code that identifies the currently focused element by using the document.activeElement property and an event listener.
Accessibility Debugging: Practice Problems
Marcy presents a set of practice problems focused on the discovery of accessibility issues in websites.
Accessibility Debugging Q&A
Marcy fields a question on magnification and encourages students to celebrate examples of highly accessible websites.
Focus Management
Focus Management & tabindex
Marcy describes the main building blocks of focus management, introducing tabindex, an HTML attribute that determines whether an element is focusable.
Focus Events
Marcy demonstrates how to make custom controls interactive by adding focus events, and analyzes the choice of HTML elements when planning out interactive parts of a page.
ARIA Overview
Marcy discusses situations when using the ARIA APIs for accessibility analysis would be worthwhile, defining role, state, and property in relation to the specifications.
Focus Management Patterns
Marcy introduces focus management patterns by discussing methods of handling modal layer, widget interaction, link, and button patterns.
Visible Focus Styles
Marcy stresses the importance of not suppressing outline styles on focus, instead advocating for usage of the focus-visible CSS selector and What Input JS.
CSS in JS
Marcy promotes the method of adding stable CSS class names in order to lower the barrier for users who want to create custom stylesheets.
Coding an Accessible Dropdown
Marcy begins coding a dropdown that is accessible via the keyboard, identifying ways that the original dropdown is not accessible.
Focus Event Handling in the Dropdown
Marcy adds focus event handling to the dropdown to manage focus when navigating over links using only the keyboard.
Accessible Dropdown Exercise
Marcy instructs students to create an accessible dropdown component.
Routing
Routing & Skip Links
Marcy explains how adding skip links can make content and navigation more accessible when using a keyboard to navigate a website.
Coding a Skip Link: Creating the Component
Marcy uses React and CSS in JS to create a skip link component for the course website, walking through accessibility choices along the way.
Coding a Skip Link: Wiring it Up
Marcy wires up the component for the skip link to the course website, demoing the skip link and explaining next steps after everything is connected.
Skip Links Exercise
Marcy instructs students to add focus handling to either a React or a vanilla.js skip link.
Skip Links Solution
Marcy discusses one possible solution to the vanilla.js version of the exercise.
Announcements
Announcements with ARIA Live Regions
Marcy demonstrates how to use live regions and announcements to notify users on assistive technology of an event without moving focus.
Coding a Live Region Component
Marcy codes a live region form which will announce to the user when the form data is submitted, and encourages students to work on coding a live region form on their own.
Progressive Enhancement
Semantic HTML
Marcy lays out a set of steps for creating semantic HTML and offers tips for testing semantics on a page.
Unobtrusive Motion
Marcy describes methods of making web animations more accessible, including the CSS media query prefers-reduced-motion, content warnings, and the JavaScript matchMedia method.
reduced-motion Exercise
Marcy instructs students to experiment with making changes to CSS animations using reduced-motion.
Progressive Enhancement Overview
Marcy discusses how progressive enhancement is used to prioritize core web page content, with added feature and presentation layers as the user's situation allows.
Coding a Progressive Enhancement Component
Marcy creates a component that is prepared for a lack of JavaScript in the browser, and then builds the course website to show the visual and source code differences between the page with and without JavaScript.
Progressive Enhancement Exercise
Marcy instructs students to modify a tab list using the practices of progressive enhancement to preserve the main functionality in the absence of JavaScript.
Progressive Enhancement Solution
Marcy walks through the vanilla.js solution to the exercise.
Testing
Accessibility Testing Overview
Marcy gives an overview of the benefits and drawbacks of different approaches to testing for accessibility, going into detail about user testing, linting, and unit testing in particular.
Using a Testing Library
Marcy uses the Jest framework along with a testing library to generate a test for the dropdown demo that checks whether a focusable button is rendered.
Running Tests & Firing Events
Marcy examines the script for running tests, runs tests, examines the test output, and modifies the test to fire an event that activates the dropdown. An existing test is modified to check on an additional accessibility concern.
Focus State Assertions
Marcy demonstrates how to write an assertion to check whether the focus state is correct after the dropdown has been activated.
Unit Testing Exercise
Marcy instructs students to create accessibility unit tests for either the Jest framework or the Jasmine framework.
Accessibility Integration Testing
Marcy discusses the reasons why integration and end-to-end testing are effective tools, and then goes over options for testing frameworks.
Testing Goals & Prebuilt Rules
Marcy describes how using prebuilt accessibility rules can prevent having to take the time to stay up to date, and outlines goals for successfully testing web applications.
Coding Integration Tests
Marcy utilizes Cypress to test the skip link created earlier on in the course, checking that the focus is being sent to the skip link when the route changes.
Continuous Integration & Manual Testing
Marcy demystifies continuous integration testing, encourages finding fun ways to automate testing practices, and advocates for manual accessibility testing in addition to the previously discussed methods.
