Good morning, everyone. My name is James Craig. I'm a member of the Apple Accessibility team. What you're going to see here is years of work, a culmination of years of work by a lot of different people, and so I'm really thrilled that I get to be the one to share it with you. So first off, who here by a show of hands knows or thinks they know what I mean by the term accessibility? Okay, good number.

Some of you are probably content publishers, and you may be aware that you need to make your content compliant or accessible, and you're not really sure what that means. And so we're going to cover some of that, figure out how to test with VoiceOver, figure out where your problems are so you'll know what to fix.

and some of you are developers. This is a developer conference after all and so you may already be aware of accessibility and certain techniques but you're not really sure which ones are the right ones to use in certain situations. So we're going to give you a bunch of examples and talk about how to make your book content specifically as accessible as possible to as wide an audience as possible. But accessibility isn't really about code or compliance or techniques to use or even testing. Accessibility at its core is really about people.

And that includes people who may be using a computing device for the first time in their life and even if they don't consider themselves disabled, maybe they don't see as well as they used to or maybe they don't hear as well as they used to. It includes people that may be accessing course content or watching a video, even if that means that they need to watch it with the captions turned on.

And still, it means people that just want to access the same content and have access to the same tools and read the same books that everyone else does, even if they don't have the same abilities that everyone else does. And I'm not talking about small numbers either. 50 million people in the US alone, worldwide numbers are unknown but obviously larger.

Some of you may think, "I don't really relate to that. I don't know anybody with a disability." Chances are you're wrong and you just don't realize it. Colorblindness, for example, is one of the more common disabilities. It affects, in the male population, about 8%. That's 1 in 12. Just looking around the room and given the stats of the Developer Conference this year, there's probably quite a few people in the room here that are affected by this.

Out of that 50 million, 31 million have a hearing impairment. 10 million people have a vision impairment. And I'm not talking about people that wear glasses, I'm talking about people with severe non-correctable vision impairments like usually people who are blind or legally blind. And so I'm glad I get a chance to talk to you about iOS today because it's had accessibility features built in since iOS 3 for three years now. Captions going farther back than that.

And we've done a lot of hard work. We're trying to put in a lot of the work so that you don't have to do everything. And some of the features are a screen reader for people who are blind, Zoom for people with low vision, captions and LED flash and custom vibrations for people who maybe have hearing impairments and more features for people with physical motor impairments and most recently with learning impairments.

and the disability advocacy groups love us. We get quotes like this one from RNIB, which is a blindness advocacy group in the UK. When it comes to embedding accessibility, Apple set a standard in recent years. That's pretty amazing. We love to hear stuff like that. And iBooks is no exception. It's had accessibility built in since the original release with the first iPad.

and this is a quote from Bradley Hodges of the American Foundation for the Blind. "I believe that accessible iBooks will be viewed by future generations as one of the landmark events in the lives of the blind." Now, how huge is that, right? That's a great responsibility. It's a great responsibility for us, but it's also a great responsibility for you as the content publishers.

Now, I said that iBooks has accessibility built in, but there are a few things that you need to do to make sure your content is 100% accessible. And that's what we're going to cover today. So, first off, we're going to cover basic HTML accessibility in EPUB books. We're going to cover how to use VoiceOver to test your books, both EPUB and iBooks author books, so that you can know where the problems are.

I'm going to show you some new features of iBooks Author for accessibility. And we're going to talk about how to make custom HTML5 widgets so that you can embed rich interactive web applications inside your iBooks Author books. So, has anyone here used EPUB before? Familiar with EPUB a little bit? It's the most common e-book standard.

Novels, for example, most of the ones that you would buy on the iBook store and EPUB. And you don't need to know anything specific about the file format other than it's basically a zip folder. It has a couple metadata files, but most of the content inside of it is web content. So, it's HTML pages, one or more HTML pages, and all the resources that go along with that.

So, CSS, JavaScript, and images. One of the things I want you to keep in mind about images is that some images look better on certain backgrounds, dark backgrounds, light backgrounds. Some images have transparency. And if you're lucky like us, you'll get a design team that takes care to make sure all of the images that are transparent or should be transparent are transparent so they look great on all different backgrounds, whether that be black or white. But there's always multiple versions of the images. Or maybe there's a, you know, someone's made a mistake with an image.

or maybe it was intended for another context. This one, for example, looks great on white. But because of a transparency error, because of a transparency issue, it wasn't maybe intended for a black background, it doesn't convey the same meaning. It may be completely legible on different backgrounds. That's one of the things I want you to test. Let's take a look at an iBook. This is our sample iBook. It's about astronomy.

