This course has been updated! We now recommend you take the Website Accessibility, v2 course.
Table of Contents
Web Accessibility
Types of Disabilities
Types of Disability
While the web is a great benefit, it requires physical and mental effort. Jon reviews how different disabilities at various levels can affect ways in which people engage on the web.
How to browse the web
Beyond the keyboard and mouse, Jon reviews a number of ways in which a web can be accessed.
Keyboard Navigation
Keyboard Shortcuts
Jon underscores the importance of making a site that can operate through only a keyboard by showing examples of common popular sites that can be used with simple one or two key strokes.
Tabbable Elements
The basics of keyboard navigation depend on tabbable elements. Jon reviews which HTML elements are natively tabbable and how to manipulate elements to become tabbable through the tabindex attribute.
Visible Focus
Jon reviews the importance of visible focus relating to tabbable elements.
Skip Links
Demonstration on how skip links help keyboard-only users to bypass tabbable content to help navigate a web site.
Exercise 1: Setting up an A11y Project
In this exercise, you will on converting a page to create an accessible form and add a skip link for improved keyboard navigation.
Exercise 1: Solution
Jon reviews the exercise solution and answers questions on including proper color contrast, semantic HTML, and integrating tabindex.
Focus Control
Focus Control
Jon reviews document.activeElement, which references the element that is currently in focus within the browser.
Tabtrapping
To maintain a good user experience, Jon introduces the concept of tabtrapping. Tabtrapping occurs when you need to take control over a browser's native tab order and place it where in a region of the page where it makes more sense to the user such as a modal dialog.
Exercise 2: Focus Control
In this exercise, you will work on restricting tabbable content to a modal. Then code two methods to close the modal when the user is done.
Exercise 2: Solution
Jon reviews the exercise solution and answers questions about maintain proper focus control while implemening a tabtrapping experience.
Screen Readers
Screen Readers
Jon reviews the number of screen readers available for users and the challenges in creating accessible sites with different readers. For this workshop, use the ChromeVox screen reader extension.
Alt Text
Jon reviews tips for writing quality Alternate Text, or Alt Text, which is an HTML attribute that is apart of the image element.
Label and ARIA Labels
Jon reviews how to effectively use labels for HTML forms to let screen readers to describe form fields for users.
ARIA Roles
Jon introduces ARIA Roles, which help define areas of a document for a screen reader.
Exercise 3: Screen Reader
An exercise examines integrating proper HTML coding to let screen readers make a web page more accessible.
Exercise 3: Solution
Jon reviews the coding solution for the screen reader exercise.
Semantic HTML
Semantic HTML
Jon emphasizes the importance of using the most appropriate HTML element for the content. In addition to reviewing the importance of contextual information that comes with using HTML headers, form elements, and more, he discusses semantic anti-patterns.
Exercise 4: Semantic HTML
In this brief exercise, you will fix HTML elements with the proper HTML5 elements.
Exercise 4: Solution
Jon reviews the solution for the exercise to add semantic HTML and ARIA Roles for greater accessibility.
ARIA
ARIA
Jon looks at how ARIA and be used along with JavaScript to make an accessible web application.
Live Regions
Jon describes how to code Live Regions in order to tell the browser that an area of a browser will be updated frequalty.
Exercise 5: Live Regions
In this exericse, Jon incoporates Live Regions for updating changes in a region of the
Exercise 5: Solution
Jon reviews the coding solution for Live Regions exercise.
Color
Color
Using the No Coffee Chrome Extension, Jon demonstrates that there are many accessibility issues for people when reading the web.
Exercise 6: Colors
In this exercise, you will use tools and resources to audit web sites to check their color schemes for accessibility.
Exercise 6: Solution
Jon checks color schemes for legibility and accessibility.
Tools
Tools for Accessibility Testing
Listing several extensions and web applications, Jon goes through tools that help in creating accessible web projects.
Action Items
Jon covers three quick items web developers can to that will help gain an understanding of accessibility issues for their applications.
Auditing Sites and Q&A
Accessibility Auditing 1
Jon walks through several sites suggested by the audience for an accessibility audit including FrontendMasters.com, Kickserv.com, IBM.com, Healthcare.gov, and more.
Accessibility Q&A Round 1
Jon answers several questions from the audience on various topics: tools to automate accessibilty testing, tools that see into Angular components, intergrating accessibility into development workflow, accessibile menu navigations on content heavy sites, and more.
Accessibility Auditing 2
Jon reviews Starbucks.com
Accessibility Q&A Round 2
Jon answers qusetions about how to continue accessibility training and if there is a conflict between usability versus accessiblity within a web site.
Accessibility Auditing 3
Jon reviews Lifetime.com's site for accessibility.
Accessibility Q&A Round 3
Jon talks about finding people with disabitlies to test web sites, mobile web and accessibility, and web accessibility leaders, events, and resources
Accessibility Q&A Round 4
Jon talks about thoughts with product design and accessibility, color contrast ratios, and accessibility and internationalization.
Accessibility Q&A Round 5
Jon discusses how the color contrast accessibility tests are written for people with disabilities; distinction between AA and AAA compliances and legality; when to use ARIA Roles than HTML5 elements in browsers; and accessibility in emails.
Accessibility Q&A Round 6
Jon talks more about ARIA Roles support in browsers and screen readers; group testing tools for screen readers; and two-factor authentication and accessibilty.