 Okay, yeah. Welcome back everybody. If you just came in there for the next talk, they were handed out straws. If you don't have one, there are a couple of here in the front. You might need it during the next talk. It's actually a big honour to announce the next speaker. I've known her for quite some time, but I've never announced her on stage before. She works for Level Level. You can see it on her sweater. She eats, sleeps and breathed accessibility. Utrecht is actually her favourite city. And even though she lived here and partied here for quite some time, she never climbed the Dom Tower. Are you going to do this this weekend? It's our principle. Is it too high up? No, it's just a waste of time. I know what the city looks like from there. Okay, that's good. So give her a very warm road of applause for Riann Rietveld. Thank you. So accessibility testing, tools on workflow. You may have a website and you want to know, what am I doing? Am I doing it the right way? Is what my work will end up accessible? How do I test that? So that's what my talk is about. First a bit about myself. My name is Riann Rietveld. I'm a senior accessibility consultant at Level Level. And there I review all the work. I train the people and I try to make Level Level a really good accessible agency. Therefore we started training. So I'm a teacher at the Level Level Academy. There I teach for everybody who wants to learn how to build accessible. All the information on this talk will be online. So you don't have to make notes. You can just sit down and relax at LVL.LTI slash WC030. So all the information is there at the moment online. Also there's a link to the slides. Good, let's start. What is web accessibility? Lower callback gave an explanation of that. Web accessibility is the degree to which your website is usable by as many people as possible. So it's not just that one blind guy that faces your website. You want to include everyone. And I want to add something to that. On as many devices as possible. Because we are in the age that not everybody looks at a website from desktop. There are tablets, there are mobiles, speech interface. Maybe you interact with the website in your car by shouting at it. That's also accessibility. So how do you measure that? Well there are guidelines. The W3C, that's the World Web Consortium made guidelines and they are called WCAG. Web Content Accessibility Guidelines. At the moment we are at version 2.1 and you have three versions. One, A is basic accessibility. Double A is the global standard and triple A is for dedicated software. So we stick to WCAG 2.1AA. Also the WordPress core must comply with WCAG 2.1AA. So it's a global standard and in many countries it's also the law for example government websites. So there's one standard. So when are you going to test? There are five critical points when to test first. Brand guidelines. If you have a client and the client is a big company they probably have brand guidelines. Then you have to examine before you start if you can use the colors, the fonts, the images for your website. For example they have a kind of green. They want to use in the website and that green doesn't have good contrast. You cannot use that green food text. Brand guidelines. Talk to your client. Okay, these are your guidelines but I cannot take this green food text. Maybe we have to use another green or maybe not a color at all. This is important. Because if you have to check it at the end and the green doesn't comply you have to go back to the client and to the design team to fix it all over. Second one, third party plugins. You have a huge effect or your quotation on the amount of hours you spend on the website. For example you need a checkout form and the plugin you want to use for that isn't accessible. You cannot use the plugin. What you can do is write it yourself or hire someone to write it or convince the plugin author to fix it. The last option is probably not the right one but you have to consider but this will have a huge impact on your budget. So select your plugins carefully. Then red design. Well, I'm going to address that later in full but you have to test for. But you have to finish the audit of the accessibility of your design before you start to code. And when you start to code every component you test has to be accessible. You have to test everything. And you can only build on another component if the component you finish is accessible. And then the last one is content. If your site is finished and the client or maybe some content creator is adding the content that also needs to be tested. And very, very important not at the end because if you have to fix something maybe you have to refactor your whole code and that will maybe twice as much work as if you've done it right and tested it right from the beginning. So this is very important. Not at the end. So let's start with design. How do you test your design? I have four items to address. Color contrast, the meaning of color, the order of things and proximity of controls. I will go through them one by one. Color contrast. Not everybody has great eyes. If you get older, you get problems with color contrast. There is a big conspiracy going on that the letters on manuals get smaller and smaller. So color contrast is really important for people to reach your site because you want to tell them something and if they can't read it then that's not good. And maybe you have to give a graphic designer that very pretty gray and white. Maybe that's not good enough contrast for everybody to see. It may be pretty but it isn't usable. So find another way. Challenge your designer. So how do you measure your contrast? Well, brace yourself. Color contrast ratio between text and background must be 4.5 or more for normal text. Or 3.1 or more for text of at least 24 pixels or 90 pixels bold. You can memorize all that? What? There are a ton of tools available how to test your design for color contrast. If you google that you get 50, 40, I don't know, a lot. I want to show them a few. This one I really like because it's visual very attractive. You add the hexadecimal color or the value for the background and for the text. And it calculates if it validates for WayCag. In this case the color contrast isn't good enough. So it says it fails for WayCag 2.0. So you say okay, well that I cannot use. You add other values and this is actually right, this contrast is right. So the value it says passes AA level AA. So that's enough. So that's a nice visual way. You can also do it in the browser. ColorAllie is an add-on for Chrome. You can install it and it adds a tab to your inspector. Here Can you see that? And actually you can make color picker. You can choose the colors from your design or you can add them manually and it says does it pass or fail for WayCag. Browsers have a developer's tools and they're getting more and more good in also adding accessibility checks. In Sketch you have add-ons and check the color contrast while you're designing in Sketch. This is in Chrome. This is if you select a color and it tells you if it fails against the background and it actually gives a line and if you stay below the line it passes for WayCag. So this is built into Chrome. So no excuse anymore for bad color contrast. Next one. Not by color alone. What do I mean with that? Don't give meaning to color. What do I mean with that? Okay. Spot a link. I'm going to make you an offer you can't refuse. Who cannot see the link? Okay. Then you're probably color blind. People who are the most common form of color blindness is if you cannot distinguish red from green from black. So if you have a nice red link in your text or a nice green link in your text and you do not underline it people miss maybe your call to action. Why don't you just make it underlined? That's the convention. Everybody knows a link in the text is underlined. That's a link. It makes it far more easier for everybody to skim the website and to up that's a link. People who color blind also can see it. You don't have to do it in menus and other links. It just links inside the text that it's different from the text around. Underline it. This is another example. This is a graph. And there you see the stats of different kinds of browsers. How much they are used. And all icons for the graph are circles. They are only distinguished by color. So if you're color blind you cannot see the lines so why don't you make the icons differently? So if someone is color blind can actually also read the graph. This is a good test. Put your test and your design in grayscale. Can I still distinguish every big thing? Can I still understand everything? So that is a test. You have also called Syntotism and it's an app for the Mac and what it does it adds an overlay over your screen and it shows how the colors are for someone with color blindness. So in this case the parrot is red, has red in it and someone who is color blind cannot see the red. So it's a nice check to see how does my design go for someone who is color blind. Next one. The order of things. When you log in in the train on the wifi in the Netherlands you'll see free internet in the train. It's a pop up screen and there's a big button connect to the wifi and if you press that you get an error message because below there's a checkbox where you have to agree with the terms. So this is what I mean with the order of things. People read from top to bottom. Look at your design. Look at how your site is structured. People read from top to bottom and if you have a call to action and below that there's something they need to fill out too. People miss that. It's confusing. People who get the website red out loud they don't have an overview of the whole site. So they see the button and they don't know why it doesn't work and they say ok now I have to connect with the wifi and below that then it's announced that I have to agree to the terms so that actually has to be switched the order of things. So imagine top to bottom is everything in the right order. That's a manual check. Last thing. Proximity of controls. Keep together what belongs together. If you have a training of an education as a designer you know did ask a style design and there are the straws. Everybody got the straw? Ok. Imagine you don't have an overview over the whole site and you have either things that your site is getting smaller and smaller and smaller. Some people even see as much as just through a straw. When is this important? For example I have the media. I want to add a feature page and then where is the submit button to add it? It's below here. If you have an image and the submit button is on the bottom right. If you only have looks with straw people scan the page. They have an action. Ok. I select the image and they scan the page until they find the submit button. This is a familiar site for us. Here is the insert button. Here is the action and here is the insert into post. So this is quite a task for those people. So put together what belongs together. If you have an action and an action after that put them together. I'm not a designer. I have no solution for this. Maybe if you want to try and see if you have another way to do this. But this is really not usable. This is not Gestalt design. This is really bad practice and I don't have an answer. So that's for the design principles and I want to switch to development. One big thing I want you all to remember by heart. Test during development and not at the end. Yeah? Everybody knows that? Any Gutenberg developers here? Okay. How should you test? If you don't test and if you want to pick any of these tests, pick the top one. Keyboard test. Check if it works with keyboard only. Everybody has a keyboard. So check if it works with keyboard only. That's not really rocket science actually. I have a small workshop. www.reamritveld.com slash keyboard. You can use the tab key to go from focusable element to focusable element like links, submit buttons, input fields, radio buttons. You'll tap, tap, tap. You can activate with return, a button you can activate with return or with spacebar. You can select, for example radio buttons with the arrow keys and then press space to select them. It's really not hard. But everything you build must work with keyboard only. And that's not only because some screen reader user or someone who cannot use a mouse uses that but all the devices that interact with your website depend on good HTML on good keyboard accessibility. A div and a span don't get keyboard focus. Use a button for example if you want to have an action. And if that's kind of mistake you get out if you keyboard test yourself. This is a skill I think you need to have as a developer. Invest time in this. Because later if you are talking to our website in the car it also depends on that mechanism on every element doing what it's supposed to do. You'll make more sustainable websites if you actually check for keyboard accessibility. So that's the first check. The second one validate if your code is error free. Well it can easily be done at validator.w3.org there's an online validator. I will show you later some other tool who does that. There shouldn't be any HTML errors in your code. It should be error free. It amazes me how little people actually check if their code is error free. It's okay it works for me you should provide decent error free code. Check if there's errors. For example if you run a website through the validator you get a report like image element must have out attribute. This is just a semantic error. Here is an error about not setting up your sizes for your images right. Check that. Let's go to validator. Last one X X is a tool built by DQ and I'm really a fan of that. It's built by people who also work together with the people who develop the WCAG standards so they really know their stuff. And they made a validator for your website. You can use it online. They have a browser extension I will show you later that works. They have an npm module and they have a command line interface. You can also add that to your grant or code routine for automated testing. I will show you how X works in the browser. It's an add-on for Chrome and Firefox. It's an X accessibility tester. I think you have to search for the add-ons. And what it does it also adds a tab in your inspector. So X and then it gives a screen with a big blue button Analyze. And if you press Analyze it gives you a report of all the accessibility issues they find in your site. It goes up in your page. It goes per page. You have to check per page. For example here there's a button that must have distinguishable text here. That is an error. And actually this is a search button that's only an icon. There's no text in it. So someone who's blind doesn't know what the submit button does. There are color contrast issues so X also checks for color contrast if your designer didn't do that already. And images most have alternative text. So this is a really good checker. And it gives you very good information. You also can directly jump to inspect note or to highlight. Then it highlights where the code occurs and you have to learn more. So if you click that you get a complete explanation why this error is an error. Put it in your work routine. Test with keyboard, test with X. X also gets a lot of HTML errors out. So this is a good one if you test in your browser to add it to your work routine. Okay, last one is dynamic content. If you have a page and you want to search and you have to search without a page you get results without a page without. Or maybe you have a form that does a calculation and the calculation does in JavaScript and it's without a page reload presented on the page. If you can see you can see what's happening. Oh, there are search results coming. But if you cannot see, it has to be announced to you. And that is done with ARIA. I will not go into the specifics on how to do that. I will give a training about that, I hope, recently. But you have to listen with a screen reader if it's actually undounced. There's a simple way to test your website with a screen reader. Apple Voice Over with Safari and Meritor with Edge. Some screen readers are really full-featured and they cost a lot of money. But those two, Apple Voice Over is built in your Mac. If you use it together with Safari it has a small manual that's built in also. Spend one afternoon just trying to figure out how it works and how someone who is blind listens to your website. Narrative with Edge that's new. Use the good browser with the good screen reader. So narrative together with Edge and narrative is just new. It's also a simple screen reader. You don't have much features but it gives you a good overview of how people actually hear your website. So recap for development. Check the generated DOM in the inspector. Keyboard test. Validate and run X. Check dynamic content with a screen reader. Last item is content. Who is a content creator? Who writes for the web? Nobody? Come on, we all do. There are three items you need to take care of. Reading level, having structure and meaningful text. Reading level. 12 years old. My audience is way smarter than that. Really. Then you assume that your reader is in fit condition, had a coffee, is awake in their office and no distraction. That's the optimal condition. But that's not the case. If you are a parent or if you have cats or maybe you have a hangover this is really recognizable. Maybe you had a fight with your spouse. Maybe your boss is nagging. Maybe you're in a train and there's a lot of distraction. Nobody ever complained that your text was too easy to read. Look at your text. 12 years old is really for everybody good to read. Take some effort in that. And you can actually test that. How do you test that? We are very fortunate to have Yoast SEO. Because Yoast SEO has a readability check. And get all the green dots. What's wrong with the green dots? Thankfully they have text added to it to actually describe if it's good or bad. Okay. So check your site if it's actually readable. This is a link structure. This is an old treat of mine. Dear content managers. Headings are not to make text big but to describe the content that follows. Can you please all remember this? Text is not to make headings is not to make text big but to describe the content that follows. So people who are blind can for example navigate by headings. And they think okay this is interesting heading. I can read from there about what's coming. If it's just a big big heading to actually to a call to action and nothing is following below that heading is in fact not a heading. But you can make it up with CSS. You don't have to use a heading for that. Heading are the backbone of your content. So use one h1 page. And that h1 is describing what each page is about. If you think every section needs an h1 come see me afterwards because that's not longer the case anymore. One h1 per page. The other heading is meaningful and don't skip a heading level. There are tools to test that. This is a browser extension for Chrome called headings map. And it shows you exactly how the headings are. And it also labels in red where it's wrong. So this is a nice tool. This is Gutenberg. In Gutenberg there's an icon with an eye in it. I don't know what that means information. And then it gives you a summary of your site. The content. And there's a document outline. The title. That's the h1. And h2 h3 h2 h4. I'm skipping a level. It gives it a different color and a text in current heading level. So that's built in into Gutenberg. So. Heading level. Next one. Meaningfully text. This was used to be the case in WP Tavern. There are there's a podcast. And this way to subscribe to the podcast. Subscribe to WP W. Kleevia iTunes. Click here to subscribe. Subscribe to WP W. Kleevia RSS. Click here to subscribe. This is really a very bad link text. Because if you can see you have to you skim through links. And then you see the link. And then you have to read the whole sentence to actually understand what the links are. So it kind of takes you extra effort to understand what's going on. So. This is how someone who is blind get the website. They can call a list of links. And there's a link. Click here to subscribe. Click here to subscribe. Click here to subscribe. I don't know what to subscribe to or what. So then this is very very time consuming for people who want to navigate your website for free. So. That changed it. Subscribe to WP W. Kleevia RSS. WP W. Kleevia iTunes. So now these are meaningful links. Links that stand out on their own. So this is the link list. WP W. Kleevia iTunes. So this is a meaningful link. Look at Content Manager at the links. Are they standing out on their own? Avoid. Click here. Download. Subscribe. Learn more. Those are meaningless links in the link list. Having good link text is also very good for your SEO. I hope. Recap. There are five critical points. Brand guidelines. Third-party plugins. Web design. Development and content. And don't test at the end. Everything you want to know is on lvl.li dash WC030 and one more thing. I recently joined Level Level and there I'm going to give training. So if you want to know more about accessibility about good coding practice we give one day workshops for content managers for designers. We have one workshop for everyone to give a broad overview of everything that's important for if you start an accessible project. And we call it the Level Level Academy. So when you get your goodie back we added some of our accessibility cards. These are cards with tips for designers, content managers about what to look out for if you want to build accessible. And we have also a giveaway. We give away one free workshop. So it's in your goodie back. If it isn't in your goodie back come and see me and I will give you one. You can fill out a small form with your name and email address and you can head it out by the server from Level Level. There's a jar. You can put stuff in. And we will give one away in the evening at the bottle. What's the drink? I don't know what's in English. So if you want to end for everyone attending we gave 30% of if you're attending here the word camp for a workshop. So that's it. Thank you, Riam. Are there any questions? On your website? That's bullshit. They have their own equipment for that. They have their own screen readers zoom equipment. They can change the contrast or the black, white, inverse colors. They all have their own equipment. You have to make sure that your code is error free and semantic. All those equipment works. And all those, I call it AliPizza all those buttons like full size things. It's only to show off to say look I did something for accessibility but people who use that have their own equipment. So don't, you know, just build decently. Good, valid, decent HTML5. Yeah. ReadSpeaker ReadSpeaker ReadSpeaker is not a screen reader because with screen reader you can navigate and you can really use the website. A readSpeaker reads out the text and that's convenient for people who are dyslexic or people who are too good for a screen reader and not good enough to actually read a large amount of texts. So those people just press the readSpeaker. It's an additional service. How can you test for voice interactivity like in your car? Well, speak to it and see what happens. Is there a tool to test something like that on desktop or a Mac? I think if the keyboard accessibility works then that works too but I haven't really deep into it the exact answer but also the same good HTML then it should work probably. That's all for today. Diffs to a block if you insert the image to a lot of diffs come into the code. Is that a problem for accessibility or if you for example put in that image is it better to put that image into a plastic block around the text? The question is are page builders who add a lot of diffs to the code is that a problem for accessibility? It's not. Because it adds to the clutter of your code but it's not a problem for accessibility because diff has no meaning at all. What you have to look out for is if you use a diff is it really something that has no meaning? If it has meaning you have to give it an element that suits for the image for the meaning like a paragraph is a p but for an action for an anchor. But don't add all the diffs don't give meaning to all the diffs don't add interactions to diff do that to the actual elements that are there for but if you have to add a lot of diffs for layout well it's all right it's just yeah. Is that your answer to your question? How do you convince the client of being accessible like is it okay to see the diff tools audit by saying we are accessible for like 90 years There are two questions how do you convince your client for accessibility or how do you say oh this is how well I've done? All the accessibility tools like X don't get everything out so it's not like look I have 90% so I'm completely accessible that's not true with all the tools you use it's a combination of everything you have to use there's not like a score like a number you get somewhere because all the tools like X don't get everything out that's too hard to do at the moment you can so maybe describe what you did like we checked for color contrast we checked for this and you get a list of things you actually checked for I think I think that's better than just having a big score yeah I think we have time for one last question and if not we're gonna thank Leon really for telling us about accessibility and the importance of it so one round of applause thank you