And I It has some great images of space here. Let's see what they look like on a dark background. I'm going to switch it to night mode. Sure enough, it looks great. These are space images. There's no transparency in here. In fact, they look even better on the black background.

So we don't have trouble here, but if you're looking at your books, double-check them in all different themes. But I'm more concerned about people that can't see the images at all. If you have a book, like a textbook, like this astronomy book or maybe a story like Winnie the Pooh where the images are an illustrated children's story where the images are an important part of the content, then a reader who can't see those images would be missing a big portion of it. VoiceOver already does a great job of reading the text that's on the screen, and so we need you to give us a little bit of information about the content of those images.

So the way that you would display an image in HTML, this is kind of the bare minimum. You have an image tag with a source attribute that points to the file name of the image resource. Accessibility is important enough that this wouldn't even be valid at EPUB. It wouldn't be valid HTML. Accessibility is important enough that the alt attribute is actually a requirement for validation. So you wouldn't even be able to push this book up to the iBook store at this point.

And so some publishers know about this constraint and they do this to fix it. They give it an empty alt attribute. And this is okay in some circumstances if it's a purely decorative image like maybe a decorative horizontal rule between paragraphs. That's okay. But chances are most of your images in your books are actually content images.

And so sometimes we catch people doing something like this, alt equals image, which is not really any better. In fact, it might be a little bit worse. And the fact that it doesn't give us any kind of information, we'll see alt equals illustration or alt equals photograph or alt equals chart. Maybe chart's a little bit better, but it still doesn't give us the full picture. It doesn't give us any useful information about the content of the image.

And so what you need to do is actually provide a human-readable sentence or, you know, short phrase that describes the content of the image in enough detail for the user to get the point of why it's there. And that allows an accessible book to go from something like this to something more like this where the images are actually read out as text and that allows the reader to paint a picture in their mind of the book author's intention which is really what books are all about anyway.

And so to show you how this works in iBooks with VoiceOver, I'm going to bring up Jason Barry to the stage. Jason? Thank you. As James said, my name is Jason Barry. I'm a technical writer on the developer publications team. And part of my job is to make sure that content that we publish can be accessible for everyone, regardless of ability or disability.

Not because it expands our reader base, which is nice, but because it's the right thing to do. So first I'm going to show you how to enable VoiceOver in iOS. Then we'll talk about some basic VoiceOver gestures and how to use those gestures in iBooks. So we'll go over to my iPad here. VoiceOver can be turned on, can be found in the Settings app.

and the general pane near the bottom under Accessibility. And here you'll see all of the assistive technologies that iOS has to offer. These settings help people with vision, hearing, learning and physical impairments. We'll be talking about VoiceOver today. Here I have settings specific to VoiceOver. I can do things like adjust the speaking rate.

I can also turn on or off hints. Hints provide more descriptions to elements that the VoiceOver cursor is on. And it's great if you're new to VoiceOver or trying to learn VoiceOver. But since I already know how to use VoiceOver, I'm going to turn it off. So here we can turn VoiceOver on, but I'll show you a tip on how you can quickly turn VoiceOver on and off from anywhere in iOS. Let's go back to the Accessibility pane, and at the very bottom, there's a setting for triple-click Home.

Now if I select VoiceOver, by triple-clicking the home button, I can toggle VoiceOver on and off from anywhere within iOS. And this is great, especially if you're testing VoiceOver. So let's go back to the home screen. I'll show you some basic VoiceOver gestures. We'll turn VoiceOver on by hitting the home button three times like we just set.

Landscape, VoiceOver on, Messages. And here you'll see this black rounded rectangle. That's the VoiceOver cursor. And VoiceOver will read anything contained by that VoiceOver focus. Now VoiceOver changes the way that taps and gestures are interpreted by the screen. You'll see as I drag my finger, VoiceOver, instead of activating an app, it will read it aloud. New stand folder. Zero items.

This is helpful because it prevents accidental touches and gives VoiceOver users the freedom to navigate the screen without worrying about accidentally touching something that they didn't mean. You'll see as I drag my finger around that the cursor follows it. Reminders. Clock. Photo booth. FaceTime. There are other gestures I can use like the one-finger swipe. When I swipe to the right, it goes to the next item, and when I swipe to the left, it goes to the previous item.

Camera, Maps, YouTube, Clock, YouTube, Maps You'll also notice that the VoiceOver cursor automatically wraps around the edge, and it goes to the second row of apps here. It treats all items like a linear list. So let's use iBooks now. I'll tap on it. Doc, iBooks. And once the VoiceOver cursor is over something, I can double-tap anywhere on the screen to activate it.

