- 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
After playing around with a screen reader, you may find it to be too cumbersome or confusing to use, or you may just not like listening to a computerized voice. If that's the case, you can get a custom screen reader experience with a voice you're very familiar with, your own. I find that pretending to be a screen reader can be very useful when building a site. It's quicker and easier than using an actual screen reader and it makes me aware of what I'm doing. It may sound silly, but it works. Let me show you how I do it and why you might think me crazy if you ever saw me working on a site.
Let's pretend to be a screen reader and look at both the fully accessible and the inaccessible version of our site. I'll open the inaccessible one first. I'll go to my Exercise files and under the Assets folder, I'll open the Inaccessible page in Firefox. Now that we've installed the Web Developer toolbar and also Firebug, we can now see this site as a screen reader would see it. That means a page with only text, no image, and no styles. The first thing I'm going to do is turn off the styles, so I'll go to CSS on my Toolbar, and go Disable All Styles.
This gives me the page with no styles, but I can still see the images. So now I want to turn the images off, and here's the catch. If you're working on the site that's live on the web, you can simply go to images and select Disable Images and All Images, but for whatever reason, this doesn't work if you're using a site that's local on your computer. In fact, if I click on All Images, everything jumps back to where it was before, and I have to go and Deactivate, Deactivate All Images again, to get back to normal.
So what I'm going to do is first disable the CSS, Disables All Styles, and then I'll go and change the code on the fly, using Firebug, so that I can turn off images as well. So I'll go activate Firebug up here in the right corner. So I'll right-click on the image I want to disappear and select Inspect Element at the very bottom of the contextual menu, and this brings me to the HTML that calls that image. From here I can simply go in and delete the URL to the image, and you see the images disappear. I'll do the same for the next four images. I'll scroll down, right-click the image, Inspect Element, find the source link, just delete it, scroll down again, do the same process for all three images.
This seems cumbersome, and to be honest, it is. But this is the easiest way of doing it, and you'll see why I'm doing this in a second. So now I've made live changes to this page, which means I didn't change my file; I just changed the file as the browser sees it. And now I see the page as a screen reader would see it. That means I'm only seeing the text of the page and nothing else. Now you notice something very important. At the top here, we no longer have a title for our site. And if you look at the very top on the tab, you'll see that this page is actually called Untitled 1.
So if a screen reader were to see the site, as we saw previously, it has no title to read. That's because the header was just an image. If we scroll down, you see that all the information about the images are also gone. So we have no image here anymore; we just have text. And when you get to the list of three images, you'll see we only have list items that are empty. So if I were to pretend to be a screen reader now, I would just start at the top and read down. So I would go, Home. I hover my mouse over it, and I see there's no title. Okay, so it's just Home.
So I'll read Home, Flowers, Tips & Tricks, Garden Talk, About Us, Contact. Garden Talk, In the Coppice, and then so on. And I just read the content all the way down. Now let's take a look at the accessible site and see what's different. So I'll go back to my folder. Under Assets, find Accessible, and open that in Firefox. And here I'll do the exact same process as with the other page. I'll go to CSS > Disable All Styles, and then I'll go down, find the images, Inspect Element, and delete the links.
Now you see there is a dramatic difference between the two pages. Whereas the Inaccessible one, when we read it, we started with Home and we just read it straight down.
With the Accessible one, we have the title, and we have more information. So when we pretend to be a screen reader again, we'll go, link, Hansel & Petal Flower Company. Hover over it and it says, Hansel & Petal Flower Company home page. It will read, From our garden to your home, Main Menu, link Skip to content, link Home, Hansel & Petal Flower Company home page, link Flowers, Flowers carried by Hansel & Petal Flower Company, link Tips & Tricks, Tips and Tricks from the hands of Hansel & Petal Flower Company and so on.
More importantly, when we scroll down you'll see that where previously we had an image, we now have the description of an image right here. So here it would say, Published on October 12, 2011 at 5:32pm by Arthur O'Cooke, image Yellow Pansy in a pot. You could go further and literally read down the entire page. You see there are headings that are outlined. They are also outlined differently, so that the Heading 2 is bigger than Heading 3 and so on, and you literally read everything out. So you read out a paragraph and then you say, Heading 2, and then you read the Heading, which in this case is just Heading 2. And you go on like that all the way down to the end of the page, and as you hit a link you hover your mouse over it to see the title of that link, and you also read that out.
That way you get the full screen reader experience without actually running a screen reader in the process. Now you know how to pretend to be a screen reader, and as you saw, it's literally a matter of just reading everything out loud. And through that you get a good idea of what your markup should look like if it's done right.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.