 Hi, my name is Kai. I am an accessibility analyst at NELS. And I do a lot of testing of websites and apps for their accessibility using assistive technology. I also do a lot of work with our tactile initiatives and work on different tactile graphic projects that are part of that. In this demo, I'm going to go through what the interaction of a screen reader, specifically non-visual desktop access, and VDA will look like when reading an EPUB using Thorium. Before I do that, though, I want to talk about what a screen reader is and how it works. So you may or may not know, but a screen reader will read all the different elements on the screen. It will read the text, as well as the controls. If I go to the top of this page and arrow down, you'll hear a skip to content button, toolbar navigation landmark, list with three items, button graphic information. Here an information button, list with one items, button graphic, activate text to speech. You'll hear an activate text to speech button. Out of list with five items, toggle button, not press search and publication. And so on. When we go to the main content, you'll hear the text of the book, as well as described images using alt text. In many cases with many different screen readers, but for sure with NVDA, you'll find that it's very linear. It reads things from top to bottom, left to right. And because Thorium is displaying all the controls and the content of the book and a webpage style, we can also jump to the different elements. So we can jump by buttons, links, headings, all the elements that you would expect to find on a webpage. This allows for greater efficiency. And again, you'll see this as we continue on. So let's look at the demo book that we have here. I'm going to jump by landmark and go to the main content. Main content, landmark, main content, heading level. And let's just read a little bit of this. Heading level to main content, frame, clickable link, cover, region, graphic cover, accessible publishing, summit 2023 by NNELS. The cover is mainly yellow with a large white graphic badge shape in the center. The book's title is in the white space out of the region. So this is just an image. It's the book cover, but we're able to get a description of it because it has alt text on it. And alt text describes what's in the image for screen reader users in a textual way. We'll be talking a little bit more about that in a few minutes. But I wanted to point this out because in a lot of books that are technically accessible, the alt text for these images just contain the name of the book and the author. And we at NNELS don't really find that to be very meaningful or an equitable experience because we believe that readers should have access to this information as well in social contexts, such as in a book club or talking to a friend. They might be left out of the conversation if they don't know what the image is for the book. So it's important to include alt text even for your book covers and not just for the images in your book. Let's move to the next section. Made content over out of list out of list frame, clickable title, codex, landmark, accessible, publishing, summit demo, 2023. So this is just a little bit of text. It's the title page. Let's go on. Made content over out of list out of frame, clickable link, copyright page, region page, IE separator, CC0 slash public domain. Accessible publishing, summit demo, 2023. No rights reserved. Published by Link National Network for Equitable Library Service. Cover designed by LBISBN10, 1 billion. So this is a lot of text and there's a link here as well. And again, it's reading from top to bottom, left to right. And since it's a very simple layout, it's reading just fine. What I want to point out here is that with text and screen readers, it's not just reading from the beginning to the end. The power of using a screen reader and navigating through text like this is the granularity. So I can arrow up and down to go by line. ISBN13, 978, well distributed by Link National Network for Equitable Library Service, distributed by ISBN13, ISBN10, what? I can navigate by word. ISBN10, 1 billion to UNDISBN13, 971 billion to UNDISTRIBUTED by... I can also navigate by character. Space D E T U D U T E D space D Y cold space. And depending on some screen readers, you can also navigate by sentence and paragraph as well. So there's different granularity options and that allows the user to have full control over what they hear, when they hear it and how to hear it. Let's move to the next section. MADECON, toolbrow the list of frame-clickable Link, block quote page E, separator to all readers. Out of block quote, out of frame button graph. So this is again just a bit more text this time, styled with a block quote style and because it's properly using the block quote markup, the scooter is going to pick that up. MADECON, toolbrow the frame-clickable Link, mark heading level 1, page 1, step heading level 1, the novel light chapter. So here we have some pretty basic elements and we're going to go through some of these sections, but there's a lot, so we're going to go pretty quickly through this. One thing to point out though is that in this chapter and in the second chapter, it uses headings. Now, one of the major mistakes we've seen with eBooks is people using headings as styling and what that does is messes up the structure of the book, which is important for screen reader users as they rely on headings to jump to different sections and to know how the section is laid out. What do I mean by this? So let's go to the first level one heading. MADECON, heading level 2, toolbrow heading level 2, MADECON, clickable landmark page 1, separator chapter 1, a novel light chapter, heading level 1. Here we go. And when I navigate by headings, a section with a block quote heading level 2, a section with a context break heading level 2, a section with and without a language shift heading level 2, with a marked up language shift heading level 3. You can hear that it uses level 2s and level 3s in a very logical way as a way to indicate subsections and sub-subsections. If you skip level headings, that would make it a poor heading hierarchy as it doesn't necessarily convey what that section is. Now, if you want to style a heading in a particular way, we recommend using CSS. So here you may notice that it's a separator and it says the page number. Separator page 3, page 2, page 1, separator heading level. We usually tie page numbers to separators as an easy way to navigate to different pages. But we also use a separator for a context break. I'm gonna play a little bit of text here. You'll be able to hear it in a little bit more of a contextual situation. Heading level 2, a section with a context break. He displayed a skill in page 3, separator the choice of crowns and the use of light troops and it's securing his own supplies whilst he cut off those of the enemy with Kartikaya himself. God of War might have envied. Separator Dr. Heraklius Bloss was a very learned man, although no book of any description written by him but ever appeared in the bookshops of the town. All the inhabitants of the airtight city of Blanson regarded Dr. Heraklius Bloss as a very learned man. So what you've heard in this section are two separators. The first one is a page number, which NVDA announced as page 3. The next is a context break, which NVDA read as separator. That one uses an HR tag. The next section we'll talk about is a language shift. So in this section, we have two passages. The first one marked up with a language shift and in this case, French. The second one has no language markup. Unfortunately, NVDA is unable to parse this code. So even in a passage with a marked up language shift, it will still sound like this. Heading level 2, a section with and without a language shift. Heading level 3, with a marked up language shift. The French expression of our lesbians the lexical year refers to an inability to think of a witty comeback or any sort of intelligent response until it's too late to be of any use. Heading level. It still is reading the section in French with an American accent. We're not sure why this is, but if you check out the other videos in this series, you'll hear that other screen readers are able to detect this language markup and read with the appropriate accent. Main code heading left will make frame clickable in landmark heading level 1 page 4, separator chapter 2. So here we're on chapter 2 and there's a lot of different interesting elements to go through. So we went by chapter 1 pretty fast, but I'm gonna take a little bit more time to share my thoughts on this chapter. So the first thing we have here is a section with a list heading level 2 lists. And this is pretty simple. If you mark your lists up using the right list tags, then the screen reader will know, in this case, that video will be able to see that it's a list. It will announce how many items are there and will tell the user that they're in a list or outside of a list. So let's take a listen with a little bit of pre-multivax 4. Heading level 2 section with lists. The practical man may just be observed at this point that the world of single vision is the only world he knows that it appears to be list with three items, bullet real, bullet solid, bullet and self consistent out of list. So, again, you can hear there's three items. You can hear when it's in a list, when it's outside of a list and because it's a bulleted list, we're just hearing bullet before each piece of text. But let's jump to the next list again, using a hotkey to jump to these different elements. List with two items, one, create if he can some feeling of dissatisfaction with the world within which the practical man has always lived and acted and, two, does it out of list head list with two items, two, does it just something of its fragmentary and subjective character out of list heading level 2 limit? So, here we have two items and because this is a numbered list, we are able to hear the numbers before the text. Next, we have images and we've talked about images and how to make them accessible in previous summit demonstrations. So, it certainly encouraged you to go and check those out if you'd like. But here, I just wanna show what the interaction is when proper alt text has been added to an image. Let's read a little bit. Heading level 2 images section, heading level 3 regular image. One day when he was trolling in the square at the Lansom, he saw a large wooden hut from which came the sound of terrible howling while on the platform a mount bank had coherently invited the crowd to come and see the terrible Apache Tamer Tomahawk rumbling thunder. Prooping graphic a drawing of a shirtless white man. He reaches upwards with one arm against a starry night sky. Graphic text reads for a spare at a straw. Caption figure one. Illustration from Finland in the 19th century out of proofing. Okay, so there's a lot there. There's the context with the text of the passage. And then when we went to the image itself, NVDA announced graphic and then it read the description that was provided through the alt text. Now you'll also notice below this is a caption. And it's really important to point out here that a caption doesn't replace the need for alt text. Some people will think that, oh, you know, there's a caption and it does provide some level of detail on what the image is. But what we found is that there's certainly more details that could be conveyed. And the caption itself doesn't necessarily need that need. Why? Because the caption is actually meant to supplement what you're already seeing. And if I'm not able to see what's in the image, then I'm still missing some of the really important information. So it's important to add alt text and not just rely on the caption. Since alt text replaces the visual experience with a textual one that paints a picture of what's happening and supplements that with the caption. So let's look at a more complicated image. Here we have a more complicated image. It's a train map. And we still need alt text to describe what the image is, but it doesn't have to go into detail at this level of all the different branches and stuff because that would be a lot of information. So how do we convey such complicated information? Well, we have provided a link to a longer description and we call this extended description. So let's click on the link and see what the longer description shows. After the long description, we have a return to figure link that takes us to where we left off. And just to remind you all, we don't necessarily always listen to the extended description in full. We might want to navigate by paragraph. We might want to navigate by character. Or a word. Or a line. So again, we have full control over how we access the text. And so even though it seems very daunting to listen to all of this at once, we can certainly pause it and go through it in different ways. So let's jump to the return link. And we are back on the image where we left off. One thing I have noticed with thorium is sometimes there are some minor focus issues. When you set your anchor link, it should be on the link itself that takes you to the extended description. It shouldn't jump back up to the start of the image where the alt text begins. All right. Next we have page seven, separator section with a footnote and an end to the heading. Footnotes and unnotes. So here I'm just going to have it start reading and we'll talk about what we encounter. Heading level two, page seven, separator section with a footnote and an end to the heading level three footnote section before the super specimen of man in his last trans migration. Araclius claws fail with joy, stood lost in profound meditation. Link star, footnote, link star. Link star, footnote, link star. Araclius claws is quite a cool name. So here we see two ways that this has been done. We see the footnote as part of the text below where I can just arrow down to it. Link star. But I can also click on the star. The dialogue star, star, araclius claws is quite a cool name. Clickable star, linkaraclius claws is quite a cool name. Link star, araclius, link star, araclius, clickable. So it popped up the same footnote in another dialogue and NVDA read that. And once I was done listening to it, I could just hit escape to close it. Footnote heading level three end of the section. Then having executed a fantastic. So let's look at end notes. Four and the gentleman gave way to the most unsamely hilarity at the sight of the doctor's beard. Link one. Heading level two section with a link one. So let's click on this. A dialogue one. One, to be fair, the beard was weird. Clickable one. Link to be fair. Clickable. And again, this just popped up a dialogue and I was able to hear what was happening and once I was done listening to this, I could hit escape to close it. Section with a table heading level two. So next tables and in this section, what will be important is making sure that these tables read properly with screen readers. What I mean by this is in a lot of cases, tables are used as layouts rather than as data tables. So it's important to make your data tables accessible using table markup by marking up your rows and columns as headers and as cells. Table with five rows and three. So here we have a table and let's go through this. So when I'm in a table, it will announce the number of rows and columns and I can use the arrow keys to move around. Row to Augustus. The length of reign in years column 241. Cause of death column three natural causes probable. When I navigate across the row because the first row of cells is marked up as a header, I know which cell belongs to which column and when I arrow through these using special NVDA navigation table commands. Length of reign in years column 241. It will read the header and then it will read what's in the cell. Name of emperor column one Augustus. I can also go down. And one of the beautiful things about having a markup table like this is I get a spatial layout of where things are. So I can go to the right length of cause of death column. Then I can go out Augustus row. And I know that I went right and up because I'm able to hear what the rows and columns are and I've also moved in that direction. So you have a couple of ways of identifying that but it does represent things in a spatial way that make it easier to understand the data. So let's section with a sidebar heading level. Look at the sidebar. One day when he was scrolling in the square at the Lanson he saw a large wooden hut from which came the sound of terrible howling while on the platform of Mount Bangin coherently invited the crowd to come and see the terrible Apache Tamer Tomahawk rumbling thunder complimentary landmark heading level free a sidebar. This is the text of the sidebar. In this case, we've just kept it simple and added a heading to indicate where the sidebar is. Heading level three is a landmark heading level two. Okay, so that's it actually. We've gone through a lot of these subsections quite quickly. So what I want to leave you all with and thinking about accessible ebooks is that each screen reader has a slightly different interaction with NVDA. It's very straightforward. And when you've marked up your ebooks, NVDA will see those elements and as a user and be able to navigate very efficiently by jumping to those different elements. But let's take a step back and think about what that interaction looks like in the future when we have virtual reality and other forms of technology. I think a really important takeaway is that when we read ebooks, we need a lot of flexibility in how we navigate and that granularity. So whether I'm using Windows with NVDA or some other virtual reality platform that doesn't exist yet, it's going to be really important to think about these interactions and what we want to have available through these interactions. The behavior of the screen reader is going to act different, but the functionality should be the same. With that, thank you for listening to this presentation and I hope you all have a good day.