 Hi, my name is Kai and I'm an accessibility analyst for Nells. I do a lot of testing of websites, ebooks and apps. And so what I'll be talking about today comes from my experience doing that work, but I'll also bring in my personal experiences as a screen reader user. In this session, we'll be talking about reflowable EPUBs. We'll be going over some of the characteristics that make them accessible as well as things to avoid when designing them. But before we go into the details, I want to talk about a decision that all publishers and designers must make before they embark on this journey. One of them is deciding whether the EPUB will be fixed or reflowable. I like to be unbiased and say that there's some advantages and disadvantages to each and both are fine, but the fact is I like reflowable EPUBs a lot better. And in fact, if I see a fixed EPUB, I'll avoid reading those. So why is that? Well, you may be aware that fixed EPUBs are often used to preserve the appearance of a print book, but what you might not be aware of is that this approach sacrifices accessibility. Reflowable EPUBs allows users to customize font type size and color. But also from a screen reader perspective, it reads a lot better using text to speech. Here I have a reflowable EPUB open, but I've also got a fixed EPUB open as well. And we're just going to take a listen to the screen reader and see what each of them sounds like. So here's the reflowable first. And now here's the fixed layout. Here we go. So you can tell that the fixed layout sounds a little bit choppier. Why is that? Well, the way that this is coded is using span tags around every word. And so the screen reader will display this as a word on every line. So if I go to the beginning of this section and arrow down from here. You can tell that there's only one word per line. But if I go back to the reflowable EPUB. And start airing down from here. You can tell that I'm getting full lines of text. This is why I vastly prefer reading with reflowable EPUBs. Now some of you might be thinking some books need to be in fixed layout such as poetry. But poems can be displayed well with reflowable EPUBs. I'm going to find a poem and we'll see what that looks like and sounds like. Here we go. So you can tell that all the pauses were pretty much at the right places. This is again with a reflowable EPUB. So it's definitely possible to offer a good experience even using this layout. So next we'll be talking about navigation. The ability to navigate through ebooks efficiently is essential for accessibility. It allows readers to find the info they need. For example, a linked table of contents and headings are common features that users will gravitate to the most so that they can find the chapters and sections they need. You saw me navigate by headings to find the poem, but I'll do it a little bit slower so you can hear what it sounds like with the screen reader. Not only did the screen reader announce the name of the section, but also level two, level three, level four headings. This is really helpful to be able to understand how the book is generally laid out. For example, major sections usually use the level one heading subsections level two and then subsections within that section level three and so on. So when designers use headings as styling, this throws it all off. I've seen books where it jumps from level one to level six, and then back to level four. So that's not very helpful. I've seen books where they will have the chapter number as one heading, and then the name of that chapter as a separate heading. And because these headings act as navigational points, I'm only able to navigate to each section when I press my keystroke to jump by heading twice. Right now, because of the way this demo book is marked up, I can press the jump to next heading command once to build a jump from the first section I'm on to the next. But when you add these extra navigational points, I'll have to press it more than once, which again is a little bit less efficient. I can press the table of contents. The way to get to them is a little bit different depending on the reader that you're using. I'm using thorium, by the way. And so I can over navigation landmark list with free items list with five items navigation toggle button press list with six items toggle button not press table of contents. Press the table of contents. And then if I arrow down from here table of contents list with seven items at level one cover at level one title page at level one list of illustrations. At level one lead dedication at level one lead epigraph at level one lead chapter one with six items. At level two, they call children except out of list at level one, like chapter one. Peter breaks through at level one link epigraph at level one lead dedication. At level one lead list of illustrations. I can jump to the section and then I'm going to find the main content here and see what the content is. Now there are a lot of other elements you can use to jump to different areas of the book. A second ago I was using landmarks to try to find the start of the main content for that page, but we can also navigate by links. Diagram 2 global population of persons with disabilities long description, group in long description, region HTTPS slash slash star link footnote. Images. Region image alt Y minus Y sub region diagram 2 global population. Tables. Table with 56 rows and 6 columns row 1 through 2 column. Etc. And one thing to point out with landmarks in particular is that there are different types of landmarks to use. For example, main content usually uses the main landmark and asides will use the complementary landmark. Region poem sample X and region graph without this region map sample letting region image with extended description heading level 2. Complimentary landmark a little context heading level 2. This is another way that users can efficiently navigate to different sections and to know how in general the book is laid out. Now links are heavily used for extended descriptions and footnotes. So I'm going to show what that sounds like here. Star link. So here let me navigate to the link link. And then I'm going to click on this landmark star link. And when I arrow down, there is a room star days you never once forgot to sweat our link star star link in England soccer was called football for short footnote. Then I can hear the footnote and then if I click on the return link separate link star separate link star star link. But in the back of the line of face trade on John's footer link star days you never once forgot to sweat. I'm back to where I was before. This is the same with extended descriptions and I'll demo that in a few minutes. Another thing to mention about links is that they need to be well labeled. Most of the links in this demo are pretty well labeled but there's one that I think could use a different one. And this link would be this really long URL. It's quite a challenge to listen to the whole thing without trying to move on. And so to make this more accessible, we want to rename this URL to something like new COVID cases. Since this is a link to a map and make it so that when the screen reader user comes across it, they know what it is without having to sit through that really long link. The other reason why we want to label this properly is so that when users pull up a list of links, where all these links are displayed now in a list, they can jump by first layer navigation and be able to hear what they've landed on without having to again sit through a really long link. By the way, this concept of a links list can be applicable to a headings list as well. It just depends on the screen reader. Some screen readers have this feature while others might not. I would say nowadays most major screen readers do. A well-designed EPUB will allow you to navigate it even though the interface of the reading app may be different. As long as the reading app is accessible and uses an accessible web view, the experience is pretty similar across a lot of popular platforms and screen readers. I want to specifically talk about the navigation because that's again really important and something that is fairly consistent. So I can jump by headings. And so on. I can also go to the table of contents. And go to the next chapter by clicking on the link. So as you can see, the power of navigation really comes from well-coded reflowable EPUBs. Now the reason why I took us to the section is because I want to talk about drop caps. Drop caps are problematic for screen reader users if they are poorly implemented. One of them on this page is poorly coded because it uses a span tag which separates the first letter from the rest of the sentence. So the first word is then read incorrectly. Main landmark of a frame landmark of MRS Starleys reading opportunity came at a level. So in the section we have the poorly coded drop cap and this is what it will sound like. Were you able to catch that? Let's listen again. My screen reader said T key. The word of course is the but because of the span tags surrounding the letter T it's putting it on a separate line. When I arrow up I landed on the line that just says T and when I arrow down I can hear the rest of the word followed by the rest of the sentence. Now one of the solutions that I've seen some publishers try to do is provide the drop cap as an image and then add alt text to that image which the alt text would just contain that letter. That still doesn't work because the screen reader will see it as a separate element and still pronounce the word incorrectly so please don't do that. There is a properly coded drop cap in the section as well and when I read it with the screen reader it will read the word correctly. But I still in general don't recommend using drop caps because they can be problematic as well for readers with learning disabilities. Images can be made accessible to blind and non-vision users through image descriptions. There are two kinds alt text for simple to medium complexity and extended for complex descriptions. Here we have an image that uses a simple description. Whenever the screen reader comes across an image it will say image and read the alt text that is provided for it. So when you write your description it's generally unnecessary to say that this is an image because the screen reader already knows but what the screen reader does not know is what's contained in the image and that's where you come in. There are certain circumstances where you might want to include the word illustration or map or graph to be a little bit more specific but that's a little bit beyond the scope of this presentation. However I encourage you to check out accessiblepublishing.ca so that you can learn a little bit more about the details of how to write good descriptions. There's a lot of guidelines and examples that you can draw from. Now let's look at a complex description and see what that sounds like. All right here we have a complex description. This is what it'll sound like. When we go down from here we can hear the caption. Now we have a link. So notice that the alt text itself is simple but because we know that there's a lot more information that needs to be conveyed we can provide this in a longer format by offering a link when we click the slink we can now tell what else is in this image that's important to convey. Here we have our caption again and then now we have a return link. When we click this we are now back to where we were before. This is a really elegant way of doing this and something that Nels has been doing for quite some time as we've been producing books with well-written image descriptions. Next let's talk about math. A lot of people think that math can be made accessible by providing alt text since a lot of equations are provided in image form. However what we recommend is MathML because it presents equations in an accessible way which means that screen readers can read the terminology using the correct terminology and it can be displayed with math notation in this case Nemeth. If components to display the math are not installed the fallback then would be alt text on the image itself and the image would of course contain the equation. So let's take a look at what this sounds like. We have the image showing the equation and this provided as alt text. And now here's the MathML one I expand this button. Both are technically correct but as I've mentioned MathML is preferred because there's that guarantee that the screen reader will be using the correct terminology and it will be displaying the braille using math notation properly. Next let's talk about tables. Tables of course should be marked up semantically. This allows readers to get a spatial sense of the layout. Here we have a pretty big table table with 56 rows and six columns row one through two column one ranking and because it's marked up properly I can move up down left and right and move from cell to cell. Row three one applicants name applicants name column two samson electronics code dot ltt origin origin column three republic of korea number of designs contained in published registration 2017 column four six hundred twenty six two row four five hundred seventy three three row five six hundred eight four oh six three hundred fifty three because this table has headers I can tell which column the headers are associated with now one advantage of course of using tables is to be able to get a sense of where you are in this table so if I move to the right and then down number of designs contain the number of designs contain the public edge of table five five five row seven four hundred six row eight three hundred seven row nine three I know that I'm down a couple of rows and have moved right a couple of columns to where I started which means that my starting point is now above where I am now into the left you can't really get this with a list or with a description of a table in fact I strongly discourage you not to write alt text to try to describe a table because it'll be overly verbose and no one will want to go through all that what about graphs and maps well these of course can be made accessible through your text descriptions as well but we have auditory means this technique is called sonification for example we can display a graph using a variety of tones and notes that can be used to represent the height of bars if we're dealing with a bar graph or sand wave if we're dealing with the shape of a curve like a line graph I have a sonified map which I want to show you now map showing number of active cases by location for more detail see link htps slash ww this is a link that we just link out to the from the epub rather htps slash www.exe of publishing and by the way this is part of our cobit project in which we provide publicly available data in accessible formats graphic map showing number of active cases by location we're using sass accelerator so I'm going to accelerate map showing number of accelerate this map graph you moving to set and now I can explore the points on this map unfortunately this recording is a mono so you're not hearing the stereo effect which is really important in sonification because that in this context gives me a general direction of where the locations of the different points are and I'm able to tell the different locations as they relate to each other the notes also are important because I can tell the softer notes are provinces that are in front of me and the slightly harsher notes are ones that are behind me and the pitch itself indicates the distance so in this way I'm able to get a much more spatial representation that I otherwise might not be able to get with text description alone images can also be represented tactically in hard copy form these could be tactile supplements that could be included in e-pubs but what tactile graphics are are images that can be felt with the fingertips I'm going to pull up an image and show you what that looks like in its digital form and then I will share the hard copy version what I have here is a map of Russian troop locations for February 2022 this is a tactile map that's been produced by the San Francisco lighthouse for the blind for the touching the news project the pdf that I'm showing on the screen is the digital version for the small touch method small touch is a really neat method where you take a specialized paper that has been coated with a proprietary formula chemical formula and when you run it through heat these little bubbles microcapsules break and cause wherever there are lines to swell up and you're then able to tactically feel these different lines so this is how you would design a digital version that can then be run through a machine with a light source that can cause the effect that we want now there's also an embossed version that comes with the set of graphics this allows users who have a braille embosser to be able to create the image themselves or to print it out themselves and that's the method that I've chosen so I will turn off my screen share and hold up this our copy version so you can see it so as you can see there are dots that are closely grouped together close enough to build a form different shapes and in this way I'm able to tell the different locations and what the different countries look like and and their borders by the way here is the print version of the print reference version where you can see all the labels as well but basically when I look at this map I can see that they've used a different texture for the Black Sea a solid dot for the newly arrived units some letter abbreviations so CR for Crimea, MD for Moldova and different numbers to represent the number of troops I can see that they've used different lines to outline the different borders so Ukraine is in the center with Crimea to the south surrounded by the Black Sea Romania is the southwest Belarus is to the northwest Russia is to the northeast so I can see all that with the tactile graphic this is of course one of the advantages of being able to display things spatially but when we compare this to auditory techniques like sonification the big advantage of tactile graphics is the ability to see the different shapes auditory means can provide a spatial sense of the general approximate location of things but it's very difficult to show shape and other details like that so one thing that I do want to mention before we end the session is that in the future there are tactile dynamic displays that will be more common and instead of printing in hard copy we can display these in a digital form but it would be really nice for the time being and perhaps even in the future to be able to take an EPUB and a tactile supplement of tactile graphics as well or even 3d models with that that's the end of this presentation and I'm happy to answer any questions thank you very much