Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Business and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding the benefits of accessibility and SEO
- Evaluating screen readers for Windows and Mac
- Installing browser development tools
- Comparing sites that are SEO-friendly and SEO-unfriendly
- Defining a language for a page
- Creating better semantic markup with HTML5
- Marking up images and links properly
- Creating an accessible menu with an unordered list
Skill Level Intermediate
If you want to experience the websites you build as a blind person using a screen reader would experience them, it's a good idea to get a screen reader and install it on your computer so that you can run your website through the screen reader and see, or rather hear, what the experience is like. You don't have to install a screen reader and there is a way you can pretend to be a screen reader yourself and kind of bypass that whole process, but if you want to get a screen reader for your computer, here are some options. If you're on a Windows computer, you have two main options. You can either get the NVDA Screen Reader Software--that's free and open source, and you can install it on your computer--or you can get the professional grade JAWS Screen Reading Software from Freedom Scientific.
Both of these are used heavily by both blind and hard of seeing people and they have support for both text-to- speech and also Braille displays, so they can display the content in an active Braille display so it can be read with your fingers. To give you an idea of what it's like to use one of those screen reading tools on your computer, I'll start up NVDA on this PC. Now keep in mind, using a screen reader is tricky, especially for sighted users, because they operate very differently from what we're used to.
When I boot up NVDA on my computer, my computer will start reading back to me all the content on my computer, and you'll see what I mean when I say it's quite a jarring experience. (beep) (Screen reader dialogue) That was NVDA just booting up and as you can tell, when it started, it first opened a regular dialogue that I closed, and then it just started reading what was on the first page I visited.
If you think about it, that actually makes a lot of sense, because as a sighted person, when you close the dialog, you immediately see where you're at on the computer. So a person who can't see needs to get that read back to them. The way I stopped it was to simply click somewhere inside the page, but now I want the page to be read back to me. And I want it to start from the very top, so I'll just reload the page and it'll start from the very top. (NVDA screen reader dialogue) And from here I can now tab through the page, follow links, and do everything else I want to.
(NVDA screen reader dialogue) I stop that again with my mouse. Using a screen reader is an acquired skill, and to learn it you need to read the documentation. Like I said, this is something you'll want to use if you really want to know what the website experience is like for a person who can't see it. Otherwise, there are other ways of doing it by simply reading the content back. If you're using a screen reader for testing purposes, you have to remember that a screen reader will read everything back to you.
So, if you're used to using your mouse, you should really leave the mouse alone while you're using the screen reader, because when you move the mouse around, it'll start to read back everything you're pointing at. (NVDA screen reader dialogue) So when I move my mouse around, you'll notice that it keeps reading back everything I point at, and it can be kind of confusing and it very quickly becomes annoying if you're not used to it. So I'll show you how to turn it off as well. First I'll just make it talk, so I'll touch something.
(NVDA screen reader dialogue) And now I want to turn it off, so I'll go down to my taskbar. (NVDA screen reader dialogue) And now as you can see, I used the active applications, right-clicked on the NVDA logo, selected Exit, and then just closed the application. If you're on a Mac, you'll find a screen reader application built into the operating system. To activate it, go to the Apple icon, select System Preferences > Universal Access, and here under the Seeing tab you'll find VoiceOver.
This is an application that will read back everything on the screen to you just like NVDA and the other applications for windows. So I'll turn VoiceOver On. (VoiceOver: Welcome to VoiceOver. VoiceOver speaks descriptions of items on the screen and can be used to control) (the computer using only your keyboard.) (If you already know how to use VoiceOver, press the V key now.) (If you want to learn how to use VoiceOver, press the Spacebar now.) If this is the first time you are using VoiceOver or you've never used VoiceOver with a web browser before, I suggest you click on the Learn VoiceOver button, and go through the tutorial to learn how this application works.
Once activated, it'll read back everything on your page. (VoiceOver: VoiceOver on System Preferences Universal Access window toolbar.) And to turn it off again, you have to go back to Universal Access-- (VoiceOver: You're currently on a toolbar.) (To interact with the items on this toolbar, press Ctrl+Option+Shift+Down Arrow.) --and click VoiceOver Off. You can also use a keyboard combination to turn VoiceOver On and Off. You see it right here; it's Command+F5. It'll turn VoiceOver On and Off at all times wherever you are at.
So if you're in the web application and you want to go somewhere else and you don't want to hear VoiceOver read it back to you, you hit Command+F5 and it'll close the application down for you. Using a screen reader can be a bit of a confusing experience the first time, but once to get used to it you'll discover a whole new way of accessing content on the web and on your computer. More importantly, you get a very clear idea of why it is so important to make your content accessible.