Table of Contents
IntroductionMarcy Sutton introduces the course by offering a personal history of becoming involved in accessibility.
Course OverviewMarcy 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 SetupMarcy provides instruction for which accessibility tools to install, how to set up the course code, and walks through the structure of the course website.
Steps for Debugging AccessibilityMarcy walks through a set of steps which can be taken to discover accessibility issues in websites.
Auditing Slack & GitHubMarcy 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 TimesMarcy 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 RulesMarcy 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 TreeMarcy explains how accessibility information is parsed by the web browser to produce a streamlined interface that can be used by screen readers.
Currently Focused ElementMarcy presents a snippet of code that identifies the currently focused element by using the document.activeElement property and an event listener.
Accessibility Debugging: Practice ProblemsMarcy presents a set of practice problems focused on the discovery of accessibility issues in websites.
Accessibility Debugging Q&AMarcy fields a question on magnification and encourages students to celebrate examples of highly accessible websites.
Focus Management & tabindexMarcy describes the main building blocks of focus management, introducing tabindex, an HTML attribute that determines whether an element is focusable.
Focus EventsMarcy 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 OverviewMarcy 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 PatternsMarcy introduces focus management patterns by discussing methods of handling modal layer, widget interaction, link, and button patterns.
Visible Focus StylesMarcy 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 JSMarcy 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 DropdownMarcy begins coding a dropdown that is accessible via the keyboard, identifying ways that the original dropdown is not accessible.
Focus Event Handling in the DropdownMarcy adds focus event handling to the dropdown to manage focus when navigating over links using only the keyboard.
Accessible Dropdown ExerciseMarcy instructs students to create an accessible dropdown component.
Routing & Skip LinksMarcy 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 ComponentMarcy 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 UpMarcy 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 ExerciseMarcy instructs students to add focus handling to either a React or a vanilla.js skip link.
Skip Links SolutionMarcy discusses one possible solution to the vanilla.js version of the exercise.
Announcements with ARIA Live RegionsMarcy demonstrates how to use live regions and announcements to notify users on assistive technology of an event without moving focus.
Coding a Live Region ComponentMarcy 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.
Semantic HTMLMarcy lays out a set of steps for creating semantic HTML and offers tips for testing semantics on a page.
reduced-motion ExerciseMarcy instructs students to experiment with making changes to CSS animations using reduced-motion.
Progressive Enhancement OverviewMarcy discusses how progressive enhancement is used to prioritize core web page content, with added feature and presentation layers as the user's situation allows.
Progressive Enhancement SolutionMarcy walks through the vanilla.js solution to the exercise.
Accessibility Testing OverviewMarcy 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 LibraryMarcy 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 EventsMarcy 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 AssertionsMarcy demonstrates how to write an assertion to check whether the focus state is correct after the dropdown has been activated.
Unit Testing ExerciseMarcy instructs students to create accessibility unit tests for either the Jest framework or the Jasmine framework.
Accessibility Integration TestingMarcy discusses the reasons why integration and end-to-end testing are effective tools, and then goes over options for testing frameworks.
Testing Goals & Prebuilt RulesMarcy 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 TestsMarcy 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 TestingMarcy 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.