1 00:00:00,960 --> 00:00:05,920 The fourth and final WCAG principle, Robust, states that 2 00:00:05,920 --> 00:00:10,140 content must be robust enough that it can be interpreted by 3 00:00:10,140 --> 00:00:15,600 a wide variety of user agents, including assistive technologies. 4 00:00:15,600 --> 00:00:17,740 But what does that really mean? 4 00:00:19,600 --> 00:00:22,740 The robust guideline asks developers 5 00:00:22,740 --> 00:00:27,640 to write valid HTML, and use correct semantic markup. 6 00:00:28,690 --> 00:00:34,302 This requirement should sound familiar, as the Perceivable and 7 00:00:34,302 --> 00:00:40,332 Operable guidelines also depend in part on the accuracy of your HTML. 8 00:00:40,332 --> 00:00:45,490 An HTML validator such as html5.validator.nu 9 00:00:45,490 --> 00:00:52,171 will look for errors in HTML elements such as missing closing tags 10 00:00:52,171 --> 00:00:57,930 or quotation marks, or even misused semantic elements. 11 00:00:59,140 --> 00:01:04,480 I'll paste the URL of the WCAG 2.1 guidelines 12 00:01:04,480 --> 00:01:10,390 into the validator and good news, it's valid HTML. 13 00:01:11,530 --> 00:01:14,934 I'll also try validating one of my local files in 14 00:01:14,934 --> 00:01:17,603 which I've included a few mistakes. 15 00:01:24,532 --> 00:01:29,590 And we can see the line number and description of each error. 16 00:01:31,240 --> 00:01:35,500 Google Lighthouse is built into Chrome's dev tools, and 17 00:01:35,500 --> 00:01:42,930 run several audits on a web page, including accessibility, loading speed and 18 00:01:42,930 --> 00:01:47,420 search engine optimization for either the desktop or mobile view. 19 00:01:48,810 --> 00:01:54,190 I've loaded the current desktop version of the Domino's Pizza website, and 20 00:01:54,190 --> 00:01:59,490 I'll right click and choose Inspect, then find the Audits tab. 21 00:02:01,340 --> 00:02:06,570 I'll make sure I've selected Desktop and press Generate report. 22 00:02:08,460 --> 00:02:14,120 It looks like Domino's Pizza has improved its accessibility score since the lawsuit. 23 00:02:15,460 --> 00:02:20,180 Where there are issues, Lighthouse explains the problem, and 24 00:02:20,180 --> 00:02:22,880 highlights the code that needs improvement. 25 00:02:25,530 --> 00:02:30,510 The most recent addition to the Robust principle, Status Messages, 26 00:02:30,510 --> 00:02:34,450 pertains to dynamic web apps that use JavaScript 27 00:02:34,450 --> 00:02:37,650 to add new content without refreshing the page. 28 00:02:39,040 --> 00:02:43,680 If I'm looking at a social media feed that uses JavaScript to 29 00:02:43,680 --> 00:02:47,690 display new posts without a browser refresh, 30 00:02:47,690 --> 00:02:53,070 screen readers should be alerted to the existence of the updated content. 31 00:02:53,070 --> 00:02:59,370 Let's watch a demo of NVDA, a screen reader for Windows machines 32 00:02:59,370 --> 00:03:05,780 reacting to a warning message appearing dynamically beside a web form. 33 00:03:05,780 --> 00:03:09,110 SCREEN READER: Status message example, heading level one status message. 34 00:03:09,110 --> 00:03:13,300 Heading level two product review, we appreciated your product review and 35 00:03:13,300 --> 00:03:14,630 value your opinions. 36 00:03:14,630 --> 00:03:18,660 However, comments with inappropriate language will be removed. Blank. 37 00:03:18,660 --> 00:03:23,412 Comments left paren 300 characters or less right paren. 38 00:03:23,412 --> 00:03:27,065 Edit multiline. Enter product comments. 38 00:03:27,065 --> 00:03:30,126 Warning, you will be logged out in 5 minutes if there is 39 00:03:30,126 --> 00:03:34,126 no further activity, select add more time if needed. 40 00:03:34,126 --> 00:03:38,867 ANWAR: You can see that the warning message was initially not present on the page, 41 00:03:38,867 --> 00:03:45,620 and was added dynamically once the user began typing. That is a status message. 42 00:03:47,710 --> 00:03:51,730 If you're wondering how to test JavaScript updates to your page, 43 00:03:51,730 --> 00:03:52,740 that's a great question. 44 00:03:53,820 --> 00:03:55,380 Here's a demo I've written 45 00:03:55,380 --> 00:03:59,870 that adds new content dynamically after a user clicks a button. 46 00:04:02,470 --> 00:04:06,487 If I choose View Page Source in the browser, 47 00:04:06,487 --> 00:04:12,458 I can only see the content that was part of the original page HTML, 48 00:04:12,458 --> 00:04:20,228 but when I use the Inspect tool I can see dynamic updates to the DOM, 49 00:04:20,228 --> 00:04:25,020 or document object model, which is a representation of the web page 50 00:04:25,020 --> 00:04:29,490 that JavaScript uses to access the document and its elements. 51 00:04:30,850 --> 00:04:34,140 This is where the axe extension comes in handy. 52 00:04:35,230 --> 00:04:40,010 I can run axe to check the accessibility of my content 53 00:04:40,010 --> 00:04:45,670 both on page load and also after my JavaScript has run. 54 00:04:47,390 --> 00:04:51,510 I've included a link to both the axe extension, and 55 00:04:51,510 --> 00:04:54,140 my JavaScript demo in the teacher's notes. 56 00:04:55,980 --> 00:05:00,834 You made it! We've covered every principle in version 2.1 of 57 00:05:00,834 --> 00:05:03,640 the Web Content Accessibility Guidelines. 58 00:05:04,870 --> 00:05:09,740 Now that we've reviewed the guidelines, in the final video of the stage, we'll learn 59 00:05:09,740 --> 00:05:14,270 to work accessibility considerations into our development process.