iBooks, Library, Button. So I can use my finger to explore and read line by line. Page 3 of 12. Diameter of approximately 100... several months. Jansky eventually... fixed object, come back to the same location in the sky. Now, you'll see here I'm near the end of the page. When I continue reading, VoiceOver will automatically turn the page for me to ensure a continuous and smooth reading experience. I'll use the two-finger swipe down gesture to restart reading from my current position.

Come back to the same location in the sky. Thus Jansky suspected that the hiss originated well beyond the Earth's atmosphere and by comparing his observations with optical astronomical map. And I can use the two finger tap gesture to pause. And here we have an image, and this e-book is really great because the alt text is specified inside the image.

So the description will be read aloud when we encounter it. Again, I'll use the two-finger swipe down gesture to start reading from our current position. His observations with optical astronomical maps. Jansky concluded that the radiation was coming from the Milky Way galaxy and was strongest in the direction of the center of the galaxy in the constellation of Sagittarius.

Image. The very large array, an interferometric array formed from many smaller radio telescopes, each dish 25 meters in diameter. The range of frequencies in the electromagnetic spectra... And a two-finger tap to pause. So now this book is accessible to everyone. Now I'll pass it back to James, who's going to talk more about iBooks Author.

Thanks, Jason. So let's cover what we've learned about this. First of all, view all your images in all different contexts, different themes. Make sure they look right. Make sure they read as well and are legible in all contexts. Label all of your content images as you would in HTML.

Now, this is for content images. This is real human readable text. It should be localized if you have different versions of the books. And test your books with VoiceOver. Now, this is really critical and I'm going to come back to it over and over, but it's an important part of the picture.

So let's talk about iBooks Author. It's released earlier this year and we think it's a game changer. It allows content producers and book designers to create rich and engaging content. We have some beautiful examples on the iBooks store such as this one by E.O. Wilson. And you can embed interactive controls like this video or HTML5 widgets like this one in the bottom right corner.

But there's still some things that you'll need to do to make sure your content is as accessible as possible. The first thing I want to talk about is adjustable font sizes. Now, you don't have to do anything special for this. This is built into iBooks. I just want to tell you how it works. If you're familiar with using iBooks, there's a toolbar button to allow you to adjust your font size.

In iBooks Author Books, we allow a lot of design control for the content publisher and the designer. You can add sidebar content like this or you could drop a video in between multiple columns of text. If the user were to resize their font here, the layout wouldn't look as intended by the content publisher.

And so we have an innovative design solution that allows control and design from the publisher but also allows readability for all users no matter what their reading font size preference is. So when you turn the device to portrait orientation and the font size toolbar comes back and you can adjust the font size to whatever your comfortable reading level is. Again, you don't have to do anything special. It's built-in. I just want you to know how it works.

Color concerns is another issue that you'll have to think about, especially because we know people are going to be embedding charts and graphs and other rich, beautiful, interactive material. This is an example of what not to do. As I mentioned before, about 8% of the male population has a form of color blindness.

Those of you who may be familiar with it may know that red and green is the most common form. The ability to differentiate between blue and orange is also one of the types. And so this information is presented only with color. So the key thing to remember here is not which colors you use, but don't present information with color alone. So this is how it may look to someone with a particular vision impairment.

And there's a lot of ways, I mean obviously this is ridiculous, right? Doesn't make any sense at all. But there's a lot of ways that we can retrofit this and some of it is the way you design the chart and some of it is maybe a little bit in the colors that you choose based on value. For example, we could make a darker blue, for example, so even though the orange was there, it was lighter.

But that's not going to work for all users. And so the critical bit that we added to this retrofit was that we added the percentages to the key here as well. Now, this is a design afterthought. There's a lot of ways that we could redo this to make it even better.

But the critical bit here is that even if you took away the rest of that chart, The user can still see the point of the information from this. Now, to give you a better example of

and the designers used red and green. It's the most common form of color blindness that prevents some users from seeing red and green.

It's okay to use color. Color is inherent in our culture. It means stop and go. It means right and wrong. In this case, it means incorrect answer, incorrect answer. But in addition to that color, they backed it up with something else. So there's a checkmark on the green, correct answers, and there's an X on the red, incorrect answers.

Another thing that you want to keep in mind, especially if you're embedding video in your books, is captions and subtitles. So I've got a video that I want to play for you and I want you to tell me by, or just think about what it might mean. This video makes no sense, especially talking head videos. They make no sense because all of the content of this video is conveyed through the audio. So, obviously, captions are a requirement for people with hearing impairments, people who are deaf or hard of hearing.

