Table of Contents
IntroductionJon Kuperman introduces his web accessibility course, The Web is for Everyone. Demonstrating the importance of web accessibility, Jon covers why developers should care about creating a more open web and reviews the course agenda.
Types of Disabilities
Types of DisabilityWhile 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 webBeyond the keyboard and mouse, Jon reviews a number of ways in which a web can be accessed.
Keyboard ShortcutsJon 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 ElementsThe 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 FocusJon reviews the importance of visible focus relating to tabbable elements.
Skip LinksDemonstration on how skip links help keyboard-only users to bypass tabbable content to help navigate a web site.
Exercise 1: Setting up an A11y ProjectIn this exercise, you will on converting a page to create an accessible form and add a skip link for improved keyboard navigation.
Exercise 1: SolutionJon reviews the exercise solution and answers questions on including proper color contrast, semantic HTML, and integrating tabindex.
Focus ControlJon reviews document.activeElement, which references the element that is currently in focus within the browser.
TabtrappingTo 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 ControlIn 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: SolutionJon reviews the exercise solution and answers questions about maintain proper focus control while implemening a tabtrapping experience.
Screen ReadersJon 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 TextJon 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 LabelsJon reviews how to effectively use labels for HTML forms to let screen readers to describe form fields for users.
ARIA RolesJon introduces ARIA Roles, which help define areas of a document for a screen reader.
Exercise 3: Screen ReaderAn exercise examines integrating proper HTML coding to let screen readers make a web page more accessible.
Exercise 3: SolutionJon reviews the coding solution for the screen reader exercise.
Semantic HTMLJon 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 HTMLIn this brief exercise, you will fix HTML elements with the proper HTML5 elements.
Exercise 4: SolutionJon reviews the solution for the exercise to add semantic HTML and ARIA Roles for greater accessibility.
Live RegionsJon 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 RegionsIn this exericse, Jon incoporates Live Regions for updating changes in a region of the
Exercise 5: SolutionJon reviews the coding solution for Live Regions exercise.
ColorUsing the No Coffee Chrome Extension, Jon demonstrates that there are many accessibility issues for people when reading the web.
Exercise 6: ColorsIn this exercise, you will use tools and resources to audit web sites to check their color schemes for accessibility.
Exercise 6: SolutionJon checks color schemes for legibility and accessibility.
Tools for Accessibility TestingListing several extensions and web applications, Jon goes through tools that help in creating accessible web projects.
Action ItemsJon 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 1Jon 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 1Jon 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 2Jon reviews Starbucks.com
Accessibility Q&A Round 2Jon answers qusetions about how to continue accessibility training and if there is a conflict between usability versus accessiblity within a web site.
Accessibility Auditing 3Jon reviews Lifetime.com's site for accessibility.
Accessibility Q&A Round 3Jon 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 4Jon talks about thoughts with product design and accessibility, color contrast ratios, and accessibility and internationalization.
Accessibility Q&A Round 5Jon 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 6Jon talks more about ARIA Roles support in browsers and screen readers; group testing tools for screen readers; and two-factor authentication and accessibilty.