Angular, Ember, React, Backbone, Spine…Without a doubt, client-side MVC frameworks are on the rise. But, did you know that without extra care, many people won’t be able to use our web applications? This talk will highlight the accessibility challenges with JavaScript MVCs and propose solutions to make our apps more accessible to keyboards and assistive technology, including focus management, ARIA live regions and JavaScript testing.

• » Seattle, USA
• » Website
• » Github
• » Twitter

Transcript

> All right. Volume is good. Hi everybody, we're going to start things off with a little video of a web site that has been called "very slick" by multiple media out lites. Virgin America, it's very fancy, cut down on the number of screens that it takes you to buy a plain ticket. We're going to demo it in JAWS which is a screen reader. (Tab ... book link tab tab, tab, tab, tab, tab, tab, I'm just tabbing, sign in link, ‑‑ sign up, links, tab, San Francisco, liquidity, oh, I see that, Boston ‑‑ what does that do San Francisco link ‑‑ okay,i guess I'm departing from somewhere, I don't know what I'm trying to book. Tab, tab, Los Angeles Las ‑‑ paren, paren, link, okay, I guess I'll just leave from Los Angeles Las, but I don't know how the use this web site, if I can't see it. Now it kicked me all the way back to the top, even though ‑‑ even though I should be down the screen, oh, ‑‑ paren link ‑‑ there was an alert there. At the top of the screen, when something happened I made a selection there was a big banner at the top that said hey, you made a selection if I moment a visual user I have no idea that that occurred. So now I've been scrolled further down the page, this is part of a user experience that's very visual, but I have no idea where I am in this flow. (I don't see Fort Lauderdale, that's somewhere else on the screen. (All cities link, tab ‑‑ that's not what) I that's not what I'm trying to find, that's frustrating. ‑‑ okay, I must be related the numbers down below. Tab, tab, tab, tab, add link, tab, tab, zero ‑‑ tab, add link, tab, tab, subtract link, tab, tab, >> still don't really know what I'm trying to do here. >> Shift tab, enter. >> So there's another alert, I didn't hear it. >> Tab, tab, shift, tab, now I'm on the calendar selection, ‑‑ continue with two adults, ‑‑ show my dates link, I'm skipping before and after the calendar, and I can't figure out how I'm going to book these dates, so not only have I picked a destination and a departure city that I didn't really want, I just couldn't use this thing, that's really unfortunate, really slick web site, not if you're using a keyboard or a screen reader, that's a good seg way. What could improve that? If it was accessible anyonee anybody could use it. A web site shouldn't drum to say oh, well you can't see, well you're not going to fly on virgin America.com. We should talk about accessibility of accessibility, out in the real world people are forgetting about it. Accessibility to me meanness my friends and family can use any web site that I have created or that I send out in a tweet or Facebook, it also means that if I lost my eyesight or hearing I would be able to continue to use the apps and web sites that I used before. Another way to think about it. The actual definition here, accessibility means that everyone can perceive, understand, navigate and interact with the web and they can contribute to the web. So if you're building Dev tools or some tool there are blind developers there, are people of all different abilities, that think need our help. If you're the type of person that responds more to numbers, here's some numbers for you from from European disability forum. 80 million Europeans have disabilities, that's fifteen percent of the population, according to their figures, that's a lot of people. We could think accessibility is about people, it's about your neighbors, family, it could be use in the future, we should be taking care to make sure that user experience that we create and the interfaces that we code are accessible to everybody. You might be thankful later that you actually took some time. Today I'm going to talk about JavaScript for everyone. And specificically, accessibility of accessibility of JavaScript and DC framework, I'm a developer at substantial in Seattle. ‑‑ design component, I'm going to have a lot of Angular in my code today, it's not my favorite or anything like that I just happen to be most familiar with it. I co‑chair for girl chair in Seattle. It's way to give back the my computer and support my fellow women in tech. Oh, and my goal today, I should remember that, is that I want to arm you with the ideas and the concepts that you need to make your web sites accessible and your JavaScripts applications, this is very front end focused, obviously very tied to HTML and CSS, we oar focusing on the JavaScript delivery part of, that you're creating HTML with JavaScript, we should know what it takes to make that accessible. The con noncal example for MVC framework is . MVC the 2, the baseline of these frameworks differs whether they're accessible how much support they can give you, some of the ones I've worked with bange bang bone, spine, ember, I haven't used react, I'm curious about that, if you have ideas about react accessibility come find me, then famous, that have admitted that they're not supporting accessibility yet, it's a hard problem for them, they haven't focused on from the start. I would challenge you to consider whether you need to use framework for a production site that has admitted that it's not accessible. It's irresponsible, so chose wisely. We're going focus on the common aspects of MVP frameworks that it doesn't really matter which one you chose, the common things in these framework s is that they're client rendered applications you're using JavaScript to inject HTML, make it interactive, you typically separate your code into different concerns, models, views, controllers, routers, whatever the pattern is that you're using, it doesn't really matter, it's the quality of your application, it's client reverend, it's asin concurrent resolution nows, and has happy responsive interface, how do we make that accessible. Are you apps accessible? It could depend on the framework, if you're using famous, probably not, if you're using ember or Angular that will give you little help. If you're trying to chose framework you should consider the things that we're going to talk about today. I could depend on screen reader browser combination that your end user is using to access your site. And then finally your code is the biggest variable here, I have asterisks next to the framework and your code being the things you could potentially control to varying degree. Your code, that's the thing you is the most control over. But you can also contribute back to the frameworks on GitHub, that's what I'm doing with Angular, try make t more accessible, get the framework to help you more and do the heavy lifting. If there's way to contribute back to the framework, do it, it's awesome. So the goal to reason that, you're probably all sitting here today you want to know what is it in single page applications that's challenging with accessibility. I have listed managed ARIA attributes, I have it listed first because of the big push for web components, custom controls in Angular they there are directives, ember has custom components, you're quiting custom HTML that have no definition, no meaning, no states no properties. You want to uniKate to users of assistive technology, screen reader, magny if Iers, communicate in a non‑visual way the purpose of your application and the purpose of it. Enabling the keyboard, this is not rocket science, not hard, yet we always forget about I. Virgin America was a big offender of that, when I tapped through page, no visual focus style, no way for me to know where I was on the page. And then, we oar also going to talk about handling focus, this is tied along with enabling the keyboard, in a JavaScript MVP application depending on your template solution you might be updating your application by ripping out parts of the DOM and putting them back. If you're using a keyboard that can be a problem, as we saw with virgin America when it changed the careen we didn't get a page reload it scrolled me further down the page but my focus was jumped all the way to the top, for a keyboard user, that's not fun user experience, it's not what you would call "slick" if we're ripping out the DOM and putting it back, we need to guide the user through the experience by sending their focus around, that's really useful thing in JavaScript MVP applications, you should remember that before creating these custom controls or adding ARIA, you should try to write meaningful HTML and native HTML, I'm not going to ouch to on this much today in MVP App we saw when there was a big alert and it didn't tell me if I was a non‑visual user you need to alert the user this thanks are happening on the screen, maybe their focus is on one part of the application and something is happening elsewhere, it's filtering or maybe they had an error in their form submission. We need to actually tell the user that something else is happening. So,let's talk about ARIA, stands for accessible rich internet applications, the idea is that it's a set of attributes you use to expand HTML's semantic vocabulary, you can fill in the gaps where HTML ‑‑ you're creating custom elements you have to define what those are, if you think of a form input that has properties, it could be disabled, it would required. In a screen reader, it's communicated that is a form element. If you're creating a custom element, you don't get any of that for free, you can use area to add some of that meaning. The first core component of ARIA is the role, you think of it as what does this thing do, my example is I have aiv. It has a style ‑‑ a Div ‑‑ you might think that why isn't it just an image tag. CSS background images have a few more options, and maybe you want to make scaling background images, in the real world this happens to communicate the purpose of this Div, which is presentation related, I can make it a more one to one experience by communicating that this is an image, if I add a role of image to this D ivy all it has on it is a style of background image. This communicates a purpose, they can't see the image, but at least they know it's an image not just some empty Div sitting there. The next piece in ARIA core components is the state, the current condition of this particular thing, I mention in a form input might be required or disabled. A state tends to change depending on the state of the application, here I have a material input, which is like a custom input tag, and since it's a custom element, I can't make use of the actual disabled attribute. So, you might wonder why would I use ARIA, if lease already a disabled attribute, it only works on certain elements, if you're creating a custom one you need to expand the vocabulary, that item is disabled. And then you can update it depending on what the interface is doing. And then, lastly if ARIA core components there are core properties, they tendless often than states, I have a Doner‑Kebab element, not a taco butt son, it has an ARIA label, it's a Doner‑Kebab, it might have Angelina Magmum bringing us lunch. No today ‑‑ it's a piece of off screen piece of information that tells the use wharethis thing is it's really useful. Every form input needs a label, sometimes you might not have label as part of your design, either you could put a label element off screen or add area label directly on the input and add confection to a non‑visual user ‑‑ add context to a non‑visual user. Firstly the element types like we saw with the image, there's headings, let's see what else is there that you might use, there's links, forms, where's some other ones, lists. The idea with a role is it communicates what the type of element is. It will be announce in the a careen reader. Secondly, roles can be used as landmarks, by landmarks for a screen reader they can jump around a page without having to use the tab. They could navigate through beige by navigation elements or maybe you have a main element indicating the main body of your document, so those are useful to users who maybe aren't using a mouse. So you also want to start with native HTML tags, you get a lot for free, attributes, keyboard vents if it's an interactive control, if you most use custom elements read the ARIA documentation, which I have in my slides, if you're using a certain role, what the expected keyboard behavior is. If it's a button, you expect it to be engaged with the space bar, so those are things that you need to know when a certain vole announce in the a screen reader, that user who's expecting it to behave in a certain way you will have thought of that and you can bind the JavaScript vents to make it work the way they expect. Don't over do dew it there is such a thing as too much ARIA, you want the simplest extras possible, to communicate the state and properties of your application at any given time. One role that we should talk about is the application role it might be tempting to put this on your JavaScript MVC apps, because they're applications but there's a concept here in screen readers that you should know about there are different modes, the detolt is a virtual cursor this does not pass every key back to browser directly, it's buffer beteen user and browser, we talked about landmarks there's a way screen reader users can navigate a page using different key commands, the virtual cursor handles those, if you disable it, you have the ability to disable it, then you're going to send every keyboard command directly to the browser, if they're trying to navigate by headings, they might not be able to. You want to limit use of this to interactive controls that are more advanced, that actually mimic desktop applications specifically. Unless you have a really good reason and you know how how toous this role, just avoid it. Especially don't put it on the body element, even though it's tempting, I have an animated give and just body rolling away if his responsibilities because that's what you're probably go dog if you use this role, meanwhile you're probably going to be making your application unusable to people with disabilities. So how do you decide whether to use the application role? If I have a Sparkel party application, for example, and it has a couple of advance things in it like a kiss COBAL if you start dancing it will spin the disco ball, it looks like an application, it has a heading, button, things that maybe the user would navigate by heading, we don't want to disable the virtual cursor, in the disco ball element, maybe I could, it's probably going to cause more trouble than it's worth. I'm just going to leave it off. One thing I did add in my pseudo code application is inside of my disco ball element I have a condition vas that will render some element of the disco ball, how would the non‑visual user know this is happening, how would I make this interesting to someone who can't see it I've add add paragraph that I can just append text to, there's a concept called ARIA live, this would be useful on virgin America.com, when they had the banners on top, if they added ARIA live element, off screen, it has to be rendered, so it can't have display none, if it's somewhere on the page, if it's polite or assertive, differing levels of rudeness; once you append text to the thing, it will read it allowed on the screen reader, when the disco ball starts turning we could send an alert to the ARIA live region, all right, when it stops you can stop dancing, if the disco ball is not spinning why you dancing. So, that's some ARIA stuff, let's talk about the keyboard. This is something that we forget quite often, it's low hanging fruit, stuff that you can do to really improve the state of the web. The easiest thing you can do is add a tab index, tab here I have on a Div it's not an interactive control by default, swap it out or some ember custom component something that is not in the tab order. By adding a tab index of 0 you add it. Content editable is something you can add to HTML and it does a similar thing. If it has tab X of zero, I can tab on it. If I add negative one it pulls it out of the tab oridance oh, I can still use JavaScript to script focus to it I's useful. I will say avoid numbers higher than zero what that means is that you're determining the actual tab order of everything in your page, upless you want to manage every single tab index you can easily lose track and your footer can come before everything else on the page, if you use 0 it'll keep the natural order of the HTML hierarchy. Make a logical tab oridance e. An example of what not to do. I have see this all the time, and it's pretty easy to fix, but I have a Divev that has a CSS class on it. And I'm using large here because it cuts down on the amount of code I have to show you. I can bind JavaScript directly on HTML. It's not a judgment, it's really easy for me to show it to you, but, you cold imagine this abstracted into a special JavaScript file with your framework of choice. But, the click event that we found here, I have this little hamburger button, if I click it, it opens a menu. But if I try to stab on to it the, I can't get to it, I just can I want around every element that has a tab index around everything. Don't do that, if you have a hamburger menu it should be in tab order, it should be a button, not a Div. How do we fix this if I have a button and add a tab index to it, okay, it has a click, you think this would work, but if I tab on to it, like that's Whoo‑hoo, if I hit the enter key, I can't engage this thing, which is a bummer, what's up with that, that means we can't see the spicy C hierarchyiuawha dancing in the background, not cool. How do we fix this now ‑‑ by adding tab index, we can tab on to the dance button, we had a role button, I want to communicate this is a button to a non‑visual user, I have the NN click the same, the extra step because this is a custom element, I add tab index to make it you could tab on to it. It doesn't natively fire the key press vent that we need. If I add an NG key press and fire the same event as a click vent all of a sudden I can hit the space bar and we can dance. All right, let's dance more after this, though, because that's awesome. So, one little last piece of low hanging fruit that I would really love to see ‑‑ this would of helped virgin America a lot. Any element that has tab index, this is kind of a pseudo select index here of tab index of zero, any element that's in the tab order, if you define a hover style in CSS define a focus style right along with it. Knock it out at the same time, super easy, you, have to remember you can't focus on something that you can't tab on to. I know this is JSConf, but this is super easy win, just do it. You might be wondering why I'm wearing gold pants, I don't know if you were wondering about that, I think they're town wear, I was inspired by Tom Dale co‑creator of Ember.js and wearer of PartyPants thankeds Matthewburgman for the photo. I figured since I was creating an ember demo that I would make it related gold pants and so to make it accessible. I have could add a caption to these, so, right now I have existing caption options of Ow! My eye and shiny. We could say Tom Dale's fantastic gold shorts, if I hit enter my little demo adds it to a list of radio buttons, if I click it, it will select and because I have bound this attribute in my amber demo, we can see down here if the Div tools that it now has an attribute of Tom Dale's fantastic gold shorts, dynamically updated without having to refresh the page, add context to this little demo. It illustrates that ember can be used to dynamically attributes, so let's look at some code of how that worked. 6 custom components in ember are pretty cool, kind of similar to Angular where but can create custom element. The default component is a Div, if I wanted to spit out a custom element say, PartyPants, I could change the tag name here where I set up my custom component, I can change the tag name. I'm spinning out a custom element, I is need to add some area to it. If I add an ARIA rule, another appropriate ember will give you, I'll give it an article, not the most meaningful element ever, but I can communicate that it's a little more interesting than a Div. And lastly, ember will really help you out with attribute binding, I'm binding a tab index here, attribute bindings are things that you can dynamically compute values and undate on the fly. In is the ember way of updating attributes. So, are there places where your framework can help you do some heavy lifting in in Angular there are places where we're trying to make that better. If you have ideas for other frameworks, by all means, it's cool to see the stuff help us out a little bit. I have an example here of bootstrap, they have an accord crane group component, it comes with two properties, is open and is disabled. Those don't mean anything in ARIA speak, so, how could we add those. If I manually add them in line, I could say, add ARIA expanded of true or false to indicate whether the accordian is open or closed. If I wanted to communicate whether it's disabled or not, this is kind of verbose all of a sudden, how can I reduce this redundancy, how can I make it simpler, if you put in a single attribute, NG expanded or NG disabled and the framework injected the air are far you that framework is helping you out, less points your application could break, things where the framework is handling it for you. You might think though it might be useful if the fame work would detect whether you'd already add aria, so those are things that we look at when we add stuff like that. I mention I've been contributing to Angular's design components. A set of styled components that people can drop into their applications, they weren't very accessible when I was brought on to the project, which is why they brought me on to the project. It's been cool adding ARIA. Good example is the radial buttons, they have pattern, wrapping element, material radio group element, looks a lot like our PartyPants elements, it doesn't have semantics, no tab index, doesn't communicate wait does. Inside of the material radial group there are individual components of a material radio button. Those don't have any meaning either, so how do we add that? Well the real live version of this, now that I've spent some time with it. This is simple if Id to reduce the amount of code to look at. On the outing radio group directive toker ‑‑ I'm adding a tab index, so you can get to this control, and I'm wearing a key down, if you remember our dance button with the little dog you couldn't fire that with the keyboard. If we wire the key down, check if using left or right arrow then I can fire the events to change the radio button, if you read the spec for ARIA, you'll learn that the expected pattern for a keyboard user is that you tab on to the control and use the arrow keys to toggle individual radio buttons, so, that's why it's important the read the ARIA spec, so then if we dive down into the individual radio buttons inside of this parent element, we can add a road of radio to each individual radio element, and then we can add an ARIA label to say what the thing is, we can update the ARIA check attribute to check whether it's engaged or not. Depending on the type of control, with these it was pretty obvious that there were existing ARIA patterns that just mapped directly on to this material component stuff. But you might be creating more innovative custom controls that maybe ARIA hasn't established a pattern, you have to use your subjective brain power to determine what might be appropriate for those elements, for those, it was pretty obvious that the existing ARIA patterns worked really well, the aid row group, all of that stuff. So, that was about it today. I have some slides, they're on GitHub, short UL ovinia.cc/MVC‑a 11y,I wrote a Blog post on auditing a web site for accessibility. It lists tools and techniques to determine what's happening with my web site and mobile apps, that might be useful. Also the chrome accessibility Div tools are useful, they can plague problems with apps, diagnose them and help figure out to fix them. The accessibility project might be useful. So, we are going to end with a dance party, we're in Berlin, when else are you going to do a German park party. (I love to sparkle... ) (Applause) Edit transcript via pull request.