 Hello everyone, welcome. We're going to start So you're all here for accessibility testing and that's great because that's the key of learning how to do things I Want to introduce my co-host? It's a summer keone and together. We are in the accessibility team, but not alone Andrea Fertia will help us out. He is the main programmer of accessibility team And he works for Yoast and this is an announcement. Sami will work for 10 up so And then we have hidden in the corner Adrian Rosselli. He's really small He is not work-based, but he is one of the leading accessibility people of the world and he's fluent especially for Renkamp US to Serbia so thank you So for this workshop we made a website with all the exercises all the things you need to know all the links to important content and That's training Dot WP slash accessible dot org and If you have a laptop, could you please install that or go to that URL and then I treated it And I hope you got the email We have a list of add-ons and plugins you can install It's in a spreadsheet, but there are also links in the in the website with all the topics I don't know who has done that before who has done the install of the plugins. Oh excellent good So that's safe time If there's anything you need to ask or something that yeah, you don't understand, please Ask away. Don't wait. Just ask raise your hand and I will try of we all will try to answer your questions So it will be interactive and Monique isn't allowed to raise her hand. Okay Yeah Okay now in the Okay, tell me I use always three browsers Safari from and Firefox and I I have a Mac so I don't have edge or What's the other devious browser? So But you can use any browser you like But it's it's it's nice with some some things work better in in some browser some test tools and other in other browsers So I use always three browsers Then for this workshop We have a short intro about accessibility. I will tell something about guidelines because we are going to test so against what? Something about briefly about project workflow. When are you going to test? then One hour about design one hour about web content and Then we have a short break and After that, Sami will take over and he will do the development stuff. This is real code based Testing so if you are not really a developer you are allowed to leave that So We have a format for all the for all the issues What are we going to test? Why? Does it need to do to work that way? How are we going to test and how to fix it? Just give you examples on how to fix it And we needed you to try yourself. Thankfully we have good Wi-Fi So we have to try yourself. You get a test tool and you Website an example and we try to find the errors ourselves So that's the key do everything here yourself and if you don't understand something ask one of four of us and we try to help you so Something about the guidelines What is web accessibility Well, there is there are many definitions one I like is from Sarah Kovac Web accessibility is the degree in which a website is usable by as many people as possible So not just that one blind guy that never visits your website, but everybody and how do you measure that? That we have Waycac and that's the abbreviation of web content accessibility Guidelines and these are made by the W3C so these are the guidelines we Made by the experts who also write the specs of the HTML 5 and the CSS and There are a few versions at the moment. We are a version 2.0, but it will soon be 2.1 For WordPress, we still have 2.0 and will be soon in a few weeks switch to 2.9 1 2.9 is just an extension. There are a few more rules added But I want to write a blog post and explain to you all what's changed and I didn't write that yet So we'll stick to 2.0 at the moment, but that's very good, too and Then you have the livekacor These are based on four principles. I will do this very short. Okay, perceivable All content must be available for everyone Operable every visible must use must be able to use or functionality Understandable, can I visit or understand the content and how the website works and Robust that's my site work on every device and here Accessibility links also to all the new devices that are made lately your iPhone. Maybe some interface in your car So accessibility also means it works on every device So We have three levels a that's basic Double a and that's good and that's the global standard I think almost every country in the world sticks to way cake to a a so if you want to know what guidelines we use WordPress for WordPress and for worldwide. It's way cake to a a Then you have triple a and that's for really dedicated software. So that's really hard to meet for a website So we don't stick to triple a we do delay. So and as the we Implement implemented this as a statement in WordPress All new and updated code released in WordPress. Let's work as core Must conform with way cake to a a and that will be soon way cake to point one After that Who benefits from all this? 20% of all your users So if for example You don't have the blind guy, but you also have someone who is deaf Someone who can't move their arms very well someone who can't hear very well or see for wells color blind Someone who uses an iPhone in the Sun All those different cases are covered with way cake to a a and One big example if you have to sell it to your client Google is blind and deaf So if you want a good SEO use accessibility An accessible code and then Google can also index your code better your website better There's a few I will go don't go through them, but there's few resources you can read It's stuff further other questions about this. Oh Okay Hi, I'm dead quick. Is there summary about like what's the difference between 2.0 and 2.1? I will publish a blog post in a few days and there are also many posts on on the internet a few difference 2.1 to boy if you Google that you get a mini blog post about but I want to do a blog post especially for WordPress, but that will be when I Recover recovered from Okay, I'm just gonna point out one resource is what was in the last page We have been riding the accessibility handbook Which is really handy way to actually start learning more about accessibility We have kind of topics from the design content and markup and testing as we trying to do today So that's kind of one resource that you can always come back and learn more and there are more resources after those summer articles in there, so It's like you can take like when there's like 30 days of Yavascript learning you can take like 30 days of actively learning sessions also in a sense of learning like 30 minutes in a day or something Yeah, that's the first link here WordPress accessibility handbook. There's a ton of information Okay workflow When do you start testing and When you are going to include accessibility That's at the very first stage when you talk to your client when you talk to your project manager when you talk to your boss What plugins do you need? Are they accessible? What functionality do you need can everybody use that you have to think that before you start designing before your quotation? because if someone wants a really Complicated plugin and the plug-in isn't accessible. Maybe you have to build it in-house and then it's far more costly So before you make your quotation look at what will be the functionality and how are we going to build that? Then is there Audi and video? Does the client have budget to for example do transcriptions or captions? Some clients don't have the budget for that and maybe they cannot include a video Because if you have an accessible website, everybody should be able to get the content So if someone is deaf and there's no feed and there's video with speech Well She can't hear it So all the video is their budget to have captions and then PDFs and other digital documents PDFs are notoriously hard to get accessible That's a very difficult to do. So if you have a website for example contact migration with a lot of PDFs in it You may consider That's not the best way to do it to add those PDFs to the website Maybe you have to come with someone else something else and that may be very costly too So before your quotation consider that and Then the branding colors There is a famous example from the Dutch university the Erasmus University and they had a lovely green that was their branding color and Then they wanted that color in the website for the text and for the buttons But it was too light people couldn't read that well and Then they had to talk for like six months with all the directors to change that green color to actually implement it in the website So do that before you start designing because if you have the design ready and the color isn't ready then yeah Then you then it's very hard to change that but if you that in front and you change also the branding colors from the company itself Then it's much easier to implement it in the website because it's right from the start Then you get on design and we're going to talk about that front-end code and web content So I'm first going to address design then content then a short break and then Sami will talk about the code Are the questions about this? design These are the topics I want to address color contrast Not by color alone the order of things Animation and the use of icons and we are going to test for this. So here here starts your working Color contrast Now there is a rule and it's a really complicated rule but Calm down. There are so many test tools for this the visual presentation of text and images of text as a contrast ratio of at least 4.5 to 1 Large scale text or larger text of at least 24 pixels normal or 19 pixels bold and Images of a large scale test have a contrast ratio of at least 3.1 So this is really complicated but we have test tools and There are many many test tools in The handbook we have a list of all the test tools and I want to demonstrate a few for you And I'm going to sit now Do you have all the website all the website in front of you who hasn't the website in front of him or Okay, good So why is contrast important now people are colorblind people are older and don't see contrast very well screens in the sun and Also be kind do it not for text alone, but also for borders and input fields and placeholders So one of the most basic ones and I really actually like this one a lot If you are a designer you have a color and a background color This only goes for text text and the background color. They should have sufficient background So if you have for example a text With this color You put in the hexadecimal code of the text and For background and you'll see this is a very bad contrast. You can't even read it probably from there so Don't tip over So this is very convenient. We get to a compliant. No So it doesn't get much easier than that if you are a designer, you know the hexadecimal color You add the front end color and the background color and it gives you a no or maybe a yes Let's find something out. There's one after much So this is much better to read. Yeah, we can comply it. Yes, the contrast ratio is five point nine So this way below four point So here can you calculate and there are tools for sketch is Maya here Okay, my if you went to the Maya the talk by Maya There are tools for sketch will actually can calculate the contrast ratio for you And Maya has another one color Contrast Come I think Maybe it's here and the way if I slow come on wake up Okay there is another one a simple one by a web aim and It does the same actually for current color background color contrast ratio And it's set as passes for wake up to a a and it and is here also a check for triple a and it shows you how to how it looks This is the color contrast analyze for sketch. I don't have sketch but there's a link on it in the website so you can try and you can See if it works that you can do in your own time Then our tools you can check for color in a browser if you already have a website and you think okay How do my colors do? There is one is a browser add-on for X for Chrome and for Firefox That's called X and I installed that So we can see it Now we do the website wordpress 18. Oh, I'm working a safari. It's not a safari Let's try the wordpress of Europe So what X does if you install that as an add-on And you do inspect It's a bit low Does anyone know how to access this? The inspector That's any we don't know sorry Okay You look control and then opens the window and you say you see an inspect That's not an image fairly Inspect and it's the same for chrome and for safari and for Firefox Then you get actually your HTML That's if you're not a design of you not the code or you don't you say what the hell There's a one tap you can actually add it's X you can analyze and you get all the Accessibility errors So elements must have sufficient color contrast. Can you see this? elements 18 violations and It gives you exactly the code where it goes wrong the saffa center It's okay. It's back to note saffa center. I don't know where it is exactly You can also say highlight Oh, it's the wrong one Okay Can you okay? Okay If you code control and then click Inspect and it you have X you say analyze and This one has two violations and Usually highlight and it highlights and this is the zero and This is a zero from the This zero this has two little contrasts and this is a toolbar from workers So it's a good tip if you test your website log out because we're press gives a lot of Errors Sorry about that So back to the word press Then you have wave wave is much easier if you're not a developer that's also an browser add-on and It adds a button And you can click it wave and what it does You can hear a summary of errors Alerts features features is good and you can see it also refers to what's in the website So we look at for example The alerts and this is like he's making a guess. Maybe this is good. Maybe it's not good But maybe it's more clear if we go to a website with a lot of errors wave It gives one error It's empty heading. That's maybe content manager. Do you actually pressed on return or? An empty heading it has all kind of features You can browse through and see what they are and There So I'll let him shut up shut up. I said Oh knows Refresh it Okay, then there is color Ali for chrome and that's also an add-on and it also adds a tap in your inspector for Ali and here you can have a Drop down of how to drop how do who you call this Color picker. Yeah, I drop. Okay, you go to One and you determine a background for example black And it gives you if it passes for normal text and if it passes for large text So there are many tools online And you have to pick the one that works the best for you So do it yourself work. I'm central Pick the tool you like or that you installed And just check how the color contrast of this website is That's every everybody has a tool like he wants to check. Yeah Sorry, sorry, what color any? Color color ah one one why? Sorry, yeah, which add-on it was that you the last one that you've used off the wave Color only okay, it's if the link is in the list We can wander around in here if you need help at this point for example actually install in the blockings or If you don't know how they actually work. Okay. Yeah, like we can stop testing Yeah, yeah, yeah, and you put this off for a while so I can Sex in there. Yeah and for Yeah Okay I see people using acts of Losing wave a lot a wave also gives errors that are not really errors just like warnings So you have to specifically look at the errors So what you maybe discover there are errors you think oh, that's not an error at all or it's missing errors. Why? This is not a perfect tool There is no perfect accessibility test tool that you press one button and you get all the answers and all the errors You have to evaluate from what it is say does it actually make sense because you can get false positives and think that missed are missed So it's not really hard science So does everyone have a quarter of a feeling how to set this up? And I want to go to the next topic and that's not back color alone So what do we mean with that? A website has to be visible by someone who is colorblind And if you saw Maya's talk, she had some good examples one good example before Example if you have an error message and you have only a red line in your input fields Then people who are colorblind cannot see the error message So there's a really nice tool for that to check how someone sees your website Who is colorblind and that's called simdultinism and that's an app for the Mac And then I need a colored website, of course Example work in Nijmegen So you see in the work in Nijmegen the links are not underlined Or here you have for example the text melts you on that's red And if you cannot see any text of any color Maybe you can miss the link then and you can have a simulation with that. Where was it here? So where the error is the arrow is your your mouse pointer is then you see How someone with who only see the gray scale can see the links or can see the colors and then you can see This link is completely invisible You can see it if you're not colorblind, but if you are colorblind you cannot see links and this is a call to action link So this is a very good tool To check and it has different kinds of Different kinds of sorts of disabilities of colorblindness Most common is that people cannot see the difference between red and green and black So maybe they see your website completely different So this is a nice tool to check your website with how did someone with colorblindness sees your website? Simdultinism, yeah sorry Simdultinism, it's um, it's in the list is here and You have also Coblist and that's a website you can apply to load an image to and then you can see how the image react for someone who's colorblind and then for sketch You have a colorblind simulator and I don't have sketch So I can't demonstrate it to you, but you can Download it for free and then in your sketch you can simulate different kinds of colorblindness But simdultinism is really nice for the Mac. It's an app. It's not an add-on for the browser. It's really an app so Let's check the website of the Sun dot go dot UK if you see there's a menu and You can only see if it's some menu is active by a change in color So so how does someone with colorblindness see this for example? Maybe he cannot see what the active menu is So make another way to make a menu active like make it bold or another way This is also a good tool to show your client or your graphic designer Who is stubborn to see but it's beautiful and I like it and they say okay, but 8% of all men is colorblind So a large percentage of your reps or your visitors may not understand what the case is here and this one I found That was really beautiful example are not to do things and that's a Dutch website and I can show this because we are going to rebuild this accessible. So this is just If you order there something you get a Hopefully Okay, you got a form here. It's a very gray form If I forget to fill out stuff Then it only adds a red border So this is very inaccessible So don't do this and if your graphic designer says yeah, but this way to do it Show it maybe for someone who looks at it in grayscale and they maybe see a lightly Thicker border, but if it's have no meaning of there's no error warning with it Maybe it's just he forgets what the meaning is or doesn't get what the meaning is that is wrong So that's what I mean with not back color alone Check your design in grayscale Can I still figure out what the meaning is? Can I still figure out what's wrong? We are active menu. I am or maybe you have beautiful image with meaning So are the questions about this? Yeah Yeah, hi, so input fields and labels. Yeah Our labels something that is mandatory or not because I think those are shown as errors Labels as errors labels. Yeah, because if the input field doesn't have an label Associated with it. Oh, but that's HTML. Yeah, that's that's really code-based. You have to have if your input field You have to have a label attached label for is and then You give the input field an ID and ID if some idea and you make ID and a four is connected with your ID So the label is connected to the input field, but I think some you will address that That's that's really code-based, but what what is good if you have Whether that's maybe if you have an input field Always tends to be a label Visible, yeah Preferably also visible. Yes This is also a good example for this Here you have the label That's actually the placeholder So The disadvantage of this is if you start typing the placeholder disappears and people forget what to fill out This is just you start typing and then you remove it again. What should I fail? Oh, it's my this I had need to fill out Just a visual label is better for everyone So just that makes a form much more clear That's that's good practice, and I think maybe we're can I ask Yeah Is it correct to should you should the input be attached? To sorry should the label be attached to the input or the input wrapped inside the label because I do see a lot of plugins actually Implement the polls are kind kind of fine But the best way of doing it is that there is the for an ID because that works pretty much Every soft and don't wrap with the label. Yeah, if you wrap it inside Done some voice recognition software don't announce it well And if you would do it separately then it works guarantee it every every time so it's far more robust Shall we shall we address the code base later? And I she wanted to finish the color because this is the discussion we can have Long yeah, you have another question. Oh, you're so into revenge. Are you yeah? Monique is my friend for people think Okay, this is another example for not back home for not back color alone This is a selector for a date for this you can make an appointment with the government and All the dates are still available are green dates are not available are blue So if you cannot distinguish color you have not a clue which dates are available you have to make a guess So what they did? They proved it So all the dates are available are now dark gray and not available a light gray But the color contrast is awful. So this is still not right if you are a good designer find something better Maybe with color, but also made an eye with an icon like What think you what is that? Thank you a check or an X through the date. That's far more Informative than just a slight color difference This is a website that needs to be accessible because this is That you need to make an appointment with the government. So this is really bad Dutch governments really great This is clear Don't give meaning in color. Always add extra information any questions Then I won't in the back. Yeah do you have examples that show like best practices or websites that do implement accessibility everything what's on the BBC code that you case and okay BBC is excellent. If you go to code practice go to the BBC. It's really nice And maybe you'll have one Yeah BBC patterns. Yeah, they have yeah, okay So then the order of things Not everyone has an overview over your whole over the whole screen some people only see a tiny bit and they have a Struggle to find stuff on the side for example Maybe someone sees only this tiny bit of the screen and if your submit button Is like here That's Really hard. They have to scan the whole page That's what they do actually they just scan the whole page Until they find what they need So you have to put the action and the submit button close together You have actually things that belong together. You have to put together and that's a design principles the style design proximity of controls put things together So you don't force people to actually scan the whole page and this is not only for people who only see a small part It's for most people They expect things to belong together and put them in the right order So this is from the Dutch railway when you want to connect to the Wi-Fi You are in the train you open your laptop you want to connect to the Wi-Fi That's here big button make connection with the internet and below there is You have to agree with the terms. So what you do you read from top to bottom and you see, okay, I see the button Connect with the internet and you press that and nothing happens They did it. Okay for the mobile version Then you have free internet on the train. I agree with the terms make connection. This is what people expect So if you design Read from top to bottom and you say is it logical order are the things presented to the user in the logical order and also close together This is not a tool you can test with. This is just common sense Just read with other eyes not your own eyes. Don't expect people to have an overview over everything that's on the page So do it yourself check the order of your own side maybe in mobile Mobile version or or ever if you have a website or try your website out Look is everything in the order you want. Look at just the design. I Don't have really an example for this Does everyone someone has a website to share maybe Don't be shy we won't shoot you It's not me is it Not this time Okay, yeah K D E developer Ka dot org Level up This and a at the end K a Hey, hey That's female developer in Serbian Okay So if someone wants you expect content in the top and that's there. I Think you may include with the font size here And then there's the heading. This is first menu in that heading and this is kind of your You're really a designer. Are you? okay, I Think I don't see anything wrong. Actually. This is the the title and then you get a metadata and Then you get text and what's this? This is sidebar. Oh, this is a table of content over all the okay, and then you jump to inside the page Well, I think this is a logical order of things, yeah Maybe something I will leave it here Other questions about this I think just Think put yourself in in place of someone who cannot see the whole page Yeah, keeping the What you called it at the top of the page The actions with next to the Keep what keep together what belongs together. Yeah, and other plans to implement that like within the media library of WordPress If you can make a design what actually makes sense, please The purpose is who makes it a who shows up and will contributes if you think okay, I'm not a designer I don't know solution for that, but if you're a designer you think okay, maybe you can propose designs Then animation there you go If you have animation on your website it distracts enormously and Most people cannot even read the text below anymore or on the site How long can you stand this? Animation must be stoppable by the user So if you see a website with animation you think okay, how can I stop this? So make a stop button or something that is really stopped So there's no test tool for this just check the website. Is there animation? Can I stop it? Or does it run for example like three seconds and then stops? That's okay, too But this is really many people cannot read your content anymore and well what you write in your website is actually for the content I think so If you have a slider It's a slider like on the front page and a chuck chuck Sometimes it goes fast and then you decide for the user how fast she should read Not everybody reads that fast some people English isn't for example the native language of your site is in English So they need more time to read and then it's the next slide already So give them control Don't make them slide automatically, but give the people control over now. I want to read the next slide and now the next slide So make animation plausible and give the user control about speed Now I can oh, I've had blocker. I have to do this without that blocker This is such a fence on it Now I hope they have a really loud Maybe oh, okay, it depends sometimes they have a pearl here on the background a huge They don't have at the moment, okay, that's a pity. They had yesterday Okay, I'll try to find another example This is a famous one. I really love this site What I do when I want to read this I put my hand over the screen and just try to read this because it's so distracting You think why? This is really bad website Now this is one this is from France and they have a slider, but they have controls You can control your own speed. You can start and you can stop the animation and show she where you are This is really very user friendly You have complete control of what you want to see if you want to stop it if you want to go the next slide If you want to just more time just you stop the animation go to the next slide yourself. This is how it's done The link is in the in the website. It's really good example of an accessible slider So if you look at your side and you see animation Can it be stopped? Can the user get control? There are some in CSS tricks. There are discussions about this and this is a start-stop slider as an example So if you have a client who desperately needs a slider on the home page for what reason what forever Go to this solution In general, I would not recommend sliders, but that's another issue And then the last use of icons Ah Don't make me guess Where are questions about the slide of the animation? Yeah, what do you think about? Like Subtle animations of different you UI elements in design for example Kind of like a jumping arrow down arrow that shows that you have to scroll down or something In your opinion Continuous jumping You have sometimes when you want to force the users to go down the fault We know you have like an arrow. So don't know I don't know and I think that's not annoying. Yeah, but do you think that? Do you think that there's like? It hinders some people or or it's just annoying Is there a real attention disorder? Yeah Yeah, I got a microphone so I'm gonna say some of this again an animation is fine If it is if it is subtle and it reinforces the action if it is continuous and the user cannot stop it that is a problem Distinguishing between subtle and not is a bit of your own decision But you put in front of users. You'll know pretty quickly, but don't loop it make it subtle Make sure it reinforces an action is not gratuitous But it's it's for people with an attention disorder the for the people who benefit from this a lot of people will benefit from it more In my own testing with users more people tend to benefit from a very simple direct animation Then we'll be harmed by it, but as soon as you start going crazy with it And it makes noise and their computer catches fire probably don't do that Yeah Yeah, okay should a slider play automatically the moment you start and we want page loads or should the should the user Actually decide if they wanted to play or not. I think it's okay. If it starts automatically only if it's Stoppable if if someone sees okay, it slides out of medical in that must be asleep stop it Yeah, okay Then don't make me guess. I think it's this a really Hot topic at the moment with a new editor coming out with all kinds of icons At text or a tooltip to an icon Design for your users for example These three lines We are all tech savvy. We know it's a hamburger menu, or maybe it's justify. I don't know it's the same Icon it's two different meanings if you are not tech savvy if you're not that smart with the computer You have to guess what this means On your next birthday party ask your family how long it took for them, or if they ever Discovered that that is a menu That's really a big problem And if your menu is the access to the rest of your website some people will actually not be able to see the rest of Your component so always add a word to your icon. You can use a wonderful icon no matter what But add the word what it means next to it or a tooltip That's really important because you design for your users. So look at your icons Are they understandable is that text with it does every user get that but not everybody's as smart as you are so Gutenberg demo Launches in August Yes, okay, so this is what the wheel shout and This is what more Come up and this is what yeah, you shut up. Okay And what what information is that about this this is what adding adding something and This oh did maybe I'll scroll up Bit possible no Can you see this? Is it on or off? Yeah, you sure and now Now it's on that's off. Okay. Why do you think that? But because there's a one then it's on Andrea. You're wonderful That wasn't the case before yeah, so if we go to for example plus Now you see other icons and there's text below it that will save people so much time to actually understand what it is so you add a block here and I you get information about the content about How many headings how many paragraphs how many blocks how many words? Okay This is a learning curve. You have to learn to work with the editor to know what all the icons mean For if you for example hover over something there's a lot of icons paragraph This is the way the text is aligned bold So these are all icons and now I don't know if it's the new version. No Actually, if you hover over the new version, yeah, you get link you see So this is the way to do to actually add some way of extra context to your icons So the people that know don't understand what the icons mean can every have a way to understand Okay, this is adding a link not everybody is as clever as you are or uses the web of the interface as much as you are So help them Add text to your icons so that you can check yourself. There's no tool for that. It's just your eyes Well, what's the last scope of the icons you mean or if you go down to where you were showing those click on a block and Then you go up and get the tool tip Yeah, like that like there's something right below italic, which is that it's the it's the command. Yeah, that's a short code But but it's the color con. It's a great illustration of Bad color contrast That's that's an issue for that Yeah, but interesting. It's a great issue. Yeah, I mean it's cool It's there from there. You cannot read it. You mean yourself, but maybe from your screen also not yeah Well, yeah, I mean it's great that it's there I like that but it the color contrast makes it very hard to see. Well, you learned already something here on the Excellent other questions about icons. Okay, this is the part about Design other other design questions before I go into content Yeah, it actually concerns icons and I think like the tooltip How do you do with tooltips like on hover? That's not really happening on mobile where you don't use a mouse or where you can't use a mouse I'm really interested what the solution would be for that Hello, Mike Mike Mike Sorry right now for mobile. There's no solution yet. We are discussing that tooltips works also on focus or good for keyboard users also on the desktop on the desktop But for mobile we haven't addressed The issue yet. So if you're a designer and you have a solution keep in mind that tooltips are a trade-off themselves because The idea of the best of the best option would be a visible text label close to the icon Remember tooltips are sometimes factored into the accessible name calculation and tooltips come from the title attribute So I recommend against using the title attribute because some browser screen reader combinations Can blow up what the real text is and use the title instead if you want to do tooltips There are accessible ways to do it but you still need to understand that it's only ever supplemental information on mobile users typically cannot get to it and There are some techniques that we can talk about separately way outside of this. They're a little bit more technical But just avoid tooltips as the general gist So that was Gutenberg. Okay Okay next content Did you ever listen to your website? I Will get that to that later. I want to address Four topics. That's readability How readability is your site and how can assess for that heading structure? This is the copy the h1 the h2 the h3 meaningful link text and Alternative text for images so that are four topics and I want to start with readability This might surprise you reading level of your text Right for someone who's 12 years maximum old and You think well my my audience is way smarter than that, but then you presume that your audience Read in the optimal optimal Condition maybe they're hungover baby. They are tired. Maybe and they have a cat on their napa was nagging Maybe they have a child who is talking to them So nobody ever said my text is too easy to read so keep it Level of 12 years old start with a short summary of the content People browse through the internet never nobody reads they browse and they skip and they see okay This is what I want to read and read from there So if you start a page just a blog post or really a page with content with a short summary of the content Then people know okay. This is what I'm interesting in or this this I want to skip so it saves time And the fight the rest in blocks headings lists make it appealing to read images Use large enough font good enough line height and limit the content with So there is a lot about this in the handbook readability in the accessibility handbook and There are tools for that To check your text and we are in workers are fortunate to have the Yoast SEO Plugin and nice of that is that it also does a readability check. That's actually quite good So if you go to this It as the Yoast SEO plugin. I think everybody knows that It adds a readability check and it gives you this is good and this is wrong So I need to do something about my text, but it is here It gives you the fresh reading ease test and it gives you a number and if this is a green bullet Your text is good to read for 12 years Max so this is an easy text. How difficult is my text? Just Yoast SEO readability and see if the readability is good enough. That's really easy. Yeah There are few languages. I know English Dutch or maybe German, do you know that? Yeah Russian Can I click on what? Change language Well, you have to change the language of your side It doesn't say no it it it it it reads the language you have What? No, but but if you want to use this test for your for your your own website and your website isn't English And it's convenient if you have the same text. I think So I think there are a few major languages they have that the check for and I don't know if it's in Serbian Maybe they will okay. There's no Serbian yet. No, okay. Oh, there's the real Yoast English German Dutch French Spanish in Italian So Maybe there will be more and the question is about this There are online many many tools, but mostly are English based Yeah, so This is the only one. I know that checks for Dutch for example or German or the other languages, you know change the Plug-in to not take the text from the content box, but instead I don't know that okay I don't know that that you have to go to the boot Okay ask questions This is not sponsored by you. I just think it's a good tool You can come by body. Oh, sorry. You can come by body. Oh smooth. Yeah, and I know that for sure I think there is a plugin who also adds meta tags meta data or we go Meta Fields meta fields For that for Yoast, but oh you add you ask us, you know people from Yoast So what you can do if you have Yoast SEO installed you can for example do a new post and This is maybe you can all practice if you have a site online. Do you have and then for example? This is the website Oh, I copy paste some text and I look at the readability of your site And then you can check what needs to be improved on This is just a portion of your text I took so it doesn't have headings But you can copy paste just in an empty post and on check how good the text is Any more questions about readability Yeah, okay, you talked about tools Do you know about the Hemingway app for example, but that's only English language based. Yes, but that's a good tool. Yeah Yeah, I was using it. Yeah Okay, I've got a link in the page about readability. I've got a link to more Different tools, but they are all English based. So I want to show this because it's per camp you know but there's a list list into the The three different tools So you can check out if you're checking your English that you can check out if it's if there's one that you like Okay, then I want to talk about having structure and I want to let you listen to your website And people who are blind get the website read out loud and That's really tedious to go from top to bottom every time So they have short ways to navigate and one way to navigate is with headings and I'm going to start up the native Scream reader And if there are a sound that will be nice you have sound You Use volume 100 this is goes chrome heading structure test web accessibility window heading structure meeting Okay This screen reader is for Apple users is native to you and it works Best actually only best in Safari And you start it up with command at five. Don't do that all at the same time Because it's a lot of noise Heading structure test web accessibility web content Okay, I start reading heading structure test web accessibility web content link skip content Visited link test web accessibility workshop visited link expand child menu collapsed button visited muting So this is really awkward You want to read the page, but you have to go through the menu all again or you have to use a skip link Sami is going to tell about But what you can do you can call on the head list of headings It's called the web router Control out you and then you start headings you get the headings and This is a super easy way to fast navigate the website H1 This is what a page is about only use one each one if you want to know about best practices You press enter and then it start reading from best practices. This is such a time saver, but then The headings must make sense If you have headings all over the place just to make text big and No real content that's related about it below Then it's a useless heading if you want to have big text do it with CSS Just don't give it a random heading like okay. That's a good size. Okay. This will be the heading Headings must be meaningful and in the right order for example if I Put a web router again One each one then there's an age to best practices and then as age three and that actually resides below the best practices and on the age two It's three and it's three. They all reside below the best practices and then there's an age two again So this makes actually sense I can read the content of this page by the heading structure This is essential also for your SEO because this way also Google knows what the content of your website is what it presents Super super important It's one good thing in Gutenberg as we saw with the information icon You can call a headings of your content. You see title h2 h2 h2 h2 So that's good in Gutenberg There are a few tools you can use to test what the headings are For example in Chrome you have headings map and Then you can see the headings over page Today do they actually represent the content and is the order right? Don't skip a heading level. Don't mix them up. Make a really order of the heading level So who has this installed on Chrome on Firefox? Okay, shall we check some websites? Don't be shy I have for you for example w wordpress.org Let's track your heading structure that you can do yourself If you don't have this you can also do it with wave This is visible We have a break in 20 in 30 minutes, or if you want to have a drink now, maybe Everybody has something drink we have a break soon Okay What do you think of this heading structure? What's the first error? You have two eight ones You have one H. We should have one eight one and telling this is what a page is about So actually the first each one is on the logo and the other is big text Then the second one These are actually H2 these make sense. That's the best powerful features community These are content about this and then suddenly there's an H4 WordPress swag Use for my blog This is a kind of a mess Yeah Who has the microphone? So a question about one H one per page. There was something about HTML 5 Where if you're heading hierarchies like per section, so you have like multiple sections and each section He's the guy to answer that because I think can have like each on each H1 like what's the situation with the HTML 5 specs came out first. That was something recommanded and you pointed at me, right? Yeah The document online algorithm was never implemented by any browser So what you're talking about where you could have an H1 per sectioning element would reset the headings No, so that's not actually a sink in like real world You could do it, but it would still be but I should not right I should not because I asked this question around before I didn't let your answer on that before thank you Yeah, yeah, and and for what it's worth there There has been some push to try to get the browsers to support that and they still have for the most part said and no It's just computing intensive So that's one H1 per page confirmed Okay This question I get a lot actually And it's actually never never a day they put it out of the specs. So So this heading structure is a mess. You cannot really read from this what the hierarchy is and what it's actually about So this should be fixed So who's going to file the meta ticket Okay, yeah So another website Don't be shy. I So if you want one that's broken, I can tell you ours. It's www.internetssociety.org And I know this particular one is broken So society So society Yeah, that org Our headings are a mess good. I love a good mess. Oh Yeah, my English is a very much depending on spell checker and it doesn't do it in the URL field Okay, oh Yeah, nice Okay, let's blow it up a bit Do that, okay So you have One H4 it starts with an H4 learn more and then an H1 Creating real change and this is your home page So the title of your company is even in the H1 Okay, then the H2 the latest and the H3s these are the latest articles now that's good and Then H2 again get involved and Then these are about getting involved Yeah Yeah for its size probably Okay Yeah, I knew this was a because our designer somebody said exactly that as we chose it because of the size You know is what was lined up in the CSS, you know, they had this and it's like well this one's the right size. So let's go and do that so Yeah, yeah, this is just tell them to use decent CSS to make it semantic in the HTML and look good in Right, but it comes down to the case that in in certain places They wanted to like those right there are the actions underneath to get involved it So what is the future of the internet brother things these these are these go to action buttons? Kind of oh, it's all clickable. Okay. Yeah. Okay, but those those headings that are there are H4s Which they wanted to be and they did that because they wanted smaller than the ones that were above that were the titles of the Things there and yes, you could class this in different ways So it's an H3 underneath this particular thing, but they chose to do it this way Okay, so this is wrong. Yeah, it's wrong You wanted a bad example there you go. Yeah And this is an H2 creating an internet for everybody Come a member shouldn't be a heading Shoot a heading should represent the content that goes below This is a tool to action buttons. You can argue about that. Yeah This is just a lazy develop this front end developer Yeah For that sort of content like cool to action content. Would you just make it a paragraph thing? Yeah, for example, just with a beat tag, but you can make it bigger in CSI. Yeah Yeah, I think a lot of headings can be just paragraphs Question can you go to my side first net? You know me don't don't make a face. I Love you. You know that Net Sorry Yeah, yeah So my question is if it's like from content perspective if heading levels like immediate follow each other Like for example, I have latest which is what H3 and the post title is H4, right? It's correctly nested, but it's like immediately there is essentially no content that belongs to H3 So is that okay or there should be some content like Explaining H3 so to say or this is fine from content structure perspective. It is I think if I understand the question Well, it's fine from contents perspective Okay, so If you have a heading it should be followed by content so hero here I have a H3 heading greatest followed by H4, which is the title of the post should be Do I need content after the latest? I think I think that's fine That's fine in the in this case in this context. I think it's fine Generally if you use a heading there should be some narrative content before you go to your next heading But I think it's fine in this context in this context Yeah, I think so too because it's a logical way. You have the latest and you can go to like this is a section Yeah, and then reside at H3. Yeah There isn't also one way to actually do stuff, right? It's just you have to think for yourself. Is this really representing what I want to say Yeah Okay, I want to go to This is my boss. He's filming me. Thank you for that Okay Yes, awkward. Okay. The next one is a meaningful link text and this is actually the same story about as the headings if I fire Fire up in Safari as I shoot Heading structure and we have meaningful in text. Okay Then I start voice over again voice over is a very basic screen reader You have better screen readers like NVDA or Jaws, they can do much more but Voice over can do a lot and it's easy to learn yourself as a developer. So I would Yeah, give you all the chance. Please try that. It's just easy if you have a Mac just control a five and it fires Yeah Sorry We have an alternative on a Windows platform Yeah, that's NVDA and that's a more difficult narrator here, yeah, you know narrator is built into Windows 10 It is a good screen reader. It's not as fully featured as the others, but it's getting better So narrators built in you could test with that and VDA is free You can download that not over this connection and Jaws you would have to pay for but you can get a 40-minute trial for free in order to poke it with a stick for Linux that you'd use Orca any other platforms. Come on, throw it at me No No, Amiga Talkback is native to Android and Talkback has gotten a lot better in the last couple of releases. So you can rely on that for testing as well No, no, it's okay. Let's just answer this question Okay, I pulled up the web router again and I can move around with the arrow keys And I get a list of links So if you're blind, you cannot see what's on the page. You think, okay, what links are there? I want to contact someone. So you pull up the list of links and you start typing contact Now there's no contact page here But maybe then this may be wrong example But then you can quickly find the link you want press return and then you go to that link So it's super super fast But then the link text must actually make sense and Here where it goes wrong often. How many people use click here as link text? Download read more Really really useful links. This is one from a From website where you can order Order hotel reservations fine deals fine deals fine deals I've got a question related to this So I've seen I've worked with underscores and they use screen screen screen Last to hide it But you could use also area label. Yeah, what are your thoughts on that? No idea. Adrian has a Fantastic answer about that Sorry, so the the risk with aria label is it will override the link text So if your link text says click here and the aria label is more verbose great If your link text is really good in your aria label, just add some additional information big big problem Off-screen text is kind of nice But there's the thing that a lot of people forget only a third of screen reader user I'm sorry two-thirds of screen reader users are blind So you're going to have screen reader users who can see the screen We're going to hear different text or additional text than what is being pronounced in general if you can put all the Text in there if it really really does break the design off-screen styles are probably a better way to go than relying on aria for some of that simpler stuff So does that answer your question text? Yeah, did I go too far? Oh crap? I do that. Oh, no, he's to be challenged We should fight later So screen reader text is the solution the first and then area label Oh the first do everything then you screen reader text and last area label. I'm running it up here Breon, we have another question. Okay, this guy Thank you. What about when the when the content is all made up by your user your client The content manager what you have to do is train your comment. Yeah, and that is really you have to when you Have your side finished and you explain your client how the admin works and stuff This is additional information make good link text make good headings add a good alternative texture images That is someone you just need to tell them. Yeah, and you can say it's good for SEO. Yeah, and it's always Yeah, so you use the Google line. Yes, I do a lot. Yeah Yeah So this is really confusing for blind people so what shall I click and well This is no go they leave and they won't book with you. So you lose your booking So how to do this? Read the link text. You can check it with Voice over But there's a really nice plug-in. That's called funcify and I have that for Chrome And this is really nice plug-in It checks your headings. It checks your contrast. It takes your link text Now in this case all link text is okay because it's my site It does a lot more. So this is really nice one If you are a designer How does someone see your website in the sunshine How someone with lower vision like all the text is blurring, this is really nice Different colors how you see your site in grayscale What if you're colorblind So this is an extra to funcify. It's only for Chrome It was or for Firefox too. Yeah, there's also for yeah, this is a nice tool to Funcify so that's the link is with the section about Meaningful link text so cool blue cool blue is one of the biggest Internet sellers in the Netherlands So how do they do with the link text? Well, I don't need to click it Cool blue Watch the whole are sort of mint These these are really weird being text. What's this and what's this? These are images without alternative text and then they read the whole URL So that's not user friendly So what are these? These are icons Without any meaning. These are actually ratings. These are if you can see this these ratings So five hundred what's five hundred five hundred is actually the amount of reviews they get So these are really hard to understand for people who are blind how to navigate that website. They have actually no idea So this repeats for every product you can see where the cursor is there So these are really for such a huge website It is really costing money because people were blind. This is bailout So what solution would you offer for this website? I would actually put here hide the icon icons with the area hidden and Then put alternative text with the screen reader text like it's from we have a rating of 4.5 for this product or something just do a combination for hiding the icons and adding screen reader text For the user to read out So I think that's a good combination There are a lot of ways to solve this there really are that's totally fine I've built one of these and I used SVGs and I declared them role image and I used our labels Also, you can use SVG is via an image element and use the alt text So there are a lot of ways to handle it You just got to make sure that your alt text and your description makes sense So it doesn't say five but it says five stars or five hippos or whatever it is Sorry, hi, I would like to ask if Buttons are read as links for screen readers because that might be a solution to For that kind of thing where you make it a button. Yeah When the button text is also because the links here you can also Call a list of buttons So it's very useful to know if it's a this thing which bring button and a link because I think it makes more sense for the rating stuff to be buttons because you are not Linking to something you're actually clicking just for yeah That's the difference between a button and a link link goes to another destination a buckling folks in action Yes, so the screen reader would read it separately. So it would it would be beneficial. I think Okay, thank you Okay, so this is Where pass Europe, how do you think about this? I don't know why Yeah, it is a I can let it read out loud for you Link link privacy policy link privacy policy Link visit head link link link visit head link at WC Europe on Twitter link share link HTTPS colon slash slash www.adaptilec.com slash country dash specific dash answers Slash electrical dash plug dash outlet dash and dash voltage dash information dash for dash Serbia This is an image without a link that is image without an alternative text if you have a link And you put it in an image you have to have the alternative Texas link where you're going to to the page You're going to but we go to that in news link here Link link this website This website what website? So read the text do the link text make sense. Don't use click here to go to the website You may re-factor your sentences to make actually the Where the website is going is underlined as clickable. So read your text. Don't use click here Voice over off. Sorry. Oh deterrent of top. You ask. Yeah, I'm sorry Yeah, the question is with return to top because it's all capitals. Is it going to RET you are Yeah, yeah, okay 2018 link news visit it link get tickets visit it link link link sponsors link Schedule link visit this is link so that's reading the capital It's worth I know first off is really smart than that. I think but if it's a word that's very small for what acts Ace ACT you have a call to action button called act then it pronounces ACT. Okay, is it just this One that's that that handles capitals better. I had in my head that it would read out each capital They all handle them differently, and they all use custom heuristics to identify and make best guesses capital it is almost always pronounced it across them, but Regular screen reader users can override some of that verbosity and make some exceptions And because here sometimes really smart if you have visited link frequently asked questions So that knows yeah Yeah, oh yeah stock exchange it also know the Abbreviation and read stock exchange meet link link So you wanted to know the return to top. Okay Link return to top up a roll a pro app a row Okay meeting Save some time and try and scream it out It's really easy to use and it's really fun and you give you a better understanding how your websites put together Okay Last topic and that's quick one before the break Alternative text for images How do we do that sometimes in repress you can add an image from the media and Then it alternative than automatic it adds alt is code code if you add no No Text there and that's good that the image is skipped, but if the alt attribute is missing from the html Then it reads to complete URL and that's really annoying. So this is really a theme issue If you're a theme builder, there is an alt decision tree from the W W3C and it says well is the text presentical and it's ask all kind of questions And then it says do you have a need alt text or do you need no alt text or do we need to say something different in the old Text or do you need to put the image in the CSS instead of in your content? This is a really good one. So that's all this you read it in your own time where you were You have a rest of your head and you just try to figure it out and we also have in the accessibility handbook We have a chapter about that So it wanted to listen to images. I'm a fire fire folks affirm Termative text for images in the content test web accessibility web content has keyboard focus Alternative text for images in the content test web accessibility web content Alternative text for images in the content best practice give an image a proper alternative text all the text What should the all the text I'll do a W3C has a good tool for this the old decision tree bullet alternative text for image links menu Headings menu Head head heading heading level three heading level three example listen to the images Heading level three example listen to the images to very cute kittens in the grass photo credit pixel bay figure to very cute kittens in the grass image photo credit pixel bay No alt text a very long old text This is an image of two very cute kittens in the grass Maybe some spam for Google to hear like buyer cat food dog food bones to show on and other crap image short to the point All text to cute kittens in the grass image heading level three You can tell you got idea Don't spam in the old alternative text because People are blind already get so many texts put in their ears and don't spend on sensors because you think it's good for Google I Have a present for you Because you are here and really glad with the turnout I just changed jobs and my boss Tucker Made spec for us. So you're all getting a set of cards with accessibility design tips Yeah And I thought he had it with him These are really nice cards they're offset printed on pieces of card stock that you can mail home or stick to your refrigerator You can also use them to slice very simple cakes Can I I'm running out of things to talk about if you flick them aggressively at your friends you could get one to stick in their Eye Maybe don't do that Unless you want to demonstrate to them how much it sucks to not be able to see the screen I'm just trying to fill dead air here If you come up with your own ideas, please share them on Twitter by tweeting Rianne and make sure you include the name of her Employer which is What Love level level did I get there level level? So thank level level for these awesome postcards that are oversized and will require extra postage if you're mailing them to the u.s No, I don't know Well u.s. Definitely. We're a bunch of jerks over there Yeah, yes, I know okay But it's a full set you might also notice that the typeface Uses one of the dyslexia friendly typefaces, which is helpful to some people who have dyslexia You'll also note that because they're heavier on the bottom as you turn the card over the letters won't roll off the page I think the camera is still recording. I'm terrified now. Hey, Sammy You want do you want to start talking now? Damn it? How's everybody doing? enjoy lunch I'm gonna Yeah, yeah Okay, we can have a short break now Just rest your head and if you are not a developer and not interested in development you can sneak out secretly but This will be about development about code So Sammy's taking over now. Just take a few minutes to rest and then we'll continue As you probably know this we kind of touch only like tip of twice back here and this is kind of the Meaning of workshops that you get an idea and then you start learning on your own and you have some kind of tools to actually now The how you could test different kind of things and the last section is about a little bit about Perhaps about code actually just like a couple of couple of examples as I said We probably need a week to actually go through everything. So it's just a couple of examples here and there and Hopefully you have a questions and you can probably install a couple of more tools in your in your laptop So let's start with the last Last sections which is the code part. So you probably all already have the website open So we're gonna go to the design content and the code part next So this is kind of the inner talk from the mad talks like a couple of years ago You probably heard it like a millions of times already that learn JavaScript deeply But we honestly believe that you first have to learn the HTML deeply then probably CSS deeply If you're a front-end developer then the JavaScript part. So first build up on your Your roots and then go higher and higher. So that's the kind of the order of things I should learn so we have got only like a couple of Things that I would like to show in so in here and for example, I'm a front-end developer. So if you have questions about themes that how to, you know Make them as as as good as possible. What comes to accessibility you can always ask me and I can link you to Couple of tutorials I have written myself and so on and they are plenty of information in the handbook What we have what we have been with like the last six months So the first really easy kind of tool that you can test by yourself in a second is That does your website or pages? Actually make sense If you don't use the CSS it's kind of easy way of test Without even a screen reader that does it make sense if you read the pages from top to bottom Have your CSS some kind of weird rules that you actually Switch the content like if it's in the dome in the bottom and actually it's in the top Using the CSS that does it make any sense anymore? So the first easy test for that is for example that okay take off the CSS of the page In Firefox, it's really easy to do. There is this View page style no style and you can test any page you have That okay, what does the page actually looks like is it still readable when you're disabled the CSS? What I want you to do now is actually take your own company side or client side or whatever and disable the CSS and Actually does the Page still make sense. Can you actually still access all the content and can you read the content? For example this 20. I think it's when the 15 It had actually one issue if I disabled the CSS in this page As I said in Firefox, it's in view page style no style. I'm pretty sure you can't read the content anymore There's a small tip I can give you why and what's wrong in this theme itself The issue in this case is that you probably Shouldn't inject inline styles you've been using JavaScript Because if the user is disabled in the CSS or the CSS doesn't load and you do crazy stuff with styling inline styling Using JavaScript this can happen. So this basically mean that there is sticky sidebar in the left and It's inline style and coming from the JavaScript You shouldn't do that. It should be like Sticky glass or something and after that it would actually work If I remember I can file a bucket in there in the track afterwards but it's really easy to check that does your Website actually works without Without the CSS and that's how it's done You can check it from your own site for example now You can take ten water size for example. That's actually works and makes sense Yeah, yeah, yeah Ah, that's that's a good thing. It means that your HTML structure is really good Which is always the basis of any any website anyway, so I can just take it back night kind of Make more sense So the problem in here is that in the sidebar there is kind of a just tune it a little bit as you can see the code little bit more What's happening behind the scenes is that when the score scrolling happens? There is this inline style Coming from the JavaScript and if there isn't any CSS loaded. It's kind of hard to read the content So try to avoid that So the better way is doing that adding the glass is fixed or something like that And then you can manipulate that with CSS any questions about That part that's kind of the easy easiest test I can tell you Then as as you can imagine in many websites you actually have Dynamic dynamic content in your site, which means that you can probably filter or search data in your website and It's kind of do I need the microphone anymore because I can you know Okay So You probably have in many websites dynamic content the more and more you start building JavaScript based websites. You probably have dynamic content all over the place anyways usually it happens Nowadays that you have could be like PHP in the background But some portions of the site are dynamic, which means that you're fielding data or certain data or something else Which leads to a question that can for example screen reader users actually Know that there is dynamic data happening behind the scenes because they might not see the screen So I have a couple of examples for example Let's start with a good example I'm gonna fire off the voice over again. I probably need don't even need Voice Typing typing Typing still 147 characters left to type so why this is a good example is then is that the whole point of the text area field is that It gives you How many letters do you have left 40 characters to type right in the text area field and it actually announces that With a little bit delay right 36 characters left to type So when I start typing wait a little bit 132 characters left to type and also the screen readers can actually understand. Okay. I still have like 10 characters left to type in there Which is a good thing another example could be for example this kind of page that I can kind of filter the Apartments in this case and There isn't similar Announcement for the screen readers If I can see the page I can kind of understand it. Okay. There is something going on in there but There isn't any announcement Voice of raw What does it mean Yeah, this is easier So we are actually talking about my Finnish colleague here in a second ago that The WordPress itself actually have for example NPM package is now available which means that in this case what happens behind the scenes is that There is this kind of Function that you can use double VP Ali speak function, which is kind of once again, I think Andrea build it with toy like couple years ago even you know more time and and That's a really really simple function that you can use in your JavaScript Which announces live changes dynamic changes in the page So if you use JavaScript and dynamic content, that's the function you can use or You can just take the similar packages from the LHS models which Which now are also online. So it's pretty easy It's like one line of JavaScript and you can announce any dynamic changes It could be the dynamic change itself could be it kind of depends on the what kind of change do you have on the side it could announce that okay 100 letters left or it could announce that okay There was search results or there was like 10 search results or something like that It kind of depends what kind of dynamic on it you have So if you haven't opened voice over or nvda yet I would totally encourage you to test voice over or nvda right now Open for example those example that exists in here and You can kind of get the hang of it how the voice over or nvda actually works and how you can you know Get it up and running. I'm not sure that you have time to do it like in previous section But I think we have plenty of time now how many have max So you can Open the voice over The command for command f5 we can help you with that if you have Windows platform There might be narrator built-in or you can probably now install The nvda Screen reader also It doesn't matter if you don't have time to actually test that right now that much But you can install it already. So you are ready to test more like next week or something So now It's time to test some screen readers We can help you out probably so we can circle around if you have questions Do you have any questions about screen reader? You can probably learn more about how to actually use them More later on but it's good that you actually open it at least that you know that it exists and How to use it there was couple of questions that how to actually Keep our test pages because that's like the main main point What you should do anyway in in in any websites and That's pretty easy and it's it's good that I have the micro now on the other hand And I actually kind of forced to using my bad hand only This is kind of a good example that many many people rely on keyboard only I Think we have this kind of an Extra chapter in here we and have Written down kind of a small chapter about how to navigate with keyboard only So the main point is that when you have some kind of changes in the front and it's kind of impossible To automatically could test the new changes How how those things work with the keyboard? so You'd have to do it manually. It's it kind of means that whatever you can do with your mouse You should be able to do with keyboard only and the main Things that you can do I think they are listed over here the basics the most basic stuff that you can Use with your keyboard is tap or shift up that means that you go forward Using the any interactive element you might have in there It could be a form element or link or button or something if you shift up you go backwards There might be a form element for example select or something like that you can select then with the arrow keys So you might need arrow keys also arrow down or arrow up You select interactive elements like links or buttons or something like that with enter key or space key and That's about it with those you can test the lots of lots of stuff already So what it does it mean? It means that you just use only those kind of For example if I start tapping in this page I hit tap I get Skip the content link first, which is a good thing and after that I can kind of Go through any interactive element. This is a small small detail But but because we are now in the code section in here So for example 2017 have kind of in a sense a Really common pattern that you would see on mobile for you If you have a mobile view, this could be a main navigation and mobile also so there are main Main items in there, but there are sub items behind some kind of button So for example a small detail in here is that it's a good thing than when I start Okay, I'm gonna press shift tab now now. I am the parent link element the next step goes to do Which would open the soup menu elements if I tap again Where should I go? I am now as You can probably see I am the button that would open the sub menu items But if I tap again, where should I actually go? Yeah, I should absolutely go to the next main item Because otherwise I wouldn't see anymore where the focus is So the basic one basic rule is that you should always see Where are you going and where your focus is? So the next step definitely should go to the next parent element if I open the menu then I Naturally go to the sub menu items as you can see This is really common pattern in mobile for example and the same principle That does work in mobile also. That's just if it's a desktop view should the When your focus changes from the child and you move on to the next parent after you've opened a sub menu should the parent close I've just had to implement that on a site and it was a pain in the ass Well, I don't think that's an issue. I would say that it's not a problem at all Because you know they open it. It's fine to stay open That's fine if there is another sub sub menu inside that sub menu There's just gonna be another button for that and that's fine. There are lots of you know Area uttering practices and examples online which you can kind of use as a as a baseline on how it should work And as you mentioned behind the scenes, we are kind of you know popping here and there But as you mentioned the area for example So if you're familiar with that in here we for example, there is So-called area expand and true or false value So if I tackle this you can see that the area expanded value goes to false if it's closed or True if it's open Now your turn would be kind of test that out with the screen You're that what does it actually mean for screen reader users that how that would be announced in the screen I'm not gonna tell you that to answer because it's kind of your job to actually test it out and And it kind of depends on the on the case that how it would be announced and what kind of screen where are you using? But it definitely helps the screen reader user is the menu open or not So what you can do? Shortly is that you can go to do Navigation how to navigate with keyboard only if you haven't actually tested pages Without using only the tap and sift tab and enter in space You definitely should do that like in 30 seconds and you can like Test that in that page you should definitely know how the form elements works For example using keyboard only and when you should use arrow keys and when you select something with the ender on space If you haven't done done that already you can do that like in 30 seconds now For example if I go here And I tap into that select element With arrow keys, I can actually move up and down in here and with ender I can actually select the one I want so this is kind of Basic basic stuff, but you if you haven't tested before it's good to know how the keyboard keyboard Users use the web and your pages same with the radio buttons You have to use the arrow keys to actually Move the focus the different radio buttons in here With the checkboxes you would have to tap to a different checkbox and then hit space for example space or space again to get it off and Then tap again or shift up go back and you can activate with the space key and probably with the ender key also Oh, not actually So it's only the space key. So that's what you should always pretty much do If you are testing with the keyboard only after any front-end changing you should kind of do it again Do you have anything else add to the keyboard testing this sound of really short version of it? Because if you keyboard test you actually discover if the elements you're using get focus or not If you have a hamburger menu and you put it in a div a div does get keyboard focus So if you put it in a button a button gets keyboard focus So if you tap you immediately discover if your code is keyboard accessible and also semantically right So it's a good quality code check also and if you're having the right semantic element for the job There are lots of online tutorials how to kind of create Better teams for example, I have written a couple of in in Nevada sites for example accessibility tips for workplace team developers and there are lots of similar tips like that Excuse me. Well question What about the button and the outline for CSS? I've seen it in many places people just turn it off You mean focus outline. Yeah. Yeah Well, you can in some places took the outline CSS rule off Outline zero, but there should always be some kind of other CSS rules after that that you'd actually implement it somehow for example Gutenberg actually have a pretty I think it's pretty great solution actually behind the scenes what happens if you check the CSS What happens in the Gutenberg and the buttons? I'm pretty sure the Outline is taking off in the CSS outline zero But then there is border or box shadow. I can't remember at the moment You know the focus is element but even that is not enough because for example if you use the Is the correct term the windows high contrast mode? There are lots of people who use They come with this differently than us. It's called for example windows high contrast mode and that actually takes box shadows for example off if I'm correct and What's the trick for example in Gutenberg there is transparent outline so if there is two pixel And the color is just transparent so you can't actually kind of see it But the high contrast mode actually Kind of put the borders in there with the transfer code So there's actually one good example about the Gutenberg that you can check if you want to take the original outline off If that answers your question So be careful with the border only are Box shadow only solutions because there are like windows high contrast mode or something similar that Takes them off. Did you have any questions about the dynamic content? If you have built pages where you have lots of filtering or stuff happening Dynamically, it's kind of really easy to check that do you add that one line of? Yavas if throat go to you in your code base or not I'm really sorry to disappoint Urich and other automated geniuses in the room There are no such thing that you can automate test every axis of the issues in the world There is absolutely brilliant brilliant article about government of UK which have kind of Created the world's least accessible the web page and they kind of tested all these tools that we have used today For example the axe or wave or similar tools There's no such tool that I can actually, you know Fix everything for you or even pick everything That kind of issues you might have in there It could be like 30 to 50 percent of issues. They might pick up So it's kind of always your responsibility to actually Test your sites and web pages manually also And if you have the budget probably with with other users also with different kind of disabilities but there are a couple of tools that I would definitely kind of Encourage you the install in your own own laptop and kind of encourage Your team also to do that. They are listed listed here in below So in the page automated testing there. There are a couple of tools For the react I don't go to react myself For example that I don't know to exact details how good these are but for example Gutenberg uses for example this a plug-in called JSEX Ali Which gives you some kind of hints even somewhere, but it's definitely not, you know enough What happens in the front end in the end or react have to say For example in in yesterday's Contributor's Day, there are a couple of tables fixing the coding standard errors. These are not even directly to the Involved with the accessibility, but I would still encourage you to kind of Create in inside your company some kind of coding standards that you follow. It could be directly to the WordPress coding standards or Modified with those or something, but you should definitely use PHP CS sniffer in your tool set Which sniffs the PHP part then you should use ES linked for JavaScript and Styling or similar to CSS Naturally, those are not kind of directly into the accessibility stuff But those are kind of the tools that you should anyways have in your tool set. I think We probably don't have time today To actually go more in the details. I'm just gonna leave the links in there if you don't know what they are They're like plenty of in more information in those websites what they actually mean But what I would like you to install next in your own laptop We already talked about a couple of tools that you can install as an extension in your Chrome or Firefox but Probably most of you are developers in here at the moment So you probably like the CLA stuff and using everything on common line So you can use the same tools on common line also so it's kind of Important to realize that it's impossible To check your code base It doesn't matter if you build size with PHP or JavaScript or whatever because it doesn't It's not the ready HTML in the front end at that point. So you always have to Test against to an actual front end stuff what happens in the dome and that's kind of a Big barrier in the automated testing also because you always have to test the dome itself There are a couple of tools that you can install in a second for example Pali or X CLI which are both pretty nice Common line tools which you can use we already talked about the axe extension beforehand, which which was the Extest extension that you can use oops Extension you can use In Chrome or Firefox in Chrome you for example had an extra tab called axe and You can analyze any page These are the same kind of tools but used in the common line and you as you can probably imagine if it happens in the common line You can probably Sort of automate stuff more easily when you don't have to kind of code the browser itself Both kind of works in the same way. There's some common line Like Pali or axe and then you just give an URL or list of URLs that you want to check so you can test live sites or Locally installed sites if you have a set up already in your laptop and It basically gives you the same kind of stuff that the extension would give you So what I want you to do next is that you would actually install the Pali and X in your laptop and actually run a couple of tests with your own own site or client site You would need have to npm on your laptop before you can actually install those So after that, it's just okay Pali foxland.fi. For example, it's probably probably gonna give me a couple of Yep couple of errors in there You are loud enough to scream all the most So my question is What is the difference between those two because I I was able to install accent but the the first one needs Node version 8 and I have six and I don't want to break other things I have So is there Something that is better to do with the first one I don't know that's in my opinion. That's just a little bit different in a sense That's why I kind of use both in there in a sense to axel or a kind of It run the same test that the extension would kind of review and the Pali It's kind of checking the HTML code sniffer. Okay, so we probably know the more or if you are Mentioning that what happens Actually a PLA is going to use the X engine soon So there will be the same. Okay. Thank you. Thank you Yeah, Pali is probably gonna use the X like really soon. I don't think it's published yet at the moment, but Probably soon they are both like together. So you don't have to use both Any other questions? Did you get it installed if you have the npm? You might have that kind of node version problems No, just this is not a question just a note I'm doing Pali at the moment, but it's installing chromium which is like a hundred and twenty five megabytes I'm not sure if that's gonna be a problem for our bandwidth. I feel I just yeah, yeah It's gonna be a big big big yeah Bucket chair anyway, that's true that's kind of a Hard things with everything's got a package is that so would you Yeah, not necessarily a question, but lighthouse uses acts to do its things and Lighthouse is part of Google already. So you can just do the audits from your browser You can actually do lots of stuff in the browser Inspector in Chrome and Firefox already We just haven't got a kind of time to go to an old true for example As you said lighthouse is already using acts behind the scenes So kind of all using the acts in a sense at least soon because Pali is also using it soon any other questions about these tools you could probably even go that far that Before you can commit something to bug to the kid you can run those tests before hand actually that you can You know fix them beforehand Before to deploy into the live site We could have have like tons of tons of you know different kind of patterns that we usually see in the internet, but the One example is which is pretty common one is the models some kind of dialogue models that opens in the page and They are a couple of really good ones For example Ali dialogue is one of the best ones I've seen and if you need to have some kind of model in your website. I've definitely used that one it poor and at first it's vanilla chairs and it's pretty light white in that sense and That's another test you can use using your screen reader that how the model actually should work behind the scenes and You can test it also with the keyboard. So when I start Using the models with keyboard. There are several several things that should actually work For example when I opened that model The focus should switch Into the model in this case. It's the close button. That's okay. It could be something else also And the focus should actually stay inside the model Because models are usually designed in a way that it's kind of In front of the main content and you can't actually see the main content any Anymore so the focus stays in in the content and you should be able to close the model With the esca key also. So when I press yes It goes back to the same place where I started so it's really important that the focus actually goes back to the same place So now if you already installed or you have the Mac you can Quickly set test that model how it actually pronounced to stop what happens when you open for example models and Once again, all those are outlined already in the area best practice is you don't have to reinvent the wheel What should happen just read the guidelines and that's it If you don't want to go themselves There are plenty of good examples, but many more bad examples out there for example models This is really good one. What I should recommend to use So if you want to test it out with the screen reader just fire up your voice over or narrator or NBDA and just check that what should actually The screen reader now is when you open the model I can do it here with the silence So it basically there are a couple of more area Stuff going on behind the scenes so it actually pronounces you something okay What kind of stuff just happened there and then you can tap around the model itself And they're like similar stuff that would be in the main content also in this case There happens to be a form and a sign-up pattern and Close pattern, but when you first open the actual Model that's the critical point that what what the boy voice over or any screen reader actually Announce it that point any screen reader user kind of needs to know that okay some model just opened and inform what kind of content there might be in this case, it's gonna pronounce the title and the Next paragraph What's gonna be in the actual model and behind the scenes? there are lots of Lots of and not that many actually but couple of details, which you can say check that okay. There is area labeled by Or area described by which are unannounced by the screen reader so If if you would have time we would like another five hours talked about the area stuff What could help help you to give the more information for the screen reducers? Do you have any questions? Those are like Really only a couple of basic basic basic examples what you can do test your code yeah, and We didn't even start kind of the theme in part Because that would be another day couple of days Yeah I was wondering if you know already that if there's a there's a CLI tool for something like the axe axe CLI Pre-commit hook so that it parses the results and then you could deny the Committing I've set up styling and or sass linked ES link and pH PCS And they're kind of easy because you can't find npm packages to them, but I haven't yet found any or Kind of same here. I haven't actually found a good solution for that But I kind of imagine that it should be kind of possible. Maybe the Issue is there is the same that kind of how do I kind of inject the Urls in there that what should I actually test should I test some kind of deployment side or life side or your You know your side what you're actually building the laptop like your local side So it kind of depends on that you could kind of for example what I Kind of have been thinking that I would suck like manually put some local Adverses in there because you probably have some kind of similar local environment in every developer So you kind of already know the what the local URL is gonna be so you can kind of test The most common pages in one goal because you probably know that this is the front page This is some other landing page. This is really important. This is another important page So you could probably manually test all those local URLs. That's what I would probably do But I haven't done it already but if you added to a pre-commit hook hook X only returns one or a zero and This and it gives false positives also misses things and Does not make a distinguish between an error and a warning So maybe it's a warning and you say, okay, that's okay for my but that still rejects your code as being And then your commit breaks So it's you have to be careful to actually depend on what X says to do your pre-commit hook Can I toss something in here as well? Yeah, definitely If I understood the question correctly part of it is you want to limit commits Based on errors you find is that correct? I would suggest also taking a look at tenon, which is a paid platform TENON.io Tenon allows you to customize rule sets and it will integrate with your cucumber gherkin pickle zucchini workflow, whatever it is The idea there is you can say not only are these the wick hag rules You have to honor before we'll allow a commit, but we can create custom rules that can override or that have your own Accessibility standards that go a step beyond that and it'll integrate directly into your workflow. So can consider that if you're willing to spend some point Yeah, then and then only so one good example that you should look out We did we didn't have actually that in our list, but that's definitely one of the good tools out there. It's built by the Man called car growth. I think So that's the one one good tool in your tool set I think you can probably do similar thing in acts also to a kind of hack your own rules in there But I haven't done it personally Any other questions? We are not tired yet, you know We don't need food or go to the bathroom or anything Yeah, I think we can rub it up You know upload yourself because you come in here you are kind of interested in the axibility now it's kind of your turn to actually learn some more and there's some more and then Educate your you know colleagues in your your own company and you can always ask me Rian or anybody else in slack or Twitter more questions Yeah, and like I said many many times we really are trying to Have good information in the the axibility handbook itself We know that it's only short examples, but in every sort examples There are bunch of bunch of more resources for example written by Andrea or Adrian so there are lots of lots of information available and we kind of Created that beforehand for you, so it would be really nice that you would actually use that so What I wanted to give a gift to you is look at your website differently if you look through the through the design Really at the code then this is worthwhile Because this is what we want to achieve Look at really beyond what you usually see as a developer Yep, thanks you