but they also provide a lot of universal design benefit. So there may be a student who's in the library and they're reviewing book content and they want... They want to view the video but they don't want to disturb other people and they don't have their headphones. Or you may be riding the bus home and you have your headphones but due to the noise of the crowd or the noise of traffic you can't hear it over the den. So keep that in mind and think about how it benefits all users, including those with disabilities.

The last thing I want to mention is descriptive labels. This is just like the alt text that we talked about in EPUB. Except in iBooks Author, you do it a different way. So here we have a photo of Jupiter. You can see that there are swirling gas clouds in the great red spot.

Instead of writing the alt text in code or the alternative description in code, we have this widget inspector and down at the bottom we have the accessibility description. This is where we're going to put in some text that describes this image such as "Wide shot of Jupiter with squirreling glass clouds including the great red spot. A storm so large it dwarfs our own Earth." That gives the user a good description of what's on screen here.

Likewise, if we have a widget such as this one, there are multiple pieces to this widget. So one accessibility description would not do. So we've got the drag targets and the drop targets and the background image. And if you look down in the accessibility description, there's this pop-up menu. And if you click it, it allows you to select each different item in this widget and give an accessibility description for each. and so I'm going to bring Jason back up to the stage to talk about how that works and show you iBooks Author.

So here I have a textbook that I created with iBooks Author. It's really cool and I can't wait to publish it on the iBook store. But I haven't yet tested for accessibility. So what would happen if a VoiceOver user tried to read my book? Well, let's find out. I'll turn VoiceOver on. VoiceOver on. iBooks. Section 1.

And the text can automatically be read aloud by VoiceOver. But what happens when the user encounters an image? 000015027267 Medium, Image. It sounds like gibberish. That's because we haven't added any accessibility descriptions in iBooks Author yet. Let's go on to the next page. I'll use the three-finger swipe gesture. Page three, WAI is part of the local group of... And two fingers to pause.

Since VoiceOver helps people with visual impairments, and we're looking at this video now, we're talking about captions which really helps people with hearing impairments, I'm going to temporarily turn VoiceOver off. VoiceOver off. Let's play the video. Firing Chain is armed. Sound Suppression Water System activated. T-minus 13, 12, 11. The video looks great, but if I had a hearing impairment, I'd have no idea that there was a speaker talking in the background. I'll show you how in a moment to remedy this problem.

Onto the next page we have an interactive quiz widget. I'll turn VoiceOver on. VoiceOver on: Landscape. VoiceOver on: iBooks. WAI is part of the local group of... And like the image, I haven't yet added an accessibility description. So if I was a VoiceOver user and I encountered these image thumbnails at the bottom, it would read something like this. Quiz. Image 1 label. Image. Image 2 label. Image 3 label. Image. Again, not very helpful, not descriptive. I have no idea what these are images of.

And on to the next page. Page 5, Interactive Model, Interactive 1.1, Explore Our Solar System. We have a custom HTML widget. Now, to show you the features of the widget, I'm going to turn VoiceOver off. VoiceOver off. and I'll open it up here. Now custom HTML widgets are a great way to add personality and character to your books and make them stand out above the rest.

So here we have a grid of 12 planets. I can just tap on one and a modal dialogue appears. I can scroll through here and see more images of this planet or read a brief synopsis at the bottom. And when I'm done, I can just tap this button down here and return to the grid of planets. But I haven't yet made this widget accessible. So what would happen if a VoiceOver user tried to use this widget? It would sound something like this.

VoiceOver on iBooks. Sun 1 JPG. Image. Sun 1 JPG. Image. Sun 2 JPG. Image. Sun 3 JPG. Image. The sun. The sun is the star at the center of the solar system. So two things are going wrong here. One is that VoiceOver is reading the content that's on the modal dialogues.

It doesn't know that that's hidden from view, so we have to explicitly tell it that in our code. You can see the outline here is on the text, which is actually hidden from view. And secondly, we haven't specified any alt text for our images, so it's just reading the file name. And that was that Sun 1 JPG, Sun 2 JPG. We'll need to add some more descriptive text.

So I'm going to switch over to my Mac. Turn VoiceOver off here. VoiceOver off. And now we have the same copy of the iBook that I just showed you on my iPad here in iBooks Author. All right, so how do we go ahead and make this accessible? With iBooks Author, it's really easy.

All you do is select the image and go up here to the Expector panel. And the last inspector, the widget inspector under the layout tab, I have a place called Accessibility Description. And anything I type in here will be read aloud by VoiceOver. So I'll go ahead and paste in some text.

