Right, now our next speaker, is Leonie. Watson, she's. Worked, as director, of accessibility at, the mentor for many years and she is, now a senior. Accessibility, engineer, with the, snow grid and owner. Of LG, Watson, consulting, most. Other things she's, the chair of the British Computer Association. Of the blind pcap. Mike's, predominate, magazine, and is a member of the. Brilliant. Thanks that hopefully. Coming, through loud and clear to everybody. Okay. Well. It's great, to be amongst, such good company with all the people who've contributed time, to put together talks, for global, accessibility Awareness. Day and inclusive. Design 24. For. My part I would like to offer you a rock and roll guide to, html5. And Aria, I. Was going to weave some actual music, clips into, this talk but, in the interest of not, mixing technology, screen readers talking, and music I'm. Afraid there are just a few references scattered, through the presentation. To. Some really good rock and roll tracks so if the coast dust gets too much you, can was kick back and go and listen to some tunes instead, but hopefully, that. Won't be the case. So. Things. I'd like to cover in the next three-quarters. Of an hour or so I don't, look at the web, accessibility, stack, the technologies, that come together to, create. Accessible. User experiences. I'd. Like to look at Aria itself, as a specification and, what that involves and, then some practicalities. Look at some design patterns for html5, and, Aria that I hope will cover some situations, that those. Of you who are developers, will probably, see on a pretty, regular basis. So. Let's start off with my story. The web accessibility, stack, I quote, my stairway to heaven because if, it all comes together and everything works with your help as developers, then. We can start to look at some really heavenly, user experiences. For people but let's, take a look at the underlying technology. First. Version. 1 of the web accessibility, stack, looked a bit like this at. The bottom we had the browser, and, it's document, object model the Dom that created. When the page was presented. And, then. On top of that that assistive, technologies, like screen readers, screen, magnifiers, speech recognition tools and, together. Any information, about the web page what, those tools had to do was to scrape the Dom horribly. Inefficient, way, of getting, it information, leaves, a lot open to, interpretation, by, the different, tools generally. Not, a very, good way to go about doing things at all, and. So. The web accessibility, stack, evolved, and. Between. The browser dome and the assistive technologies. Accessibility. API were introduced, and we've, created a platform independent. Way for assistive technologies, to be able to query. Information. That, browsers, exposed, from the Dom so. A browser, would, support, something it would then expose information about that through its accessibility, API and, the.
Assistive Technologies, like screen readers, could make use of a whole bunch of properties, a method, to pick up and use that information so. I think it became a lot more reliable and certainly a lot more efficient, and for, the most part this is what a lot certainly of screen readers are, choosing to do now in terms of how they get information there. Are exceptions, it's not a perfect world but this is where we're we're definitely encouraging. The. Stack to be and. Then. The stack, as it stands at the moment introduces. Another factor, and that's Aria. Or accessible. Rich internet, applications. I'll, talk more about that in a moment but, what, Aria does in the simple sense is update. Or enhance, the information that. The browser exposes, through its accessibility, API so, it in some cases makes a little bit more information, available, to assistive technologies, and in other cases maybe changes, that information. For, the better as will seem. So. What, about aria, well it's a kind of magic and because it's a really powerful, specification. When used, properly and, it can do some quite remarkable, things. It's. A w3c, specification. 1.0. Is the current version and it might surprise you to learn that that was only formally. Released, as a recommendation just a few weeks ago back in March we've. All been using it for a number of years though so that. Was more a formality, work. On one, point one version of the spec is already underway and it's, public. Working draft such, a curious, you, can take a look at that on the web and there. Are links to that in the notes for these slides if you pick them up later after, the talk. So. As Aria do well it contains, or defines a number of roles around. 30 in the current specification. And these. Roles enable. You to define. What, an element or a custom. Widget does. Look. More at roles in a bit but on. Screen we can just see a few of the different roles that are available alert. Menu. Bars checkboxes. Buttons, a whole bunch of things to help you. Determine. Or define what the role of your custom widgets are element. It. Also devised, defines. A small number of states. So. These give you the ability to let. Assistive, technology, users know what. Down. State something is in so maybe, Aria. Busy Aria, checked a whole, bunch of other bits and pieces and here. You'll start to see the Aria, -, prefix. For attributes. In Aria so you'll, know without, doubt that you're dealing with some Aria if you see that Aria -, before, the attribute, name there, are a couple of exceptions but, for the most part that's pretty much convention. Through the, Aria specification. Re. Also defines, a number of properties, and, around. 20 or so of these things. Like Aria controls. Aria-live, are, active descendants, and, who's enabled you to do things like defying, relationships. Between elements so, when you're developing, custom. Widgets you can associate, things that are perhaps separated. In the Dom and create those relationships, but they don't necessarily exist. In the HTML, itself. Something. Else the Aria specification does. Is to extend the capability, of the tabindex, attribute and, there. Are now three ways that you can use tabindex. You. Can give it a value of zero, and if. You give an element a tab index of zero it'll place it into the natural content. Store, a content order of the page so. If you're a keyboard user and you're using the tab key to move through content, you'll. Hit an, element, with the tab index of zero at, the point it, appears in the source or order of the page. So it's a very natural way to do it it's a very good way to do it if something needs to be focused on injected. Into the natural tab sequence of the page for best effect. You. Can also give an element tabindex. Value of -1 this. Won't add it to the tab, sequence of the page so if someone uses. The tab key to move through the page it'll. Be ignored focus, won't land on that particular element but. It does mean that you can set focus to it programmatically, so, a, good example perhaps might be an, alert or, an. Error message. Appearing. At the top of the forum once it's been submitted. Just. On you. Right, alongside, everybody. We're going to see between. Solomon. Now, I'm hoping that they only actually realizes, that no connection, dropped, she's. Turned off any, other.
Interfering. Brundin and machine so. The. Next 40 minutes. Without. Capacity. Okay, just bear, with me a second. All the, times for. My. Internet connection to die. Okay. Five, back. Don't. Worry okay. Let's try that again, something. Else that aria does is extend the tabindex. Attribute capability. So, we now have three, possible, ways to use the tabindex, attribute, if. You give it a value of zero, that, will add the element into the natural tab. Sequence, of the page so. A keyboard, user using. The tab key to move through, the page will. Focus, on the element with cab index of zero at, the point it, appears in the source order of the page so it's a very natural intuitive. Way to add a focusable, element to. Your page, if. You. Give it a value of -1 the. Element isn't added, to the natural tab sequence, of the page but it can be focused on programmatically. So. For example if you, put. In some. Errors after. A from submission, on the page you. Might want to take keyboard focus to it to ensure that keyboard and screen reader users were aware that the errors had been posted to the page that. Would be a good example of where, tabindex, minus 1 would be useful. The. Third value is, to, use, a positive number. I. Really. Wouldn't advise, using, this, at all because, it creates an unnatural. Source, order to throw tab order to the page so. To take a quick, example if you had a page with say 20, links. On and, 15. Linked you. Set a tab index of 1 a, cyclic. Keyboard user coming to the page would, start at the top hit, the tab key expecting. To reach the first link on the page but, instead, would find their focus, deposited. At, the 15th link instead, major. Trouble if they wanted to get back up the page to any of the preceding, links it, really does just make, for a lousy keyboard. Experience, so generally. Speaking avoid. Positive, number values for, tabindex. So. Why, aria why was the specification. Put together why was it necessary, to. Describe this I have, to just say welcome, to my nightmare as a screen reader use them. If. You like some native HTML, you. Find that the accessibility by, and large is pretty, good and one. Thing that most HTML, elements, have is a roll we. Know what the HTML elements. Do assistive. Technologies, know what they do browsers, know what they do and it all comes together so we take this very simple, example on, screen it's just a common. Garden-variety. A. Link. And in. Terms, of how it works in terms of the accessibility. Stack the. Browser renders that and the dumb exposes. Information. About. It through the accessibility, API and. That information, says that this. Element has a roll of link the, assistive technology picks. Up on that information and conveys. It to the user user, knows what to do with the link and we're all good to go so. Native HTML, is a really, good place to start probably one of the cornerstones, of good accessibility. But. Then we get what I call creative, HTML. And that's probably putting it politely when. People, either repurpose. Elements. Perhaps, expand or div that, don't really have any semantic, meaning in their own right and.
Create. Widgets. Or other bits and pieces out of those elements and on. Screen here we've just got spam. Element, that's been given on click, functionality, to, have some kind of behavior. But. Otherwise have. No accessibility, at all and we'll look more at this in just a second, so Aria. Came, along to retry and fix some, of these problems, and. To enable. Developers. To create custom, widgets and do some other stuff that they're doing already without. Losing. Out on accessibility. So. Let's dance let's let's take a look a bit of Aria, in action. Okay. I see an example here again we've got a spam it's just got some JavaScript, functionality, so. From a mouse users point of view it's properly, you can take, a look at, this. Plan you can click on it and something, will probably happen but. From a keyboard, users, point of view you, can't focus on that piece. Of text from a screen, reader users point of view you've got no idea that it has any functionality, just appears, like plain text so chances, are you're going to miss out on it one way or the other unless you're, a sighted, mouse user. So. With a bit of Aria we can add in a roll the. Roll attribute, is one of those I mentioned that doesn't use the Aria dash prefix, but. It's very simple and in this case we've just added a roll of button to that span so. What happens now is if you use an assistive technology like a screen reader, you'll. Identify that element as a button so. That information is now being exposed through the accessibility API as, a link but Aria is changing. That information, and telling the assistive technology is actually a button. It's. Worth mentioning at this point that screen, readers are the only assistive, technologies, with any substantial, Aria support at all so, if, I tend to defer, to mentioning screen readers specifically, here on him that's. Pretty much why sadly, REIT recognition, tools and others really haven't been quite as quick to pick up on the advantages of Aria. Going. Back to the example so also. A screen, reader now recognizes. That this is a button and that conveys a certain amount of information about it it. Still can't be focused on so we're, still missing out here but. We. Can add focus, by using the tab index and giving it a value of zero which you'll recall I said means, that we'll place this element, into the natural tab sequence, of the page so. Now keyboard, users, whether they use a screen reader or not can focus on this a screen, reader knows it's a button but. It's still one piece of the puzzle that's missing. We. Need to add keyboard, support. It's. A common, misconception that. Aria. Adds functionality, it, doesn't, it just changes the information. That's available to. Assistive technologies. From, the browser you. Still need to add the functionality for, your widget or for, your in this case pseudo. Button and. When, you're thinking about adding, that functionality, it's really important that you add in the, keyboard. Handling as well I, am, a apology, to Patrick, he very kindly gave. Me a code, snippet for the JavaScript for key handling for this and I didn't have time to add it into my slides but I'll post it afterwards, in, this. Particular. Example what, you need to do is make sure that someone using a keyboard should, activate, the button using, Enter key or spacebar. And, and. Take, it from there so ticking, is to think about in your scripting, is that oh you need to provide the functionality and B you need to make sure that functionality, works with different devices.
Okay. So, let's take a look at some design patterns and these I think cover. Some of the scenarios that we probably come, up against every day I'm, going to attempt to show you or this play you some screen. Reader examples, of the experiences. As well, so. Hopefully that will all come together without too much technical, friction. The. First thing I'd like to look at is details. In summary two. Elements, that were introduced in html5, and, which. Create a disclosure, widget, that means you can toggle the, display of additional, content on the page. So. Here's the basic HTML, we've, just got the details, element, tucked, inside at the summary element, and it, says favorite Pink Floyd and, then. It's inside a space where. We'd add some additional content, before the, details. Element. Is closed, now. This is how a screen, reader would, probably. Report, this content. JJ. I. Hope. That came across okay but if it didn't all, it says was favorite, Pink Floyd just, treats it like a piece of plain text there's, no indication that you can, interact. With it press it hit it that any content, will appear no. Nothing so we need to do some stuff to fix that. We. Can add in some Aria, roles and just a couple here we've added a role of group to the details element, and, there just tells assistive technologies, that the. Elements, contained, within, that element all. Relate, to each other coming together for, some perfect grip. Isn't widely supported by screen readers at present but there's certainly no harm in, adding it now for, future proofing, because Aria, support is accelerating. Among screen, readers pretty much on a daily basis. The. Other element, is our favorite, rollers button comes in very handy that roll and. We're adding that to the summary element, so a screen reader now knows that it's, a button and therefore, that they can interact, with it. And. Again. There so now a screen, reader user will hear something like favorite. Pink Floyd button, and so, suddenly for that one little roll a, screen, reader user is aware that there's a button pretty, much we know what to do with buttons you can press them and we expect something to happen. Question. Is what's. Going to happen, and. Here we can use a bit more area. To make, that more evident, in the, area. Expanded. Attribute, on the details element, and. This will just inform a screen reader user what the state of that button is so how the content being expanded or, is, it collapsed, at present, and here's, the difference. And. So now not, only did we know it's a button but we know that the, button is active and that, something has been expanded. And from, a screen reader users point of view that just gives us enough of a cue then to kind of explore, on down the page and find, the content, or, conversely. If, we came to that button and the content wasn't expanded we'd. Be told as much which, would tell us what to expect when, we activated, the button so. Really, simple stuff all about informing, screen, readers exactly. What's available what's, possible and what's happening on the page so. Such, another solid-gold. Easy action, example. And that's looking. At a main, page, design pattern. To. Do this I want to go back a little bit to some HTML, 4 and on, screen we just put three dips, each. Representing. In turn, a header the, main content area of a page and the footer incredibly. Simplified. Of course for the purposes, of putting, stuff on a slide but. A pretty typical. Design pattern from html4, days. This. Is what happens when a screen reader user encounters. This code. That's. It absolutely, nothing at all this, is a semantically, neutral, element and screen, readers by and large will, ignore, it they won't convey any information, about it to, the user so. Back, in the HTML, for pre, aria pre html5, days there. Was no way for a screen reader user to really understand. Or identify, the, key regions. Within a page. Aria.
Landmark, Roles are the answer, landmark, roles are a subset, of the, wider, role, taxonomy, defined, in Aria and there's. A handful, of them each one corresponding. To a main, area. Of the page, sorry that was a slightly strange way to phrase it - - a high-level. Area. Of the page so. We've extended it now so that the div representing, the header has a role of banner the. Day of representing, the main content area has, a role of main and the div representing, the footer has, a role of content info, there. Are many more landmark roles for, things like search and navigation. But, these are just three quick, examples and this, is the difference it makes the, screen reader. And. So, for adding in those roles we've, enabled, the screen, reader to understand. That, each of those divs represents. A key region. Of the page and it'll. Announce as you heard the start and the finish of each of those regions. When. You understand that a lot of screen readers now have a shortcut key that lets you cycle, quickly from one landmark, on the page to the next you. Suddenly realize that what. Screenreader users have is, a way to, really, quickly understand. The, major components. Of a page for. Something that sighted people can take you in as a grants just by looking at the page it's, now much, more possible, for a screen reader user to, do something similar by, bouncing. Quickly from one landmark to the other to find out which, of the key components involved on the page. So. Happens when we get to html5. Well lots. Of new elements of course were introduced, in, this case for our example, we've got the header the main and footer, elements. Something. Interesting happens, here and this is how a screen reader would treat this code with no additional, area. Information. So. If you're listening carefully you've, probably noticed that that that sounded exactly the, same as the previous example and you'd, be absolutely right, I. Mentioned. Earlier, in the presentation that, all, almost, HTML, elements have roles natively. And in. Html5, the Aria, roles are, available. Just in the html5 code so, the header element, is, mapped, natively. To the, banner landmark, role the, main element Maps natively to the, main role and of course the footer to, the content info role so it means you don't need to, add the, roles in manually because the work has already been done for you by. The HTML, and by the browser I. Will. Say for the moment though it's probably, still a good idea to add in the roles manually. It's, a Bolton braces, technique. But. Useful, for, the simple reason that browsers. And assistive, technologies, in turn were. Quicker, off the mark at supporting, Aria than they were the, new html5, elements. So. There's still a variety. Of slightly. Older, browsers, and screen readers, that will support, the Aria, but not the new html5 elements. So, just to make sure you're capturing good backwards, compatibility, and the widest possible audience it's, still worth applying, those roles manually, for, now. There. Is one exception when, you're applying the roles manually. So the. Header and footer, if. They appear as the child, elements of another. Html5. Sectioning, element the example on screen is the article, element you, don't want to apply the landmark roll manually. Reason, being is that in the native HTML, semantics, the. Landmark, roles are, only mapped to, the header and footer elements, when the other children of the body element so, children of any other element that's, not the case so you don't want to force, that by applying the, roles man yelling. Ok. Let's. Take a look at a navigation. Pattern and walk this way if you will. We're. Going to look at an example here which. A first grant might look like a pretty reasonable design, pattern we've, got an html5 now, the element, contains. A list with the role of navigation. And, one. List item, obviously. Representing, where your navigation. List would go this. Is how a screen reader would handle this though. Navigation. Region, navigation. Region. End. So. You're here that the navigation region start, and end is announced twice and although.
The, List item with the link in it is mentioned, the, list itself, isn't, acknowledged. By the screen reader at all so, clearly something, a bit peculiar going on here and the right information, not, being exposed. To the assistive technology and, therefore, to the user. And. Basically. The problem, with that previous example was, that the role was in the wrong place it. Had been applied to the, unordered, list element, instead, of the nav element, now. If natively. Maps, to the navigation, role in html5 we, mentioned that relationship, before by. Putting that role on the list instead two. Things happened we duplicated, that, landmark role on the page once, for the nav element and, once for the list but. We also, overrode. The list semantics, so. If you remember back to the web accessibility, stats and information. Being exposed from, the Dom through, the accessibility, API that. Much would have said that the URL. Was a list but. Because we overrode that with aria actually. What the screen reader picked up on was that it wasn't a list at all it was a navigation, element and things got very confusing. If. We put the role in the right place on the nav element this. Is how a screen reader would announce it. Named. So. Now a screen reader user knows that they're in a navigation, region and, navigation, contains a list that in this case contains one item and then they get the list and the link and, then they know when both of those things end so, it's much cleaner less, duplication and. Much more informative, and, that's a lot, of why html5. And Aria is incredibly, important. To screen, reader accessibility. That's. Very much what the screenreader depends, on for. Its information, and that's of course what the user depends, on in order to get around. So. Let's take a look at live regions, these are really useful I chose, an atomic, vibrancy as the rock-and-roll track, and hopefully, the reason will become clear in a minute. On. Screen now we just got a very simplified. Version of a shopping basket the. Product, is tequila why not and button, to add it to a basket and then, just, after that a basket summary that, informs, the user how, many items they've currently got now, in a real webpage, of course these things would probably be, quite widely separated the. Chances are the button, would be in the middle of the page about the product but the basket summary perhaps in the head area or, tucked elsewhere.
The. Problem with this example, is a, fundamental. Behavior of screen readers they can only focus on one thing at a time so. In this instance if, you want to activate. The button as, a screen reader user you've got to be focused on the button which means you're not focused. On the basket summary and therefore, you're completely, unaware that, anything is changing, a bit like this. So. The screen readers they, add to basket button with the Enter key could, hear that being echoed back but. Assuming. That the. Transaction. Had been successful. The item had been added to the basket. Completely unaware that anything had happened. But. We can add in some area of course we can in. This case. We, can turn the basket summary into a live region and. What a live region does is say, to a, screen reader that when the content, in this region. Changes. Notify. The user announce. The changed content, to them so. We use the Aria live attribute. To, set, the live region and it, can take one, of two properties, polite. Or assertive. Polite. Means, the screen reader will usually finish, what it's currently doing before, alerting. The user to the change, assessor. If it means it'll be a little bit more pushy about doing that so, it'll just wait for the first break, in what the user is doing before making the announcement. It's. Worth knowing, for historical, reasons that there was actually, another value. Appropriately. Named rude which, would interrupt the screen reader immediately. No, matter what it was doing no matter how, focused the user was and interrupt, them with the announcement and. That proved to be such a dreadful, user experience, that thankfully it was taken out of the spec we've. Chosen assertive, here because, it's pretty important, that the user knows that their basket summary is updated, as soon as that happens, the. Other attribute, and here's where the rock and roll choice comes in is Aria. Atomic, and with. This set to true it says, to the screen reader that when any part of the content in this live region is changed.
Announce. All of the content, to the user so. In this case we're only updating, the number, of, items in the basket but, if, the screen reader were just to announce one or two with no context. It, wouldn't be particularly meaningful so, we're getting the whole of the text and the number change to be announced, so, it would work a little bit like this. To. Change what it is, so. From the screen reader UX point of view you're still focused on the button you've just hit it to add the tequila to your basket but. Without, changing your focus, you've been alerted, to the fact that that was successful and, you now have the item in your basket. There are lots of different ways you could use this, stock. Tickers updating, results from sports matches, anything. That kind of requires updating. One, caveat keep. Content. In a live region short, and sweet I have seen some examples where pretty, much the whole content of a page was wrapped in a live region and the. Last thing you want your screen reader to do when you're focused somewhere else is start, reading new pages. And pages of content so live, regions are great as alerts just keep them short and sweet to notify, people that, something has changed or something has happened. Last. Pattern. I want to have a look at today and this is certainly one that's really, popular, across. The, web. I've, titled it you ain't seen nothing yet because actually it brings together a lot of the Aria that we've talked about so far and a few new bits and pieces. So. Using a tabbed widget through common, especially when real estate is at a premium on web pages and the. Typical HTML, structure. For doing it would be to use an unordered list each. List item representing. One of your tabs and then. Some divs to, represent. The content area for each of those tab, interfaces. From. A screen reader users point of view this, is great but what you get is a list with a couple of links in that lead to content, elsewhere on the page and then. A couple of you know spaces, with some content in so, where is that possible. To access, it's. Not very understandable. In terms of the interaction. That's expected of you and. It doesn't really convey much about the widget as a whole. So. The start off with some Aria roles. We. Can add the role of tab lists, to the unordered, list. In. The navigation, example, I mentioned that it was generally a bad idea to. Override. The natural, native semantics. Of an element there, are exceptions, do and far between that this is one of them, the. Reason why it's acceptable, in this case is because. A list. Is a collection of list items and, the. Role we're overwriting, it with is tab list and a tab list is a collection, Tad's so.
Whether Your screen reader supports, aria and you get the tab list information or, it doesn't and it falls back to the HTML you're, still told that you're dealing with a collection of objects. To. Follow one with that logic we, add a roll of tab to, each. Of the links to indicate, the screen reader users that those are tabs. And. Then. If we move on to the. Actual. Disks where the tab content, will be held we. Give each of those a roll, of tab panel, so, we've got three rolls, that come together to create this particular widget tab. List tab, and tab panel and we. Need to start, creating some, further, relationships. Between those things. Okay. And the first thing we can do is to. Add. Another roller actually, of presentation. To, the list item and this. Is so that if you have a screen reader that supports, Aria so you're picking up on all the tab, lists and tab semantics, you don't also need, to know about the list items so roller presentation. Just takes, that list, item out of the equation, so Aria supported, screen readers but of course still lose the HTML, intact the, screen reader users who don't have Aria support. In. Terms of the Aria, we're. Going to add the Aria, selected. Attribute, in to. The links that represent, the tabs and, when. The. First. Tab is selected we've, given it the value of true as the, other tab in this example was selected your scripting with me to update those values, so only one, tab, at a time would ever have Aria selected, equals, true, set, the others would be false and, that pretty much does what it says on the tin it tells screen readers which, of the tabs is currently, selected. Then. We can add a little more Arion. We. Can add in area controls, and, what. Aria controls does, it's a, relationship. Between the cab for the bit that you click on or you activate. With your keyboard and the. Actual content, that it. Displays and. We just do this by hooking up the IV value of the tab panel with the Aria controls attribute, on the link. As. Last, little bit of a things that we can do so. This is really going to bring lots of things together we. Should just make sure that the tab. Panel the content of the tab itself has an accessible, name and, we just use the, area. Labeled by attribute, to do that and. Because. The. Content. Of the link ie the tab text, if you like it's. Already visible on the page we can just hook it up using Aria labels, by using. The IV valium. So. There's a lot of stuff coming together in that so. I'd like to do is show you a demo. This is taken, from some. JQuery, UI, demos, that, my, friend and colleague hands Helen did a lot of work on a few years ago and. One of the best examples, still in. Terms of how it works. Control. Dance, cache selected, one of three texts. I've selected two of three, sheets. Have selected, three of three. I'm. So there what you heard was as, the screen reader moves through the tabs it, said have, one of three tab 2 of 3 Tab 3 of 3 so, that's the collection. Semantics, coming true you know you're doing with a collection, and how, many there are in the collection and then, as a screen reader selected. One of those tabs, focus. Moved straight into the content area and that happens through the Aria, controls. Relationship. And. We were told that that had expanded so we knew that content, had been brought in to display. And. Then it just started to read the content within the tab panel, so, what. Went from the just a couple, of links in a list with some content, further down the page now. Becomes, a much more cohesive. Interaction. From, a screen reader users point of view just. To. Wrap up a couple of resources which I really recommend, you take a look at apart from the specs themselves. There's. An aria authoring, practices, which has these design patterns and lots. Lots more will cover pretty much everything you, could do with Aria and. Also. Aria. In HTML. Whenever. Editor you use to, do, your HTML, and. It's. Just you. Know part. And parcel of coding HTML I. Mean, I happen, to use one called edit plus because. It works nicely with my screen reader I, think. Note tab is another one that's kind of popular but you know whatever. You code HTML and you can just add the Aria into. It's. Really, important, it comes, back to. The. Point I made earlier in the talk about needing to provide, keyboard. Handling, so. If. You come across a tabbed interface in, a software application. The. Customary, keystrokes, to, move. Between the tabs once, you're focused on them is to use your left and right keys, or in some instances your up and down arrow, keys, in. The web of course we need to add that functionality in, and. It really can help feel more. Or maybe the widget feel more, familiar.
If You like. I. Would. Hesitate to say which is the best one because, there are really good free, options, pretty much for all platforms. If you develop. And you use Chrome chrome, box is a great option. To use to. Develop on Windows but prefer, not to use Chrome. NVDA. Is an excellent choice. NVDA. Particularly. In Windows, when you're testing. Content with Firefox. And ie. If. You have a Mac of course you've got voiceover, built in just. Hit command f5 and, turn it on it's. Real enix developer. With. One of the destroys that supports it Orca, is a good screen reader so there's really something for every, platform so you, know just play around with whichever one fits the environment, you happen to work in. No. Surrender. When, someone hits the enter key and. This is irrespective, of accessibility. Some, JavaScript, functionality will kick in to add one. Item. To your basket and to update the information that's in the live region and, as soon as that information is updated in the live region a. Screen. Reader will pick up on that change and just announced the change straight to the user without them having to do anything at all so they don't have to move their focus they don't have to execute. Any keystrokes, nothing at all as soon as they hit the button, to add the product that. Live region, should kick in and the screen reader should announce the change. No. Reason. Being that because. From a screen reader screen reader user point of view your focus doesn't, move. When. You announce forum. Errors, if. You put them in a live region your screen reader would announce them as they appeared on the page but if. You imagine there are maybe six or seven errors, in that, form field you've, got to kind of commit, them all to memory or go, and find the area of the page where the live region is. I'd. Recommend, for format errors actually using. Either. Just a straightforward. Alert. And taking focus to it so. Just a div may be used the group role to indicate to screen reader users that, there's. Sort of a theme to the content. Contained within the div for the heading within. The div and there may be a take focus to the heading and then underneath that. Each of the arrows with me different. Feels and if, you can make, each error a link down. To the corresponding. Offending, form field so from King, excuse, me keyboard, users point of view you, can just use, that link and then head, straight down to the form field that needs attention so, short. Answer is move focus to arrows. With form fields because then someone, can kind of browse through them and peruse, them and deal with them one at a time. Okay. Because. It means we're customers at the moment are missing out on a lot of really useful and interesting stuff. Really. Simple, example actually is that button. Example. I looked at right back at the beginning where we added role of button to a span and, much. As a screen reader of course will identify it that as a button speech. Recognition, user, won't. Recognize. It as a button and if, you've, styled that span to look like a button the, chances are a speech recognition user.
Will, Say something like click on Next button because, it looks like a button but of course their. Tool won't recognize that command because fundamentally. Under, the hood isn't. A button even with that role implied. So. I can only hope that all. Speech, recognition tools get, their act together soon and start implementing some support. I'm. On Twitter anyways, if anybody thinks of any questions later on feel free to ping me. Everybody's. Got to be somewhere. Great. Question thanks Sarah it. Depends what you're building. Don't. Use Aria for arias sake. Look. At what you're building what you're creating, and then. Look, to see how Aria can be used to make it more accessible. So. It. All sort of comes together so, unless you're doing something very simple like also. Over at button, roll the. Chances are you're going to need a sprinkling, of rolls, and States and properties so, start. With whatever it is you want to build use. The authoring, practices, document, I posted. The link to to. See if there are any recommended, design, patterns. Keyboard. Handling patterns, and take it from there and just have a go. There. Is one more resource actually, I'd recommend, is our website called Hayden works calm, so he's doing a talk later on for us today. At, HD why do n wo. RK, s calm, but, he's, got some really useful area. In action, examples. And articles, on his blog which are well worth checking out. And, next time thanks. Everybody.
2019-07-07