Screen reading software lets blind people use the internet, period, space. How does it work, question? Screen reading software lets blind people use the internet. How does it work? >> Hi. I'm Gabriel McMorland. Today I'm going to demonstrate how screen reading software works. Screen reading software is used by blind people to read and write documents and to browse the Internet. Thanks for listening because it's important to understand how screen reading software works and what the user experience is like. Screen reading software opens up an incredible opportunity for blind people to access all the same information, and participate in the same ways as everyone else. But only if we follow good design principles. Think about where you look first on a webpage visually when you arrive at the page. Do you start at the top left corner and read every single word going down the page like it was a book? Probably not. Here's what it sounds like when a screen reader does that. >> Wikipedia colon alternative text for images dash Wikipedia the free encyclopedia main region adding level one Wikipedia colon alternative text for images from Wikipedia the free encyclopedia jump the colon same-page link navigation same-page link search quote w, p, colon, quote, x reader. For other sites that may be more useful if an article is unsuitable for Wikipedia see link Wikipedia, colon, alternative outlets. >> You just heard how that sounds. A bit jumbled and confusing. That's why it's important to use headings to organize the content on your webpage. Often, people using screen reading software will look at the heading structure when they first arrive at a web page to find out what kind of content's on the page and skim through it. >> Wikipedia colon alternative text for images, heading level one. Contents, heading level two. Audience, left bracket, edit, right browse to right alternative text, left bracket. Basics, left bracket, edit, the importance of context. Left bracket, edit, write the images that contain words. Jaws, heading home, Wikipedia contents column two, audience left bracket added right bracket column two. Out at the right alternative text left bracket basics left bracket edit right bracket column three. Importance of context left bracket and enter. >> You just saw two ways to navigate through the page. First I jumped through all the headings on the page. Next I opened a menu that lists all the headings on the page so I can get an overview of what content is available. So now you've seen how screen reading software reads the text on a page. How can it read pictures? What happens when there's an image on the page? Well, it's possible to put in alt text, or an alt tag. This is text that's visible only to the screen reader. So the visual design of the page isn't changed at all. But there's a description of the image that the screen reading software can pick up. Check out how it works on this Wikipedia page. Link graphic, toothbrush underline, next three underline, 2-0-0-5-0-7-1-6 underline 0-0 [INAUDIBLE] Link graphic a red flag divided into four by a white cross slightly offset to the left. Link graphic, clear water pours from a spout. >> Link graphic, Tony Blair and George W Bush shaking hands at a press conference. >> Now I'll demonstrate several of these techniques together. First I'll skim through the headings on the page. Then I'll find a link I'm interested in. And when I get to that next page, I'll search for an example of a wooden wheelchair. >> Heading list dialogue. Ho Americans with contents colon, titles, left bracket, edit, title I am. Dash employee. Title to m dash public entities. Title IV m dash telecommunications. Title v m dash miscellaneous. Provision history. Left bracket grams forming a popular ADA amendments. Quote capital crawl quote left. Heading level three quote, heading level three. Shortly before the act was passed. linked disable activists with. Link physical link capital that visited there link wheelchairs. Adverb. Wheelchairs dash Wikipedia, the free encyclopedia, virtual find. Jaws find dialogue. Find W-O-O-D enter. Link graphic with wheelchair.jpg/200 went lincoln large. Wooden wheelchair dating to the early part of the 20th century. >> So I was able to find that because there was a good heading structure with well organized information on the ADA page. Think about how long it would take to read through that one line at a time. And then I was able to find information about the wooden wheelchair because the page had a meaningful link name to get there and the graphics were well labeled. Webpages are filled with links, it's important to use meaningful words and phrases when labeling your links. Remember, screen reader users are looking for landmarks on the page. And anything you can do in your design to help people save time and find out where they are in the page is a big help. First, listen to JAWS reading through this page. >> Blank. Visit the link University of Pittsburgh Home Page. Blank. Link Click here to visit the University of Pittsburgh Home Page. Blank. To read more about accessibility, link click here. Blank. To learn more about screen readers, link click here. Blank. Link here, you can find more information about ADA. Blank. For information about Pitt Online, visit link http://www.online.pitt.edu/apply-now.php. >> Notice how most of these links are labeled click here. We've all seen plenty of webpages with the links labeled click here, or read more. Here's what that sounds like when I'm speeding up and tabbing through it. Notice how they all sound the same. >> Link examples. Tab. New tab page. University of Pittsburgh homepage link. Tab. Click your link. Tab. Click your link. Tab. Click your link. Tab. Your link. Tab. Http://www.online.pitt.edu./apply-now.php link. >> Now, I'll pull up all the links on a page in a list. Jaws, link select, home, the University of Pittsburgh Home Page, click here, click here, click here, here, http:/, here, click here, click here. Click here. University of Pittsburgh homepage. >> Look at this menu of links. At the top, it's clear that the University of Pittsburgh homepage is the function of that link. Then all the rest of the links have meaningless names that are not at all helpful. And when we get to the bottom of the list, we see a kind of messy URL. That's not very helpful to the blind screen reader user. So think about having meaningful words and phrases for labeling your links. Finally, I want to show you the difference between accessible PDFs and inaccessible PDFs that the screen reading software cannot read at all. There's an easy way to test if PDFs are accessible or not. Before putting content up on your website or sending it out to co-workers or students it's always good to take a second to check if the screen reader can read it. The easiest way to do it is to take your mouse and try to highlight a few words. If you can highlight one word at a time, the screen reader will be able to read it. If it highlights the whole page at once, or big boxes and pictures, that means the PDF is probably just saved the same as an image or photograph. It'll look the same to you, but when you highlight it you won't be able to highlight just one word at a time. If you test out a PDF and find out that it's not accessible, don't worry. It's a pretty simple process to make it into a document that screen reading software can read. There are plenty of resources online or you can contact your disability resources office. With both web design and making accessible documents there's a whole world of information to learn about. But hopefully this video offered you a basic overview of what to look for. There's really just two things to keep in mind. You want to have content that the screen reading software can actually access and read aloud, like the alt tags for images, or PDFs that are readable. Also, you wanna have some structure and landmarks so that it's easier for blind people to find what they're looking for.