Now onto my video. We want to add captions to this video. Now, creating captions is outside the scope of this demo. But I have a video right here with captions already embedded. So I'll just go ahead and drag that right on the video placeholder. You'll notice too that when I drag a new video on, it automatically resets the poster frame. So if we go back to the Interaction tab, we can drag this adjustment right here, this slider, to the frame that we desire.

onto our interactive widget. Adding accessibility to this is just like adding accessibility to an image. I'll click on it. And down here, you'll see a new drop-down menu. This will allow me to specify a unique description for each label and target. When it says image one label here, that's referring to this first thumbnail. This is the image label. And two and three and four respectively. And their targets are above. That's what these are. And I can drag this anywhere on the image that I deem fit. So let's go ahead and type some things.

Some accessibility descriptions right inside here. Again, I'm adding a description to this first thumbnail here. So I'll go ahead and type in a gaseous giant characterized by its red spot. And for its target, I'll type in Jupiter, the fifth planet from the sun. Now, it's important that you don't give away the answer in your descriptions. And what I mean by that is notice that in this example, I didn't say Jupiter in both the label and the target. Because VoiceOver will read the description aloud, it will say Jupiter to both.

And the point of this widget is to quiz the user. And that's no fun if I give away the answer. So instead I just wrote a gaseous giant. I described the image instead of calling it by its name. and finally we have our custom HTML widget. We'll touch on that in a bit.

Great. So I just made my book a little more accessible. So I'll save my work and then hit the preview button to transfer it to my iPad. Now, I've already gone ahead and done that. So we'll switch over to the iPad and I'll load up the accessible version that incorporates the changes you just saw me make.

So now let's turn VoiceOver on. VoiceOver on. iBooks. Section 1. So how does our image sound now? A radio telescope on the lookout for developers who don't label their photographs. Image. Much more descriptive. On to the next page. Page 3. WAI is part of the Let's play our video. I'll turn VoiceOver off, like I said before. VoiceOver off.

And play the video. Firing chain is armed. Sound suppression water system activated. T minus 13, 12. But wait, our captions aren't showing up. That's because closed captions are disabled by default. We'll have to re-enable them in settings. So I'll double tap the home button to bring up the app switcher.

And in settings, Under the video tab, is closed captioning. And I can just switch that on. Now when I go back to my book, I You can restart the video here and you'll see the captions. Firing chain is armed. Sound suppression water system activated. T-minus 13, 12, 11, 10, 9, 8. Go for main engine start. 6, 5, 4, 3, 2, 1.

Zero and liftoff of Space Shuttle Atlantis, reaching the crest of its historic achievements in space. I love that video. Now we have our interactive quiz widget. Now, as a sighted user, I can gather just by looking at it that I'm supposed to pick up these thumbnails and drag them to their respective images, their respective drop targets above.

And part of the feedback that I get when I initiate a drag is very subtle and I want you to pay close attention. Look at all the little things that happen when I start dragging. The thumbnail grows, turns semi-transparent, and when I approach a drop target, that target grows and turns blue. And this feedback helps me understand the state of this widget. But how can I take advantage of that visual feedback if I couldn't see? Well, VoiceOver changes the visual feedback into audio feedback. Let me show you what I mean. I'll turn VoiceOver on. VoiceOver on. iBooks.

WAI is part of the local... And now when I select an image thumbnail, not only will it read the accessibility description that I inputted with iBooks Author, A dark, desolate rock, far from the light of its nearest star. Image. But if I had hints enabled, it would say something like "Double tap and hold to drag." So I'm going to do that and it will announce to me where the drop targets are, where I'm supposed to drag this image.

So I'll do the double tap and hold gesture. started dragging a dark, desolate rock. Drop targets are above. I'll just move on up. On Mars, the fourth planet from the sun. On Jupiter, the fifth planet from the sun. On Pluto, the Ninth Planet, until its excommunication from the planetary community in 2006.

Stop dragging a dark, desolate rock far from the light of its nearest star. So with that audio feedback, I can understand I have a gathering of where I am and how to navigate with this widget. But you might be thinking to yourself that I have a bias because I can see the screen.

So what I'm going to do is turn on the screen curtain. And screen curtain is a VoiceOver feature. It's all about privacy, so a VoiceOver user doesn't feel that someone's overlooking their shoulder and looking at their screen. and you can turn on screen curtain with a three-finger triple tap.

Screen curtain on. So now we can't see the screen, but I can still use the VoiceOver gestures that I taught you earlier. I'll use the one-finger swipe to the right to select the next image label. The red, rocky surface of a planet. Image. Sounds like Mars to me, so I'm going to pick it up.

