Accessible Publishing Summit, 2023
Transcript below.
Hi my name is Ka, I am an Accessibility Analyst at NNELS, 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 (NVDA) will look like when reading an EPUB using Thorium. Before I do that though I want to…
Screen Reader: Thorium. Accessible Publishing Sum… Thorium.
Ka: …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’ll read the text as well as the controls. If I go to the top of this page…
Screen Reader: Out of region out of frame.
Ka: and arrow down…
Screen Reader: Button. Skip to content.
Ka: you’ll hear a “Skip to Content” Button…
Screen Reader: [unintelligible] navigation landmark list with three items. Button. Graphic. Information.
Ka: your information button.
Screen Reader: List with one item. Button. Graphic. Activate text-to-speech.
Ka: You’ll hear an activate text-to-speech button.
Screen Reader: Out of List. List with five items. Toggle. Button. [unintelligible] press. Search in publication.
Ka: 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 in a web page 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 web page. 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.
Screen Reader: Main content. Main landmark. Main content. Heading level…
Ka: and let’s just read a little bit of this.
Screen Reader: Heading level two. 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 region.
Ka: 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. 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.
Screen Reader: Main content. [Unintelligible] Out of list. Out of list. Frame. Clickable title. No next landmark. Accessible Publishing Summit Demo 2023.
Ka: So this is just a little bit of text it’s the title page, let’s go on.
Screen Reader: Main cont… Out of list. Out of frame. Clickable link. Copyright page region. Page ii separator CC0 Public Domain Accessible Publishing Summit Demo 2023. No rights reserved. Published by Link National Network for Equitable Library Service. Cover designed by LB. ISBN 10 1 billion…
Ka: 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 texts like this is the granularity. So I can arrow up and down to go by line…
Screen Reader: ISBN 13 978… Distributed by Link National Network for Equitable Library Service. Distributed by… ISBN…ISBN 10…
Ka: I can navigate by word…
Screen Reader: 10 1 billion 2… ISBN 13 nine hundred sev… one billion two hun… Distributed by…
Ka: I can also navigate by character…
Screen Reader: space D E T U B U T E D space B Y colon space…
Ka: 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 they hear it. Let’s move to the next section.
Screen Reader: Main content…clickable link Block Quote. Page ii separator. To all readers. Out of block.. Out of frame. Button graph..
Ka: So this is again just a little bit more text this time styled with a block quote style, and because it’s properly using the block quote markup, the screen reader is going to pick that up.
Screen Reader: Main cont…To all…Out of frame. Clickable link. Landmark. Heading level one. Page 1 sep… Heading level one. A novel like chapter.
Ka: So here we have some pretty basic elements and we’re gonna go through some of these sections, but there’s a lot so we’re gonna 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.
Screen Reader: Main content. Heading level two. [Unintelligible] Heading level two. Main…frame. Clickable Landmark. Page 1 separator. Chapter One A Novel Like Chapter. Heading level one.
Ka: Here we go, and when I navigate by headings:
Screen Reader: A Section with a Block Quote. Heading level two. A Section with a Context Break. Heading level two. A Section With and Without a Language shift. Heading level two. With a Marked Up Language Shift. Heading level three.
Ka: you can hear that it uses level twos and level threes 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 said “separator” and it says the page number:
Screen Reader: Separator. Page three. Page two. Page one. Separator. Heading level…
Ka: 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.
Screen Reader: Heading level two. A Section with a Context Break. He displayed a skill in… Page 3. Separator. …the choice of grounds and the use of light troops and in securing his own supplies whilst he cut off those of the enemy, which Kartikaya himself, God of War, might have envied. Separator. Doctor Heraclius Gloss was a very learned man. Although no book of any description written by him had ever appeared in the bookshops of the town, all the inhabitants of the erudite city of Balançon regarded Dr Heraclius Gloss as a very learned man.
Ka: 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–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
Screen Reader: Heading level two. A Section with and without a Language Shift. Heading level three. With a Marked Up Language Shift. The French expression avoir l’esprit de l’escalier refers to an ability to think of a witty comeback or any sort of intelligent response until it’s too late to be of any use. Heading lev…
Ka: 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 the series you’ll hear that other screen readers are able to detect this language markup and read what the appropriate accent.
Screen Reader: …Heading level 1 Page 4. Separator. Chapter 2.
Ka: So here we’re on chapter two and there’s a lot of different interesting elements to go through. So, we went by chapter one 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…
Screen Reader: A section with lists. Heading level two…
Ka: 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 NVDA) 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 preamble text.
Screen Reader: Heading level 2. Section with lists. The Practical man may justly observe at this point that the world of single vision is the only world he knows; that it appears to him to be: List with 3 items. Bullet real, bullet solid, bullet and self-consistent. Out of list.
Ka: 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.
Screen Reader: List with 2 items. 1 – create if he can some feeling of dissatisfaction with the world within which the practical man has always lived and acted; and… 2 List with 2 items. 2 to suggest something of its fragmentary and subjective character. Out of list. Heading level 2. Ima…
Ka: 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 I’d certainly encourage you to go and check those out if you’d like. But here, I just want to show what the interaction is when proper alt text has been added to an image. Let’s read a little bit.
Screen Reader: Heading level two. Images section. Heading level three. Regular image. One day when he was scrolling in the square at Balançon, he saw a large wooden hut from which came the sound of terrible howling, while on the platform a mountebank incoherently invited the crowd to come and see the terrible Apache tamer Tomahawk or Rumbling Thunder. Grouping. Graphic. A drawing of a shirtless white man. He reaches upwards with one arm against a starry night sky. Graphic. Text reads Per Aspera Ad Astra. Caption. Figure one. Illustration from Finland in the 19th century. Out of grouping.
Ka: 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 are certainly more details that could be conveyed and the caption itself doesn’t necessarily meet 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.
Screen Reader: Figure 2. Map from The Map that Changed the World. Grouping. A map of the Camerton and Limpley Stoke Railway in North Somerset. Click the link below to navigate to long description. Graphic.
Ka: 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.
Screen Reader: Out of grouping. Graphic. A map… Graphic…caption Figure 2. Out of grouping. Link long description for Figure 2.
Ka: So, let’s click on the link and see what the longer description shows.
Screen Reader: …accessible… Clickable Landmark. Heading level two. Figure two. Map from The Map that Changed the World. A map of the Camerton and Limpley Stoke Railway in North Somerset. The legend identifies two tracks the S&D Jt Rly and the GW Rly, as well as the Kennet and Avon Canal. The S&D track is a single… Link Return to figure.
Ka: 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;
Screen Reader: In the North East… The S&D track…
Ka: We might want to navigate by character;
Screen Reader: H E space N…
Ka: or word;
Screen Reader: track – is – a single… continuous…
Ka: or line;
Screen Reader: Meandering SW through Midford, Wellow, Radstock Junction which is beyond…
Ka: So, again we have full control over how we access the text, and so even though it seems very daunting to listen to all this at once we can certainly pause it and go through it in different ways. So let’s jump to the return link.
Screen Reader: Return to figure two. Link. Landmark. Grouping. Graphic. Out of grouping. Graphic. A Map of the Came…
Ka: And we are back on the image where we left off.
Screen Reader: Graphic…
Ka: 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…
Screen Reader: Page seven separator. Section with Footnote and an Endnote. Heading…
Ka: Footnotes and endnotes. So, here I’m just going to have it start reading and we’ll talk about what we encounter.
Screen Reader: Heading level 2. Page seven. Separator. Section With a Footnote and an Endnote. Heading level three. Footnote section. Before this superb specimen of man in his last transmigration Heraclius Gloss, pale with joy, stood lost in profound meditation. Link. Star. Footnote. Link. Star. Heraclius Gloss is quite a cool name.
Ka: 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;
Screen Reader: Link. Star.
Ka: But, I can also click on the star:
Screen Reader: Dialogue. Star. Star. Heraclius Gloss is quite a cool name. Clickable Star. Link. Heraclius Gloss is quite a cool… Link. Star. Heraclius… Link. Star. Heraclius… Clickable.
Ka: 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.
Screen Reader: Foot.. Heading level three. Endnote section. Then, having executed a fantastic…
Ka: So, let’s look at endnotes
Screen Reader: …four-handed gentleman gave way to the most unseemly hilarity at the sight of the doctor’s beard. Link One. Heading level two. Section with a ta… Link one.
Ka: So, let’s click on this.
Screen Reader: Dialogue. One. One To be fair, the beard was weird. Clickable One….
Ka: 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.
Screen Reader: Section with a Table. Heading level two.
Ka: 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 layout 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.
Screen Reader: Table with five rows and three…
Ka: 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.
Screen Reader: Row 2 Augustus. Length of reign in years, Column 2, 41. Cause of death, column 3, natural causes probable.
Ka: 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…
Screen Reader: Length of reign in years, Column 2, 41.
Ka: …it will read the header and then it will read what’s in the cell.
Screen Reader: Name of emperor, Column 1, Augustus.
Ka: I can also go down
Screen Reader: Row 3, Tiberius. Row 4, Caligula
Screen Reader: And, one of the beautiful things about having a marked up table like this is I get a spatial layout of where things are so I can go to the right:
Screen Reader: Length of.. Cause of… Column…
Ka: then I can go up:
Screen Reader: Tiberius Row…Augustus row…
Ka: 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…
Screen Reader: Section with a Sidebar. Heading level…
Ka: …look at the sidebar.
Screen Reader: One day when he was strolling in the square of Balançon he saw a large wooden hut from which came the sound of terrible howling, while on the platform a mountebank incoherently invited the crowd to come and see the terrible Apache tamer Tomahawk or Rumbling Thunder. Complementary landmark. Heading level 3. A Sidebar. This is the text of the sidebar.
Ka: In this case, we’ve just kept it simple and added a heading to indicate where the sidebar is.
Screen Reader: Heading level 3. A side… Landmark. Heading level 2. Endnote.
Ka: 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 a very straightforward and when you’ve marked up your ebooks NVDA will see those elements, and I as a user am 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!