Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the previous movie, I showed you what the inaccessible version of this website was like for someone with accessibility problems. Now let's take a look at the end result, where we've converted this page into an accessible page. As you can see, when we look at the page, it looks the same. There's no real visual difference. However, when we start using accessibility tools, you'll see a major difference. First, I'll try navigating this page with the keyboard. So I'll hit the Tab key to get to the first link.
You can see the whole header of this page has now been highlighted, because it's a link. I can now navigate to the next link, and you see that each of the menu items is highlighted, and as I continue down the page, you will see that each item that's linked is being highlighted by the browser. So it's very clear to me where I am on the page and what link I am going to be following if I hit Enter. That's the visual experience of the site. What happens when we run this site using the screen reader? I've booted up my screen reader software one more time and now I'll run the page again using that screen reader software.
(Screen reader dialogue) I think that's all we need to hear.
If you watched the previous movie, you know there are some major differences between this page and the inaccessible one. To start off, this page actually has a title, Hansel & Petal Flower Company, and when we got to the header, not only did it read out Hansel & Petal, it also read out "from our garden to your home." And then it came to something we can't see. It gave us a menu title and said skip to content. This is a hidden link that's put there only for people who use screen readers, because they might not want to listen to a menu being read out to them.
Let me start again from the very top, using the Tab key and navigate my way down the page. (Screen reader: Hansel and Petal Flower Company document. Heading level 1 visited link Hansel and Petal Flower Company.) Okay, so that's the header pointing to the Home page. (Screen reader: Navigation unmarked. Skip to content visited link.) Skip to content, okay, I'll get back to that in a second, but let me continue down my navigation path. (Screen reader: List with eleven items. Home visited link Hansel and Petal Flower Company homepage.) You notice that each of these menu items now has further description of where you go you when you visit the menu item.
(Screen reader: Flowers visited link, flowers carried by Hansel and Petal Flower Company.) (Tips and Tricks visited link, tips and tricks from the Hansel and Petal Flower Company.) What I have done here is added some extra information to each of the menu items so you know where you are going when you follow those links. But let me navigate back to that Skip Link button and see what happens when we get to it. (Screen reader: Flowers, home visited, out of list, skip to content visited link.) Skip to content visited link. Let's see what happens when I hit that link, so I'll hit Return.
(Screen reader: Heading level 1 main article, Garden Talk, heading level 1, In the Coppice, published on (October 12, 2011 at 5:32 by Arthur O'Cooke. Graphic, yellow pansy in a pot. Outside the front door of the--.) As you can see, the skip to content link literally skips me down to the content of the page, meaning that the person visiting this site using a text-to-speech browser doesn't have to read the menu. You also notice that the browser now read out information about the image that was ignored in the previous one. That's really important because I've now added information about the image for people who can't see it.
Now let's look at what happened to those three images further down on the page. You will remember, on the bottom of the page here, we have three images that each points to a Wikipedia article about the flower in the image. In the inaccessible version of this page, you were told that each of the images was linking somewhere, but you were not told where they were linking to. I used the Tab key to navigate to these three images. So let's see what they read out. (Screen reader: List with three items: Bougainvillea Pink, graphic link Bougainvillea Pink at wikipedia.org.) (Chrysanthemum graphic link, chrysanthemum at wikipedia.org.) So now it's telling me chrysanthemum link chrysanthemum at wikipedia.org.
Now it's very clear where these links are pointing. This is very much the point of making accessible websites. You provide extra information that can't be seen but that can be heard or it can be read by search engines and other people who access this site without seeing the images. That way you are providing extra information and make it easier for the person visiting the site to understand the content there, being able to make an educated decision about whether or not they should be following a link or just continuing down the page and reading on. It may seem subtle, but by applying simple accessibility standards to your code, you make the web experience for a person with visual impairments and people or entities visiting your site through nonvisual means much more pleasant and understandable.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 91122 Viewers
80 Video lessons · 138161 Viewers
59 Video lessons · 56978 Viewers
52 Video lessons · 70612 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.