 website. I don't need one. It's way too expensive. Or an accessible website. I don't need one. I don't target blind users. Does it sound familiar to you? Yes. Yes. What about a responsive website? No, I don't need one. I don't target mobile users. Does that sound familiar? Now, somehow building responsive websites became an integral part of our workflow. However, accessibility is seen as something extra that we build upon it. And my hope, my dream is that it will be totally different in the next couple of years. And I hope that's the reason you're all here as well. So what we're going to do is we're going to talk about some quick things, how we can accelerate this. So we're going to talk about what accessibility is to make sure we're all on the same level about the definition. But also why it's important and the most exciting part is, of course, how are we going to do it? But the first question I want to answer is, who am I? I'm Mardus. I am a frontend developer at the Mugun. I'm also a co-organizer of Frontend United. And before I became a developer, I worked in healthcare for like ten years. And in healthcare, I noticed a lot of elderly people struggling with inaccessible websites. And that's the part where I came enthusiastic about it. But I didn't know that accessibility was a thing in tech. I had no idea. So what is accessibility? So when I started as a developer, I thought, well, yeah, web accessibility means that people with disabilities can use the web. But is that really the case? Now, it not only helps disabled people. For example, subtitles. It helps to have people to understand what's being said in a video. But if I'm not mistaken, Facebook, almost 80% of the videos on Facebook are being watched with some off. And I think that not everybody of the 80% is actually deaf. And contrast, if you have high contrast on your website, it helps to disabled people to read the text better. But also when you're sitting in a very bright sun, it makes it much easier to read. And semantic HTML. It helps readers to navigate through your pages. But Google does the same thing to rank your site. And keyword navigation helps physically disabled people who cannot use the mouse to navigate through your website. But also if I fit in a very big form, I always use my keyboard and never touch my mouse. So we have to have another definition for what accessibility is. Web accessibility means that websites, tools, technologies are designed and developed to work for all people. No matter their hardware, their software, language, location or ability. So this definition also gives a small answer to our next question. Why is it important? As for many reasons, because all people benefit from it. But not only that, a lot of products are being offered online. If I buy new socks, I buy it online. If I need a new book, I buy it online. But it's even worse when you're also dependent on those digital services. Fitting in my taxes, I have to do it online. So more companies need accessible websites because they target a larger audience, which is good for the profits. The government needs it because it's legally required since last year. Actually this year it's official now in Europe. But it has been legally required in America for much longer time now. Look at the Domino's case, for example. And the problem is not the technology. Websites are, at least the web is accessible by itself. But it's because of us developers how we implement it, which makes us very inaccessible. So how are we going to build an accessible website? We don't have to invent it because we have content accessibility guidelines for it. And since this now, last year, we have a new version, which is the 2.1 version. And those guidelines consist of four principles, which are the receivable, operable, understandable and robust. And those principles consist of guidelines. And those guidelines are the success criteria. And every success criteria has a level of conformance. And legally required is at least the double A. But if you ask me, English, as you all can hear, is not my native language. So for me, those guidelines are pretty hard to read and quite hard to understand sometimes, especially when I want to look something very quick, very quick. And I have to read all those texts. And I'm not sure if I understand it correctly. So what I want to do here is to show you some practical examples in a live demonstration. And we all know what happens in a live demonstration, so bear with me. And I want to show you some tips and tricks about semantic structure, about links and buttons, and about focus management. So for this case, I created a website for you, a very basic Drupal website. And since there's a lot of hate in this world, I want to distribute a lot of love. So all Meet Frinder, which is the dating platform for front-end developers, which is absolutely fake, of course, but just saying that. So a basic Drupal website, this is the front page, which is a node. And I know it's not correct to use a node as a front page, but hey, it doesn't matter. So if we analyze this first front page, you can see that the page is divided in multiple sections. And those multiple sections are guided by headings. So for example, we have, can you all see my mouse? Yeah. So we have a friend, which is the page title in this case. And we have some profiles. And in these profiles, we have some other headings that introduce the front-end developers. We have some nice events and some news and so on. Could you all confirm that these are headings? Yes. However, if we disable the styles with a web developer tool, it's just an extension for Chrome and it's a Firefox as well. And if we disable the styles, we cannot see those headings anymore. As you can see here, this is main navigation in the search. The browser has some styling for headings by default. But the problem here is that we didn't actually use heading tags to create those headings. They only look like headings. So to make sure you structure your content perfectly to help screen readers and, of course, to navigate through your pages, we have to convert them to actual heading tags. Those heading tags, since it's a triple side, came out different templates. So we're going to find those templates. So first, let me do this. So here we have the page title. And instead of using a div, we just use a first heading tag. And then we have the section title like the news and the profiles and events. We enable the second heading because that's the way we structure our page based on levels. And the third are the cards. So this is for the profiles, which contains the names of the front-end developers. And I have a different view mode for the other cards, for the news, and for the events. So we changed all the headings for now. And if we refresh the page, nothing changed. And that's exactly what we wanted. Because it looks exactly the same, however, if we disable the styles again, we now can see all those headings back. And that's what we want. So it looks the same, but it's different on the body. And you want to disable your styles from now and then to make sure how it really looks like. Just forget about the makeup, but just the real body, which is without styles. So back to the front page. Yes. So what we did here is created the structure based on the levels and based on the information we have on this page. So if we check the heading structure with a headings map extension also available for Firefox. Is it better? Okay, good. So we have a first heading tag. We have a second heading tag. We have third heading tag. But what we do as developers while we're lazy, we reuse the view mode, for example, this view mode of a frontend developer. So if we go to the landing page of the profiles, in this case, we go to show more. And we are back on the page. We have the first heading tag again. But we just concluded that this is a third heading tag. So if we check the headings map again, we're missing a heading level. And there are multiple solutions for this. We can write a preprocess to saying that the name of the frontend developer should be a third heading tag on the front page or a second heading tag on this page. But in this case, I'm just a very lazy developer. And I'm putting a second heading tag right here. Just like that. So I enabled a second heading tag on this page specifically. And if we refresh it, now we fixed it. And if the designer says, oh, I don't want a second heading tag right there, you can also visually hide it, for example. But more on that soon. All right? Does it make sense to check every page? Okay. If it makes sense to us, we also have to make sure that it makes sense for the content editors. So we want to provide the content editors freedom to structure the content just the way we read it. So we enable this style thingy right here to add multiple headings based on the content. However, in daily life, most of them say, yeah, yeah, I don't like this. It's very big blue heading. I just want to use the third heading just like that. And then it all goes wrong. So make sure you instruct them how to use those heading structures. And the most painful thing is if they very copy and paste it from Word, for example, Google Drive, and they just make it bold and beautiful. Also, then the heading tag isn't actually there, it only looks like a heading, and that's not what we want. All right. So back to the front page again. And the last thing I want to talk about regarding headings is the way we build and the function of the headings. So headings are a great way to bundle your information. So I have this very beautiful book over here. And if I open it, make it sound important because it is, for example, and this has this chapter title and I have this chapter text. And it doesn't really make sense if this text is a couple of pages earlier, right? It makes sense to read it after the heading. So when I started as a developer, I thought I built my HTML based on what I see in a visual design. So, for example, these events here, I see a visual, I see a date, then I see the heading, and then I see the text. And I normally used to create a HTML structure very based on what I just said, first the visual, then the date, then the heading, then the text. So if you take a look at this pizza party, I really love pizza. And I would join this pizza party, definitely. So it's on the 10th of November, correct? So if we disable the styles again to check the actual body, disable the style. And we look for the pizza party right here. Yes, we have the pizza party and we read it like a book. Then we have, yes, we have the text. We have a wrong image and it's on the 2nd of May. Something went wrong here, because we concluded it was on the 10th of November. So how are we going to do that without not being lazy again? So to fix this, we have to change our HTML structure. Let's go to... So for here, if we take at the template, the tweak template, we have our image right here. So I'm going to disable that. And we have the date right here. And now we are heading right here and place all the other content under the heading, just like the book. So we enable our widgets again and enable our visual again. And if we go back to our page, refresh it. It's a little bit broken, but hey, no worries. And if we disable the styles again, at least we're certain that the structure is correct right now. So we have the pizza party the 10th of November and this lovely picture of a pizza, which makes me very hungry, to be honest. So the thing about Flexbox is it helps us to visually change order. And what I did here is added a Flexbox to restore the styling. Let me show you how I did it. So the parent div has a display flex. And the part, the child in the div that I wanted to show first visually, not in the HTML, gave it an order minus 1. So all the children of the parent div always have an order 0. And if I put a minus 1, it becomes the first child in the parent visually. So let me show you how it looks right now. We restore the styling again. So the visual now is the minus 1 in the parent div of the card and the date is the first child element now in the textual part div. So we fixed that as well. The last thing I want to talk about regarding the semantic HTML structure is that if we look at all those cards together, they're kind of a list grouped together. However, the problem, I'm not sure if it's a problem, but the thing with Rupo is if this is a field, it gets outputted with all the divs. And it looks like this. This is just the basic field template of class C, div, div, div, div. I don't even know what it actually means with all those if statements. So I override it in my own custom theme. Where is it? I hear. And basically it's just this. It's a div with items in another div. But if we want to structure our content in a list, we have to create an ordered list. In this case, it was ordered based on the date. Otherwise, you can use an ordered list if it's not really ordered. So we disable the div and instead use an ordered list. And it actually looks the same. However, there's one thing about the list is we get bullets for numbers just like that. Right here, the two and the three. And of course, we can disable that. So that's what we're going to do. So we add a list style type none. And that's a small issue with that. There is a bug in voiceover that if you use a list style type none, it removes all the semantics from the lists. Don't know why, nobody knows why. But if you add this pseudo element, we have the content 200B, which is white space. Nothing more than that. It restores the semantics back again. I don't know why. If you know the answer, please let me know. And then if we go back, it still looks the same. And now it's an ordered list with other numbers with the correct semantics. And if we disable the styles again, we see a very nice structured HTML. Right? Okay, good. So a small recap about the semantic HTML. Use actual HTML heading tags to bundle your information and make sure they're correct on every page, even if you reuse any view modes and also provide a meaningful and semantic HTML structure. So next, what I want to talk about is links and buttons. So let's go to the karaoke knife. And I have a very beautiful link right here. And you can see it because it has a different color. But what if I'm visually impaired and I see it just like this? Where is my link? Yeah, it says links and you can recognize it because I said it was a link. But we also have to add a small text decoration to make sure it's also visible not only by color. So we're going to do that, of course. And instead of text decoration, none, we just enable the text decoration. And this text on the line position under just puts the line a little bit further down the word, just like a border button kind of thing. It's not really supported in every browser yet, but it has a nice effect for now in Google Chrome, which is the browser that I use. So as you can see now, I can recognize the link because it's not only indicated by color. And also it looks still very nice if you disable... Oh, I didn't have to refresh that. It still looks very nice if you ask me. We also use a lot of icons as links. And a great example are those socials right at the bottom. Yeah, you can see that. So we have a link thing. We have a Twitter and we have YouTube. But if we disable the styles again, of course, we cannot see what our links are anymore because we only saw the icons. So a screen reader cannot see which one is linked in or Twitter. Do you remember which one? What was? No, don't be... Don't! So links always need a text. And we have those socials in my page template just right here. And we enable the link text with a small span. And as you all can see, it has the class visually hidden. And you can use that class out of the box in Drupal. It's already incorporated. What it does is it makes the text very, very small, like one by one pixel, and therefore it's not visible anymore. But it's still there for the screen reader and for Google. So back to the page. And we still have a link there. The three there, the icons are very nice. And if we disable the styles again, now at least we can see which link is which. So links always need a link text. But, if you use an image as a link, the alt text is actually the link text. So for example, I have this beautiful Lingerung image right here. And it's a link to our corporate website. And if we inspect it... Is this readable? Okay, good. So I have this link to our corporate website, but the alt text in this case is Limungung Logo. So if we say out loud our link, yes, I go to Limungung Logo. But that's not where we're heading. We're going to the corporate website. So in this case, we want to alter the alt text to the destination of the link. And it has to be... Yes. So instead of this alt text, we provide an alt text with Limungung corporate website. Refresh it, and now it should be... Okay, so the link text in this case is now Limungung Corporate Website. So not only do links need a link text, we want them to be descriptive and unique. And I see a lot of designs which has these show more, show more, show more buttons. So let's say... I know your name is Dick. We have one of my nicest colleagues. And let's say his name... And we have another Dirk, and another Dirk, and another Dirk. And if I ask you, Alex, did Dirk order pizza? Do we know which Dirk I meant? No. No. So that is exactly the case with a show more. Show more, show more, show more, what? I don't know. So instead of using only the show more, we want to provide some extra information. For in this case, show more profiles and show more events. So we're going to add that to the link as well. I think it's... Yes. Enable this one. Enable this one. All right. So at least we have more information now about what we're going to read more about. But this is the part where the designer comes in and says, hey, that's not what I designed. I want to show more. All those buttons and links should be the same size with the same padding and not all those large text in it. And in that case, we can use the same technique we used for the Twitter and the LinkedIn icons. So instead of actually using the whole show more profiles news, we add an extra visually hidden spun as well with the title in it. So if we refresh, we are back to show more and show more and show more and show more. But if we disable the styles again, we can see that the actual link text is show more events and show more profiles. All right. So links go somewhere and buttons do something. That's a very big difference. And every website, because, hey, responsiveness has a hamburger menu button nowadays. So, of course, this one has a menu button as well because it's responsive. And if you take a look at this menu button and click, click, click, click, click, click. Alex, can you tell me if the menu is open or closed? Is the menu open or closed? Oh, yes, it's open. It's open, okay. Stay tuned. Yeah. So, okay, I disable the styles again. And Alex, this one is for you as well. Okay. I click on the menu button, not the times now. Is the menu open or closed? Well, I can't tell. The styles are disabled. Exactly my point. We can't tell. So if the button does something, we have to indicate the state of the button. So there are two solutions for this. And one is altering the button text. So instead of only applying menu, we want to add open menu or closed menu. So we're going to do that first. So, open menu, close menu. Yes. And if we disable the styles, so, hold on, this is not very handy. Yes. And I'm clicking on the menu button, not the times now. Is the menu open or closed? Yeah, exactly, yes. So this is one way to indicate the button state. But it's not always a good idea to provide this only by text. So, I'm not sure if anyone noticed it. We can also add an area expended, true or false. And in that case, we can just provide the menu button text, and the area expended announces to the screen reader if it's open or closed. Don't do both. Otherwise, it will get announced twice. So in this case, we just remove the open and closed text again. And I prefer the area expended attribute, because that's a way a screen reader user can tell how it needs to be announced. For example, with a very lovely tone or just with spoken words, for example. Is it back again? So if you all can see, area expended false and open, and that also indicates the state of the button. Does that make sense? Okay, nice. So a small recap about that one. We want to make sure that a link and a button is recognizable and clickable. And provide a meaningful and unique text and also communicate the state of the button when toggling elements. So the last thing I want to cover is focus management. So if we're back on the front page and I want to use my keyboard navigation to navigate the page. Who has never used the keyboard navigation? Thank God. So if you tap through this page and you can see in the very left corner that we are really navigating through the page. But we cannot see the focus outline. And that's because we disabled it in our CSS. Right here. And instead, and now the outline is back again. However, this is also the part where the designer comes in and says, yeah, can you remove that ugly blue line? No. No, we can't. But we can change the styling, of course. So instead of using this very ugly blue line we create a very nice designed outline. Look at that. But there's one small problem. We made it white. And from the moment we adjust the styling from the focus outline we have the ownership of it. And with the new guidelines we have to make sure that the contrast of those outlines is at least three to one. So when I tap further on the line right here and now my Bea Buckley and Zeke Zebran I cannot see the outline anymore. And it is my responsibility to make sure it's visible at all costs. So double check your page if you navigate through the page with your keyboard to make sure that the outline is visible everywhere. So in this case we just change the outline color when we're on the white part. And now it's white and now it's a little bit of blackish I guess down the line. So it's visible everywhere. All right. So the other thing about responsiveness and accessibility is that we want that hamburger menu on the right side of our screen, right? Because it's easy to tap. But if you look at the rhythm we have on our desktop which is logo menu search. Logo menu search. Repeat after me. Logo menu search. Yeah, yeah, once more, once more. Logo menu search. No, it's not. It is a logo search menu. Something really changed right here. We changed the rhythm. And that's the part where we add the JavaScript to make sure that the hamburger button is really on the right side. Now it doesn't have to be like that. We can visually change the order once again as we saw earlier. So instead we... Let me check the JavaScript or the jQuery in this case. Instead of appending it to the header on the far right we want to make sure that it's appended to the main navigation right here. And now we have the same rhythm again. Logo menu search. Yes. That's a new hit. And in this case we want to... Not that the menu is the first child of the parent div in this case. We want to make sure it's the last child so we can give it a higher order than zero. Let me... And I gave it an order three and two as well. And now it's back again. And the HTML structure is very the same as the same rhythm on desktop and on mobile. All right. There's just one small thing I forgot to mention. And actually it's not really a legal requirement for governments at the moment because it's a triple A solution is the clickability of this button. So as you can see if I add a very beautiful background color to this button. Go away. For example background color green. It's very, very small. Especially when I open it. Meaning that the clickable area on the mobile phone is very, very small. It's only this green part. So as you can see if I click here and I'm definitely almost on the cross it should close the menu, right? So instead we wanted to make it a little bit bigger. And I added this clickable area variable which is 4.8. I don't know why because the content guideline says it should be at least 4x4 or 44 pixels by 44 pixels but I just like the 4.8 number. And instead we adjust the margins a little bit to make sure that it still has the same alignment that we had before but make the clickable area better. As you can see I didn't have to refresh this one. So back again. This button. I can't go back. Green. So it looks the same but it's by the clickable and that's exactly one. Especially for those fatty fingers here. And I even can reach out a little bit more to this case. And we cut the cover as well. So another thing with hamburger menus is that it hides the main navigation. That's exactly what we want so we have more spare space. But it should also be hidden for screen readers. So if we go back to the logo we go back to the menu and then we go navigate further we are inside the menu. And that's a small problem because it's visually hidden but it's still there for screen readers. So in this case it's a perfect case to actually use display none. So we're going to enable this small part of the code saying you shouldn't be there. Display none. I don't want you to be there not visually, not really there for screen readers but when your main menu is open show it as a block. And that makes sure that the invisible elements cannot receive focus. So if we go back and we are back on the logo again the menu and then we can go to the children. Also important regarding the focus management is if you open the menu in this case instead of navigating further you want to make sure that the menu items are actually the first child to receive focus just like that. But we don't want is this. That's not what we want. We cannot do a thing right now I can click and click and maybe if I go to another link yes I'm back again. That's also not what we want. In this case it's very appropriate to add a kind of focus trap. So if we go right here and this stating that if you are on the last item of the menu and you go to shift which is thrown to the next item please put the focus back to the menu button. And if we go to the menu well news and we go back to the button and this forces to use it to actually close the menu instead of getting lost somewhere behind the main menu. All right. So a small recap. Focus styling should be visible at all costs and if you decide to change the focus outline make sure you have a high enough contrast at least three to one. And create a logical focus order make sure it's the same rhythm on desktop and the same rhythm on mobile and tablet and so forth. And to do that just never forget to disable yourself from now and then to make sure that you actually see the body of your website not only the make up and also navigate through your website with your keyboard on multiple pages to make sure it's really correct. And then I have a last sponsored content. Like I said I'm a co-organizer of frontend united and this is an official announcement that we're hosting frontend united in Minsk next year. Feel free to come. No, no, no. Just be there. It's going to be awesome. And of course those very beautiful DrupalCon contribution I never contributed to Drupal with code. Please help me. It wants to be my first time. And of course what do you think? And thank you all. If there are any questions, I'm out. No, just kidding. You can ask. A list of the extensions you were using was there to help you do that stuff? I haven't, but I can make one especially for you of course. Now I'd use in this case or just in general because I use a lot of extensions to help me do automatic testing. Specifically these ones, but any others you have would be helpful. This one was the web developer tool and the headings map. Yes. Is there a test suite that you can recommend that spiders a site and gives recommendations like I've heard of AXE and there's a site. The microphone. There's no... Oh, is there a... Oh, it's over there. No, that's the clear. Can I... I'm just wondering if there's a suite or a suite of tools that you could recommend that could for instance spider a site and give patterns of issues or specific issues on specific pages and your level of success with any particular tool. Yeah, well I use multiple tools because some cover some errors and others don't. And even AXE has different approaches because I used it in the browser Xscore, but I also used it in my local environment and they both gave different errors which was very strange. So I always use multiple automatic testing. AXE is one of them that I use. I use Wave 2 bar and I use accessibility inside have you ever heard of accessibility inside? That's a great tool. I can show you Do we have time? 5 minutes? No, I can show you. The tools that I use mainly for example I'm not sure if it's... No, this is Lighthouse. I need the other one. This one. This is accessibility inside and it helps me to navigate through the pages That's that. And it helps me, I'm not sure if it's tap stops. This is a great way to help me navigate through my page because it numbers my links on the page. There's a bug in the JavaScript so I have to disable this because I forgot to add a resize event, sorry for that. So, show please. So it shows me exactly where I am on the page. That's a great way to test my keyboard navigation if I lost it, for example. I use the Wave 2 bar that helps me define contrast whether it's a small error in this too because it also highlights the visually hidden text. For example, if I have a black background and black text it fills but I cannot see it so it doesn't really help in this case and acts mainly. Are there any other questions? Do you also use screen readers for macOS and Windows that you have? I try to use those over but I'm not really an expert in it since then. So I do. If someone has a good idea about a course, how to use a good screen reader, any tips to help me please let me know. I would like to know how to use it properly. Any other questions? See you at the preview, Michael. Alright, thank you.