 Welcome to DrupalCon. The session is JavaScript and Accessibility. Don't blink and sever it, do felt. Did to be presented here again as well. Presentation, I'm blind. I'm gonna have this earbud in my ear during the presentation, just so that I can listen to my notes. One of my colleagues, Lee, in the front row, here is driving the slides and she'll try to keep up with me as I'm going. So thanks once again, everybody, for coming. Before we jump into the session, I wanna really just start by saying really this session revolves around a clear thesis and like any thesis, I'm certain, any good thesis, I'm certain that there are people in this community and perhaps even in the room that might disagree or disagree strongly with the thesis and that's important because it's only through sharing ideas and agreeing and disagreeing and combating back and forth around those points that we learn and that we grow as a community. So before I dig into the details, I'll kinda do the spoiler alert, here's the thesis that I'm here to share. JavaScript is not to blame for accessibility. There might be good reasons not to use JavaScript in your application. There might be good reasons to use JavaScript and to build using progressive enhancement. Accessibility for persons with disabilities who use modern technologies is not one of those good reasons. So if in your mind today, if you've come to this session and you're asking, am I allowed to use JavaScript? Doesn't JavaScript create problems for accessibility? My thesis is the answer is no. So who am I? My name's Everett Zufelp. I'm the director of technology at MyPlanet. I've been working at MyPlanet for just about six years now. I started speaking at DrupalCon in San Francisco in 2010. I gave a quick five minute lightning talk on accessibility during the core track, which I think at that time was one day in advance to DrupalCon. It wasn't a track like it is now running through the entire conference. I was the accessibility maintainer for Drupal7. I've participated in the HTML working group at the W3C. And right now what I'm doing at MyPlanet is I'm supporting a growing team of technologists who use Drupal and React and other open source technologies in order to build cool solutions for our customers. Some of the things we're gonna cover today, I wanna go over this in advance so that you can decide if you're in the right session. Imagine if I'm gonna give a little bit of a background on myself and explain some of the barriers that I personally have run into with accessibility on the web. We're gonna talk about a few myths about accessibility. We're gonna talk about the truth about accessibility. We're gonna talk about affordances. And for any designers in the room, that term probably resonates. But for people who are maybe less familiar with interface design, we'll do a bit of a refresher around what an affordance is and why affordances are important. We'll talk about JavaScript and its role on the web. We'll talk about how browsers take information from HTML and the DOM and map that into something that assistive technologies can make use of. We're gonna talk about the div problem and how we fix it. We're gonna talk about some complexities, outside of maybe some more, I'll use the word monolithic, but outside of applications that we might be familiar with where each page of content is a single request and response from the server. We'll talk about things that are more application-like or single-page apps and where some additional complexities around accessibility emerge. We'll talk about some complex user interface components, things that don't exist in the HTML5 specifications so that we need to go out of our way to write even more JavaScript in order to make those items accessible. And we'll talk about what we can all be doing next in order to progress accessibility on the web. So a little bit of a background on me. I was born with a degenerative eye disease. I was born with glaucoma, but it's called congenital glaucoma. Most people, the vast majority of people who have glaucoma get glaucoma later on in life, either as complication from heart disease or diabetes. I was born with glaucoma. It's a progressive eye disease. There's not really, you can slow it down, but there's not a lot you can do about it. So from a young age, I knew that it was highly likely that at some point during my adult life I would lose my sight. I learned web development in the late 90s, so let's talk like 96, 97, 98, where you were writing one page for Netscape, one page for Internet Explorer, and then sometimes two different pages for two different versions of Netscape, two different pages for two different versions of Internet Explorer. It's around 2004 that I completely lost my remaining vision. And I'd say it's probably been, I was trying to answer this question for myself earlier today. It's probably been about 15 years that I've been working with assistive technology to create situations that have happened to me. You referred to a popular social media platform and it was impossible to register. Just something about that registration form you weren't able to register. Imagine a popular online shopping site, you're 30, 40 minutes in, it's completely impossible to check out of the store. Imagine if you log into an application for your job, maybe it's an HR application, and your colleagues are telling you, yeah just go push the request time off button or whatever other task you're trying to complete and those buttons don't exist for you in the application. Imagine if you're trying to book a hotel room or a flight and you just, no matter what you do, cannot enter the check-in date or the departure date that you're trying to use. Imagine if you're working with a software delivery team like I assume many of us do and you want to contribute to planning with the team but the task management tool your team uses makes it impossible for you to move items around the board, group them into sprints or prioritize them with your group. So these are all experiences that I've had whether in my personal life or my working life, barriers that I've run into because of my disability and because of the assistive technology I use but moreover because what I will assume to be very well-intentioned web developers didn't have enough understanding of how accessibility works on the web to be able to make those interfaces accessible. Abilities don't use my web application. Years ago I was doing a bit of an introduction to accessibility at Ryerson College in Toronto and they asked one of the students said, well I'm building an online store that sells art. So clearly that doesn't need to be accessibility accessible to people who are blind. Screen reader users, script. So the screen readers obviously they can't use JavaScript. Accessibility, that's only a half myth. I'll let you figure out for yourself which part's the myth. I'll make a bold statement here that if the goal of being a goddess possible audience of users then it's absolutely an important, we've never tested it. The second to last one is daily in the United States. Nobody in my industry has been taken to court and over the last couple of years there's been a VA against retailers and other businesses across America. Universities, retail business, grocery stores, athletics companies, absolutely. Unless you're in a very niche industry somebody in your business has been taken to court. The last myth, JavaScript is not accessible and quite clearly it is. Got a bit of a quote up there and if you, I'm not sure if you can see but if you take a look there, this quote's from WCAG 1.0, we're on 2.1 now. And 20 years ago the recommendation was make sure that the pages work when scripts, applets, everybody remember applets and other programmatic objects are turned off because those poor folks with disabilities can't use those types of tools. And they couldn't, this wasn't wrong. This wasn't a wrong recommendation and it wasn't a wrong approach. But this was 20 years ago. I could still see when this was a recommendation. I was just barely learning how CSS and HTML all work together back in the late 90s to build website. This is not, confusion has come from because many, many years that, and we all did this for the purposes of accessibility. Some truth is about accessibility. Accessibility is a human right under the United Nations Charter for the Rights of Persons to the end of the world. They're slightly skewed toward ability. You're not going to interfere with your work. You're not going to make your easy thing to start. That's absolutely specific domain knowledge. That's why I'm here sharing with you today. Doing is better is going to make your application easier. I pulled from about a year ago less than sevens about JavaScript accessibility. So you're in good company with 75% of your peers. So why did I want to talk about affordances here when we're talking about JavaScript? So, although JavaScript can be used server side using solutions like Node, the aspect or the usage of JavaScript that has done accessibility by five groups used in the browser, the user experience, and to add interactivity where interactivity doesn't exist natively in HTML. And when we're talking about interactivity and we're talking about user interface design, we just, by necessity, we're talking with the term. The ability for us, typically on the web, it's a purpose of an object when we don't have access to that object. I can't touch it, I can't feel it, I can't visual language we use and patterns so that you can believe drop-down menu. As it has to do with listed affordances, these are easy that that's interactive and that if you click it, something will happen. You don't know what's going to happen, but you know something's going to happen when you click on that link. Pattern is on a website with an arrow pointing downward or perhaps an arrow, see that, and if that arrow is close enough to the word or the phrase, you infer that there's some amount of interactivity that when you click on that word or phrase, it's going to expand. Hidden affordances, these ones become a little bit more tricky. Hidden affordances aren't revealed until somebody has done something. This might be the little question mark beside a form field element and you've learned over the years of interacting on the web that if you hover over top of or click on that little question mark, some more information's going to appear. Negative afford to submit button and there's a level of opacity applied to it. It looks like it's been disabled. Well, that's an affordance as well. And most of these affordances and most of the behaviors that we're talking here, perhaps with the exception of that last one, but even with the last one, most of these affordances, the behavior behind them is JavaScript. So we're using CSS, yes, to visually represent the affordance, but we're using interactivity. Quite simply, it allows you to create dynamic content on the web, it allows us to do more than present a document that allows us to engage our users through a level of interpreter than clicking on a link and loading the next page of content. Into basic for some of browsers and the DOM is not HTML. Even with HTML and DOM, very, very different things. How's the markup language? It was able to embed images. What it is is a text file. It takes people and can be rendered in a browser. It generates. Once, more importantly nowadays, use DOM is almost underlying or a very minimally underlying source document that loads JavaScript. The JavaScript creates all of the DOM elements, whether you're using React or Ember or Angular or just using jQuery straight up on its own. All of the items, all the elements in the DOM are created by JavaScript and some of that content is embedded in the JavaScript. Sometimes that content is retrieved through a callback to a web server in the last couple of years with Drupal, but there might actually be in your application very minimal HTML. There might be only enough HTML to load the JavaScript on the page that works as the basis of that single page application. It is a source document that was HTML into a document object model. The object model and turns it into or exposes it as an accessibility API. And it's that API that, and it's different on every API that is to both to interact with that of active elements are really a sea of divs and spans. So, obviously, when I, I'm not hearing divs and spans, but I'm really getting no and perhaps a common complex from scratch rather than just using a plug-in. You know how many considerations need to go holding a calendar on the web and all I hear one, six, seven, there's nothing that indicates to me that there's nothing that indicates a month of the year or what year I'm on. It's just this sea of numbers on the page. Now, you learn a bit about it, but it doesn't tell us that it's a link or I've learned that that's probably a button. That's probably, to wrap to the word, save in a diverse span. And they added a click hand to that diverse span. S and D, if I simulate it with my virtuous, it will save when it is I'm working on. Buttons, I'm gonna go be bold here and say you have excuse for buttons. They're into each other's calendars. For things, we've been using in popular culture as the most common components to build an exception. You don't really have miners, you don't really have a lot of items on how to do it properly. And then a div and you put a click hand button element. But a calendar, they ask you to build and if you need it. And so that's why a few of the specifications. And I think that the three C got together and said that maybe gritty being used on the way, but that don't age TML together and they define the twidge around roll with roll give that you can now add dom will troll equally to a in the excessive with a few understatement of having these area documents. Areas now part of the age. Ters didn't make the age with age five, which is not document anymore web applications were used with the API is being created by style things and to add behavior applications to the work around this one, I type in all the search results page because my screen readers. What was I hear on? So now as it's on that page is there here for my screen textual afforded in the same view other customers using a visual. The next departure result sorted by this lowest. It's an indicator to me that the concept sometimes they're able to in action on Thursday when I get on to that indicates to you something's face is traveled or otherwise kind of leave the assistive technology you spend alert you don't really know what's happening. Do I have to go literally I have no idea. The next thing I hear on the expedia site after I for nonstop reads filtering and a moment later it says filtered. The Expedia has done an excellent job at what is actually a fair one level to communicate visual of filtering on data and the readiness of and by just simple statements about what's happening people can see happening in the browser frustrating or experience for me and turn that is actually quite do these things on Expedia on your own. I have I'm doing live demos of the conferences. The reality types of rooms are not really amenable to having somebody who has never heard who is only seldom listened to hear it. Hear it talking echoey room. You just you just don't. But if you were to go and check that filter those results and then if you open the bottom of the DOM you message that would be sitting there is text at the bottom of the DOM and how that works is using something regions. So we talked about Aria is accessible. We talked about the fact that there's different so for a lot of these more components that we want to be adding to our web page that Aria create a broad. Own in Aria it's not really a component. This concept of a live region region is really simple that you mark out using using the Aria states and when new DOM nodes are at assistive technology know to read that they they monitor it in the DOM and they announce. Now there's some politeness that typically they range from kind of if this is very very important. If you happen you can set it on the more if it's less ticker that's scrolling though I would encourage ticker automatically on a web page if it's something less important on the more polite end of the spectrum and that all whether or not the screen being read in order to components. I've talked about a little bit here again. I'm not over the speaker system because I don't get anything out of it but I'd be happy people who want to learn more afterward a private demo later on during one of the things that I will have demoed here. I've said and I know it's probably hard to for the 15 to 20 years on the web we still don't really have a great website and this is where I get to create a little bit of conflict cause on Nashville website at site before it and I would guess that or that has a fairly down menu and so my colleague who's driving demonstrate this menu is not terrible at least tab through menu items and access them with a key who couldn't use a pointing device only able to navigate through web page. You can at least navigate through those top level on one of them and go to the page but what you'll see there and if you do it on your own and your should be able to see is that new items receives focus new items beneath it do expand. But it's impossible to get. So if you want well which is underneath program the way to get to the schedule go down there's no sub menu items there's no way to get there and almost every website variation of this sort of drop down menu or complex with multiple columns of advertising content on the right-hand side. It actually isn't a type of thing to make access tomorrow afternoon my colleague Laura and I are gonna accessibility testing and we'll talk this pattern actually is so complex not readily tested by four but suffice it to say even on the Drupalcon website and the other the website but it's in reader how would I use that menu I would I did yesterday because I was looking up this guy I'd find the link for program use a keyboard command on my keyboard the mouse to where my I've actually moved the mouse over which expands the drop down continue pressing the down arrow and my keyboard and I want screen reader user knows how to do complex set of interaction of menu item we won't demo this one but mass.gov I think the mass.gov team full of research into what make and on their site you are able so if you were to again try this afterward able to move across the top level items and you can choose whether or not you want to sub menus or whether or not moving across the top of the top level pattern for making this successful complex user interface component last accessibility enhancements we in many years ago is autocompleted haven't in Drupal eight the autocomplete field is if you start typing in a destination like Nash H user so there's going to be a visual afford some indication that there's a number of look search between user you have no idea that the pop a lot I use hotels.com a lot few letters of a city name and then I'll probably they'll probably be an autocomplete on the other it does once again I said I said with that using those live read the data and I think Expedia does a terrific as well so with it start to type in NASH for now but I hear read in my screen reader 10 suggestions use the error so really the exact same information perhaps he's looking at the screen I'm being told I'm being told how to interact I'm even being told that there's one you'd have to count the list to find out that there's more information than somebody who can see so I think that Expedia has done the last one that I'd like this calendar talked about hard to do it's hard to do they can type in a date though Frank and using a lot of American websites I feel I I just do it both ways and hope for that one of them on arrow plan is loyalty program for the time being up until a couple of months ago impossible and I that's I've been working with the web a long time I can even open up the Dev to make the page more accessible to my to remediate my own accessibility still a couple of months ago it was to type a date into the flight the date field so if you were to try to type the date man you could search top to bottom of the calendar it was impossible that slightly but what I'd like to call an example so whether it's Hilton or these sweets or any of the Hilton brands if you there when with the as with a screen reader when you eight field not only can you yourself if you know the right format and I think that much information but I mean let's arrow the down arrow will move you into the cat where you can use the arrow keys to select enter key to make your selection escape to leave the date picker want to enter the date manually not using a screener not only does it eight through the calendar field but it gives that there is me how to move around the house me how to select a date dismiss the calendar don't like using the an excellent example of an excess I normally ask say afternoon if you'd like to come that we can chat and I can give you a want me to take a look at one of the act I can take ages and like things look really big take home is that Java not to blame sample from Hilton possible without Java when I click on the box to filter my connections at it's applying the filter then a few moment the filters been applied that's not a script take those down menus and mass.gov keyboard only and so you can navigate through the service the government can't properly without Jack is not to blame so working together this is a so if we think about everything you think oh I've got this blog filters when the Phil this date component on that's not a I just grabbed the I found you're doing is better than easy and you accessible than it was yesterday using the live region but with it does sound like a lot when the spec frameworks community and accessibility accessibility I know that my colleague that is a group of people sometimes some great around how to build there's lots of there who've gone before a possible out before