started dragging the red drop targets are above. And move my finger up. On Pluto, the ninth planet, and on Jupiter, the fifth planet from the sun. Still too far out. On Mars, the fourth planet from the sun. There we are. Now I'll lift my finger. Stop dragging the red, rocky surface of a planet. And swipe to the right to check my answer. Check answer button.

Correct answer. Clear answer. Button. Great. So I just got the audio feedback that I indeed got the correct answer. And when I turn screen curtain off... Screen curtain off. You can see that I did and that the button changed from check answer to clear answer. Now I'm going to pass it back to James who will tell you how to make custom HTML widgets accessible.

Let's cover what we've learned. Again, font size adjustments are already built into iBooks. You don't have to do anything special. Don't convey meaning with color alone. Just to repeat, we're not saying don't use color. That would be ridiculous. Color is a great learning tool. We're just saying make sure that the ability to perceive color is in a requirement in order to access the information that you include in your books.

You want to add captions or subtitles to a video where appropriate. Obviously, any time you have information conveyed through the audio channel, you want to make that available to people with hearing impairments, but also benefits people who may be in a situation where they can't hear due to some technical constraint.

Add alternative text for images and widgets. And test your books with VoiceOver. We wouldn't even have known where to start to fix these problems if we hadn't tested with VoiceOver. And we wouldn't even have known if the changes had worked unless we had gone back and tested after we made our changes.

So let's talk about that custom HTML widget that he showed at the beginning. Anybody here familiar with widgets? Anybody developed a dashboard or iBooks widget before? Okay, a few. Like EPUB, it's not the same file format, but like EPUB, it's basically a folder of content. In that folder, there's some metadata files like a plist, but it's mostly HTML content again, so images and CSS and JavaScript and HTML pages, one or more.

And like HTML, or because it's HTML, all of the accessibility techniques that you know about HTML still apply, so labeling images with the alt attribute still works and labeling form elements with the label tag and the for attribute still works. But HTML only goes so far. It was originally designed for static documents. More recently, people have been using it for web applications, but there's some semantics that get lost in there, and HTML5 is fixing some of that, but there's still some places where HTML falls short, and that's where ARIA comes in.

It's a W3C specification and it allows web pages to declare themselves as applications and give additional semantics about the parts of their application. Like this thing is a button and it's disabled or this thing is a slider and its value is 64% or this thing is hidden from view now, this thing is a dialogue. So let's talk about how to use it. First of all, we're going to assign semantic roles.

So on the front of this planet widget or solar system widget, we have the sun and the moon and ten planets, including the I planet or planet X. And each one of these things represents a button. But as Jason will show you in the code, it was just a meaningless, semantically meaningless div with a class affront on it. And so we're actually going to add role equals button to that. And this will tell WebKit, rather, to send that information to the accessibility API and VoiceOver can read that and understand that this is a button.

Likewise, on the back side of this, we have these dialogues, but they're just another div, and it's got more content in it, but we want to associate this with the type of application dialogue. Now, there is no HTML attribute for dialogue. There used to be one that was about dialogue or discussion between people, but I don't even think that's around anymore. We're talking about application dialogues. So the next thing you want to do is update your states and properties.

So in addition to the fact that this is a button, we also want to give it a label such as the moon. And remember, at this point, the dialogue that's on the backside is actually hidden from view to the sighted user. And so we want to make sure that VoiceOver knows that as well. So we're going to say this dialogue or these dialogues that are out of view now are hidden via this ARIA hidden attribute.

Now when we show that dialogue, we have to update the state. And so we're going to dynamically change that hidden state to false, making it shown. It's already in view because we showed it with some CSS, but we're also going to make sure that VoiceOver can see this now too.

and likewise the buttons that are on the front are now hidden from view so we want to make sure that VoiceOver knows that those shouldn't be accessible at this point. So we're going to set those to be hidden. The last bit of the chain is that you want to manage focus.

Now when we have this button on the front and we tap, there's an animation that occurs and so a side user can see, oh hey, now we're on this dialogue. But the VoiceOver cursor is just going to hang out on that button still. So what we want to do is move it into the dialogue. So we're going to focus the first element in the dialogue such as this image and the VoiceOver cursor will come along with it.

And likewise, when we hide that dialogue, we want to focus the trigger element or the element that it came from. So they click the moon button and they were in the moon dialogue. So when they dismiss the moon dialogue, they should go back to the moon button. And it reorients the user and lets them know how this application works.

The next thing that I want you to know about ARIA is it's really good at retrofitting old content. So for that class up front, we could have re-architected the application. We could have changed this to use a button element in HTML. But we don't have to. ARIA allows us to go back in. You may have inherited code before that didn't have certain features. And so it allows you to easily go back in and change things so you don't have to gut your application. You can also set these properties using the DOMSetAttribute method.

