WCAG Principles: Operable (part 1)

People with disabilities must be able to operate your web content. 0:00 The Operable principle is all about removing barriers 0:05 between your user and your content. 0:09 Many users rely solely on a keyboard to navigate the web, 0:15 either due to a temporary or situational disability or 0:21 a permanent disability related to vision or motor skills. 0:26 The first Operable criteria requires testing that all interactive 0:36 elements are accessible using the Tab key. 0:41 Keyboard users need to be able to exit each interface element as well, 0:45 avoiding what's known as a keyboard trap. 0:51 In this example, I can use the Tab key to select the next interface element. 0:55 Or shift-tab to return to the previous one. 1:01 A blue focus indicator shows me which element is currently selected. 1:06 However, once I enter the form input labeled 1:12 last 4 digits of your Tax ID, I'm stuck, 1:16 unable to move forwards or backwards. 1:21 Keyboard traps like this create a frustrating online experience for 1:25 keyboard-only users. 1:31 We'll be building an accessible HTML form in an upcoming video, 1:33 and let's be sure to test how well it can be navigated using only a keyboard. 1:38 Focus indicators, 1:45 which highlight the currently selected element, must be visually obvious. 1:46 The indicators must remain visible and 1:52 obvious no matter what element is selected, 1:55 Whether main menus or subnavigations, form fields or dropdown menus. 1:58 Trying to navigate a site that lacks focus indicators using a keyboard is like 2:06 operating a mouse with no visible cursor. You'd never know what you're clicking. 2:11 In addition to keeping the focus indicators obvious, test to make sure 2:17 your components receive focus in a logical order when tabbing through the page. 2:22 If you've kept your HTML semantic and kept your content 2:29 in a logical order, you should be in good shape here. 2:33 The second guideline of the operable principle, Enough Time, 2:39 states that when completing a task (such as booking a flight) has a time limit, 2:44 users should be able to adjust or disable the time limit if they need extra time. 2:49 WCAG makes an exception for 2:55 when the time limit is an essential part of how the content is experienced. 2:58 For example, if an eBay auction has lasted a week and 3:03 is set to expire in an hour, that's essential to how eBay works. 3:06 But if a user wins an auction and 3:12 needs extra time to fill out a form full of purchasing details, 3:15 the WCAG requires eBay to make extending or 3:20 disabling the time limit easy for users. 3:24 Users should also have the option to disable distracting content. 3:29 For some Slack users, 3:35 a message like this one with an animated GIF might make concentration difficult. 3:36 Fortunately, the Slack app allows users to disable animated GIFs and emojis. 3:42 Under the main Slack menu, 3:49 I'll choose Preferences, then click the Accessibility menu. 3:51 Slack gives me options to increase font size and 3:57 to adjust keyboard navigation features. 4:01 And here's the option to block animated images and emojis. 4:04 Now I can see the image is no longer moving. 4:10 I've included a link to an article on Slack's accessibility features in 4:14 the Teacher's Notes. 4:19 The third Operable guideline is called Seizures and 4:23 Physical Reactions, and states that animations should never flash 4:27 more than three times in any one second period. 4:32 To learn more about providing safe visuals, 4:36 I've included a link in the Teacher's Notes to an article by 4:39 the Epilepsy Foundation called Photosensitivity and Seizures. 4:43 The fourth guideline, Navigable, states that users should be able to navigate, 4:50 find content, and determine where they are. 4:56 One guideline worth closely examining is called Bypass Blocks, 5:01 which states that a mechanism should be available to skip blocks of content 5:07 that are repeated on multiple web pages. 5:12 It's common, for example, for e-commerce sites to begin with a lengthy navigation. 5:16 I'm looking at Cost Plus World Market. 5:22 And in addition to main product categories–furniture, outdoor, 5:25 rugs, and more–each category has a long list of subcategories. 5:30 Imagine using a screen reader to shop from the site or 5:37 navigating only with a keyboard. 5:41 If you're unable to skip the navigation and 5:44 jump straight to product descriptions, shopping here becomes almost impossible. 5:47 Solving this problem used to require an invisible skip content link. 5:54 That is, a link to the main content that's hidden in the CSS. 6:00 But I'm checking the MDN reference on Bypass Blocks, 6:05 and it states "if a proper structure of headings and 6:09 semantic containers is provided to navigate with, for 6:14 example, the section element, the aside element, etc. 6:18 then an added skip link is not needed." 6:23 So the lesson here, once again, for developers, 6:27 is that coding with accessibility in mind starts with proper semantic markup. 6:31