Learn how to make your website applications accessible to a larger audience. Use keyboard shortcuts and navigation to help both power-users and those with disabilities. Make sure your website works well with screen readers and explore using ARIA to make even the most complex UI’s fully accessible!
Chrome Dev Tools
Types of Disabilities
- 12:19 - 15:12 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.
- 15:30 - 18:23 How to browse the web Beyond the keyboard and mouse, Jon reviews a number of ways in which a web can be accessed.
- 18:24 - 20:47 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.
- 20:48 - 27:35 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.
- 27:36 - 30:35 Visible Focus Jon reviews the importance of visible focus relating to tabbable elements.
30:36 - 34:44
Demonstration on how skip links help keyboard-only users to bypass tabbable content to help navigate a web site.
- 34:45 - 38:38 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.
- 38:39 - 51:22 Exercise 1: Solution Jon reviews the exercise solution and answers questions on including proper color contrast, semantic HTML, and integrating tabindex.
51:23 - 52:46
Jon reviews document.activeElement, which references the element that is currently in focus within the browser.
- 52:47 - 54:58 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.
54:59 - 56:17
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.
56:18 - 01:16:15
Exercise 2: Solution
Jon reviews the exercise solution and answers questions about maintain proper focus control while implemening a tabtrapping experience.
- 51:23 - 52:46 Focus Control Jon reviews document.activeElement, which references the element that is currently in focus within the browser.
01:16:16 - 01:13:27
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.
- 01:13:28 - 01:22:11 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.
- 01:22:12 - 01:30:02 Label and ARIA Labels Jon reviews how to effectively use labels for HTML forms to let screen readers to describe form fields for users.
- 01:30:03 - 01:32:48 ARIA Roles Jon introduces ARIA Roles, which help define areas of a document for a screen reader.
- 01:32:49 - 01:33:49 Exercise 3: Screen Reader An exercise examines integrating proper HTML coding to let screen readers make a web page more accessible.
- 01:33:50 - 01:47:27 Exercise 3: Solution Jon reviews the coding solution for the screen reader exercise.
- 01:16:16 - 01:13:27 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.
- 01:47:28 - 01:54:57 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.
- 01:54:58 - 01:55:46 Exercise 4: Semantic HTML In this brief exercise, you will fix HTML elements with the proper HTML5 elements.
- 01:55:47 - 02:01:45 Exercise 4: Solution Jon reviews the solution for the exercise to add semantic HTML and ARIA Roles for greater accessibility.
- 02:05:32 - 02:11:32 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.
- 02:11:33 - 02:12:48 Exercise 5: Live Regions In this exericse, Jon incoporates Live Regions for updating changes in a region of the
- 02:12:49 - 02:23:23 Exercise 5: Solution Jon reviews the coding solution for Live Regions exercise.
02:23:24 - 02:28:17
Using the No Coffee Chrome Extension, Jon demonstrates that there are many accessibility issues for people when reading the web.
02:28:18 - 02:30:18
Exercise 6: Colors
In this exercise, you will use tools and resources to audit web sites to check their color schemes for accessibility.
- 02:30:19 - 02:33:43 Exercise 6: Solution Jon checks color schemes for legibility and accessibility.
- 02:23:24 - 02:28:17 Color Using the No Coffee Chrome Extension, Jon demonstrates that there are many accessibility issues for people when reading the web.
02:33:44 - 02:45:56
Tools for Accessibility Testing
Listing several extensions and web applications, Jon goes through tools that help in creating accessible web projects.
- - https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en
- 02:45:57 - 02:47:00 Action Items Jon covers three quick items web developers can to that will help gain an understanding of accessibility issues for their applications.
- 02:33:44 - 02:45:56 Tools for Accessibility Testing Listing several extensions and web applications, Jon goes through tools that help in creating accessible web projects.
Auditing Sites and Q&A
- 02:47:01 - 03:13:44 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.
- 03:13:45 - 03:22:36 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.
- 03:22:37 - 03:23:44 Accessibility Auditing 2 Jon reviews Starbucks.com
- 03:23:45 - 03:26:41 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.
- 03:26:42 - 03:35:25 Accessibility Auditing 3 Jon reviews Lifetime.com's site for accessibility.
- 03:35:26 - 03:43:03 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
- 03:43:04 - 03:48:47 Accessibility Q&A Round 4 Jon talks about thoughts with product design and accessibility, color contrast ratios, and accessibility and internationalization.
- 03:48:48 - 03:59:13 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.
- 03:59:14 - 04:05:30 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.