A lot of people ask me, how do I know when I'm supposed to update these ARIA properties? How do I know when I add one of these attributes or remove or change one of these attributes? A good indication is if you're changing element style. In this case, if you change a class name to something like hidden or if you change a style, especially if it's something like a meaningful class name like highlight or active or focused or selected or hidden, that's usually a good indication that you want to update an ARIA attribute as well. And so in this case, we're going to update the ARIA hidden attribute to true.

Now, I mentioned managing focus. The key thing to keep in mind is that VoiceOver cursor focus is not the same as keyboard focus. iOS doesn't really have this concept of keyboard focus except in a couple places where you can type in text. And so when I'm talking about managing focus here on iOS and iBooks, I'm talking about just moving the VoiceOver cursor around.

We'll be editing the HTML and JavaScript of this widget to make it more accessible. But first, I want to familiarize you with this widget. So right here we have a div with a class in front. And that's represented by these planet icons that you see here. Now when I click on one, this modal dialog is represented by the class of Back.

Alright, so what do we want to do? How do we want to go about making this accessible? Well, we want to be able to use the one-finger swipe to the left and right to move the VoiceOver cursor from planet to planet. Then when a planet is activated, We want to be able to shift focus to this modal dialogue and then hide the planet buttons because they're no longer in view. And likewise, when the modal dialogue is dismissed, we want to give focus back to the grid of planets. So let's look at our code.

I'm going to go here and paste in a couple attributes. Let's talk about each one. First, I'm assigning this div with a class of front, the role of button. And what that does is tell VoiceOver that this is indeed a button and it has further action when I activate it. VoiceOver will read this aloud to the user as well.

I'm also giving it a tab index. Since divs aren't natively focusable, I have to manually specify a tab index so that I can programmatically give focus back to this element. And then finally, I'm adding an ARIA label attribute. And whatever value I put here for the ARIA label attribute will be read aloud by VoiceOver. I can go through my code here and just go ahead and make it more accessible.

I've already done add the role of button to the other planets for the sake of the demo. We also want to add the role of dialogue to the back. This way VoiceOver will read the contents of the modal dialogue aloud. We're also giving it the aria-labeledby attribute. Now this is similar to the aria-label, but instead of specifying a string of text, I instead reference another element.

This is actually the ID of an element, sun_h1, that I've specified here. And here you can see that I have the sun. Just another way to make your widget accessible. And again, I can go through my code and change it up here. Make it a little more accessible.

All right. Let's head over to our JavaScript. Now, I have some functions that I've written ahead of time. And I'll just Paste it into my code. Now, I call this function updateButtonAccessibility. What it does is it gathers all the elements with the class of front, it loops through them, and then sets the ARIA-hidden attribute to either true or false depending on the Boolean value that I pass.

So what this allows me to do is update the ARIA hidden state of all the planet icons so I can either hide them or show them to VoiceOver. Similarly, I have a function that I created called UpdateDialogAccessibility. And it's just like the function I went over before, except now I can pass in an optional element. And when I do, it will only update the ARIA hidden attribute for the element that I pass.

If I don't pass in an element, it will find all of the divs with the class of back. loop through them and set each attribute to either true or false depending on the Boolean value that I provide. And then finally I just have some simple wrapper functions here.

So you can easily follow along. Now what we want to do is when the widget initializes, we want to hide the modal dialogues from being read aloud because they're not visible to the sighted user. So at the end of my init function, I'll just go ahead and call this function here, VO hide dialogues. Great. Now let's go back to the dashboard and view our changes. I'll switch over. Tap on the widget and hit Command-R to refresh the widget.

Now I'll turn on VoiceOver by hitting Command F5. Widget our solar system. Our solar system widget. Widget the sun button. Great. Now I can swipe using my finger. Mercury button. Venus button. Earth button. But what happens when I activate one of these buttons? Press Earth button. You can see that the VoiceOver cursor is still on that Earth planet icon that's currently hidden from view.

That's because we need to tell our widget through JavaScript explicitly to transfer focus over to this modal dialog. And you can see as I continue to swipe, the cursor still jumps from planet button to planet button. The Moon button. Mars button. All right, so let's go back to our code and fix this. I'll turn VoiceOver off. VoiceOver off.

Now here, I have an event listener. And this fires every time that a planet icon is tapped. And right here, I have a timeout that fires when the animation completes. So this is a great place to put some more code. What I'm going to do is just paste in only three lines of code here. First what I'm doing is that I'm showing the modal dialogues to VoiceOver because they're currently in view. Next, I manually transfer focus to the first image that's represented by a class of pic. That's this image right here.

