Screen Readers

[?mellow guitar music?] 0:00 Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com 0:03 Accessibility: Websites - Screen Readers with Nick Pettit 0:07 Now that you know some techniques to improve accessibility, 0:13 we're going to apply them to a real project. 0:16 First, however, we should become a little bit more familiar with screen readers. 0:19 If you plan to make a website accessible, 0:24 it's important to know what the experience is like for people with impairments. 0:26 It's easy to simulate colorblindness, 0:31 and it's not too difficult to understand how many individuals 0:34 with various other impairments use the web. 0:37 However, most people don't really know what it's like 0:39 to use a screen reader. 0:43 It's important to evaluate the accessibility of web content 0:45 using a screen reader, but they can be difficult or confusing 0:48 for casual users that just want to test out some content. 0:52 Rather than avoid it, let's spend some time using a screen reader 0:56 so that we can gain a better undertstanding 1:00 of how people that use screen readers experience web content. 1:02 This is the website for a screen reader called NVDA, 1:07 which is an acronym that stands for "Nonvisual Desktop Access." 1:12 It's free in open-source, so if you visit nvda-project.org, 1:18 you can go ahead and download it for yourself. 1:24 The software is Windows-only, 1:27 so if you're on a Mac like I am, you'll have to find a way to run Windows, 1:30 either in a virtual machine or otherwise. 1:34 I should also mention that the software is still in alpha form, 1:36 so it may not always work as you'd expect it to, 1:41 and some of its capabilities are still basic. 1:44 When using NVDA, there are a few things that you'll want to keep in mind. 1:47 For one, make sure that your NumLock is off. 1:52 This can cause issues with some keyboard shortcuts. 1:55 2. Most browser shortcut keys will work just as you'd expect them to, 1:58 and 3. The page may or may not scroll while you read, 2:03 so you might hear content being read to you 2:08 that isn't currently visible on the screen. 2:11 Once you've installed NVDA and you have your web browser open, 2:15 NVDA will start reading content to you as you mouse over items. 2:18 I won't be teaching much keyboard navigation, 2:23 as this video is mostly intended to give you 2:26 an idea of how screen readers interpret web content, 2:29 but if you want to learn how to use all the keyboard functionality, 2:32 you can go ahead and read the User Guide 2:36 over at nvda-project.org/wiki/Documentation. 2:39 To start reading a web page from the top, press the + button on your number pad. 2:46 If you're not using a full-size keyboard, 2:51 be sure to let NVDA know that you're using a laptop keyboard in the settings. 2:53 Now, on this Wikipedia page, there are several things to take note of. 2:59 There are a few headings, some paragraph text, 3:03 there are lots of links, 3:06 there's a table on the right side here, 3:08 and there's also a list of links right here. 3:12 Now, I'm going to refresh this page and hit the + button. 3:16 Let's just go ahead and listen to how NVDA 3:20 interprets the content on this web page. 3:25 As the synthesized voice reads the content, 3:27 try to follow along. 3:30 [synthesized voice] World Wide Web is reload. 3:32 World Wide Web with image 3:35 World Wide Web Wikipedia, the free encyclopedia. 3:39 Heavy level 1 world wide web from Wikipedia, the free encyclopedia. 3:42 www redirects here. 3:47 For other uses, see link WWW (disambiguation). 3:49 The web redirects here. 3:53 For other uses see link web (disambiguation). 3:55 Not to be confused with link Internet. 3:58 Table with 5 rows and 2 columns world wide web 4:01 row 1, column 1, link graphic enter. 4:04 The web historic logo designed by link Robert Cailliau 4:07 Row 2 inventor 4:10 Column 2 link Sir Tim Berners Lee link 1. 4:11 Row 3 column 1 launch year, column 2 1990. 4:14 Row 4 column 1 company. 4:17 Column 2 link CERN 4:19 Row 5 column 1 available, column 2 worldwide out of table world wide web 4:20 abbreviated as WWW and commonly known as the web 4:25 is a link system of interlink link hypertext documents accessed via the link internet 4:29 with a link web browser one can view link web pages that may contain link text 4:34 link images link video and other link multimedia 4:39 and navigate between them by using link hyperlinks. 4:43 Using concepts...World Wide Web W3 was developed 4:46 to be a pool of human knowledge and human culture which will allow collaborators 4:50 in remote sites to share their ideas and all aspects of a common project link 4 heavy 4:54 level 2 content link 5 list with 14 items. 4:59 Link 1 history 5:02 Link 2 function list with three items link 2.1 Linking 5:05 link 2.2 Dynamic updates of web pages 5:07 link 2.3 WWW prefix out of list 5:10 Link 3 Privacy Link 4 Security link 5 Standards 5:13 Now, I'm going to stop the screen reader right there, 5:17 because there's a few things I want you to remember from this. 5:20 First, notice how the page wasn't necessarily read 5:23 in the order that you thought it was going to be read in. 5:27 After the header and some of the meta information about the article, 5:30 it started reading the table down here on the right. 5:34 This is because in the markup, the table comes before the paragraph text. 5:38 This isn't necessarily a good or bad thing 5:43 in this particular instance, but what I want you to remember 5:46 is that screen readers will read content 5:49 based on the markup, not the visual presentation. 5:52 Secondly, the screen reader said the word "link" before every single one of these links 5:56 in the paragraph text and before every link on the page. 6:02 This might seem rather annoying to someone unfamiliar with screen readers. 6:06 However, this isn't something that you need to worry about 6:11 because most screen reader software allows you to set 6:14 whether or not the screen reader reports links, tables, 6:18 and other special elements on the page. 6:22 Last, I'd like you to note how the table was read 6:24 and how the list over here was read. 6:28 The table was read one row at a time, 6:31 starting at the top and working its way along the columns from left to right. 6:34 Before the list was read, the screen reader mentioned how many items were in the list. 6:40 Hopefully this video gave you a better idea 6:46 of how screen readers interpret web content. 6:49 In the next video, we'll get started on an accessible web project. 6:51 [?mellow guitar music?] 6:55 Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com 6:58