From a Workshop to a Wake-Up Call: My Journey into Accessibility | Tamari Gogebashvili (EN)

This talk focuses on the importance of web accessibility and the implications of the European Accessibility Act, which mandates that all online services become accessible by June 2025. The speaker explains that accessibility is not limited to permanent disabilities but also includes temporary and situational limitations that can affect users. A key point discussed is that improving accessibility doesn't have to incur high costs if it is integrated into the development process from the outset. The speaker illustrates several technical aspects of accessibility, including the proper use of HTML elements, alt text for images, and keyboard navigation. Tools such as Lighthouse and Axe DevTools for testing accessibility on websites are highlighted, emphasizing that small improvements can significantly enhance user experience for people relying on assistive technologies.

[music] >> Uh, hello everyone. My name is Tamari. I'm software developer at Karakun AG and today I will be talking about accessibility. What is it and why it matters beyond simply complying with the new air regulations? Um, so um, how many of you have heard about the new air regulations? Maybe? Okay. Uh, for uh, those who have not, uh, the European Accessibility Act means that from June

2025, uh, all services, uh, websites, e-commerce, applications must be accessible for people who has a disabilities. Um, if you want to learn more about that, you can scan this QR code and there is all guidelines regarding, uh, uh, accessibility. >> [laughter] >> Um, so, uh, now that we have covered the regulations, uh, let's talk about what accessibility actually means. And, uh, it's not about only a permanent

disabilities. Uh, it's also covers the, uh, temporary and situational limitations. Like injury that's, uh, prevents you, uh, using a mouse. Or, um, trying to read a content under the poor condition. Um, so, one of the common reason, um, why accessibility is, uh, uh, often overlooked is a cost, unfortunately. Uh, because there is a, uh, perception that making a website accessible requires a, uh, lots of extra time,

budget, effort, and not everyone will benefit from it. Uh but in reality, accessibility does not have to be expensive. Um if you consider, for example, from the very beginning, um then improving things just takes couple of minutes. Um and it becomes part of your normal development process rather than extra task that needs um separate time and the budget, right? Uh but even if accessibility was not part

of your uh initial plan, it's never too late. Um because many issues can be fixed incrementally without a uh huge investment. So, instead of thinking uh accessibility is a extra cost that needs a separate task, budget, and um entire effort, um we should think as a uh continuous um um effort, and the part of our development um daily development life. And um as a result, it's a

long-term value, and um everyone So, um what ac- uh accessibility actually means uh as a technical perspective, as we covered the theoretical part. Um it's Sorry. Um yeah. Um so, it's not a one big thing. It's a combination of multiple uh small improvements. And one of the uh part is to use proper HTML structure. For example, um heading to have a correct order, and the screen readers

can understand the content. In this uh example we have a provided here. Um on the client side, if we look, they might look the similar, but in the uh first part, there is no structure. But uh on the other hand, in the second part, we have a correct HTML tags. It's a structured, so screen reader can uh where content starts and so on. So, it's way easier

for people who has the disability and they need a screen reader. Um and the a navigation um is way easier um when you use the proper HTML One of the um common mistake what we have also in accessibility, uh this is images. When we are lack of uh um description, because in the first case, for example, in this uh slides, we have image, everyone can see it,

but it does not have any um um description. So, when someone needs a screen reader, for example, uh they might get a con- they they can't contact they they can't Sorry, they [laughter] can't get the content and can't understand what this uh image all about. Uh but in the second example, we also have a uh description, so it's easy to understand what this uh picture is all

about. And uh there are sometimes the case when um picture is uh just a decoration. And in that case, we can just keep alt tag uh empty and it will be skipped. we uh we have here uh the HTML um tags and we are talking about the HTMLs. But uh for example, even when you are using the frameworks, like for example, the Vuetify, what is the UI

uh framework for Vue.js, even in that case, accessibility is not directly provided. So, we you need to make it accessible. Um and the uh components might be seem a bit different. Uh we have, for example, v-image instead of image, but uh accessibility rules apply the similar. So, it's absolutely the same. And providing the um alt tag uh works um um similar way. Next uh um Next problem

what we have uh very frequently in accessibility, this is a keyboard navigation. Because if person can't use a mouse, and they absolutely need to use a keyboard, um lots of And uh we are using the uh example what is on the um uh left side, there is a um it's not focusable. So, uh this example with a div, when we have on-click method, this will work with

a mouse without no problem, but the problem will be that it's not focusable because it's a div. Um Or we need to make it focusable with a tab index and some uh other HTML um >> uh the uh tag uh com- components um Or we need to use a semantic element, what is a button. And the button does not need any extra work because it's automatically focusable.

And uh if we use the proper HTML tags, then we don't need any extra work, right? So, it's not So, if we see the those examples what I provided here, we see that they do not need much time or effort. It's very easy to fix. It maybe needs a 1 minute, 2 minutes. But definitely not extra task, right? Um so, what is a tab index? This helps

to helps to fix accessibility. Of course, using a right HTML elements is always the better solution. But even if we need some custom elements, we still can do that. But in that case, we need to provide a tab index. And that helps us to make custom element Um [sighs] yeah, this everything about the tab index. And now let's move about the forms. There is a plenty of

cases when we are trying to register or fill up some sort of form. And for users who has no disabilities, it's very easy to see error or see a placeholder and so on. But for screen readers, this might be a problem. Adding labels to forms will help users know what information is expected. Every form field every form field should have a clear label that is a properly

connected to the input. In the first example, we have a placeholder. We have also second example well when we are using the label. But it's still not accessible. So, placeholders are not enough. We already know this because they disappear when typing are not reliable for assistive technologies. The safest approach is the second example. to use always label and have a link to the input. Yeah. Next, what's

is also absolutely important is and it's very frequently ignored. This is having a good color contrast and don't rely only on color. In the first example, the text is visible, but it has very low contrast. If we compare first and second example in the first line, we see that second example is way clearer, it's readable. And it has a proper HTML structure as well. And the same

is about the second row. When we have a incorrect password, for example, and we rely only on a color. But for a people who are color blind, it's very hard to see where is the actual problem when they are filling up the form. And why we have it normally red text? Because to catch users' attention very easily, right? We are do we have a problem? And in

the second example, this is improved because we are not relying only a color, but we also have together icon. And then this makes things way easier. Um so, yeah, before I um um move forward, I want to try to um test. Um so, there are multiple um tools how can you test your web website is accessible or not. And one of the tool is that um built

in in the uh Chrome. I will try to uh provide a test uh and like um any any website how accessible it is. Like for example, according to new regulation, um all e-commerce uh should be accessible, right? For example, Aldi. Aldi is something we are using it's a market what we are using. Let's check how accessible is uh the website. Um I need to move, sorry. Yes,

uh 1 second. Oh, I'm sorry. Yeah, um Okay, now we see it. Yeah, let's uh let's try to test how accessible is the page of um Aldi. So, we need to go to um inspect element. We see that uh Lighthouse is already built in. We are going to Lighthouse and then there is a uh multiple choices. One of them is a desktop and we can check a

performance, uh best practices, SEO, and one of them is accessibility. So, let's check how accessible is uh Aldi's webpage. Analyze a page load. It takes some time first, but then we can get some results. Um and we see that it's accessible with the 82. The best case, it should be uh green. It can have some um issues because it's not always happening that sometimes we have a

a very high score here, like 90-something, but it does not always mean that uh page is accessible. at least to have a good accessible score, we can improve um some um uh findings what is here. For example, buttons uh buttons uh does not have accessible name. This is easy to improve, right? So, for screen reader, it will be easy to uh gather information for people who um

uh scre- uh screen reader. Um also, image image elements do not have alt attributes. So, this can have uh in this uh situation that for some some images can be that uh it does not even need accessible element because it's only for decoration. Um but we see that um some of the image has a uh discounts information and price information. So, in this case, I think that

this should have some um alternative description for uh screen reader users. Um the second tool uh you can use for testing. This is also a light how um uh Axe DevTools. This is a something you can install in your browser. This is uh this has a uh free uh um option and also uh you can have a subscription. I think to from my experience, free is uh

totally enough. Um but um feel free to um have a look also subscription if you are curious. let's scan fully. Unlike Lighthouse, here we have a different score system. You see that in Lighthouse provides the maximum score 100 and from 100 how accessible we are. But the in case of Lighthouse, it provides how many issues has been founded. And you see that here is a seven and

errors are and the problems what has been founded it's more or less the same because also Lighthouse says that button must have a descript description. It should have a alternative text. And if we see more detail, Axe DevTools also provides the place where exactly we have a problem. So where we need to looking for our issue to improve it. And if you press this highlight, then you

see that it's might be not that important to have on this image Um so this is pretty good tool to test your website how accessible it is and what you need to improve and where is your that's it about my presentation. Thank you very much. You can find the presentation in the first QR code and you can add me on the LinkedIn using the second QR code.

I hope it works. And please give me a feedback. It's very important for me. >> [laughter and gasps] questions. Thank you. >> [applause] >> Um thank you for question. To be honest me personally, I use only Lighthouse and the exit dev tools. I have not used any other tools. Only had a look and then after trying it out, I um it was a totally enough for me.

So, I can't really answer on this question how much I recommend because I simply have not really tried. So. Um yeah, I understood I don't really tried that. So, I can't have any comment regarding the recommendation about that. >> Not be sued is a good question. Um according to guidelines, this is very important to provide the alt alternative text for the screen readers. as I know, you

will not be sued, but you might have some fine regarding that, but it's only in European Union. As far as I know, it's not in any other countries so far. It's very hard for me to really answer on this question. you need to have for sure alternative unless it's have only for decorative. But I don't know how much what what how much will be fine, for example,

and how many times you need to to be checked to get some fine with that. So, that will be very hard from my side to talk about that. I think Or maybe you can come to Karakun booth and we can go deeper in the conversation and have a look together. Which one? Yes. Yes, text on your right. personally personally I prefer the look of placeholder, Is there

a different way to And there's some that doesn't necessarily require a label, but basically takes the role of >> You can have a different type of area labels for that. >> [snorts] >> If you have any specific, you can come boost and I'm also curious. We can try it out together. But area label would help that. Any other question? We are excited a little bit time. Have

a nice day and looking forward to >> [music]