Finally, I hide the buttons from VoiceOver. That's the Planet buttons that are no longer in view. And likewise, I'll need to do a similar action when the modal window is dismissed. So here I'm doing the opposite. I'm showing the buttons to VoiceOver because they're coming into view. and I'm giving focus back to the planet from which I left off. So when I dismiss this modal dialogue, the VoiceOver cursor will come back down to earth.

and then finally, I want to hide the modal dialogues because they're no longer in view. Great. Now let's save this, head back to our HTML, and finally, I'm going to add some alt text to make these images more descriptive. So I'll just paste over here. And what it's doing is, as you can see, adding some more descriptive descriptions here. And I'm also manually specifying a tab index because image -- the image tag isn't natively focusable. And I'll go through my code and go ahead and do that everywhere an image occurs.

Now, I've already done that for the other planets, and I'm sure you got the idea. Now, I'll save my work, go back to Dashboard, Refresh the widget and turn on VoiceOver by hitting Command-F5. Widget our solar system. Our solar system widget. The sun button. Mercury Button, Venus Button, Earth Button, the Moon, Mars Button, Jupiter Button, Saturn Button. And now when I activate it, the focus switches to the back.

Press Saturn button. You are currently on a button. To click this button, press Control-Option-Space-Saturn with six items. Dialogue, artist rendering of Saturn and its rings. Image. And I can swipe through and see all the images here on the back side. A pale, striped, gas giant with stunning rings.

Image. Close-up of Saturn showing huge storms in its atmosphere and dramatic shadows cast by and on its rings. Image. Now that's much better. I can also read this synopsis at the bottom. Heading level one, Saturn. Saturn is the sixth planet from the sun and the second largest planet in the solar system. After. Use the two-finger tap to pause. And now I can return to my list of planets. Back to list of planets button.

Press back to list Saturn button. And you'll notice that the VoiceOver cursor comes back to the planet from which we came. You are currently on the button. To click this button, press VoiceOver off. I'll turn VoiceOver off. Now I'll pass it back to James who will wrap up for us.

So let's review what we've learned. Standard HTML accessibility techniques still apply. You can still label your images with the alt text if you need to label something that represents an image or a button or something that's not natively in HTML. You can add the aria-label attribute. And like I said, HTML only goes so far, so there is no dialogue element. There is no -- well, until recently, there was no slider element.

So there's a lot of places where ARIA can update the semantics of your application where HTML cannot. You want to manage focus. So any time your application state changes, as it did when we flipped from the front of those buttons to the back of one of the dialogs, you want to move focus in so that VoiceOver knows that that event has occurred too.

and test, test, test your books with VoiceOver. So that's an overview of accessibility in iBooks. Some of the takeaways that I want you to walk away with are that books are for everyone. Education is a great equalizer and that benefit of education through books should be available to all people including those with disabilities.

Likewise, accessibility is for everyone. Sometimes it has the stigma of it's just for a small group of people so I shouldn't be doing this. As you saw in the example of closed captions, there can be a lot of benefit besides the necessity that is needed for people with disabilities.

Accessibility is for everyone including those with disabilities but not limited to those with disabilities. And adding accessibility to books is really easy. For the most part, we were just adding alternative text. So we added alternative text to the images and the widgets. And in a similar way, we added alternative text to the video when we added captions.

Even the complex example of the HTML5 widget, the complexity in that was actually creating the widget. Making that widget was a bigger deal. Adding accessibility was relatively trivial once we figured out what the problems were and what we needed to do. We did that by testing with VoiceOver. I can't say this enough.

It would be completely ridiculous if any of you developed a Cocoa application and never built it and ran it. Or if you designed a web page and had all your CSS animations coded and never actually loaded it up in a browser. But we see people do this all the time. They'll make changes for accessibility and they'll never go back and test it in VoiceOver. So this is absolutely critical.

If you have more questions, you can contact Vicki Murley, who is our Safari Technologies Evangelist. You can find out more about VoiceOver and other Apple accessibility products on apple.com/accessibility, including videos on how to use VoiceOver, including the trackpad commander, which is a feature that Jason was using on the Mac that makes the Mac trackpad work like the iOS touchscreen does.

You can find out more about ARIA at the W3C website and feel free to post on the developer forums. A few related sessions that happened earlier in the week that you can go back and review the videos on iTunes are Accessibility for OS X, Building Books with iBooks Author, Accessibility for iOS, and HTML, CSS, and DOM for Book Authors. and that's it. So thank you all for making the world a more accessible place for everyone.