 Hello everyone who is trickling back and or has been at their computer this whole time and hello live streams who are just tuning in now. I'm just getting set up for the next session, which will be a pub accessibility demonstration number one deep dive into Let me get that. Okay, it's 1145 so we'll get this going as I said welcome YouTube live streamers welcome back everyone in in the zoom. We're going to keep things taken along so this is the public accessibility demonstration for reflowable e-pubs. This is going this is a pre recorded video from Kylie of now she's one of our accessibility consultants. She's going to go through simple and complex features of the e pub of reflowable e pub. There, this video is about 28 minutes long so we that we've only got a short little bit of time for Q&A but Kai will be here for the rest of the summit don't fret so we'll be you'll be able to talk to him if you have questions or you know talked to any other accessibility consultants and testers who are around if you have questions. I'm going to get this going right now thank you so much, Kai, for making this video and let me just share that. Let me check my computer sounds good and we're getting going. Enjoy. 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. And then we'll be talking about reflowable e pubs. 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 e pub 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 e pubs a lot better. And in fact, if I see a fixed e pub, I'll avoid reading those. So why is that? Well, you may be aware that fixed they are books 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 e books 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. Let me show you why. Here I have a reflowable e pub open but I've also got a fixed e pub open as well. And we're just going to take a listen to the screen reader and see what each of them sounds like. They soon know that they will grow up and the way Wendy knew was this. One day when she was two years old she was playing in the garden and she plucked another flower and ran with it to her mother. I suppose she must have looked rather delightful for MRS. Darling put her hand to her heart and cried, oh, I can't be remained like this forever. This was all that passed between them on the subject but henceforth Wendy knew that she must grow up. And now here's the fixed layout. Here we go. Mini Perl was a dog of another sort who preferred sandy beaches for her comfort if a lake was inside she was on her way wagging her way into the bay. 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. Mini Perl was a dog of another. You can tell that there's only one word per line. But if I go back to the reflowable EPUB. Thorium Peterpan Thorium. And start airing down from here. To who is the beginning of the end? Of course they lived at 14 their house number on their street and until Wendy came her mother. She was a lovely lady with a romantic mind and such a sweet. Mockingmouth romantic mind was like the tiny boxes one with the other that come from the. 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. 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 EPUBs 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 2, level 3, level 4 headings. This is really helpful to be able to understand how the book is generally laid out. For example, major sections usually use a level 1 heading, subsections level 2, and then subsections within that section level 3 and so on. When designers use headings as styling, this throws it all off. I've seen books where it jumps from level 1 to level 6 and then back to level 4. So that's not very helpful. Also, 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. Now with 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 three items list with five items navigation toggle button pressed list with six items toggle button not press table of contents. Press the table of contents. And then if I arrow it down from here. Table of contents list with seven items heading level one link cover heading level one link title page heading level one lick list of illustrations heading level one link dedication at level one link epigraph. At a level one link chapter one, the earth with six items at a level to link all children except all the list heading level one link chapter one. The earth breaks through. At a level one link epigraph heading level one link dedication at a level one link list of illustrations thorium, the or if you're talking about the list of list toggle. I can jump to the section and then I'm going to find the main content here and then I can arrow down from 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 and 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 row. 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. 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. And then I'm going to click on this. Landmark star link. And when I arrow down. There is a room link 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 footnote link star separate footnote link star star link. But in the back of the line of face straight 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 little links in this demo are pretty well labeled but there's one that I think could use a different one. Landmark star link. Region diagram to global population of persons with disabilities long description group and long description link caption. Region HTTPS slash www.execlipation.com 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 elements list dialogue review level zero HTTPS 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. 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 accessible publishing.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 this link 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 it is 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 Samsung electronics code dot LTT origin origin column three Republic of Korea. Number of designs contained in published registrations 2017 column four six hundred twenty six two four five hundred seventy three three zero 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 contained in the number of designs contained in the edge of table five five zero seven four hundred six three hundred seven zero 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 sine 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 HTTPS slash www. This is a link that we just link out to the from the EPUB rather. HTTPS slash www.excessive publishing. And by the way this is part of our COVID project in which we provide publicly available data in accessible formats. Graphic map showing number of active cases by location. We're using SAS accelerator so I'm going to accelerate map showing number of accelerate this map. And now I can explore the points on this map. Unfortunately this recording is in 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 EPUBs but what tactile graphics are are images that can be felt with the fingertips. I'm going to pull up an image and tell 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 Swaltouch method. Swaltouch 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 hard copy version so you can see it. So as you can see there are dots there closely. Tiny comment. I've linked to a scan of this because it's not showing very well in the video but if you go to the chat there's a link to the scan of the printed version that he's holding there. We grouped together close enough to build the form different shapes and in this way I'm able to tell the different locations and what the different countries look like 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 get 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. Thank you so much Kai. I really appreciate that video so just a quick update. This session is scheduled to go until 20 after so we've got just five minutes for questions so and then we're having a 10 minute break but definitely happy to take questions for this five minutes time and it looks like we have a raised hand. Kate go ahead. Hi can you hear me okay thank you so much Kai that was really awesome to see that demonstration and super helpful. I have tons of questions but I'll keep it short. One at the end just in terms of the accessible technologies going forward I work with an organization that works with a lot of smaller publishers and creating things like sonified versions and tactile versions of images is probably going to be beyond their own capacity in-house so I'm wondering if there are ways that publishers can create and mark up their books and images that would facilitate the process of creating those those types of formats either by accessible content production organizations or by users themselves. Yep that's a great question definitely Nels is one of the organizations you can or publishers can reach out to to ask about tactile graphics and sonification that's actually been my area of focus for some of my projects so I'm definitely happy to answer any questions after this summit but generally we're I guess we're not really expecting publishers to be able to do all this on their own so definitely working with an organization is kind of expected and in terms of making images accessible or preparing the digital versions there are guidelines there are BANA guidelines that are kind of the starting point to give people an idea of the things to consider when designing these images so I can certainly provide a link to that as well but yeah great questions thanks thank you that was an excellent question thank you Kay your names are so close one letter apart so we've got another raised hand from Lars hello Lars go ahead if you want to unmute you can ask a question hi guys hi I just wanted then this is for you Kay as well I have this thing that I never got you know around to actually starting but I have a suggestion that we start an initiative called accessibility annotations where we can crowdsource web annotations basically that you can side load with any publication to let pretty much the community help out with adding you know supplemental information categorizing or type adding types to to regions you know like aria roles to regions of content stuff so if anybody wants to hang out and speak about that sometime just give me a shout that especially goes for you Kay that was all I wanted to say thank you Lars yeah I do like that kind of idea certainly you might find some people here do we have any any more questions that would take one minute or less okay all right come on come on down I think this is a pretty straightforward question I was just hoping to to get a bit of clarification on landmarks and what exactly you look for in terms of landmarks is it just start of content in the book or is it you know all headings and subheadings or that sort of thing yeah so landmarks usually pair pretty well with headings because they're indicating the start of sections and so it's an alternative way for people to navigate because some people prefer using headings some like landmarks and then of course there there are pieces of content out there where you might not want to use a heading but you still want some sort of navigation point and so landmarks can be really helpful in that way because you still get your navigation landmark but you're also visually not showing a heading so there's kind of that motive as well thanks and I think Leah just shared a link for me to look at so kind of it's so I when I shared a link to was accessible publishing some at school because I think there is you know I'll keep it short but there's there's like aria landmarks and then there's also the landmark section in the navigation files so that's kind of a distinction as well which we're going to get into in this session right now but I think we'll probably cover it at accessible publishing school which is open to anyone and everyone so thank you so much kai that was excellent I'm so excited that we have this video now in our repertoire and we are going to take a break for 10 minutes and then we've got another exciting video so I will mute and stop my video and we'll see you back here in 10 thank you so much everyone