 My name is Simon Jaeger. I'm one of the accessibility testers for Nells, and I'm also totally blind. One of the things I think most of us have learned over the last year or so is how reliant we become on technology and how useful it can be, but also how frustrating it can sometimes be to use it. I would say that's true on both ends of the extreme for many people with print disabilities. I know it's true for me. On the good side, technology and screen reading software running on that technology allows me to access a lot of mainstream apps like social media, grocery shopping, food delivery, book reading, and so on. There's also some specialized apps that have come out for us, like apps that allow us to navigate outdoors with GPS that have special instructions for us to tell us what kind of intersection is coming up and more. I can get free video chat whenever I want by talking to someone who could potentially be on the other side of the world and having them describe what's around me. There's some really revolutionary stuff going on. At the same time, as you'll see in this demo, not all of it is great. Sometimes developers don't know how to make their apps accessible, and sometimes getting through to those developers or explaining why it matters can be difficult. As I said earlier, a screen reader is really important to my technology usage, and let me try and explain what that is. For those of you familiar, please forgive me for explaining this for anyone who might not be. A screen reader is a program that runs in the background of a computer or a mobile device that tries to narrate what's going on on screen. It does this by talking to the apps that are open using essentially machine language, asking them what they're doing, what text is being displayed, and what they need the user to know. So the screen reader and every open app on my system have kind of a two-way dialogue going, telling each other what needs doing. I have a set of keyboard commands or touch gestures that I can use to interact with apps, depending on the device I'm using, and I get synthetic speech in response. The other option is a Braille display, which I'll talk about later. The great thing about screen readers is that they're becoming mainstream. Every modern device comes with one now. All smartphones, computers, even my TV, my TV boxes like the Fire TV and Apple TV, my Apple Watch. All of these have screen readers out of the box. I didn't need sighted help to set them up, and I don't need sighted help to use them. So right now I'm on my Windows laptop using an open source screen reader called NBDA, and I'm in a notepad window with some text written here. I'm just going to down arrow through the text. I'll up arrow first to kind of read the first line. Hello, world. The quick brown fox jumped. Left barren over the lazy dog. I have my punctuation set to most right now. There are four different options. I'm. Symbol level none. Symbol level sum. I'm putting it back to some and now for the lazy dog. It won't read that parentheses anymore. I prefer it there. There are a lot of verbosity options like that, such as echoing words or characters. When I type them, I have it set to nothing right now because I've been typing for a long time and other such things. It will also read out any alerts that come up, such as this one. I just escaped out of that. If I press the Alt key, it'll go to the menu bar. Format submenu. And I can. File submenu. Arrow around that. Most importantly, new control plus N1 of 10. Open control plus oh three save control plus S4 of 10. It will tell me all of the keyboard commands I can use to get to those functions quickly. So if I'm here and I press control, oh, it'll try to open a file, but it will ask me to save this one first, which I don't want to do. This is one of the ways we navigate the computer quickly. We learn these keyboard commands and just do them. Now that you have a better idea of how these work, let's explore a web page. I have the Nels website open right now. This is our homepage with a lot of information on it and a library catalog that can be searched. So I'm just going to start by pressing down arrow and reading a few of the links and other info on this page. Heading level one national network for heading level one equitable library service heading level to the Canadian accessible library system. Level one headings are the top level or the largest level two is under level one heading level two search the catalog colon and so on. Search the catalog edit edit is a text field button search button is of course a button link welcome link tutorials link info for libraries link info for publishers link volunteer. So one of the things that this tells us is not only that they are a link that leads to a certain place, but it gives us an anchor point. Let me explain that a little bit. When it said level one heading earlier, it meant that not only was it a heading, but it was a place I could navigate back to a good practice when you get onto a web page using a screen reader is to look for headings. I can do that right now. I can press H to go to the next heading. Browse the catalog heading level two news heading level two inclusion accessibility and literacy colon expanding the national network for equitable library service link heading level three testing accessibility and preventing barriers in library reading apps link heading level three. And of course that's a level three heading for each article below the level two heading for news below the level one heading for Nels itself. Even this can be a little bit cluttered. So we have a different level commands. I can press shift one to go backwards to the previous level one heading national network for equitable library service heading level one or one to go forwards to the next level one heading looking for a book heading level one. I'm going to go back again. National network for equitable library service heading level one. We know that the search box is under a level two heading called search. So we can press to the Canadian Accessible Library System heading level two, not that one. Search the catalog colon heading level two that one search the catalog. Edit, but we can be even more precise than that because E and shift E will go to the next and previous edit box. So I'm going to go all the way to the top of the page jump to main navigation. Press E, search the catalog. Edit, and there we are. I'll turn on typing mode and actually type something. Browse mode search results bar national network for equitable library service left parent. OK, so we're on the results page. I happen to know that the main content of the page is under a level one heading. So I'm going to press one national network for equitable library service heading level one, not that one. Search results heading level one, that one. And now we can down arrow from here. Search found twenty nine items heading level three, link Harry Potter and the half dash blood prints. So the neat thing is that not only is the search results page under a heading, but each result is under a level three heading. That means we can press H to go through the different results until we find the one we want. Harry Potter and the prisoner of Eskaban link heading level Harry Potter and the Chamber of Secrets link heading level three. Of course, we can read info underneath all of these. Author colon row summary colon. Harry Potter is in his second year at Hogwarts School of Witchcraft and Wizard Link login to access Daisy 202 dash audio left per end 130.2 megabytes right per end. Let's keep going through headings. Harry Potter and the sorcerer Harry Potter and the fellow Harry Potter and the goblet of Harry Potter and the deathly health Harry Potter and the cursed child parts one and two link heading level three. OK, so there it is. That's the one I want. I'm going to press enter on it. Harry Potter and the cursed child parts one and two bar national network for equitable library service. Left. Let's go to the first level one heading again. National network second Harry Potter and the cursed child parts one and two heading level one heading level two available formats. Colon Linknell's formats guide. Link login to access EPUB two left per end 1.17 megabytes right per end publisher colon Potter more to note colon. This book was purchased with support from the government of Canada's social development partnerships program link login to access BRF DAP publisher colon national Braille press note colon. This book was purchased. OK. Hard copy Braille format available. So this is the info page for this book. We have a couple of formats available. Electronic Braille and electronic text in EPUB format. We don't really need to read this whole page. The point was to demonstrate the following. I'm going to go back to the previous page and go to the very top. What you may have noticed is that it says visited link right here. Colonels home page graphic visited link. That means that I've been to the home page before. The other thing I can do is press V to go to the next visited link which is Harry Potter and the cursed child parts one and two visited link heading level three. The book we just went to. I'm sure you can imagine that after visiting a page we accumulate a few of these and it's very useful to be able to jump between them. I think that's all for this website. Let's move on to accessible university. Unfortunately, not all pages are designed with accessibility in mind and this page was designed with inaccessibility in mind. The page is called accessible university. It's hosted on the University of Washington website and it's designed to have as many accessibility issues as possible. There is also a fixed version of the page that is fully accessible. So I'm going to briefly go through this one, talk about some of the issues and why they happened and then go to the accessible version. Let's start at the very top visited link about. We don't have a heading at the top, which is a problem. Visited link academics. Visited link admissions. Visited link visitors. I'm not sure why these show up as visited, perhaps because when I was looking at this before the demo, I clicked on one of them. One of the problems with these is that there are submenus. I know this because I looked at the accessible version, but if I were just a new user to this page, I wouldn't know it. They didn't say they were submenus. And when I click on one with the enter key. Visited link AU student wins engineering award. Nothing appears to happen. I can just keep going down. Visited link visitors. So there's no transition between the list of links and visited link AU student wins engineering award for talking robot sign language interpreter. This is also an unlabeled graphic there, which I told NVDA to skip over because there are a lot of unlabeled graphics on pages, but it is there. We'll get to it on the accessible version where it actually does have a label. Let's keep going down blank, blank, blank. I suspect this is something to do with the slides and it's just not showing me them. Let's try hitting enter on this. Visited link AU student wins engineering award for talking robot. No, nothing happens. Okay, blank, blank, blank. Welcome. Accessible university. Left Perenn AU right Perenn is a fictional university. And this is its fictional homepage. This page is designed to demonstrate features of a let's keep going down graphic horizontal line graphic. This graphic has the alternative text of horizontal line graphic. This is clearly decorative, so it shouldn't have any alt text at all. There should be an empty set of quotes for the alt text, and that will tell screen readers to skip over it. Accessible university. Left Perenn AU right Perenn. Yes, in a university that fictitious. Okay, so there are two reasons why my English speech synthesizer is trying to read another language. One is because I don't have another language voice set up. I only have English on the system. But two is that they haven't put a language tag here to tell the screen reader to read it in a different language. This is especially important if you're using a braille device because it will switch braille codes to that other language. We'll see that on the other page, although it won't really have an effect on my system. Continido. Oh, graphic horizontal line graphic. Another horizontal line. Can you spot the barriers? There are. Yes, I think I can link click here dot to see a more accessible version of the same page. There are at least 18 accessibility issues on this page to see a list of all known issues. Link click here dot to see a more accessible version of the same page. Visited link click here dot for a cheat sheet of accessibility issues. Link. It's generally bad practice to have a click here links because sometimes you want to go through the whole list of links without reading the surrounding text. That's pretty minor link click here dot. Graphic horizontal line graphic. A U enrollment trends. Table with five rows and 13 columns. Two thousand and seven dash zero eight. So this is pretty broken. We do have a way of navigating tables. This table is just not very navigable. In the interest of time, though, I'm going to skip by it and go on to the sign up. Apply now. Left Paran required fields are in blue. Right Paran required fields are in blue. Of course they are. I can't tell which things are blue. There is a report color option. It's not always reliable. Name colon. Edit. Email colon. Edit. City colon. Edit. The other thing is that if I go through these edit boxes with the E key. Edit. Edit submenu has autocomplete. Edit. Edit. It doesn't tell me what they are. That's because even though there's a label above them, that label is not attached to the text field in the HTML code. So it's not going to tell me what it is. State slash province colon. Edit. Zip slash postal code. Edit. Country colon. Edit. Desired major left Paran. S right Paran. Computer science. Checkbox not checked. Engineering. Checkbox not checked. And again, the checkboxes are not associated with their labels. So if we go through. Checkbox not checked. Checkbox not checked. Checkbox not checked. Checkbox edit. Submit edit. Please enter the two words you see below separated by a space. That's a doozy. These are called captures. It's a long acronym and I can't remember what it stands for at the moment. But I'm sure you've seen them enter the words you see in this picture, except usually they come with an audio alternative. In this case, edit. It doesn't. And of course, I can't see what's in the graphic screen readers only know the text of the app reports to them. And it doesn't know this text because the app is specifically designed not to report it to them. Unfortunately, the same thing that keeps out spammers keeps out screen reader users. Button submit. Link graphic creative commons license. Since this is under a creative commons license, I can safely use this without calling out any company that actually made their page inaccessible. Let's move on to the accessible version. Heading level one graphic accessible university. Okay. Line one is already improvement. We have a graphic that is labeled and a heading at the top of the page. That's perfect. Let's keep going. Button collapsed show menu keyboard shortcuts. We're not going to open that for the sake of time, but it's there. Menu bar menu item sub menu about. Menu item sub menu academics. Menu item sub menu admissions. Let's try pressing enter on this menu. Admissions menu undergraduate menu item. Menu item graduate. Menu item tuition. Menu item financial aid. The page put me on the first menu item. That was not my screen reader. That was design of the page. I can also press admissions men escape to get out of the menu. That's great design. Menu item sub menu visitors out of menu bar heading level two featured story slideshow. Now showing slide one of three graphic robot with a friendly face assembled with various scraps of hardware and mounted on an old deck talk speech synthesizer. A couple of things. One, that's a great alt text. That's exactly what it should do. Give missing context for people who can't see the picture to. It's worth pointing out that on the inaccessible version of the page, I didn't even know there was more than one slide. For that matter, I wasn't even sure it was a slide here. We have a student wins engineering award for talking robots. Visited links to button graphic previous slide button graphic. Next slide. If I press this button now showing slide two or three, I can go to the previous graphic previous a large bronze tactile map with a speaker for audio output graphic. That's great. Let's do the last one. Next slide now showing slide three of three braille dots embossed into the top of an aluminum beer can graphic group of a U students successfully advocates for braille on beer cans. Read more about what a concept. OK, let's go to the next heading. Welcome heading level two. And the next VN Venido heading level two achievable university dad of rear parenthesis you a serer parenthesis ES in a universe. So it's still going to read it in English because I don't have any non-English voices. The difference is that it switched languages for the parenthesis or at least it tried. That's how we know it's tagged correctly. Continido. Next heading. Can you spot the barriers heading level a U enrollment trends heading level two. This table shows enrollment over a two dash year period by subject and gender the academic years 2007 dash 08 and 2008 dash 0 9 are arranged in columns with six subjects arranged as columns nested within the year columns total enrollment and male and female enrollment percentages are arranged in rows. OK, that's a great description. I'll skip over that table for the sake of time. I will say that it is a lot more readable than the old table was. Apply now heading level two. Let's see what they did to this. Name colon. Left. Edit. Name colon. Left. Perenn required right Perenn. Great. Edit required invalid entry. Oh, and they also tagged it as required. So Chrome and therefore NVDA is able to tell that it is. Email colon. Left. Perenn required right Perenn. Edit required invalid entry. Let's try going through edit fields. City colon. Edit. State slash province colon. Edit. Zip slash postal code colon. Edit. Country colon. Edit. If a cow is purple, what color is it? Edit required invalid entry. Ah, text only capture. Very cool. I think AI will unfortunately be able to defeat those soon, but it's a great concept. Instead of having a picture, it asks a logic question. If you can read, you can probably solve the question. If a cow is purple, it's obviously purple. So we type purple in and it works. Button submit. Link graphic creative commons license. What you're looking at apart from my phone screen is called a repressible Braille display. This particular one is called the Braille Sense U2 Mini. It's by Hymns Incorporated and in addition to connecting with a phone or computer to show me what they're displaying, it can also do basic note taking calculations and web browsing as well as reading books off an SD card. These are unfortunately quite expensive devices still, but they're coming down in price with new introductions such as the Orbit Reader. So what this is doing right now is displaying the contents of my phone screen. I also have voice over the screen reader loaded with speech. Speech on. So right now it's sending to both the Braille display and the speech synthesizer. If I go forward on the Braille display. Search button. I get search BTN. This is a 18 character display so it's trying to abbreviate as much as possible. Best Sellers. Hitting. Best Sellers HD. The Queen's Gambit by Walter Tevis, narrated by Amy Landon. 11 hours. 50 minutes. Speech off. It's worth noting that I can turn off speech and navigate with just the display. Promise Land Barack Obama narrated by Barack Obama. 29 hours, 10 minutes. But I won't do that because it makes the video pretty inaccessible to anybody who is even slightly visually impaired and watching it speech on home image. So let's go to the search button. Search button. It's worth noting that I could be navigating with the touchscreen of my phone as well as this Braille display. There are custom touch gestures and also custom keyboard gestures to move between controls and activate them. Search. Search field is editing. Search by title or author. Insertion point at start. So using the actions available. Braille keyboard. I will type. 10 search results. Four search results. Trying to narrow it down as it goes. 35 search results. Cancel button. In your library. Zero. Results. 35. Sort by relevance button. Filter button. The answer is four periods by Alex Trebek 4.8 of five stars based on 209 ratings button. Button. The answer is energy by Jared Hewitt 5.0 and five stars based on one rating. Button. I find it interesting that there's an unlabeled button here. I'm not sure what it is, but it seems to just open the same book to book details screen as I would get by clicking on the book title itself. The answer is four periods by the answer. The answer is four. The answer is four periods to get stuck occasionally when I do this. So I have to touch search back button somewhere at the top of the screen and then keep going. The answer is ellipsis heading button share. Another slightly unlabeled button by Alex Trebek. Narrated by Ken Jennings. Audiobook 4.8 of five stars based for hours. They're sample now button. So I could do all of this. My original plan was to add it to my library and then go explore the library view. But it doesn't look like I can do that with the audible app in Canada for some reason. So I can't explore that section. But I think that's enough of a demonstration of the Braille display at least and how voiceover on my iPhone reads the screen compared to say NVDA on the computer. I'd like to wrap this up just by saying thank you for being here and for watching. The issues that I saw on Accessible University's home page aren't really that uncommon. They're things that I and many others like me encounter all the time on the Internet. Unlabeled buttons incorrectly tagged submenus. And it's one thing to write to a company and say your button needs an accessibility label. It's another thing to record a video demonstrating that I can't actually open this menu because of how it's tagged. And I think that's the path forward to more accessible documents and other content. Making videos and other demonstrations and more understanding in general. I'm hoping that by recording these demonstrations I can make accessibility in itself more accessible so that more people understand the impact these things have and why it's so important to start with accessibility in mind. Thanks again for watching.