Bloomberg
Website Accessibility, v3
2 hours, 19 minutes
CC
Course Description
Build content for everyone and become your company's accessibility expert! Learn the importance of semantic HTML and alt text for ensuring screen readers can navigate your site. Create accessible navigation with focus states, tab order, and advanced techniques like tab trapping. Quickly fix issues with color contrast and make advanced UIs accessible with ARIA labels and roles.
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: 3 minutes
Jon Kuperman begins the Web Accessibility course with a brief overview of the topics discussed throughout the course. Accessibility is often abbreviated as "A11y" because there are 11 letters between the "A" and the "y" in Accessibility.
Accessibility Overview
Section Duration: 27 minutes
Jon explores key components of building accessible websites. Reasons for ensuring your content is accessible range from human rights and legal reasons to creating more impactful websites that reach a larger audience. Accessibility skills can also help developers stand out on a team as a specialist.
Jon spends a few minutes explaining the legal implications of poor accessibility. This discussion is focused on laws in the United States, including the American Disability Act, Section 508, WCAG, and the new Department of Justice rules.
Jon introduces various assistive technologies, from keyboards and wands to screen readers and single-use binary devices like buttons. The "curb-cut effect" is also introduced. This concept asserts that an investment in accessibility (like a curb ramp for wheelchairs) has cascading benefits for a larger group of people (like individuals with strollers or other rolling items).
Students are instructed to set up a screen reader on their computer. A list of screen readers, setup instructions, and keyboard shortcuts can be found on the course website.
Jon walks through the web accessibility standards and guidelines, including the W3C web accessibility initiative, WCAG, and WAI-ARIA. Conformance levels are also introduced. The general rule is to achieve AA compliance since that level tends to meet any legal requirements.
Semantic HTML & Assistive Devices
Section Duration: 35 minutes
Jon explains how screen readers convert digital text into synthesized speech. They empower users to hear content on their screen and navigate with the keyboard. Since screen readers default to reading an image's complete source URL, alt text is critical for keeping websites accessible. A screen reader will read the alt text or skip presentation images where the alt text is an empty string.
Jon stresses the importance of using semantic HTML in your website. Leveraging the built-in accessibility these semantic elements offer saves developers time and are more predictable for assistive devices. Several techniques for using form labels are also discussed in this lesson.
Jon discusses "div soup," which is when DIV and SPAN elements are overused instead of more semantic elements. Several steps are required to make a DIV accessible in the same way as a button element, so using the browser's built-in accessibility features is always recommended.
Jon demonstrates how to make content only available to screen readers. It involves some CSS code to position items offscreen and visually hidden.
Students are instructed to navigate a page with a screen reader and fix issues. The issues include tab order, form labels, and images that are not accessible.
Managing Focus & Tab Order
Section Duration: 25 minutes
Students are instructed to explore different focus style experiences. Tabbing through the page will highlight good and bad examples of indicating element focus.
Jon explains why adding keyboard shortcuts and other navigation features in web applications improves accessibility and provides enhancements for power users. HTML has several keyboard/tab enabled elements by default. The tabindex attribute can make no-focusable elements tab-enabled. Tab trapping is another useful navigation technique to help keyboard users.
Students are instructed to code a tap-trapping feature for the modal window. Tabbing from the cancel button should cycle back to the first input field. Shift-tabbing from the first input field should cycle back to the cancel button.
ARIA Labels & Roles
Section Duration: 14 minutes
Jon dives deeper into the behavior of ARIA labels and descriptions and the differences between the WAI-ARIA and WCAG specs. The main difference between the two specs is that WCAG sets the overall accessibility standard, while WAI-ARIA provides the techniques to meet those standards.
Jon explains that ARIA roles can be applied to elements, giving screen readers a context for their use. For example, the "button" role can be added to a DIV element. CSS selectors can also target ARIA properties. ARIA Live Regions help indicate areas of the application containing live data so screen readers can read out updates as they happen.
Students are instructed to add ARIA live regions to the HTML markup to create an accessible experience for the sports score application.
Color Contrast
Section Duration: 8 minutes
Jon discusses color contrast and techniques for ensuring web applications do not solely rely on color to present information or status. One option is to create separate color schemes for users to opt into. Another is to ensure applications include icons or other visual elements so color is not the only status indicator.
Jon demonstrates tools for checking contrast ratios. Browser developer tools have contrast information for selected text nodes to help developers analyze the contrast rations and find non-compliant color combinations.
Accessibility Tools & Testing
Section Duration: 23 minutes
Jon discusses several accessibility tools for running manual accessibility tests or automating tests within a CI/CD pipeline. The Google Lighthouse tool is built into the browser's developer tools by default. Other third-party tools, like Axe, can be added as browser extensions.
Students are instructed to use either Google Lighthouse or the Axe browser extension to identify and fix accessibility issues. Note: Axe requires `https`, so student should test the hosted version of the exercise if using this extension.
Jon explains how to read the W3C specification, which can be helpful when developers want to understand the "source of truth" for how accessibility or other features are implemented in the browser. Reading the specification can also reveal areas for improvement and motivate developers to contribute to future versions.
Wrapping Up
Section Duration:
Jon wraps up the course with some accessibility resources. Check out our Accessibility Topic for more accessibility courses.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops