Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

  1. Урок 1. 00:02:32
    1.1.1. Introduction to Testing Accessibility
  2. Урок 2. 00:01:26
    1.1.2.1. What is Digital Accessibility
  3. Урок 3. 00:03:14
    1.1.2.2. Accessibility is...
  4. Урок 4. 00:01:16
    1.1.2.3. Inaccessibility is Discrimination in Practice
  5. Урок 5. 00:03:23
    1.1.2.4. Accessibility for Businesses
  6. Урок 6. 00:01:55
    1.1.2.5. Accessibility for Society
  7. Урок 7. 00:01:44
    1.1.3.1. Accessibility as a Moral Case
  8. Урок 8. 00:01:14
    1.1.3.2. Accessibility as a Business Case
  9. Урок 9. 00:04:03
    1.1.3.3. The Legal Situation
  10. Урок 10. 00:00:54
    1.1.4.1. Introducing Terms
  11. Урок 11. 00:07:35
    1.1.4.2. Markup & Code Definitions
  12. Урок 12. 00:13:52
    1.1.4.3. Browsers, Apps, and Tools
  13. Урок 13. 00:00:50
    1.1.5.1. What Makes a Website Accessible
  14. Урок 14. 00:06:41
    1.1.5.2. Inclusive & Intuitive Design
  15. Урок 15. 00:03:52
    1.1.5.3. HTML Headings
  16. Урок 16. 00:01:51
    1.1.5.4. Landmarks
  17. Урок 17. 00:03:48
    1.1.5.5. Semantic Elements
  18. Урок 18. 00:04:03
    1.1.5.6. VideoText Alternatives
  19. Урок 19. 00:07:04
    1.1.5.7. Forms
  20. Урок 20. 00:04:38
    1.1.5.8. Interactivity Goes Beyond the Mouse
  21. Урок 21. 00:01:16
    1.1.6. Accessibility needs all of us.
  22. Урок 22. 00:02:32
    2.1.1.1. Workshop Overview
  23. Урок 23. 00:03:00
    2.1.1.2. WCAG Overview
  24. Урок 24. 00:02:34
    2.2.1.1. Inaccessible Brand Colors Video
  25. Урок 25. 00:00:40
    2.2.1.2. Mobile Accessibility Issues Video
  26. Урок 26. 00:01:13
    2.2.1.3. Icon Buttons without Text Labels Video
  27. Урок 27. 00:02:06
    2.2.1.4. Embedded Content with Accessibility Problems Video
  28. Урок 28. 00:04:59
    2.2.1.5. Accessibility Overlay Solutions
  29. Урок 29. 00:03:19
    2.2.2.1. “Shifting Left” in the Software Development Lifecycle Video
  30. Урок 30. 00:01:40
    2.2.2.2. Disability Impacts All of Us Video
  31. Урок 31. 00:02:40
    2.2.2.3. Test User Interfaces with People with Disabilities Video
  32. Урок 32. 00:05:20
    2.2.3.1. Solution Find Accessibility Issues using Keyboard-Only Navigation
  33. Урок 33. 00:05:04
    2.2.3.2. Solution Find Low Contrast Ratio Issues using Chrome DevTools
  34. Урок 34. 00:01:48
    2.2.3.3. Lesson Recap
  35. Урок 35. 00:04:25
    2.2.4. Identifying Accessibility Bias Video
  36. Урок 36. 00:07:24
    2.3.1.1. Pattern Libraries & Style Guides Video
  37. Урок 37. 00:03:57
    2.3.1.2. Building Blocks of Digital Design Systems Video
  38. Урок 38. 00:05:02
    2.3.2.1. Notes on Interactivity Video
  39. Урок 39. 00:03:05
    2.3.2.2. Affordances in Interaction Design Video
  40. Урок 40. 00:02:45
    2.3.3.1. Introduction to Design Review
  41. Урок 41. 00:03:11
    2.3.3.2. Find Color Contrast Issues Video
  42. Урок 42. 00:03:55
    2.3.3.3. Find Iconography and Label Issues
  43. Урок 43. 00:03:36
    2.3.3.4. Find Content Layout Issues Video
  44. Урок 44. 00:01:44
    2.3.4. Accessibility Feedback Loop
  45. Урок 45. 00:02:56
    2.4.1. Using Animation & Motion Safely Video
  46. Урок 46. 00:03:37
    2.4.2. Prefers Reduced Motion Video
  47. Урок 47. 00:03:25
    2.4.3. WCAG Criteria Video
  48. Урок 48. 00:04:01
    2.4.4.1. Identify Accessibility Issues Related to Motion Video
  49. Урок 49. 00:05:29
    2.4.4.2. Add Prefers Reduced Motion to a Video
  50. Урок 50. 00:06:33
    2.4.4.3. Add Prefers Reduced Motion to an SVG Video
  51. Урок 51. 00:03:39
    2.5.1. Review of Testing ToolsProcesses
  52. Урок 52. 00:03:44
    2.5.2. Using WCAG in an Organization
  53. Урок 53. 00:05:46
    2.5.3.1. Finding an Answer to a Problem Demo Video
  54. Урок 54. 00:08:49
    2.5.3.2. Solution Finding an Answer to a Problem
  55. Урок 55. 00:04:40
    2.6.1.1. Creating a Culture of Accessibility Video
  56. Урок 56. 00:06:40
    2.6.1.2. Design Ableism Out of Systems
  57. Урок 57. 00:06:53
    2.6.1.3. Qualities For Creating a Culture of Accessibility
  58. Урок 58. 00:05:03
    2.6.2.1. Scoping Accessibility Issues Video
  59. Урок 59. 00:06:55
    2.6.2.2. Prioritizing Accessibility Issues Video
  60. Урок 60. 00:07:23
    2.6.3.1. Qualify and Quantify an Accessibility Issue Video
  61. Урок 61. 00:04:36
    2.6.3.2. Encourage a More Descriptive Issue Policy Video
  62. Урок 62. 00:01:17
    2.6.4. Parting Thoughts Video
  63. Урок 63. 00:08:09
    3.1.1. Intro & Setup
  64. Урок 64. 00:02:28
    3.2.1.1. Find Issues by Hitting Tab
  65. Урок 65. 00:06:02
    3.2.1.2. Investigating Issues by Hitting Tab
  66. Урок 66. 00:04:21
    3.2.2.1. Fix CSS Outline
  67. Урок 67. 00:03:49
    3.2.2.2. Change MegaNav divs to buttons
  68. Урок 68. 00:02:17
    3.2.2.3. Update MegaNav Button Styling
  69. Урок 69. 00:02:25
    3.2.2.4. Hide Submenus with CSS
  70. Урок 70. 00:06:03
    3.2.2.5. More Menu CSS Updates
  71. Урок 71. 00:05:18
    3.2.3.1. Toggle the Active Class with JavaScript
  72. Урок 72. 00:06:34
    3.2.3.2. Escape Key Handling
  73. Урок 73. 00:02:32
    3.2.3.3. Focus Management on Menu Close
  74. Урок 74. 00:03:24
    3.2.4. Fixing Button Focus
  75. Урок 75. 00:06:13
    3.3.1.1. Checking Color Contrast in Chrome DevTools
  76. Урок 76. 00:02:46
    3.3.1.2. Fix MegaNav Contrast Issues
  77. Урок 77. 00:01:28
    3.3.2. Add Image Alt Description & Check in the Accessibility Tree
  78. Урок 78. 00:02:45
    3.3.3.1. Running Lighthouse
  79. Урок 79. 00:07:07
    3.3.3.2. Scanning the Homepage with Axe DevTools
  80. Урок 80. 00:01:34
    3.3.4. Checking Heading Structure with the Web Developer Toolbar
  81. Урок 81. 00:01:21
    3.3.5.1. Fixing the Discernible Button Text Issue
  82. Урок 82. 00:03:05
    3.3.5.2. More axe Issue Identification
  83. Урок 83. 00:05:11
    3.3.5.3. Issue Fixing
  84. Урок 84. 00:02:27
    3.3.6.1. More Changes
  85. Урок 85. 00:03:07
    3.3.6.2. Heading and Landmark Fixes
  86. Урок 86. 00:01:53
    3.3.6.3. Checking Work
  87. Урок 87. 00:01:00
    3.3.6.4. Checking in Lighthouse Again
  88. Урок 88. 00:05:31
    3.3.6.5. Heading Order
  89. Урок 89. 00:01:07
    3.3.6.6. Last Lighthouse Check
  90. Урок 90. 00:03:30
    3.4.1.1. Examining Browser Zoom Behavior
  91. Урок 91. 00:01:29
    3.4.1.2. Looking at WCAG 1.4.10 - Reflow
  92. Урок 92. 00:04:04
    3.4.2.1. Making Changes in the Browser
  93. Урок 93. 00:01:41
    3.4.2.2. Fixing the Viewport Meta Tag
  94. Урок 94. 00:01:51
    3.4.3.1. Update Menu Reflow & Troubleshooting
  95. Урок 95. 00:05:09
    3.4.3.2. Update Layout Styles
  96. Урок 96. 00:03:33
    3.4.3.3. Fix the 3 Cards Section
  97. Урок 97. 00:03:16
    3.4.3.4. Fix the Header
  98. Урок 98. 00:02:08
    3.4.3.5. Check it out on mobile
  99. Урок 99. 00:02:04
    3.4.3.6. Checking work
  100. Урок 100. 00:01:24
    3.4.3.7. Zoom Wrap-Up
  101. Урок 101. 00:08:02
    3.5.1. An Overview of Screen Reader Software
  102. Урок 102. 00:05:17
    3.5.2.1. VoiceOver Demo
  103. Урок 103. 00:05:54
    3.5.2.2. VoiceOver Navigation
  104. Урок 104. 00:04:13
    3.5.2.3. Testing VoiceOver after Improving MegaNav
  105. Урок 105. 00:01:36
    3.5.2.4. Testing VoiceOver after Improving Form Structure
  106. Урок 106. 00:10:13
    3.5.3.1. Update the MegaNav Structure for Better VoiceOver Experience
  107. Урок 107. 00:03:56
    3.5.3.2. Update CSS for MegaNav and Menu Items
  108. Урок 108. 00:02:16
    3.5.3.3. Update Heading Structure in the MegaNav
  109. Урок 109. 00:04:13
    3.5.3.4. Check Work in Safari
  110. Урок 110. 00:02:39
    3.5.3.5. Update Form Semantics
  111. Урок 111. 00:01:36
    3.5.3.6. Check Forms with VoiceOver
  112. Урок 112. 00:01:36
    4.1.1. Workshop Overview
  113. Урок 113. 00:00:56
    4.1.2. Project Overview
  114. Урок 114. 00:01:41
    4.1.3. Application Interface Overview
  115. Урок 115. 00:01:49
    4.1.4. React as an Abstraction
  116. Урок 116. 00:02:33
    4.1.5. Listings Page Overview
  117. Урок 117. 00:01:05
    4.1.6. Component Listing Excerpt Overview
  118. Урок 118. 00:02:08
    4.1.7. Listing Detail Page Overview
  119. Урок 119. 00:01:27
    4.1.8. Date Picker Component Overview
  120. Урок 120. 00:04:07
    4.2.1. Analyze Heading Structure
  121. Урок 121. 00:02:10
    4.2.2.1. Add Heading Structure to Page Listing Detail
  122. Урок 122. 00:01:01
    4.2.2.2. Adding Headers to Build Page Structure
  123. Урок 123. 00:01:30
    4.2.2.3. Analyze New Page Listing Detail Heading Structure
  124. Урок 124. 00:02:12
    4.2.3.1. Introducing the HeaderPortal Component
  125. Урок 125. 00:03:27
    4.2.3.2. Solution Add an H1 with React Portal
  126. Урок 126. 00:04:07
    4.2.4.1. Intro to Semantic Landmarks and Axe DevTools
  127. Урок 127. 00:06:45
    4.2.4.2. Implement Top Level Landmarks
  128. Урок 128. 00:05:34
    4.2.5. Solution Implement Semantic Landmarks in Page Listing Detail
  129. Урок 129. 00:05:29
    4.2.6. Check Current Page Accessibility with Voice Over
  130. Урок 130. 00:03:27
    4.2.7. Explore More Semantic Landmark Element Options
  131. Урок 131. 00:03:53
    4.2.8. About the React Portal Header Solution
  132. Урок 132. 00:07:05
    4.3.1. What Is ARIA and When to Use It
  133. Урок 133. 00:04:07
    4.3.2. Analyze Date Picker and Add Implicit ARIA Roles
  134. Урок 134. 00:08:40
    4.3.3.1. Add ARIA States, Roles, and Properties to the Date Picker
  135. Урок 135. 00:02:08
    4.3.3.2. Solution Add Implicit Roles to List Items
  136. Урок 136. 00:07:28
    4.3.4. Test Date Picker Accessibility with a Screen Reader
  137. Урок 137. 00:05:16
    4.4.1. What is an Accessible Name
  138. Урок 138. 00:04:56
    4.4.2.1. Analyze the Home Page Search Feature for Accessible Names
  139. Урок 139. 00:05:51
    4.4.2.2. Fix an SVG Icon Accessibility for Voice Over in Safari
  140. Урок 140. 00:03:21
    4.5.1.1. Intro to Programmatic Accessibility
  141. Урок 141. 00:08:13
    4.5.1.2. Convert the Grid of divs to an HTML Table
  142. Урок 142. 00:01:57
    4.5.1.3. Label an HTML Table with aria-labelledby
  143. Урок 143. 00:08:27
    4.5.2.1. Test out HTML Table Accessibility in Voice over
  144. Урок 144. 00:06:16
    4.5.2.2. Test Our Date Picker with NVDA
  145. Урок 145. 00:04:56
    4.6.1.1. What is the Accessibility Object Model (AOM)
  146. Урок 146. 00:01:00
    4.6.1.2. Enable AOM in Chrome or Firefox
  147. Урок 147. 00:05:15
    4.6.1.3. Explore AOM Properties vs. HTML Attributes through Attribute Reflection
  148. Урок 148. 00:09:53
    4.6.2. Implement aria-current functionality with AOM as a Property
  149. Урок 149. 00:07:12
    4.6.3. Implement aria-current in the MegaNav as an Attribute
  150. Урок 150. 00:08:41
    4.6.4. Check aria-current with a Screen Reader and AOM as a Promising Technology
  151. Урок 151. 00:01:46
    5.1.1.1. Workshop Overview
  152. Урок 152. 00:05:09
    5.1.1.2. Project Overview
  153. Урок 153. 00:03:07
    5.2.1.1. Overview and Issue Finding
  154. Урок 154. 00:02:47
    5.2.1.2. Examining the Dropdown & Listings
  155. Урок 155. 00:01:27
    5.2.2. An Overview of the ARIA Authoring Practices Guide
  156. Урок 156. 00:03:11
    5.2.3.1. An Overview of the Component Sandbox
  157. Урок 157. 00:02:28
    5.2.3.2. The Visually-hidden Technique
  158. Урок 158. 00:01:27
    5.2.3.3. The Opacity Technique
  159. Урок 159. 00:01:19
    5.2.3.4. The Display Technique
  160. Урок 160. 00:01:05
    5.2.3.5. The Visibility Technique
  161. Урок 161. 00:03:09
    5.2.3.6. The aria-hidden Technique
  162. Урок 162. 00:02:04
    5.2.3.7. Debugging Visibility Techniques
  163. Урок 163. 00:03:54
    5.2.4.1. Introducing the Skip Links Challenge
  164. Урок 164. 00:01:47
    5.2.4.2. Implementing the SkipLinks Component
  165. Урок 165. 00:01:59
    5.2.4.3. Adding the SkipLinks Component to the Header
  166. Урок 166. 00:03:43
    5.2.4.4. Updating SkipLink Component Styling
  167. Урок 167. 00:01:20
    5.3.1.1. Overview of Focus Management
  168. Урок 168. 00:06:52
    5.3.1.2. Focus Management in the Component Sandbox
  169. Урок 169. 00:01:50
    5.3.2.1. Roving Tabindex & Current Date Picker Behavior
  170. Урок 170. 00:03:43
    5.3.2.2. Current DatePicker Markup & tabindex Plan of Attack
  171. Урок 171. 00:04:12
    5.3.3.1. Updating the Date Picker to Track tabindex
  172. Урок 172. 00:04:03
    5.3.3.2. Arrow Key Challenge Introduction
  173. Урок 173. 00:07:52
    5.3.3.3. Using Refs & Writing the ArrowRight Key Handler
  174. Урок 174. 00:07:50
    5.3.3.4. Implementing & Troubleshooting Arrow Key Handling
  175. Урок 175. 00:04:56
    5.3.3.5. Overriding Browser Scrolling from Up and Down Arrows
  176. Урок 176. 00:02:20
    5.3.4.1. Thoughts on Overriding Default Controls
  177. Урок 177. 00:02:31
    5.3.4.2. Wrapping up Focus Management
  178. Урок 178. 00:05:32
    5.4.1. Accessibility Information & Interactivity Issues in Screen Readers
  179. Урок 179. 00:06:19
    5.4.2.1. VoiceOver Navigation with Tab & Arrow Keys
  180. Урок 180. 00:03:15
    5.4.2.2. Navigation with the VoiceOver Rotor
  181. Урок 181. 00:04:51
    5.4.3.1. Navigating with NVDA
  182. Урок 182. 00:08:37
    5.4.3.2. Checking the Date Picker with NVDA
  183. Урок 183. 00:01:27
    5.5.1.1. Intro to ARIA Live Regions
  184. Урок 184. 00:05:42
    5.5.1.2. ARIA Live Region Roles
  185. Урок 185. 00:05:38
    5.5.1.3. ARIA Live Region Properties
  186. Урок 186. 00:02:00
    5.5.2.1. Lesson Introduction
  187. Урок 187. 00:06:55
    5.5.2.2. Preparing to add a Live Region
  188. Урок 188. 00:03:13
    5.5.2.3. Adding State & Writing the Submit Handler
  189. Урок 189. 00:03:31
    5.5.2.4. Checking Progress in the Browser
  190. Урок 190. 00:03:32
    5.5.2.5. Adding onChange Handlers to the Inputs
  191. Урок 191. 00:03:23
    5.5.2.6. Form Updates
  192. Урок 192. 00:03:30
    5.5.2.7. Checking Form Styling in the Browser
  193. Урок 193. 00:06:47
    5.5.2.8. Solution Sending Focus to the First Invalid Field
  194. Урок 194. 00:04:00
    5.5.2.9. Checking Focus Management & VoiceOver
  195. Урок 195. 00:03:49
    5.5.2.10. Adding aria-required to Required Form Fields
  196. Урок 196. 00:03:58
    5.5.2.11. Checking work in NVDA & Section Wrap-Up
  197. Урок 197. 00:02:30
    5.6.1. Introduction to Advanced Scripting
  198. Урок 198. 00:02:55
    5.6.2. Sortable List with the ARIA Application Role
  199. Урок 199. 00:02:04
    5.6.3. Slideshow Overview
  200. Урок 200. 00:07:52
    5.6.4. Solution Part 1 Updating Elements & Adding Keyboard Supportb
  201. Урок 201. 00:05:37
    5.6.5. Adding a Live Region & Focus Management to the Slideshow
  202. Урок 202. 00:03:44
    5.6.6.1. VideoSemantic Updates
  203. Урок 203. 00:02:00
    5.6.6.2. Checking our work
  204. Урок 204. 00:02:45
    6.1.1.1. Project Overview
  205. Урок 205. 00:06:48
    6.1.1.2. CampSpots Project Tour
  206. Урок 206. 00:07:48
    6.2.1. An Overview of Storybook
  207. Урок 207. 00:09:48
    6.2.2.1. Storybook Story Structure
  208. Урок 208. 00:05:03
    6.2.2.2. Adding a DropdownList Story to Storybook
  209. Урок 209. 00:05:15
    6.3.1.1. An Overview of Unit Testing
  210. Урок 210. 00:02:47
    6.3.1.2. Jest Configuration
  211. Урок 211. 00:10:12
    6.3.2.1. Reading the Icon Test
  212. Урок 212. 00:02:40
    6.3.2.2. Overview of the Icon Button
  213. Урок 213. 00:09:27
    6.3.2.3. Writing the Keyboard Reachable & Operable Test
  214. Урок 214. 00:03:12
    6.3.2.4. Solution Writing a Keyboard Reachability Test
  215. Урок 215. 00:05:59
    6.3.3.1. Test 1 acts as one tab stop
  216. Урок 216. 00:06:51
    6.3.3.2. VideoTest 2 Enables a Custom Field Amount
  217. Урок 217. 00:05:15
    6.4.1.1. An Overview of Cypress Component Testing
  218. Урок 218. 00:02:29
    6.4.1.2. Running Cypress Component Testing
  219. Урок 219. 00:04:53
    6.4.2.1. Reading the Keyboard Operability Test
  220. Урок 220. 00:04:06
    6.4.2.2. Fixing MegaNav Markup so Tests Pass
  221. Урок 221. 00:04:06
    6.4.3.1. A First Pass at the “Submenu Should Not Be Reachable” Test
  222. Урок 222. 00:02:38
    6.4.3.2. Fixing a Test that Passes When it Shouldn't
  223. Урок 223. 00:01:12
    6.4.4.1. Testing with the cypress-axe Plugin
  224. Урок 224. 00:01:44
    6.4.4.2. Checking Color Contrast with cypress-axe
  225. Урок 225. 00:02:57
    6.5.1.1. Integration Testing with Cypress
  226. Урок 226. 00:07:42
    6.5.1.2. Configuring & Running Cypress
  227. Урок 227. 00:09:25
    6.5.2.1. Writing a Page-Level Test with cypress-axe
  228. Урок 228. 00:02:43
    6.5.2.2. Updating Alt Descriptions
  229. Урок 229. 00:05:29
    6.5.2.3. Updating Landmarks
  230. Урок 230. 00:02:47
    6.5.2.4. Fixing the Button Name Issue
  231. Урок 231. 00:07:06
    6.5.3. Implement aria-current Test
  232. Урок 232. 00:05:34
    6.5.4.1. Write a Test for an Accessible Payment Dialog
  233. Урок 233. 00:02:03
    6.5.4.2. Analyzing Test Results
  234. Урок 234. 00:05:23
    6.5.4.3. Implement and Pass Dialog Test
  235. Урок 235. 00:02:46
    6.5.4.4. Focus Management and Inert Attribute
  236. Урок 236. 00:01:56
    6.5.5.1. Preparing the Routing Tests
  237. Урок 237. 00:01:24
    6.5.5.2. Use React Helmet to Dynamically Set Page Titles
  238. Урок 238. 00:05:38
    6.5.5.3. Client-Side Routing Thoughts
  239. Урок 239. 00:03:20
    6.5.5.4. Start Page Change Test
  240. Урок 240. 00:01:36
    6.6.1.1. Puppeteer Overview
  241. Урок 241. 00:01:52
    6.6.1.2. The Accessibility Tree in DevTools
  242. Урок 242. 00:02:41
    6.6.1.3. An Alternative View of the Accessibility Tree
  243. Урок 243. 00:01:11
    6.6.2.1. Project Overview
  244. Урок 244. 00:03:23
    6.6.2.2. Writing the Accessibility Tree Snapshot Test
  245. Урок 245. 00:01:52
    6.6.2.3. Examining a Snapshot
  246. Урок 246. 00:01:17
    6.6.2.4. Updating a Snapshot
  247. Урок 247. 00:02:08
    6.7.1.1. Preparing for CI with GitHub Actions
  248. Урок 248. 00:03:37
    6.7.1.2. Viewing CI Issues with GitHub Actions
  249. Урок 249. 00:07:23
    6.7.1.3. Push Changes to Run Tests Again