Your keyboard and computer

- The first method for testing a website for accessibility issues is to visit like someone using assistive technology would, and we only need our keyboard and computer to do it. Let's briefly navigate through a website, binaryville.com, using a mouse to get a feel for how the website functions. We have a main image, a few icons in the upper right, and four menu items. The whole site flows pretty naturally from top to bottom. As a mouse user, if I wanted to visit, say the blog, I would move my cursor to the blog button and click it. Now let's see how to navigate this same website without using a mouse. I'll be demonstrating on a Mac, but similar functionality exists for Windows-based computers as well. Check out the course handout for more information. We'll be navigating this website using our keyboard, and our computer will read instructions to us. On a Mac, this tool is called voiceover. One way of turning on voiceover is to go to the magnifying glass in the upper right corner of our screen, type voiceover, and toggle the pill button on. Instead of searching, we could also use Siri by saying, "Turn voiceover on." A third method we could use is to press command, F5. That's how I'm going to do it. Note that it will immediately begin reading your current state to you. This is not just for a web browser, but works anywhere on a Mac, here we go. - [Narrator] Welcome to voiceover. Voiceover speaks descriptions of items on the screen and can be used to control the computer using only your keyboard. - [Narrator] Voiceover on Firefox, Binaryville, Binaryville window, Binaryville Web content, has keyboard focus. You are currently on web content. To enter the web area, press control, option shift, down arrow. - [Instructor] Let's reload the page so voiceover thinks we just arrived at this page. Voiceover is going to get chatty here. So I'll first describe what will happen. Voiceover will navigate through the page on its own unless we use a keyboard command or mouse press to stop it. At each item that a web developer has set up accessibility interactions for or that has them built in naturally, we'll hear a description and options presented to us. If this is done correctly, we have access to everything on the page. If these are missing, then we don't, let's do it. - [Narrator] Image, visited link image, home. Heading level two, main navigation, list four items. Visited link, about link, shop link, blog link, contact link, image, account link, image, shopping cart. Heading level one, welcome to Binaryville. Heading level two, merchandise. Share your love of technology and spread link, image of Rex Rex. List 14 items, you are currently on the link, to click this link, press control option space. - [Instructor] Okay, I think that gives a good feel for how voiceover navigates through the page automatically. We can also continue on manually using the tab key and choose from the options it gives us. - [Narrator] Link, image of Dolores, Dolores. Link, image of Bubbles, Bubbles. Link, image of Fred, Fred, voiceover off. - [Instructor] So that's voiceover. There are also many other keyboard commands available. I encourage you to check them out in the course handout to up your screen reader game.