 All right, we're going to get started. So my name is David Spiro. We're going to be talking about easy accessibility in Drupal 8. This is not a technical talk. This is a UX session. So if you're expecting coding demos, you've come to the wrong place. We're going to be talking about what accessibility is, showing you accessibility from the perspective of people who have to interact with the site through accessible means, and helping you understand how to make the business case for accessibility. It's often a tough thing to sell, even to your own team. We're going to help you figure out how to make that case. So as I said, I'm David Spiro. I'm with Phase 2 Technology. I'm an experienced strategist. Do a lot of digital strategy, UX work, some accessibility as well from time to time. I like playing music. I like puzzles. I'm Katherine McNally. I'm also at Phase 2 Technology. I'm an experienced analyst. And I've just really been passionate about accessibility since I live in my whole life. I lost my hearing to miniaturists when I was eight months old. I received one of the first cochlear implants. So I've been a technology pioneer and advocate for a really long time. And there's a lot of accessibility out there that I'm not aware of. How many of you love to use curb cuts like at a suitcase from the airport to the hotel? Yeah. And how about winner at a noisy sports bar with a friend to just run a catch, the hockey game, and you see the captions. How many of you like those? Very helpful, right? And I'll often do you look at those captions or think about the curb cuts and think, oh, that's something for accessibility. I doubt it. And the problem with thinking, how convenient. This is so great. And that is really the principles of universal design that I love. Before I came to Phase 2, I ran a startup that does museum accessibility through iPhone tours before there were iPhones. And it was a really cool experience. I created this for deaf people to take an audio tour using American Sign Language in captioned videos. And I did a pilot at the National Gallery in Washington, DC for Gallaudet University, which is a deaf university. But what surprised my colleague and I the most were the number of hearing people who came up to me and said, hey, can I take that accessible tour? I don't want to follow that old lady around or use that old audio tour. And at that moment, I was like, wow, people want my accessibility device? Well, there's a really great application for being able to use technology for widespread applications. And so me as a community have that amazing ability to translate that, to really making the lives of many people much more accessible. Because after all, there's 285 Moonan people in the world that have some type of visual impairment. And then there's 360 Moonan people like me with hearing loss, some degree of deafness or it's a total hearing. Combined, that's more than the population of the United States. More than the population of the European Union. More than the population of South America. That's a pretty significant number we're talking about here. With understanding that volume, one in 10 people need some kind of accommodation for accessibility and you may not always see it. And that's kind of the point. You know, a screen reader, you can't tell if somebody's visiting a website. So you can't really make the argument, nobody's blind visits my website. You can't really make that claim. You just have to know that it affects one in 10 people. You know, it doesn't have to be a disability. It can be in temporary condition. You fall off a skateboard and you break both wrists. All of a sudden, can't use a mouse cause you're in a full body, full uncast. So all of a sudden, you can have to need a keyboard. Can you need a keyboard? Or somebody like my dad, who had a cerebral hematoma three years ago and his cognitive functions weren't quite there and had a really hard time reading the text on a website and navigating that stuff. So that really brought awareness of, there's a lot of accessibility needs that are not as obvious. People who are interacting with your website through accessible means tend to be doing it algorithmically. What's interesting about this is that they're frequently interacting with your site in the exact same way that, say, Google does when they're evaluating your site and deciding where you should be placed. That's something that's really important to keep in mind because when we're talking about accessibility, we're also generally talking about SEO. Accessible best practices are generally SEO best practices and they don't conflict with each other. They just don't always help each other but generally speaking, if you're doing accessibility right, you're doing SEO correctly. So one of the myths that we wanna talk about is that accessibility greatly reduces design options. This is the first thing that we hear, the first complaint that we encounter and the reason that accessibility is usually thrown out the door. I wanna make this really clear. Accessible design does limit your design options but what it does is it boots out the bad ones. I'm gonna repeat that again. Accessible design boots out your bad design options. Okay, and there are a lot of ways that you can make a website inaccessible but the big ones we're gonna talk about today. First one is gonna be color contrast. This is my personal favorite. So this is a photo of some colored pencils. This is what it looks like for people with normal vision. This is what it looks like if you have red blindness which is one of the many variants of color blindness. Note that you can't see what's going on with a lot of these. Some of them have completely lost their distinction. This is what it looks like if you are blue blind, another variation of color blindness. Red weak, monochromatic. Now this is the stereotypical form of color blindness. This is actually the least common but the point is that color blindness is not one thing, it's many things and these are just a few of them and there is one cure for all of this from a web design standpoint and that is high color contrast. The images that you just saw were generated with the cobalt color blind simulator. There are a ton of color blind simulators out there. There's some baked into Photoshop and you can do whatever one you choose to use. If you get designs back from an agency, from an internal designer, pass them through a color blind checker. Make sure that everything is viewable. If they're not, send them back. The designs are not finished. 4.5% of the world is color blind and this is not a third world problem or something like that. It's genetic, you don't catch it. It's 4.5% of the world have it. 0.5% of the world's population has color blindness are women. If you think back to high school bio, probably covered this but 8% of the male population is color blind. 8%, okay? That's almost a 10th of the men who will visit your website have some form of color blindness. If you are a website that demographically skews towards men and you aren't thinking about color blindness, you are throwing money away. Another thing about color contrast is that it's great when people are viewing your website in sunlight. It greatly improves usability on mobile. So one thing that we wanna make sure you know about one of the most common pitfalls is text over images. Generally speaking, you're gonna put yourself into some accessible gray area when you start putting text over images but there are best practices you can do here. You need to pay attention because when you are building stuff in a CMS like Drupal, people are gonna change your images and they're not going to use the image that you had selected that was perfect for that design. Content managers are gonna throw something in and it may not work at all. So what you can do is at the very least as a developer, as a designer, is throw a gradient behind that so that if a content manager does something that is less than optimal, there is still a fallback. There are themes out there like the Bartik theme which have high color contrast out of the box. This is the main focus of the theme. So if you're looking for a place to start, you need to get rolling quickly. This is a good place to start. Whatever you're doing, you need to make sure that your color contrast ratios are very high. So to recap on color contrast, you need to make sure that take note of text color over images. Be really mindful of that. Use gradients where necessary. Avoid low contrast in general. Take note of font weight. Again, super thin fonts are going to create a problem. And use color contrast checkers. Be mindful of this stuff. This is a totally predictable problem and you can get way out ahead of it. So another myth is that alt text doesn't make a difference. I don't know about you, but generally speaking, when I interact with alt text, it's through XKCD. There are times where I just forget that it's actually not for joke punch lines. But it actually has practical purposes, a couple of them. One is that if your image doesn't load, it'll, you can kick up a description of that image. This is the old school way. This is the kind of the original reason that alt text existed because back in the olden days, images didn't always load. But also what you're doing when you are creating alt text, you're describing what is in that image, which means you're generating text that's machine readable and Google likes that. This is a kind of thing that helps boost your SEO. You're literally describing what that image is, which is a good thing. Accessibility is something that everybody's doing. Twitter just released a whole bunch of new alt text, alt text enhancements to their applications. They're a phase two client and we're a big fan of what they're doing. Facebook has also just done their own things with this. There's a lot going on in this space. It's not, you know, this is not just some niche thing that people aren't dealing with. Everyone has to deal with it. And Drupal 8 is doing it, which is why everyone is here. So just, we had our creative services team put a pair of glasses on Drupal for you. International awesome. So, you know, one of the things in the content management system in Drupal 8 is now we have a required build. So to kind of give you a sense of what it means for a screen reader to read an alt text, I'm going to do a little video. I don't think they have any audio. Turn it. So I'm gonna play that again because my audio's not coming through, but thankfully you have captions, which is nice. See the profile of a panda chewing on a B&B stalk as you visit a spot from the background image. That is spoken to the speed reader. And I'm going to go back so you can see the image. So this is the panda. So that is to see the profile of a panda as you visit a stalker on. So that's a description because it's not just a panda sitting there. It's the context of, it's on display at a zoo as opposed to being in the wild. So that's a distinction that I think is very helpful in writing alt text. And the challenge with alt text by default is that, you know, it's required build and your content editors may be frustrated and just copy the image name in the title field or just put in a random string of characters. That's hiding the site even more, you know. And it's really not that hard to write alt text. Think of it like a tweet. It's distinct. And you know, I mean, how many of you on Twitter and you agree that there's an art to write your tweet and you want to phrase it the correct way and ask many of you characters as possible. That's just like writing alt text. Same concept, 160 characters or 140, sorry. And once I shifted my thinking that way, it made a lot easier for me to write alt text. And I would love to do an exercise with you guys. If you don't mind going to the browser and going to Twitter.com, backslash C McNally, have a little or DB Spire, we have a little alt text exercise for you guys to do. All right, I would love for you to take a minute and describe this image in about 160 characters. The context of this image is for a disaster relief agency. And I'm going to, the nice thing about that is anonymous. So I am going to pull up the responses and so that we can see the variety of tweets that are being presented. I'm sorry, alt text. On both of our Twitter feeds, the top tweet that we both have has a link to a Google form. So if you guys could submit your alt text. Got it. So we are... Can we put the Twitter handles back up? Yeah, cool. Anybody got it? Awesome. Yeah, we know the Wi-Fi is rough. That's why we were recommending mobile phones and using your data. Is this working for everybody or is it? Cool. You're having a hard time loading? Okay. Awesome. Let me give you about another 40 seconds. Oh, no stress. If you can't get it in, you can do it later. And we also are presenting, providing you with a Drupal 8 accessibility playbook. We didn't have the printout ready, so we'll email it to you instead. So on that form, you can have the opportunity to let us know if you'd like a copy. Email it to you. We won't do any marketing. We just want to be able to email it to you. So I'm going to switch over. I'm going to go ahead and try to hide this. All right, cool, great. Okay, so we have some examples here. All right, I'm going to zoom in. Thank you. We've got two young girls standing in front of a demolished house. Two young girls in front of Rubble, one looking backwards, holding a doll. That's pretty powerful. Children standing in front of destroyed buildings. Two young girls standing in front of Rubble. Two young girls standing next to a record of a destroyed home. This is pretty powerful, number 20. The reason I'm going to call this Manel is a disaster relief agency. And they're going to want donations. And they're going to want to tag other hostings of the people, vision to the same. So we knew, say, two young girls. You know, that's pretty significant. They're talking about children standing in front of a destroyed home. That's, oh gosh, I'm getting children thinking about it. We've got two young girls, she lost her home. That is, that is a great example of art text, which I agree. And this disaster recovery scene with two children is still pretty good. But it does connect the children to something that belongs to them. It could be anything. They could have just been torched coming through. Girls praying in front of a destroyed, collapsed house. Two little girls look on in exhaustion. Ooh, wow. Nice job. Behind them in shambles, such a destroyed, remains of a home. Wow. I would love for this president raise your hand if you want to take credit. Oh, good job, that's great. So if you don't mind, do you want to like explain why you wrote it this way? Great. That's exactly it. You want to, when you describe the image, you want to realize that there's a good possibility that whoever is really viewing this image through alt text, they're not seeing the image. So you want to capture the emotion of it. And the adjectives on those girls, describing them as forlorn, or something like that would really go a long way. Yes, so, we need your help to help victims of disasters. Not quite, because no appreciate an agenda on behalf of the image. And so it's not for the person to take that call. Cool, thank you for providing that. That was really great. I really appreciate that participation. I'm going to spit over. Also, while she gets the presentation queued back up, it's really interesting just to see how a room full of people, the variations in how a room full of people view a single image. It's also not related to this talk, just an interesting thing to keep note of when it comes to web design. People see things real differently. So, as a reminder, alt text is now required on Dupal 8, which is a great thing. And as you saw, it's not horrid to write alt text. And that costs money. It's another nice thing. The impact is better SEO. Images are described for the blind, which is another great thing. Alt to be kept, avoid copying, title text. Avoid non-central text. Don't put spaces. Don't put symbols in. That's not helpful. Use keywords. It's another thing that will really boost SEO if you use the applicable keywords to your site. Use descriptive phrases for easy. Just take the tweet. Okay, so another myth is that accessibility breaks the bank. It's too expensive. Accessibility is a journey, not a destination. Okay? So what you need to realize is that when you are approaching accessibility, it's about taking steps towards a place that you're never, there's no place you're going. You just decide you stop. It's kind of like product development in general. But everything you do is going to be helpful. So one example is, another example, this is closed captioning and subtitles on video. So subtitles and closed captioning allow people to understand what's going on and get both the text and the context if they can't hear what's going on or if they're watching it in a loud bar. This stuff is important. And it's really, it used to be really difficult to affix these captions to your videos. But Google and the folks over at YouTube have done something really interesting in that they auto-generate closed captions on all videos that are uploaded to YouTube. All of them. So even if you upload it privately, what's cool about this is one of the hardest parts of creating the closed captioning is getting the timing of everything correct. So even if you don't want to have your video up on YouTube, you want to have it uploaded someplace else, you can privately upload it to YouTube. Get, download your captioning and then edit it. Now that's the important part, you want to edit it because they do a pretty good job of getting this right, but it is not a really good job of getting it right. So what's cool about this is it does a lot of the work for you. It certainly does the hardest part. So this is a hack that anyone can do. This is not D8 specific. And this is something you're going to want to do because subtitles are great for silent autoplay which is now very pervasive throughout social media. And my guess is that if any of you have spent time on Facebook, you scrolled down at some point, seen a video you would have otherwise disregarded and noticed a caption go by and think, hey, maybe I do want to watch that. If you're looking for conversion on your videos, closed captions are a great way to do it in this current age of social media. So captioning recap, leverage YouTube, absolutely leverage YouTube. Download and edit the text file if you're going to take it someplace else. And you can then re-upload it wherever you need to having let YouTube carry most of the weight for you. Headings, headings, headings, headings. H1, H2, y'all know all this. This is, you know, content editors like to use H, you know, there are various H's to format content. If they don't know how to do this appropriately and they don't use the proper hierarchy, they're going to make things a living hell for accessible users. In one of the core things is I just spun up a demo site, an accessible site using Drupal 8. I just did it on a Pantheon site, and it was awesome. And I just played with it. I didn't do any kind of customization. And so I wanted to see what it does out of the box. And I have a series of, I think I've turned on the audio, by the way, but if not, I'll read them out to you. What it sounds like to a screen reader. Headings are very important for a user with a screen reader, just like we like to scan through. We see, oh, that's an important piece. I just probably pay attention to this. So I'm going to play a demo of the screen recorder going through a sample article that I did on my Drupal 8 accessible site in Pantheon. That was my site. So, you know, it's kind of an ironic, but I was captioning this. So a deaf person trying to caption audio is a little challenging. So I apologize if I was a little off. So, but I'm doing my best. So, you know, the first article on my accessible Drupal site is the title. And then the first heading, another heading. And then the subheading, which is the 8.3, I believe. But you heard that. So I'll just play it again for kicks. How a screen reader will listen to headings. And there's actually a shortcut that they can use to go through and only hear the headings. So they know where to jump to. So that's a helpful aspect to proper headings. And it's important to not use headings to make something bigger or more stylistic. You know, if you want, you know, on a marketing page, you want to call out a phone number, really big. Don't use H1 for that because that's not really the right use. But if you want to make the phone number significantly larger, just add a class to the CSS file so that it's using them proper styling for skipping of headings. And this is another challenging thing, you know? Because as I mentioned, when they're skipping through trying to find a sense of the page, if you skip a heading, they get confused. They think they missed something. Like, oh, where's my H3? If I'm on an H4, it's an whole cyber-emissing. And use headings for hierarchy. Researches are on that article that I put together. You know, it's really structuring the site in the wizard week. And it's also structuring how the whole page is organized. Links. This is one of my favorites because it is something so simple but so often overlooked. This is an example of how links are often used incorrectly. And I would love for you to get a sense of what the hack you're gonna be clicking on. You know we're gonna be clicking on when you are on the click here, read more. That is one of my biggest pet peeves when we are on a site. And thankfully, there's a lot of ways in CSS to actually repeat the title so that if it is truly a read more, you can still have the read more printed but a screen reader will continue to extend to read the title. Like, read more about this blog post on accessibility. And so they're like, oh, I know what I'm clicking on. So I'm going to show you an example of how I use proper links in the wizard week. This is another great way for you to train the content editors on proper linking. And this is through the wizard week. Did that make more sense? So it's not perfect, but you have some context. Baby loves playing the snow. Okay, in a problem, we can get a picture of that. One article about baby loving the snow. Washington is obsessed with the panda. I don't get it, but I think it's great. So there's an example of how I have the links written out in a line. I think we have a clutch in the back. I love that connection. Thank you so much. I look forward to talking to you after this. So after we cap, avoid here, click here. For example, for more information, click here. Not helpful. Use the script of links. Example, for more information, email Joe. You know you can email somebody when you click on the link. So that's really, it's so basic and it doesn't cost any money. So that's another great thing you can extend accessibility. So another myth about accessibility is that it's all or nothing. And as I said earlier, accessibility is a journey, not a destination. So the most important part about accessibility is to start doing it. Just start somewhere. One of the things we wanna do is thank the Drupal Accessibility Group. Mike Gifford is, he may be in the room now. I don't know if he is, but he's gonna be giving a talk on accessibility later today that is a bit more technical than what we're covering. So if that is of interest to you, we highly recommend that you go attend his session. I think it's at 345. Search. So one of the things that David and I do at phase two is we help through the build phase of a project. And a lot of times I include writing user stories for development outcomes. And a lot of times we will do these user stories, we will create the acceptance criteria. And writing a acceptance criteria for an accessibility development implementation can be challenging. And so that's something I'm really passionate about is creating the acceptance criteria from the length of somebody who's never a new discreet reader or understands what to look for in validation of accessibility. So I'm gonna go over some of the technical things in Drupal 7 and Drupal 8 that are great for accessibility. And these will continue to have some screen caps so that you understand, oh, this is the outcome that's supposed to happen. So search is not something new for Drupal 8. However, there are better forms and radios and checkboxes, which is great for solar and facets of search so that you can use your checkboxes to select different facets. And that is actually a good implementation of search when I didn't do any configuration in my pantheon Drupal site. So I actually have it visible so you can see. Okay, so the key part of that is identifying what it was by the form label of search. But a lot of times we see in designs there's no label of a search but everybody assumed that's gonna be search. But that's confusing for a screen reader because when they get to that form field it's just intertext. Like, what kind of text am I supposed to enter? Is it a newsletter sign or form? You know, it's just a lottery ticket, you know? So by saying search, intertext, they're getting context. So what kind of things you need to be entering? And another important thing is the button. We see a lot of times, it just says button. What kind of button are you clicking? So button comma search is the way to help the screen reader and even SEO understand what's going on on the page. So now that you have that context I'm going to replay the video. Thank you for being my mic guy. Hope that makes sense of what I mean by providing that acceptance criteria. Like, make sure that you can hear the label. Make sure you know what kind of text field it is. Make sure button actually says what it is. No, okay. As I mentioned, Form Labels was an improvement of Drupal 7. Search, interform, and presentation was also an improvement of Drupal 7. But radio to checkboxes has been improved. And that's an improvement because radio to checkbox, it is part of a group. And now it says what the radio to checkbox group is. And then it goes through each element. So you now know if one is selected and one is deselected. So when you need a keyboard you have clear context on what to do. Inline form errors is something I'm very excited about. I'm going to be showing that to you in a few slides. So if you modify the forms, which we often do, make sure if you edit the labels, the form label is displayed. It doesn't have to be above the form. It can be inside the form, which we often see. Like email address, name, search. Inside the form, that's perfectly acceptable because the screen reader is going to be that first. And also another thing is making sure that you announce the label before the input. A lot of times I will see the label announced after the text field, like intertext, search, like me. So input, making sure that you can actually get to the field with a keyboard. Buttons, we kind of went over it, making sure that the user is aware of what the button behavior is going to be. And then the help message. If you can have help message, they're just tricky and duplicate. I haven't quite cracked that net, but a lot of times we'll see search, not to say name, field, please enter the first or last name. Well, we've already entered a name. So you can see the help text. So it'd be helpful if it says name, please enter the first or last name, then the field. So you know, oh, I should be entering my first or last name instead of getting to the help text and like, oh, I didn't put my last name, got a back tab, put in a last name. So that's something that I think it's important to pay attention to. Improvements with radios and checkboxes is impacted for screen read awareness, better use for keyboard, better use to experience. Landmarks is another mystery out there. It's kind of new how many of you are familiar with area landmarks, very few, but it's not as hard to conceptualize as you think. You know, when you visually scan a page, you kind of like look at the heading, you look at the sidebar, you look at the photo, you look at the main. Those are landmarks, that's all it is. And that is a waiver screen reader to do the same behavior as a site user does, except the landmark goes through it with a screen reader. So that you don't have to use a tab key to go through the entire menu, the entire body in order to get to the sidebar, which in landmarks is called complimentary. To be like, I don't want to go to the sidebar, so they just go straight to complimentary. I'm gonna identify the page regions. So there's an example of how a screen reader would use the shortcut to get to landmarks. And so site header with three items. So they know there's three items in the site header, the login button, the home logo. And then main navigation with two items, main with three items, there's three things in the main. There's nine items. So I have nine articles on my homepage. But the screen reader has to be calibrated to process this, and Raj, we don't. But this is the norm for them. For the menu with two items, navigation, so they know it's a navigation mechanism. And then we have complimentary. So they know, okay, complimentary means sidebar. So which is another element of making sure that the developers are using the proper labels for the proper sections. There's not that many, so it's a very manageable piece. I think I actually have them on the next slide. Heading level one, heading level, heading level, footer, footer, med heading, heading level two, search, search, colon, group, with two items. Heading level two, search. You are currently on heading level, visited, leg, but one that visited, leg, leg, leg, leg, bleep. So, sorry about the overwhelming. I kind of forgot about that video. But what I was trying to point out is we knew Harvard over complimentary and when it had announced it. So that was what was going on. I asked, but landmarks is not a substitute for proper semantic structure in HTML. It's only an enhancement. Not everybody is yet savvy with using landmarks, which is why it's critically important to continue to use the proper HTML structure for baseline requirement. Skip navigation is native now in Drupal 8, which is great. And so, which is a nice thing. Area, as we mentioned, these are really big improvements. In live regions, meaning you have updated content without the page load. An example of that would be the error messages or infinite scroll or search results. And this makes it possible for the screen reader with the proper structures in place with Drupal announced to understand that there's content refreshed on the page. Cool, error, my favorite part. I'm almost done here. So, I think, inline errors are now available through the form API. Now, in Drupal 7, as you may recall, the error message needs to be at the top with a red border around the field. And that's not helpful to people who are colorblind or don't really see where the error message is. I was actually set ready to form this morning and I got an error message but I couldn't find that darn field and it was actually collapsed in our field group. I was like, seriously? I was so frustrated, but I found it and I was able to order my coffee, I think. I think that's what it was. So, in Drupal 8, you actually have to turn on the inline error model because there's a few bugs, like the field set thing I was talking about. So, you just have to enable it in Drupal 8. I'm gonna show you and try to give you context of what I mean by page refresh. The screen reader's not gonna know about the error message until they go to their landmarks, which is a common navigational mechanism. So, don't let that throw you. All right, so there's an example of the Drupal 8 error message now. If you click on the link subject, it takes you straight to the subject, which is where the error message is. I really hope I'll have to figure it out, yes. So, this is the Drupal website feedback. Again, I didn't do any custom coding. That's a landmark. I've submitted. We went through the error and I actually fixed my error by clicking on that subject link. Now, you enter the subject, I've submitted, and then it's psychically back to landmarks menu where the error message was no longer there. But this is, you know, really improved user experience and as an UX thing, we can now see clearly where the error message is and we can click on the link and go straight to it. But this is a great use case for Drupal Announce. Drupal Announce allows to alert the screen reader automatically after changing content, but there's a little bit of developer customization in Drupal Announce to actually enter error message text. I'm not a developer, so I couldn't do it yet. So, but I did talk to a group of developers and they say it's almost there, it's very close and the great thing is, you don't have to do anything yet to screen reader. It just literally says submit error. Please enter a subject. But as a developer, you need to write that in, but it's really not that hard because it's going to be the error, it's going to be triggered automatically using the inline form error, which is great, cool. Okay, so content authors, these really are truly the unsung heroes of accessibility. There's a lot that designers can do when, you know, conceiving a website. There's a lot that developers can do when building. But at the end of the day, it's the content authors, the people who are regularly interacting and posting content who can make or break accessibility on your website. You know, they're completely in control of alt text, of headings, of subtitles, of links. And this is the overwhelming majority of what is important when it comes to accessibility. So as designers and developers, it's our job to provide those content authors with the tools that they need, but it's ultimately on them to, you know, to carry this forward and to continue to make sure that the site is accessible. And it's doable and this isn't the kind of thing that is going to take a ton more time than they're already doing. It's just about knowing the best practices and applying them. So do you need to make your site accessible? You really don't need to panic on this. You know, we do accessibility audits regularly and we're going to do a very quick, because we're running low on time. We're going to do a real quick run-through of what we would do when we were auditing a design, either produced by our people or by someone else, just to give you a sense of what to look for. Yeah. So there's just a sample of, say, I've come down from being forced to kind of give an example of this. Now, one of the main things is I check, are there skip links into a title? It's a logo that has alt text. Three, correct. You know, can the search form be accessible? This is stuff you've covered already, so hopefully this is a recap. The main menu. Where's the new experience going to be where they have to hover over it to get children links to expand? That's the case. Can the keyboard get to the children links or make a new unclip? Five, the background image. If it's rendered out of background image, the alt text will pick it up. So how is that background image structured? Something to pay attention to. Something we touch upon is a text, making sure that there's variation of that text to make sure it's readable. And if the design principle is carried in a different direction with a really light image, and the buttons make sense contextually. And blocks is another one of the heading structure, making sure that it's like an H2 or H3. Depending on how our title is structured, that's either a title or H1 tag. Three, alt text example, making sure that it's readable by a screen reader. And not only that, it's the tapping structure. Only good enough is to screen reader can read the image and then go to the one to the right, or it can continue down to the subtext. And I have the comment called out, what's the interaction going to be with a screen reader when they see that there's comments? If you expand it, is the screen reader gonna go to the comments section? What's the behavior? Do you all, in finished scroll, same thing we talked about, how a screen reader gonna be made aware that new content has been added? Tabby order is important because screen readers and keyboard users go linearly. So it's gonna be get and touch latest news, quickly contact, which is confusing. But in Drupal 8, there's now tabbing order in place so that you can read get and touch the details, the address, latest news, details, which is a great improvement. And then I have the forms as we discussed, making sure you have the label if it required field and the send button clearly later. I just went over tabbing. It's training instead of tab together. Cool. Okay, just show of hands. How many people in this room is this the first time that you've actually seen and heard a screen reader interact with a website? Okay, cool. So I hope that at the very least, we've given you a little bit of a taste of what it's like to interact with a screen reader. And if you thought that was kind of challenging to hear and to interact with, imagine not being able to see the site at all and having that be the only way that you can interact with a website. Web design and really design throughout the world is a matter of lowest common denominator. We're generally designing for the average, for people who can hear correctly, who can see correctly, who can walk, who have full control over their hands, who are healthy, that's who most products are designed for. And that's great for most of us. But there are people who are stuck living in a world that was not built for them. And we can't necessarily make everything work for them all the time, but we can take some steps to meet them, maybe not even in the middle, but just make their lives a little less difficult than they already are. We've put together a D8 cheat sheet if you filled out our form earlier on and said, yes, you want it, we'll send it to you once we are back home and have proper bandwidth. But hopefully if you miss something, we've got it captured for you. We're asking you, all of you, to fight for accessibility for a lot of reasons. Do it because it's the right thing to do. It is absolutely the moral high ground. Do it because it's the selfish thing to do. We're not getting, none of us are getting any younger, our eyes aren't getting better, our hearing isn't getting any better, and anybody could end up with some kind of an illness that changes their lives. And you don't want that to be the point in time where you say, man, I really wish that I had done a little bit more to make the websites I've worked on accessible. But it's also, it's the selfish thing to do because it improves usability, it improves SEO. Accessibility categorically makes your website better. One thing to know is that it's easier to start with accessibility than it is to tack it on later. When you've got a fresh build, your life is a lot easier when you're starting to implement these best practices. When you have to redesign, re-architect, and bolt on accessibility, it's totally doable, but it is a steeper hill to climb. Start early, we hear all too often, oh, we'll get to it in version two, it's not a priority now. You will pay for that dearly. The Americans with Disabilities Act, I know this is an international audience, but the ADA is our law that mandates compliance with accessible guidelines. It's mostly focused on meet space interactions, but there are, it's fuzzy on the subject of the internet, which is actually worse than if it was explicit because at least you would know what you needed to do. But what I can guarantee you is that there's going to be more regulation. It's going to become an issue at some point. If not this year, then in five years, at some point, you're going to be told you have to cross a legal threshold. It'll happen. And you want to be past that threshold when that occurs because you're not going to want to be racing for a legal deadline. But when you do accessibility, do it for your users. Do it for yourself. Do it for your lawyer. Your lawyer will love you for this. Do it for usability because usability makes everybody's website better. Do it for SEO so that you get found more readily. Do it because it's the right thing to do. I truly do not care why you do accessibility so long as you start to do it. And remember that it is not, you don't have to achieve some perfection of accessibility. You just need to start. And remember that accessibility is for everybody. So we're phase two. I'm David Spire. This is Catherine McNally. We're both on the user experience side, but our company does full service, design, UX, engineering, you name it. We're at booth 101. We'll be hanging out there for most of the next two days. So feel free to come by and talk shop. Thank you very much. We have a couple of minutes if anyone wants to ask any questions.