Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:23Length:2.5 hours
  • Overview
  • Transcript

2.1 VoiceOver

VoiceOver for OS X is a great way for Mac users to be able to use their computer and navigate websites even when they may be unable to see the screen. This lesson will help you see how to use VoiceOver and how to adjust the settings of VoiceOver to customize it for your own use.

Related Links

2.1 VoiceOver

Hey, John Hartley with Tuts+. And in this chapter we'll be looking at some of the tools to use when testing for accessibility. And in the last chapter you heard me talk a little bit about screen readers and assistive technology. And in this lesson and the next, we'll be taking a look at some of those screen readers and how to use them. So I'm currently on a Mac and VoiceOver comes default on a Mac. I'll go ahead and turn it on and let you listen to what it sounds like. >> Voice over on. Chrome. The Accessibility Project window. The Accessibility Project HTML content has keyboard focus. >> So I'll turn that off real quick. And I'll open up the utility that actually controls VoiceOver. So you open up system preferences, hop down to accessibility. And right here you'll see VoiceOver. So if you enable VoiceOver it turns on. We can see that Cmd+F5 is the toggle. But for now we'll go ahead and open the VoiceOver utility. One of the neat features of VoiceOver is that Apple has done a nice job of incorporating this from the very beginning. When you first start up your Mac, from the very first start, you have the ability to turn on VoiceOver. VoiceOver is then with you as you set up your entire system. I'm really only gonna take a look at one of the features here and that's the speech. I'll go ahead and turn VoiceOver on. >> VoiceOver on, voice over utility, voice over utility window, utility categories table, speech selected has keyboard focus. >> Another thing you can do is you can move this around to anywhere on the page. >> You are currently on a table, to enter this table press Ctrl+Option+Shift+ down arrow. >> And you can the change the voice. >> Menu nine items checkmark, Alex. >> So Bruce. >> Bruce [INAUDIBLE]. >> Cathy. >> [INAUDIBLE] >> And the one I keep it on is. >> The best way to predict the future is to invent it. Closing menu, utility categories table. Speech selected. >> You could also change the rate, the pitch, the volume and the intonation, gonna go ahead and mute the speech for a second, and over here on the drop down you can see that there are actually more options. So, default is what I just set up, but you can change that up for different pieces of content. I'm gonna twirl that back up, turn this back on, one of the things you may notice is rate. So, rate I have at 60. And that goes up to 100. More experienced screen reader users may be as high as 90 when they're going through a site. Personally, when I'm testing a site, I go around 75. I'll go ahead and un-mute and then show you what it's like to have a rate of 90. And we'll go back over here. >> Chrome, The Accessibility Project window, The Accessibility Project, HTML content has keyboard focus. >> So you can see that that's a bit faster. We'll drop it back down to 60. >> Six. >> So I'll hop back to the site. >> Chrome, The Accessibility Project window, The Accessibility Project, HTML content. >> But when I continue from where I am. I just hit Ctrl+Option and. >> Link. [INAUDIBLE] Pending level two. [INAUDIBLE] Pending level four. Link. Hard deal using caption services with HTML file video. >> Can also move through each of the elements on the page with Ctrl+option, then the right arrow. >> Heading level 4, link. How to use skip. Never use role=applications on a widely containing element such as body if your page consists mostly of traditional widgets or page elements. >> You can also use the left arrow, so if you need to go back up through the page, you can still use the Tab key which is very common for keyboard navigation. Shift+Tab moves you back up through. The difference between the Tab key and then using Ctrl+Option and left or right is that tab is just gonna go through the links. Another feature of VoiceOver for Mac is if you hit Ctrl+Option+U. >> Links menu. >> It brings up the web rotor tool. This is actually a really nice tool. You can see all the links that are on your page right here. >> [SOUND] Link. >> As you scroll down through them, and I'm just tapping the down arrow. It's showing you on the page, and it was up here, when we were actually, in an area that was visible on screen. >> Skip navigation. >> It was showing you where that link is in the background. You hit right, shows you all the headings and you can hop through those. [SOUND] Right again, goes to Form Controls, hop over again, Web Spots, Landmarks, and this shows you the navigation, the main content, and this is the content info. And these are attributes that are specific to HTML5 that help with accessibility. So navigation can either have a role of navigation or it's a nav element, same with main. Either a main element or a div with a role of main. On larger sites, this can be very helpful to hop through a site quickly. >> On Web Spots menu, link [INAUDIBLE] level two, how to send link, Images menu. >> Now we're in Images, and you can see that this is all of the folks' avatars that have worked on the ally project. Those are really the only images that are on this home page. >> Links menu. >> And now we've come full circle back to Links. So the web rotor is not only a nice tool for navigating a site, it's also a nice overview of the different pieces of your site. To get out of web rotor you can just hit escape. >> Project HTML content. >> So that's a look at voice-over for MAC, and again this is a screen reader that's fairly popular. Part of that is because it is free. And part of it is because it's one of the only screen readers for Mac. As you can see ally project actually has an article about getting started with OS X VoiceOver. Hopefully that gives you a good idea of how to use it. Get you a little comfortable with it. And really with these screen reader tools to use for testing all it takes is a bit of practice. So hop in, get your hands dirty and start using screen readers to test your websites for accessibility.

Back to the top