Website Accessibility, v2
Table of Contents
IntroductionJon Kuperman introduces the course by providing the course website, exercises, and giving a brief personal history.
What is AccessibilityJon 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.
Ways People Use the WebJon 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.
Curb Cut Effect and Q&AJon 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.
Accessibility StandardsJon 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 ReadersJon 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.
Alternative Text & CaptionsJon 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.
Screen Reader ExerciseStudents 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.
Screen Reader SolutionJon demonstrates the solution to the screen reader exercise.
Accessible HTMLJon 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.
Accessible Form Field LabelsJon 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.
ButtonsJon 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.
Accessibility Problems ExerciseStudents are instructed to find and fix the provided code's accessibility problems.
Accessibility Problems SolutionJon 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.
ARIAJon 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.
Live Regions & ARIA ExerciseJon 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.
ARIA SolutionJon 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 ManagementJon 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.
Skip LinksJon 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.
Focus Management Q&AJon 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.
Tab NavigationJon 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.
Active Element & Tab TrappingJon 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.
Skip Link ExerciseStudents are instructed to make a skip link so the users can skip to the main content.
Skip Link SolutionJon 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.
Color Contrast & Visual ImpairmentsJon 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.
Set Language & Fixing MarkupJon 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.
Prefers Reduced MotionJon 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.
Prefers Color Scheme & Visuals ExerciseJon 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.
Visuals SolutionJon live solves the visuals exercise.
Accessibility Linters & Dev ToolsJon 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.
Additional ResourcesJon provides a list of resources for continued learning about accessibility including company websites and links to check out the accessibility community.