Marcy Sutton Todd
Principle Studios
Course Description
We can produce innovative and inclusive JavaScript-powered web apps! This course will teach you to remove barriers to access that might prevent people with disabilities from using a modern JavaScript web application. We’ll study accessibility in UI components, primarily with React and Gatsby.js, but with knowledge applicable to all JavaScript-heavy web stacks. Debug your sites for accessibility, manage keyboard focus, announce live updates to the page to screen readers, and use manual and automated testing to gain web accessibility superpowers!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: August 28, 2019
Topics
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
Table of Contents
Introduction
Section Duration: 16 minutes
Marcy Sutton introduces the course by offering a personal history of becoming involved in accessibility.
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.
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.
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
Section Duration: 35 minutes
Marcy walks through a set of steps which can be taken to discover accessibility issues in websites.
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.
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.
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.
Marcy explains how accessibility information is parsed by the web browser to produce a streamlined interface that can be used by screen readers.
Marcy presents a snippet of code that identifies the currently focused element by using the document.activeElement property and an event listener.
Marcy presents a set of practice problems focused on the discovery of accessibility issues in websites.
Marcy fields a question on magnification and encourages students to celebrate examples of highly accessible websites.
Focus Management
Section Duration: 46 minutes
Marcy describes the main building blocks of focus management, introducing tabindex, an HTML attribute that determines whether an element is focusable.
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.
Marcy discusses situations when using the ARIA APIs for accessibility analysis would be worthwhile, defining role, state, and property in relation to the specifications.
Marcy introduces focus management patterns by discussing methods of handling modal layer, widget interaction, link, and button patterns.
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.
Marcy promotes the method of adding stable CSS class names in order to lower the barrier for users who want to create custom stylesheets.
Marcy begins coding a dropdown that is accessible via the keyboard, identifying ways that the original dropdown is not accessible.
Marcy adds focus event handling to the dropdown to manage focus when navigating over links using only the keyboard.
Marcy instructs students to create an accessible dropdown component.
Routing
Section Duration: 31 minutes
Marcy explains how adding skip links can make content and navigation more accessible when using a keyboard to navigate a website.
Marcy uses React and CSS in JS to create a skip link component for the course website, walking through accessibility choices along the way.
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.
Marcy instructs students to add focus handling to either a React or a vanilla.js skip link.
Marcy discusses one possible solution to the vanilla.js version of the exercise.
Announcements
Section Duration: 14 minutes
Marcy demonstrates how to use live regions and announcements to notify users on assistive technology of an event without moving focus.
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
Section Duration: 43 minutes
Marcy lays out a set of steps for creating semantic HTML and offers tips for testing semantics on a page.
Marcy describes methods of making web animations more accessible, including the CSS media query prefers-reduced-motion, content warnings, and the JavaScript matchMedia method.
Marcy instructs students to experiment with making changes to CSS animations using reduced-motion.
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.
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.
Marcy instructs students to modify a tab list using the practices of progressive enhancement to preserve the main functionality in the absence of JavaScript.
Marcy walks through the vanilla.js solution to the exercise.
Testing
Section Duration: 55 minutes
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.
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.
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.
Marcy demonstrates how to write an assertion to check whether the focus state is correct after the dropdown has been activated.
Marcy instructs students to create accessibility unit tests for either the Jest framework or the Jasmine framework.
Marcy discusses the reasons why integration and end-to-end testing are effective tools, and then goes over options for testing frameworks.
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.
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.
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.
Wrapping Up
Section Duration: 1 minute
Marcy concludes the course on accessibility in JavaScript by emphasizing the importance of user testing and discussing a conference on accessibility.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops