 Rhae, rwy'n rhoi. Rwy'n rhoi. Yes. It's fine. Okay. So, hi. Am lisa. I'm going to be talking to you about accessibility for the next 20 minutes. Just a little bit about me. I've been a Drupal developer for four years. My passion for accessibility came from my first job. I worked with local councils. I had a fantastic mentor, really great friend, who really drilled in the importance of accessibility in two me from, like, the very first job. I now work for TPX Impact and work largely on non-profit and charitable projects. TPX Impact is less than a year old, but it's amalgamation of many known companies, decent, nudge, manifesto, which is where I originally came from, and many more fantastic companies. So, today I'm going to be discussing common accessibility issues and annoyances that people face online. When I think of accessibility, I think of the real people who are using our sites and just trying to make it as easy as possible for our users. It's only 20 minutes, so it's not going to cover everything. It's actually going to barely scratch the surface, but hopefully it'll give you something to consider next time that you work on a new project. I'll be categorising these issues by a high-level type of disability. It's important to note that many people can have multiple disabilities, and also good to note that even people who have no disabilities whatsoever still can run into these issues and face these annoyances. Inaccessibility affects everyone. So, starting with visual impairment. The first one is poor contrast, which often we do think of. It affects everyone and can make things very difficult to read. For instance, in my example here, this is a major record artist, and her menu is quite difficult to read, even for me who has no issue with low contrast issues. So, we want to make sure that all of our content is easy to read, especially menus. We're not trying to make people strain their eyes. Font sizes. So, we often remember that we need to zoom in on our websites. This is largely from our own experience of aging relatives, or even our own aging eyes. Everything starts to need to get a bit bigger. But we should also remember that people also sometimes need to zoom out. There are people who suffer from tunnel vision and want to make the text smaller. Websites which rely on colours. So, links should be indicated by something other than a colour. So, we need to be underlining, bolding, something that makes it different from the rest of our text. People can change the settings on their computers, make everything greyscale, and it's also important to note that one in eight men are colour blind. So, this affects quite a large amount of the population. Missing alt text, or alt text, which is lengthy. So, the alt attribute is needed for all images on our site. You probably know that as developers, we get a little error that tells us we're doing it wrong if it's missing. But we need to make sure that it's short to the point, because long alt text can be very annoying for the user. They don't need an essay for every image. If an image is just decoration, or adds nothing to our site, then you can leave the alt tag empty. But it still needs to be there. You need to think of what is important knowledge for your users, and what is an unnecessary annoyance for them. So, sticking with our major record label artists, there are artists such as Marina, which we have discussed, Bruno Mars, Dua Lipa, Panic at the Disco. All of these sites incorrectly use the alt text, either missing the tags, or naming their images asset 127. It doesn't add any information for our users. Both are inaccessible. Unclair page structure. Even the most beautiful, cleanest website, if it's not written semantically, the screen readers will know it's a bit of a mess. So, you need to make sure that you're writing everything clean, physical disabilities. So, these first three go together. When your user is tabbing through the page, they need to know where they are and where they are going. No focus means that there's no easy way to find where on the page you are, or what you're selecting. These should be with the design phase of the project, and I've never had a designer ever get mad at me for asking for these. Mainly because they know that developers will usually create something pretty ugly if we do it ourselves. Illogical order, which jumps around, can cause frustration and confusion. This can be caused by using absolute positioning in CSS, or creating things with our own custom JavaScript. Another issue with using custom JavaScript is forgetting to check that an element is in the tabbing order, or that it is used as we want it to be used by accessing with only the keyboard. So, wherever creating anything custom, we need to make sure that we can access it with the keyboard. Duplicate link text. This creates difficulty for speech users saying things like click learn more when we have 12 learn mores on the page. We don't really know what is going to be selected. So, there are ways in which users can navigate around this. However, it's an annoyance. Imagine if every time you had to write something down, your pen was in the other room. It's frustrating at first, and eventually you're going to stop writing things down. So, how do we avoid this? Just don't hard code it. Always make sure this is editable in the CMS. Small group together targets. This is a frustration that I'm sure every single person in this room is faced. When you're on your mobile and an ad pops up, there's usually a very teeny tiny little X in the corner, and only a pixel can be clicked, and everywhere else takes you to the app store. It's annoying. Imagine if you had this every time you went online. So, if you see a design and everything's tightly packed, just remember that annoyance last time an ad popped up and took you to the app store. And call it out. So, speaking of designs, most of these can be caught in the design phase, but accessibility is everyone's responsibility. So, no matter who you are in the team, you should be raising issues if you see them. So, a busy layout, especially on mobile. You want to have a one column design at the very least on mobile. Busy layouts can be hard to follow and feel overwhelming to some people. These people will often fix this overwhelming feeling by changing their window to be smaller, thus causing a one column design. Also, it should do. Popups, as well, can be very overwhelming, busying, annoying. I use this example of Superdrug. When you go on to this Superdrug website, you get like four popups. It's very annoying. And you have to close them all before you can even get near to the site. Animations or videos which autoplay. I'm sure many of us have been online reading a news article, and all of a sudden there's noise from somewhere. And you don't know where. And you have to like hunt on the page. Yeah, it's annoying, frustrating for everyone no matter whether you've got a disability or not. So we should be avoiding doing that at all costs. Fast moving animations. This is one that always gets me am quite motion sensitive. But you need to be thinking about the speed in which things move on your site. Do I have time to read the information that is being presented to me before everything switches? Can I pause it, if not? Also think of other parts of your site. Are they all moving at one consistent timing? This site, everything moves at a different speed. Everything. It's always moving all the time. It also doesn't have a pause. And you can only read stuff for about two seconds. Even the customer reviews, they're just gone. So if you want to check out a scary website, that one. Yeah. I will say, I end up using different websites to this so I end up going to the competitors. So it is very important that you pay attention to these things because Boots has got a lot of sales from this. So moving on to hearing impairment. Close captions, transcripts, scripts or sign language for videos should be included. Or if you're really going extra, all of them would be fantastic. Often people think that closed captions are enough. However, for those born deaf, their first language is often sign and not that of the language spoken in that country. Also being deaf or hard of hearing does not make you immune to cognitive disabilities. So you can be deaf and dyslexic and therefore closed captions can be very difficult to follow. Subtitles need to be easy to read. I always have subtitles on at all times. It really helps me concentrate. Except Gilmore Girls on Netflix. Thankfully, I know Gilmore Girls enough that I could probably watch it without subtitles and on mute. Netflix subtitles are all capital letters. They take up a huge amount of the screen. They move around the screen. There's no backing colour. It's just very overwhelming. So we want to make sure that there's good contrast all the time. Just turn on your TV. TVs do it really well. It's an easy font. It's not overwhelming. It's not distracting. And there's a black background. So I've sped through this. Best tools I have found. Drupal modules. Editorially is fantastic. It's right in the CMS. It can help content editors. It's amazing. Browser extensions. There's quite a lot out there. These are some of my favourites. So accessibility insights for web. It allows you to track the tabbing on your website. So you can follow everything along and make sure it's all in order that you feel comfortable with. It also has testing. So it's got automated testing. And then it also has a checklist that you can follow for your manual tests. So I find it fantastic. Wave. It's a bit old looking. But it does the job. It's great. And it allows you to turn off all CSS on your site so you can make sure that you are writing clean semantic code. Axe Dev Tools is incredible. It's used by local governments in the UK. And yeah, you can't go wrong with Axe. I'm not a designer. I'm a developer. But Stark has never done me wrong. It basically just checks your contrast. But the most important thing to note of all these tools is don't trust them. Accessibility is for humans. The best tester is you. Educate yourself and you are the best tester around. You need to be checking your sites. As you build every new element, just check it through. Some simple keyboard tests. And you are good to go. So that's it. So thank you. Feel free to ask any questions. Thank you very much. I think you're the best person to ask this question about colour contrast. Colour contrast. I have a lot of clients that use orange as their primary colour. And orange is one of the worst colours in terms of contrast. But they want the colour inside the design. What would you recommend as a solution for making links not in orange in this case? Or other low contrast colours? I'm not a designer. But there are ways in which we've used orange before in some of our clients. We've used it just as the underline and just tried to make it a bit darker so the client didn't really notice. That doesn't work. It turns brownish then. But would you recommend actually really a contrast switcher like we did in the 90s? I'm not sure. The designs are works. And I think just talking to your client and trying to get them to truly understand why it's inaccessible and let them know that if someone can't see that link they're not going to go to that part of the site and that can lose a client, important client's users. It depends on the site but it's vital that users can get everywhere they want. And also a website that's inaccessible. It usually gets known within the disabled community. So it can have a knock-on effect. So it's important that clients understand why we're doing something to avoid it. Hey Lisa, thank you for your presentation. So using Drupal Core when you're setting labels for fields you have the options above, in line, hidden. And then I don't know how recently but not that long ago, I saw that there was visually hidden and I was like, oh, maybe this is great for accessibility and I started using it in paragraphs and things like this. And then there was an accessibility review for the site and they told me, no, that's terrible, you shouldn't use that. But I wonder why it was added and is there any case for that kind of thing in having hidden labels and content? Do you have any idea why they would have that option in Drupal Core? No, you tend to hide labels for links with just images and stuff. I'm not entirely sure why they wanted to visually hidden information. But also a best way to hide information is through area codes and area labels. So just having it hidden in the CSS is never that great. Yeah, it uses the visually hidden class. So it should probably be implemented if at all with area attributes, right? So we need to write a patch for Drupal Core for that. I'll follow your lead. I understand that accessibility is very hard to test and prove that the site is really doing well on this area. But there is this widely adopted standard now even the US legislations are starting to refer to WCHE 2.1 and AA level. So we are trying to standardize on that, but it's quite difficult because we haven't found an easy way or at least like any standard way to prove compliance with the standard. Do you know any solution for that? No, there's companies that you can hire that do accessibility audits. And if it's just you and your team, it's just a lot of tedious testing and going through apps like the accessibility insights and making sure you're checking off those. Yeah, hopefully 3.0. It's going to be so much easier. There's going to be lots of beautiful testing for WCAG. Everything's going to be simpler. But we have a while to go for that. So at the moment it's just all a bit tedious to do accessibility reviews. Sorry. Hello, thank you for your presentation. I'm actually doing the frontend for a government website at this moment. So it needs to be super accessible. So I did a lot of research and there was really a lot to research. But one of the things I found was you have like a setting on your computer which it's called the reduced motion setting. So it's like on many devices. And you can write media queries for that. So you can reduce the animation, especially for those people who have those settings enabled. My question is, does the setting get used a lot? Because I do not know this. So is it worth a while to write everything with those media queries for that kind of setting for people with epileptic seizures or something like that? So from my experience, just as someone who can kind of get motion sickness, I do turn it on quite often and it's not often supported. A lot of websites don't support it, but I think it would be great if more did. So yes, I highly recommend adding anything to make anything more accessible. So a lot of the sites that we're seeing out there are dealing with privacy as an issue, but that's creating a lot of pop-ups and visual challenges. Do you have any recommendations for groups trying to handle we need these pop-ups, but we also want to make sure we're not causing too much motion and activity going on? I think just limiting the amount of pop-ups, like a pop-up here and there, it's going to happen online. The issue with the one that I showed was there were four, they all happened at once. One of them was a chatbot, one of them is getting more deals, one of them is cookies, which is completely understandable, but don't have them pop up super fast. All good?