Start a free Courses trial
to watch this video
In this video, you'll learn how users that utilize screen readers experience the web. You'll also learn how screen reader software interprets web content.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[?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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up