 I'm Robert Jolly. I am a project manager. I love WordPress. I love accessibility. I'm happy to give this talk I'm going to talk about ways that you can bring accessibility into your workflow if you're a designer a developer a project manager a client a Qa person If you wear all of those hats then hopefully there's something in here for you So what exactly is accessibility? I didn't really know a few years ago. I was big into web standards, but I kind of got introduced into web accessibility through another speaker and You know, it always seems very complex It seems like it's expensive and does anybody else share that that feeling or have you had that feeling? It doesn't have to be it can be if you approach it in a way where accessibility isn't kind of baked into your process So what I'm going to attempt to do with this talk is just talk about ways that we actually make our sites work Well for everyone, but we do it throughout the process So just a little bit of background information There are a billion people on this planet who have a disability of some kind or another some people have multiple disabilities in the US One in five people have a disability. So that's 20% If you keep up with the market share on browser stats 20% is actually higher than the number of Than the percentage that internet explorer shares for all versions I think it's in like 15 to 17 percent for all versions of internet explorer for browsers So when you think about accessibility and people with disabilities, that's a very large number and So with that large number comes a lot of dollars so people with Disabilities they spend approximately 175 billion dollars annually in the US So I think I have the marketers attention my slides are a little wonky I think my format the the ratio is bad, but you get the message, right? You know, there's money to be had there There's money to be lost there too if you if you ignore accessibility and people with disabilities can't use your site you open yourself up to lawsuits and You know, it's not just for people that that that have long-term disabilities Or or for people that are born into a disability It's a group that anyone can join at any point This is a this is a quote that gets thrown out a lot, but it's true. We're a heartbeat away from needing accessibility This is a this is an MRI of my brain four years ago I had a stroke it affected my balance it It gave me just debilitating headaches for about six weeks, and I was really lucky I was pretty fit at the time and my brain the the blood vessels in my brain they they kind of remapped and worked around the issue in my cerebellum, but Tomorrow is the fourth anniversary of my stroke So, you know, I was very close to really having Significant issues, but for about six weeks. I really couldn't use the web the way that I was accustomed to and then this year in March I have this great flattering picture of me up here but that was the day I had surgery with with holding my hand up and I had crashed my bike and I dislocated my thumb My mousing hand and you know, that's very important for me, but I couldn't use it. So I had to actually Transition to just using keyboard only and so that's a picture of the therapy that I had to go through for about three months So, you know disabilities are really, you know, it can happen at any time. There are there are many many different types of disabilities I won't list them all but it goes beyond just making your site accessibility goes beyond making your site Friendly to screen readers. It's for people with low vision people with With hearing loss or deafness people with mobility issues people with chronic pain seizure disorders There are just a myriad of different types of disabilities. So that brings us to, you know, where where do we start like this? This is you know, it's a lot to take in Don't do it at the end of the project don't leave accessibility towards the end because you'll get something like this this is a doctor's office in Europe and you can see the the Accessible ramp that goes up and kind of winds around it's serpentine. I think there are nine different Landing stages to that and I'm sure that this meets spec in some way some sort of Some sort of disability law spec about how how this should be built but it clearly was an afterthought and I don't think many people would enjoy using this except maybe skaters and You know, that's that's great But not so great for the people that really need it. So What do we do with with accessibility throughout the project, you know I can I can preach to you that everyone on the project has a role that let's let's talk a little bit about what those roles are Because you can spread the you can spread the load with with the accessibility task work And it becomes less expensive to fix accessibility issues that are left at the very end So when you're planning a project if you're a client Write it into your contract make it make it a requirement for your vendors So if you if you have a new website design project or redesign project coming up Just make sure that you use you spec out the guidelines and then if you have the the ability to Afford some time and some money to test with real people with disabilities That's the best thing you can do right there because you can meet the technical guidelines But if it's not functionally accessible Then you you still have problems. So always consider usability with usability testing with people with disabilities and Then when you're on the vendor side of things on the project management team You want to map the accessibility guidelines to the tasks that your team members are going to be Undertaken so there are things that you can do as a project manager But there are things that your team if you understand what the what the accessibility Needs are for each different role then you can You can make a big difference You want to communicate Regularly with your team make sure that you know it's not just at the beginning of the project But throughout the project that you're checking in and you're saying all right How about accessibility what are we doing to make sure that we're covering that don't just assume that your team Is going to have it covered like you do You want to establish a test plan it can be formal or informal But make sure that you have a test plan a way that you can at regular intervals test for accessibility as you're going through the design and development process and Then of course represent accessibility at every stand-up every every project check-in that you have make sure that you're at least Talking about accessibility making sure that you're you're covering covering your bases So Requirements often state very dryly in one line What accessibility guideline must must be followed sometimes it's section 508 of the Americans with Disability Act but a lot lately it's the World Wide Web Consortium's web content accessibility guidelines as WCAG WCAG The version 2.0 is the is the latest that's out So when that's stated You're like what I need to find out what that means right or maybe you're not and and that that leads to problems later on but So do your best to find out what that means and If you go to print the guidelines, it's 34 pages long. This is how this is how accessibility gets kind of a bad rap It's it's very daunting, right? It's there. There's just a lot more than just one-line item The good thing is is that it can be broken down into into four principles Those principles are perceivable operable Understandable and robust the the acronym for that is poor PO you are And those four principles get broken down into 12 main guidelines and Then 61 success criterion and there are three different levels for those Those criterion so level a is kind of the baseline and you really need to cover that there are 25 25 success criteria for that at level double a which is is what frequently is cited as you know What what sites need to have if you're a government site or in the case of airlines I've been working with a couple recently The Department of Transportation requires level a and double a and then if you really want to level up you go to level triple a and and that makes a really good experience for users so Some things that you can you can think about if you're a project manager isn't don't worry about memorizing all of the guidelines I don't know all of them by heart. I know some I can recite a couple of them and And realize that it's that you know, these are just guidelines and you can you can create a checklist mentality But that's imperfect at best so remember that the end user is your goal their experience So make sure that you're testing along the way and make sure that that if you can perform usability testing or somehow get feedback From people with disabilities who are using your site. That's going to be great do understand the roles and duties of Accessibility based on the the team that you have what designers need to do what developers need to do What your QA team needs to do if you're working on a bigger team communicate frequently Add it to every phase Incorporate testing with every sprint that that you have and advocate for end users There's there's a W3C accessibility responsibility breakdown and it's a fantastic resource if you Google that or I'm not sure in my slides. There are probably There should be a link there That's that's supposed to be a link to take you to it But the W3C has a great resource for learning, you know kind of what guidelines can be mapped to which roles and What tasks can happen on a project? So with with content you want to have images having appropriate alt text Attributes you want to caption your videos. That's another form of alternate text and Provide transcripts for audio You can provide transcripts video as well And you can do also do audio description for your videos those things are really important for people with disabilities It's also great SEO juice Juice up the SEO there as I've heard mentioned here You can also watch out for your reading level so make sure that you're not using language that's too complex for people with cognitive disabilities or challenges You want to avoid any elements that are rapidly flashing Anything that flashes more than three times per second is a potential Seizure trigger so you know people that that that that have that To deal with really you know don't need to to have a seizure triggered by your website So some guidelines some general guidelines for alt text is that every image needs the alt attribute You don't always have to have it Contain anything so if you have a decorative image that really has no other meaning other than to just decorate the page Just give it empty empty quotes not a space in the quotes, but just alt equals quote quote That will actually inform screen readers to just skip over that that content and just ignore it Along those lines with images if you're using background images for anything that's important and in terms of content If it's conveying information or functionality take it out of the background Don't use background with CSS background images because you can't apply an alt attribute to a CSS background image So basically that's inaccessible to people with screen readers and also anyone with Windows high contrast mode those background images just disappear. So it's it's you know bad things happen basically with that When you're using alt text keep it brief and on point make it descriptive But you don't have to be overly verbose and Then if you have a functional image You might want to treat your alt text a little bit differently. So in the case of Header logos that point back to the home page as a link, you know, I really like the waffle house So this is actually there there a little clip from their their header And they've got their their waffle house logo and the alt text is waffle house and that's that's pretty good They have alt text. They're using WordPress. They've got they got some things going on really really well there But a better alt text for that might be alt might be alt equals waffle house home Because that tells people that it's gonna if they click on that link It's gonna take them back to the home page and that's a pretty you know having that logo there With the link is a pretty standard convention But you can you can tell where you know other areas if they're if it's a submit button That's that's an image. You might want to have that alt text not just You know not just be the word itself, but actually telling people what to expect in the alt text So there are ways you can check your your content's reading level a quick way Well, the general guideline is to aim for a reading level of around eight for general audiences so like what an eighth grader might be able to read easily and For the WordCamp US site You can actually go to readability dash score dot com And you can plug in a URL and I plugged in WordCamp's URL and it had a grade level of eight point six Which is which is great But there's an easy way to check that online. There's a there are a few different tools You can actually download some some apps that'll run. I believe even in Word you can figure out what the What the readability score is? So when you get into design your UI designers UX designers Need to be thinking about consistent interfaces for people making sure that things are predictable and and and understandable Easy one is to always check color contrast, you know when you're when you're mocking things up Always check your color contrast and there you can make a beautiful design that is high You know high enough contrast to meet accessibility guidelines, but still looks great You don't have to have everything be black and white You want to be aware of line length issues Just keep things readable You know don't make it difficult for people with with you know line lengths that stretch all the way out when you're you know when you're on a big monitor And related to that anything related to proximity so keeping related items close is going to be very important so if you have a convention where you have your form set up and then You've decided for your design standard that you're going to put your your submit buttons all the way to the right on Your on your form well on a larger screen that might become a proximity issue where all the form fields are over here And then your right aligned you know at the bottom button is is kind of not related to the actual form itself So that that could be an accessibility issue You always want to design for your focus states So just like if you're if you're doing design work and you're thinking about what happens when people hover Think about what happens when people have keyboard focus on there So some people don't have a mouse they can't use it, but they're they're a sighted keyboard user So when they're tabbing through the interface make sure that your focus states are good In terms of clearly shown with either outlines or some sort of differentiation So the people will know as they're tabbing through your page where they are and what they can do what what links they're on And then at the same time design for your error states for so when you're submitting a form don't always assume that everyone's going to have The the perfect form experience. They're going to always fill out your form correctly So try to think about how how you can gracefully handle an error situation when people you know enter the wrong thing and They they need to you know kind of go through that form again and and and fix the errors You know take that take that heavy lifting and do that for them and make it easier for people to Correct their mistakes. You'll find that you'll have more conversions. You have more sales as a result We'll talk about some tools for color contrast So color safe that co is a great tool to use while you're while you're determining your color palette so you can plug in a baseline color and then you can get other accessible color options and I believe that's a tool that was launched and provided by the sales force UX team and Leave a ruse contrast ratio. It's on github it does a similar thing where you can plug in values and see what the what the contrast ratio is and There's also an app that you can download on windows linux Mac called the color contrast analyzer So if you're working in Photoshop, there may not be a tool for color contrast checking built into Photoshop But you can easily do that here with this this color contrast analyzer And if you design in the browser, we've got that covered too. So chrome's web accessibility developer tools Allow you to easily check for things like color contrast Ten minutes. Okay, ten minutes left. There's a lot to go through Another thing that you can do as a designer is to basically you can take your your hand and and make a tiny hole like a straw and if you want to do that now you can actually look up at the screen and You can look through it and this simulates low vision. So some people use extreme zoom magnification Or they just have pinhole vision and they can only see a small bit on the screen So you can check your proximity of items and you can see whether there are problems with this Specific example with Virgin America. This is where they fly and I wanted to see where to go from Chicago Where I could go and if you look closely those Those cities there have a book button. It's all the way to the right but with the two column layout They look like they're associated with those other cities on the right So that could be a proximity issue for people of low vision. So let's talk about the ways you can Tackle accessibility with development We want to develop with web standards in mind as much as possible. So if you can Keep things semantic and and and coded in in a standards compliant way You're going to reap all of the accessibility benefits that the web that the promise of the web has so, you know Treat buttons as buttons. Don't just do a div with JavaScript and and call that You know make that a class of a button because that won't be clickable and it won't be announced to people with assistive technologies You want to set the page language. These are very basic things, but these are things that people forget Give each page a descriptive title a unique title. So, you know, I talked about using semantics Foreground images, please everyone and that you know, give them all text With WordPress, there's a built-in CSS class that you can hide informative text from from visual users But but it gets read out for screen reader users. So it's just screen reader text It's been built in for I don't know four or five years now So that's a great way that you can basically give people more information that they wouldn't get if they can't see the screen So, you know, visual users have the context of what's on the screen So, you know, like a read more link is fine for somebody that can see that it's associated with that link is associated with the headline or the body copy But but if you if you're a screen reader user and you're going through with links mode You just have a bunch of read more links that it gets gets announced to you And you don't know what they're about so you can hide that that additional copy there to help folks and then If you take a mobile first responsive design If you if you take that approach, that's going to help you reap a lot of benefits just built in for accessibility One of the biggest things that you can do as a developer is just use your keyboard Everything you make as a developer everything that you build and code every time you do a check-in or every time you save something locally Test it with your keyboard and see if you can access all of the links and all of the functionality with your keyboard That's one of the biggest things that you can do before anything else And then of course, you know, look at look at your your error handling You know give people a great experience with with good form form error handling There's a forms example at simply accessible. I think it's examples not simply accessible.com They have a ton of great great examples of how you can make forms more accessible you can unit test with tools like quail and There's a plug-in Called access monitor Joe Doulson has has written this plug-in and basically you can you can test the accessibility of your of your posts against the tenon API and and find out if If it passes certain accessibility tests and it won't let you actually publish the post You can set that up where it actually prevents you from publishing until you fix the errors So that's a fantastic thing you can do so, you know, definitely employ unit testing but above all else Use the keyboard After that you can level up to screen readers But when you when you tackle keyboard accessibility you make you lay that foundation for for your screen reader users as well So I'm going to run through very quickly accessibility plugins and themes and And then we'll get to hopefully a couple of questions So the theme directory has the accessibility ready tag. There are 79 Themes right now in the theme directory at wordpress.org that art are have been reviewed for accessibility and And have have have gotten published out there. That's not a lot compared to the the overall number so my challenge to you as as theme developers and authors is to is to increase that number use the use the techniques that you're learning here today and and and With other information that you have out there go and and make more themes Accessibility ready. That's that's really a you know what we need in the community There's a plug-in called WP accessibility also by the venerable Joe Doulson This helps to patch themes as well as adds a few a few additional features for accessibility to wordpress We this is a great. This is a great plug-in. I use it, but if our themes are Accessible and our plugins are accessible. We don't need tools. We don't need other plugins to patch these things There's a if you use Genesis, there's a Genesis accessible plug-in to help get you through If you use gravity forms contact form 7 they're plugins for those for accessibility But really we should be baking these things into our plugins and themes. So That's my challenge for the plug-in and theme authors out there is to to really level up and and and and make things accessibility ready I've said that I want to repeat it. We should not need to Fix themes and plugins with other plugins. So let's let's try to you know build it into the core of what we're doing And that's about it. I I really love this community. I love wordpress I love accessibility if you've got any questions. There may be a couple of minutes I'm happy to happy to help Thank you Hi, thank you for the for the talk. It was fabulous Javascript is a big point of contention and accessibility Since 4.2 in wordpress is actually a WP dot a 11 y dot Class in JavaScript, which is very powerful and one of them is the dot speak method Which is very very useful. You you probably want to talk about that at some point on the theme things There are only 79 teams at the moment that are accessible, but that went up from 17 last year So it's a pretty huge bomb and there are tremendous efforts being done on that front as well Definitely. Yes. Yes, and I do want to commend the entire wordpress community on Making accessibility, you know part of the core a very important part of the core And even at the conference we have captions live captions for for each session I don't know of many if any conferences that do that unless they're accessibility focused so Big kudos to to the wordpress community for this Hey, it really enjoyed your talk question about there was a wordpress wordpress default class They mentioned like screen reader text. I think it was so could I just try having trouble understanding that so that one Hides text for screen readers. Is that right? Right it so it visually hides Content and it doesn't have to be just text, but you can visually hide some content from screen readers I mean from visual users so that so that it can be read out to screen readers, so one thing that That like with read more text so you have a read more link when when screen reader users are going through a links Browsing just by the links on the page So there are many different ways you can browse by header levels or or by links or just go through the content linearly But if you're using that links browsing you get a bunch of read more links without any context about what it is So with screen reader text you can actually put the title of your post so read more and then have a span class Screen reader text with the title of your post in there So you don't have that visually for people that that have the context of that the read more is Associated with that copy that's right above it, but you have that there for the the actual Screen reader user so it gets read out to them in the context of that link. Thank you Is there a class that does like the opposite so it would hide it visually, but only read it out on screen readers Does that make sense? Oh, that's that's that's what that is. So I meant the opposite of that. I'm sorry the opposite of that So why would you want to do that only be visible, but not I'm just curious. Well, so You can Yeah, I don't know that you would necessarily want to To show certain pieces of content for people that can see but people that can't you would hide it from them This was great, I love this It seems like a lot of people are giving advice about accessibility all the time some of which I suspect is misguided or unsubstantiated Is there any Are there any things you ever see or any like advice given that you just like think is completely wrong or things about accessibility that are That have just over the years like I don't know just like false information or like bad tips that you've come across well, I Think so. Yes. I want to say that that often people's intentions are good when they want to make things accessible one one thing that I've seen happen a lot is that that designers and developers Sometimes think that the title text will make things accessible that they use title text all over the place instead of alt text and And so the title attribute really, you know, it doesn't it doesn't behave the same with all types of assistive technology So that's one of the things that the word press community kind of fixed is that title text would always go in as kind of the default thing that that would be a description of an image or a media item and And you know, that's that's starting to to kind of go away where title text is not a is not a great Alternative text. There are certain ways you you can use it, but it's it's much more limited than people think that it is but I think in general Most of the advice that's that's coming out is is probably it's coming from a good place And I can't think of anything that was, you know, I can't think of anything that I've heard at word camp with the Ford Different talks that have been happening that has been just dead wrong somebody may disagree and somebody may say man, you are so wrong Robert, but Let me know if that's the case. Thanks. Thank you Have a couple questions you mentioned Don't use CSS background elements What if they are purely decorative Use them use them for that if they're purely decorative use them for that But if it if it's for actual content Information or functionality that's important for people to grasp You know sighted users will have no no problem with it as long as they have CSS on which most people do but but folks with either high contrast mode on and windows or Screen screen reader users will just miss that completely. So it's it's really for Functional content Informational and functional content. It's important. You don't want to trap it in background images. Gotcha. The other question is about I've noticed that there are a couple of There are a small number of gulp and grunt plugins for a 11 y and then a couple other different accessibility checkers, but I'm not sure that they're actually relevant for WordPress generated pages and sites since it looks like they're basically designed to check HTML pages and Pre-rendered HTML. I'm not sure that actually helps during the production. Well So the the access monitor plug-in that hooks in with tenon And you can use tenon directly to without using access monitor But access monitor is is a plug-in that you can actually, you know, check your your post content that runs against the the rendered DOM That for the HTML so that you know, it basically is like a headless browser So it experiences it just like any other web browser would so You know, so so some of those and I think quail does the same thing So some of those actually do check it as if it's a rendered page And that's what you want because really accessibility is all about what that front-end code How it gets rendered in the browser Do you know anything that would actually help with the checking kind of during the build process during the development of a theme for instance? Before it's rendered that I'm trying I don't know if that makes sense even but I'm trying to build themes that are that are already already have accessibility built-in so that They're ready to go without Kind of doing unit testing sort of along the way for accessibility that makes sense. Yeah. Yeah, that makes sense Well, I think I think quail is a good one for it and tenon if you're working locally You can you can actually, you know kind of bake that in you can you can use the API to send the chunks Of what that is as you're developing it so it doesn't have to be live on the internet to to be able to access that services And I think I'm being told I have to cut this off But if you have questions take a step right outside this room and I can talk with anyone about anything Accessibility related or if you if you love waffle house and tell me about that Thank you