OK, so it is time to start. Um Hi, everyone. It's so nice to see all of you here. Um My name is Madeline and I'm a full stack software developer uh from the south of Sweden.Uh I work as a consultant at a, so a company called Treton Tre which translates into 1337 in English. Uh I work 80% as a developer. Uh And I'm currently working on a um large Swedish uh industrial corporation. Uh I work with their um web shop. So we sell heat exchangers actually. And uh I've been working a lot with Ecommerce during my uh six years as a developer uh in the other 20% when I'm not a developer, I work with diversity and inclusion at Frel Tul. And it's a topic that is very close to my heart. Uh And I feel very passionate about making the web and the tech industry as a whole a more inclusive space. Um So a I'm here to talk about accessibility and uh we'll go through what accessibility is uh and how it relates to inclusion. I'll also talk about disabilities and impairments and how we should take these into con consideration uh when we develop for the web. Um And in the other half of the session, I'll do a live demo where I'll show you some handsome tips and tricks uh that you can apply already tomorrow when you start um develop. Um and you can make your websites more accessible inclusive and easy to use.

So let's start by looking at the definition for accessibility. So it says accessibility is the fact of being able to be reached or obtained easily. And accessibility in the physical world means making something usable to as many people as possible. And when we're talking about web accessibility, it's basically the same. It's about making a website accessible and usable for as many people as possible. And in the real world, we know many things that are made to be more accessible uh for the whole population, for example, um uh we have like uh wheelchair ramps that you put on stairs to make them accessible for people with uh with wheelchairs. Um Another thing we have is that uh you know, when you cross the street and sometimes you hear a sound playing um depending on the on the traffic lights and that's used to help um people with hearing disa uh disabilities to hear um or I'm sorry to help people with uh vision um uh disabilities so they can hear when it's safe to cross the street.

Uh We also have movie subtitles, uh close captions to uh, to help, um, uh, people who have hearing disabilities, um, and all these things that we do to make it more usable and accessible, uh, they don't make the objects less usable for people who don't have disabilities. Right.

I mean, they might even make the part easier to use for everyone. So I know for sure that, uh, every time I watch something, even if it's in my mother tongue, Swedish, I usually put on subtitles because I think it's easier to, uh, to, you know, to watch the movie and, um, hear it uh, easier to follow along. So good accessibility will make improvements for the whole population. And this next, um, this next uh slide here, uh, you are not going to believe your eyes. Uh The first time I saw this picture I was baffled because it's, it's a really interesting example of um, accessibility gone wrong. So this here is the story of Claire Lily. She has a daughter, uh or two daughters actually, um, twins. Uh, and uh, they were born prematurely and, uh, one of the daughters, um suffers from, um, Bulba palsy, which uh makes her has to use a wheelchair, uh, to get along. And Claire, she was pledging for months and months to the city council, uh, that they would build a wheelchair ramp so that it would be easier to, um, um, yeah, easier for her daughter with a wheelchair. And finally the council approved her request and built.

Well, this, it's a 60 m long ramp covering the whole front garden. So there used to be a big lawn, but it's completely covered in this ramp. So this is an example of accessible design. It considers the need of those with disabilities impairments. But we can see also how it is when it's an afterthought. You know what I mean? I mean, the ramp, it does the job. You, you can enter the house with a wheelchair, but it's very unlikely that someone who doesn't need a wheelchair would use the ramp. They would just use the stairs instead. I mean, compare it with these stairs. This is more inclusive design and more universal design. It covers the needs and considers the needs of the whole population. Um It's not only built for people with wheelchairs or it's not only built for people who walks the stairs. Uh It can be used by parents who push a stroller or cyclists who uh push their bike. Um, as well as just for people who prefer stairs and no one is forced to use one option over the other. And it's, it doesn't look out of place. It looks quite nice actually. So this is what taking accessibility into con into consideration in the first place looks like. And the same rings true for web accessibility.

While it is true that accessible design makes the web a better place uh for people with certain disabilities, inclusive design makes the web a better place for the widest possible audience. So it's not limiting anyone. Uh It doesn't just benefit people with specific disabilities.

It improves the usability uh for everyone. So inclusive design belongs in every part of the design and development process, but it's not just up to designers and the developers. It's about copywriters, writing content that is good and uh easily understandable for everyone. It's about information, architects, uh structuring content and so on. We're all in this together. Uh So let's talk a bit about disabilities and impairments. And first of all, I want to say that uh I talk about people as uh having a disability. Uh I don't like talking about people being disabled because I like to distinguish the person from the uh disability. Uh But I want, I know that some people who uh who have disabilities prefer staying disabled. So I want to apologize if I sound offensive to anyone that is absolutely not my intention, but I will continue saying that people have disabilities. So the World Health Organization uh defines disabilities as an umbrella term. Uh It covers impairment, it covers uh activity limitations and participation restrictions and an impairment can be a problem in uh but function or in structure. Um An activity limitation is uh a difficult encountered by an individual uh when executing a certain task or action.

And the participation restriction is a problem experienced by an individual uh in involvement in life situations. And the World Health Organization also states that over a billion people, that's about 15% of the whole world's population have some form of disability. And when you hear those numbers, it's quite obvious that we can't really ignore this. It's such a big part of the population. And do you know what this is even more mind boggling? Because by their own definition, these numbers aren't even close to the reality because an impairment can also be temporary. Um For example, if you uh have low light in the room and you can see uh you're not registered as being blind, but you can still have uh a visual impairment in that exact moment. Um It could be when you're traveling and um um the Wi Fi uh or the three G on your phone isn't good. That could also count as a type of um impairment. Have you ever tried uh holding a baby and trying to navigate the web page with a keyboard on one hand, that's also like a temporary um impairment of using a website, but people with disabilities uh are just as diver diverse as people without disabilities.

Um But there are some main types of disabilities that we need to consider um extra much when we build for the web. So first of all, we have visual impairments. Um I'm checking the chat here to see if it's uh there seems to be um some people have problems hearing and some don't. So I'll continue. So we have visual impairments. Uh We have, for example, color blindness, we have low-level vision. Uh We have blindness and all of these can be um helped out by certain um accessibility tools or um things like screen readers, for example, that uh reads a web page and help the user navigate it. Uh We also have the high contrast modes of certain websites and uh uh on the telephones and such. Um we can increase farm sizes and increase overall sizes to help accommodate. We have uh mobility impairments which could be physical issues like loss of limb or paralysis. We have neuro neurological uh or genetic um impairments that leads to, for example, weakness or loss of control in some limbs. Uh We have old age that also might cause mobility impairments and all of these mobility impairments might make it harder, for example, to use a keyboard or to use a mouse.

Um So we need to make sure that it's possible to use different um types of input controls to uh to use the web. We have hearing impairments like I said, for example, um captions on videos can improve those uh for those with those disabilities. And we also have cognitive impairments could be um problems with memory. It could be problems with keeping attention for longer periods of time. It could be uh difficulties with problem solving. It could be text math and visual processing or it could be learning disabilities um all of these are very important to take into consideration uh when uh designing and developing a website, for example, it's easy to get lost when you have navigated and you forget like, how, how did I end up on, on this page or uh what did I do to click here?

How can I come back? So, it's super important, for example, to have bread crumbs. Um It's important to um to make things behave like they are expected to behave. So we've all seen those cool navigations or um buttons that don't really behave in the way we are uh expecting them to behave and sure they look really nice and cool and everything. But it's very hard for people with um uh cognitive impairment to uh to understand like how, how does this really work? So I've gone through the basics of accessibility and um uh some visibilities and how we can take those into consideration. So it's time for the live demo. Um And uh I have built a very simple site that I will show for you. Um Here. So here's the site and here is the code. Um I hope you can see all right with the font sizes and everything. Um It looks quite all right. Let me know when this chat if you want me to increase the size or anything. So this here is just a very simple form. It's first name, last name, email, password. Uh Please select your spirit animal. Um This is my dog, by the way, this is Ava the pug. He has to be in the presentation, of course. Um And then just register. So I'll just uh show quickly how this works. So I'll fill in here. Uh first name. Oh, this is strange.

Now, I got an email. Ok. Now, uh I have a mechanical keyboard so it makes a lot of noise when I type. I hope that's all right. Um And I will select the chameleon because those are really cool animals and I will register successfully submitted form. So this is just for them purpose, but you, you get the picture, right? Um So that's how the form works. And the code is just uh it's a simple node server uh just to show it um some very basic uh inputs a regular form and just some CS S. So it's not about the code right here. It's uh it's about the accessibility. And first of all, I want to show you something that I learned about quite recently. Um I use chrome. So in chrome DEV tools, there's a tool called lighthouse which can um analyze your site and generate reports for it. Uh which I think is really cool. So for example, here we can select accessibility and generate reports just to see like does uh Google consider our site to be accessible or not? So let's try it. 12 yeah. 100 is the max. So top 12 isn't uh really good. Um We can look more into detail on what they um mentioned to be the things to improve, but I just want to display this for you.

Um Another cool thing is when you select an element you can also see here um like the um um now I can see it for some reason. Well, you are supposed to see the contrast of a, of a text element to see if the contrast is good enough for people that have um um color blindness and stuff. Um Anyway, so um I will close this now and return to the code here. So I mentioned screen readers uh as one possible um tool for people with uh blindness. For example, it doesn't only have to be that blind people who use screen readers. It could also be people with um for example, problems reading. Um they might use a screen reader to uh to help to read it. So I figured we should look or read this site from a screen reader's point of view. So I have the chrome extension called chromebook. Um Let's turn it on and see what happens. Chrome Vox's spoken

feedback is ready. Local is 3000 tab.

OK. Let's start this. It will just go through the form and read

it first name, last name, email password. Please select your spirit animal, one image, two image three image chameleon pug ple register now.

OK. That's quite fast to begin with. But uh I guess you can configure that. Um So let's assume that I am a person who tries to navigate the site here. Um I enter this first field here. They read through it. Everything. I can't really remember what it said. So

I will edit text, edit, text, edit, text.

OK. It's an edit text. But what am I supposed to write in it? I don't

know, edit, text, edit, text, edit text.

I don't know why it says three times. That's also what

edit text, email

entry. This gave me a little bit more information because it said it was an email entry. Um It's because the text um input has the input type email here

with local 3000 tab password, edit text, password, edit text, password, edit text.

It gives a little bit more information for the password as well since it has to type the password. What about the pictures?

Two, image, three, image

123. That's just the name of the images. It doesn't say a lot at all.

First name, like first name, like selected radio button, selected,

read a button selected. It's it's quite useless uh to be honest. So let's look into how we can make it more usable for the screen reader. Um Let's start with the input fields. So we need to make the user know what are they supposed to write in the field. And if we look at the inputs, we have uh first name here, it's just written. Um It's no input element at all. Um But there is the input element called label. So let's make a label around it in um html. Uh We have the ID here called first name. So we want to connect this field with the label. So we'll say that it's a label four and then the ID like that, let's just try if it works. Now,

radio button on selected first name, edit text,

that's a little bit more usable because now it says first name and then that it's an edit text. So our labels are working. So um let's make uh labels for other ones as well. A needle for last time and um password. Um And let's just do the same for the radio buttons as well. Uh labels then and let's do it for the pug for Alma uh maple. Um oops that one. Um The ID is punk and then we have the last one, which is the penguin label for penguin. What are your spirit animals? Which one did I forget?

Win? Lous 3000 tab, first name, edit, text, last name, edit, text, email, edit, text, email, entry, password, password, edit

text. It is getting more usable and accessible, right?

Selected Chameleon radio button, selected, selected pug radio button selected

definitely more usable. So my first tip for you is to make sure that you use semantic HTMO, use the correct elements that you're supposed to use uh in this instance, we have the labels for the actual labels, but it could also be um using um the correct headings. For example, if you have a H one for the main title and then H two for the next section, the screen reader will start by reading all the headings sections like kind of like a table of contents. Um So it's super important to structure HTMO with the right elements. And um uh also um oh I forgot what I was supposed to say. So let's head over to the next one. The images are still uh very uh image, not usable uh and not accessible. So let's put some descriptions on them. Uh You do that with the alt uh attribute uh stands for alternative. So the first picture, what's that? That's a chameleon sitting on a tray. Um This one is uh a P six oops on a bench and the third one is um a family of Emperor Penguins privacy. It's good to be extra clear because you want to describe the pictures for the user. So let's see what the screen reader reads though says. Now with a

local 3000 TD chameleons sitting on a twig, a pug sitting on a bench, a family of Emperor Penguins by the sea,

definitely more usable. I mean just close horizon here. It's, it's definitely better than getting uh image one or uh image two and image three. Um So um tip number two is to use um alt for your uh for your images. Uh It's, it's quite tedious to do. Um And you need to um you know, think of what you, how you describe them and stuff like that. Um You don't have to do it for images that are just for decoration though because that's just creates noise for the screen reader. So if you have an image that's just a background that doesn't provide any value or any content, then you can just put an alt that is empty. Um So like uh just like this because then the screen reader knows that. OK. We have intentionally said that we don't want to describe this picture. Uh OK, I'll turn off the screen now because it's quite annoying to have it window extensions, ted there. OK? Um Just checking the chart. Um OK, I've talked a bit about color blindness as well. Um So I figured that we look at how the site would look like in black and white. Um being totally um uh color blind is not very common. Uh Usually you have problems with distinguishing, for example, red and green uh or certain hues of blue. But for the purpose of this demo, I will just um show it in black and white. So assuming that I am a user now filling in this form Madeline, uh uh I don't want to write the email um password.

Yeah, and I'll select the P and I'll send the form. Ok. Now I successfully submitted it. But what if I um didn't write my first name? What if I wrote my uh last name and um just some random email and some password? Ok. Nothing is happening. I see that there is some something happening here around a input elements. But what is happening? I don't know why. I don't know which one are. Ok. And which ones are not. Uh I mean, if I improve something here, would that be OK? No, it's still not. OK. It's impossible for user to know if you remember from the first uh when we showed, when I showed it in color, the ones that were uh OK. Uh That were validated, positive were green and the ones that were uh not good were red, but it's impossible to see the difference here. Um So let's make um them a bit more usable. Um It's nothing wrong with having colors, but you need to have something else too to distinguish it. Um For the purpose of this demo, I've been using a uh small uh library called Pristine for the valuation. And by default it um uh writes small labels with the error messages. So I have just hidden them here. I've slipped and stay now for them, but uh let's make sure that they are shown now to see what it could look like.

So now I start and now I instantly get feedback. This field length must be more than four characters. Ok. Now I know uh I'll not write anything here. I'll write some rubbish here on the password now. Ok. This field is required, there is still a validation um with the border and everything, but we get more information. So it's much more accessible for us, sir. Uh And as I said, no matter if you have a disability or not, this is more usable for everyone because now we know that this field is required, we know that this field uh is required to be an invalid email address. So I guess I need to use an act and something like that. Um Isn't that the validity of this? No, like so no, I've successfully submitted my form. So tip number three is to not use or to not rely on um colors to convey a message. Uh Always make sure that you can get the message across without having to use only color. Um Let's turn off black and white now because it's boring. Um OK, let's move on. Um I talked about navigating with the help of the keyboard. Um We have users that are not able to use a mi a mouse or we have people who wants to navigate with the keyboard and we saw her when I, I now I suddenly ended up in the email field which is super confusing uh password and now I tabbed and I have no idea where I am.

Ok. I'm in the first name again. But how do I select the uh Grady buttons? I, I can't navigate them. Super confusing. So I wouldn't say that it's super common to change the order of the tabs. Uh Sometimes you do it when you, for example, use Flex box to position the elements. You need to make sure that if you've selected the elements in a different order than they are in the HTML, you need to make sure that they are uh correctly tabbed and you use that um to do that, you use the um tab index. So for the purpose of this demo here, I've just set the second field to have tab index three, which means that it's the third element that you tab to. So let's remove that. And I've also set the radio buttons to have minus one, which means they won't be t at all. So let's remove those as well. Uh As I said, for the purpose of this demo, um We usually don't um set them to be non capable. Um So let's try again. I have a very long name. OK? And now we see that we can turn those. So it's possible to select with my keyboard and I was just still having hard time pad to the bottom though.

So I press that one for now, successfully submitted. Um And um tip number uh four is making sure that the tabs uh or the form itself is usable to use with keyboard inputs. So make sure the tabs are in order, which is, it is now. Uh, but I still had problems with the seeing kind of where I am. I mean, I can see it with the cursor here, but I couldn't see when I was uh selecting the button and stuff. Um So the third, uh I'm sorry, the fifth thing that we'll go through is um, highlights and uh outlines. So when you don't do anything with an input element, when you don't style it in a certain way, uh you will by default, get uh an outline around it. And it's very common for designers to remove this uh outline because it's, well, it doesn't look very nice to be honest. Uh But it is usable and it is accessible. So uh I removed it here, but I will um add it again so you can see what it looks like. So here I said out lou outline, none, but don't do that guys. Um Now you can see here that there is a yellow um outline around the field. Uh It's because it's my theme in my computer.

Um Usually if you don't have a theme, it's blue, but you can easily see which um check box or read button that is selected and you can see the outline around the bottom, but of course, you can style it if you want to. Uh So you don't have to rely on the default behavior here. Um So I will say here that the outline should be uh two pixels uh solid and let's use the same color as the bottom just to display it here. Did I save? Oh, I forgot the hash here. That's why there. And now you see it's still outline, but it looks much nicer. It fits in with a sign, so it's still accessible and usable and easier. You can even see the button that when it's um um when it's uh focused. So tip number five do not um remove the default behavior of the outline style it better if you want to uh but don't remove it completely. Um So that was five tips. Um There is a lot of more, I see that you have posted some resources in the chat, which is great. Uh I can really, really recommend looking into um the uh Mozilla uh developer, network documentation MD M. It's really good. I have a lot of good resources. Um Let's look again at the lighthouse to see if we have any improvements here. So let's uh generate this one again. 80. It's still better than 12, much better, I must say. Uh But let's look at what it complains about.

Still, it complains that the document doesn't have a title element and that the HML does not have a L attribute. So let's just fix those quickly as well. Um So the title uh it's uh you just write it in the hand section. Um title. Uh five Quick Wind to make those lights more accessible and then we can just write it here. Lang. This is only English um doesn't make any difference. You can see it in the tab now, the title, which is always nice. Um So let's run this one final time. 100. Yay. That's great. We have gone from 12 to a 100. That's, that's a really great job and we didn't um have to uh put too much effort in it. Um I'll head back to my presentation now. Um Let's see my notes here. Um And this one should be full screen. Oh, ok. Uh So the five tips, I'm just gonna go through it quickly again. Uh Number one use semantic HTMO. Number two, always put alt on images. Number three, don't rely on colors to convey a message. Number four, don't mess with the tabor. And if you do move around the elements visually, make sure that the tab order uh will be correct and make sure to always have visible focus on elements and bonus tips. Lighthouse in Google Chrome and the contrast ratio on text, which I for some reason was not able to show you, but it is there when you inspect an element. So time is running. Uh I have a confession to make for you.

Um And that is that I haven't always thought about accessibility. Um I don't have any disabilities on my own. Uh And I don't really know anyone that has any disabilities that impacts the way they surf on the web. So, privilege is when you think something is not a problem because it's not, not a problem to you personally and I am very privileged in this case. Um I mean, I found accessibility to be a bit boring. Um I was more interested in learning like new tools and new frameworks and all the cool stuff and I didn't really know what to do. I felt kind of overwhelmed because I didn't know about it. It was too hard and it was too much to do. Uh And yes, it, it might be hard and it might be expensive as well if it comes as an afterthought. You remember the ramp from the picture in the beginning when you do it like that, of course, it's a big deal to do it. But working in technology, uh we face challenging work every day and we frequently encounter bugs and other complications. Do we give up the first sign of an issue? No, we don't. We find ways around it and without compromising the user experience and the same is true for accessibility.

We just need to find the new tools and techniques to do it, to implement it. And I always consider myself to be quite an uh empathic person. I mean, sharing people's feelings and thoughts and everything like that. It, it has come quite easily for me. But I realized and I understood in this case of accessibility for the web, I wasn't empathic at all. Um Because of course, it's easy to uh to create products for people that have the same needs as you do. Um Because we understand our own requirements and that's why diversity is so important because, well, you all know what the tech industry looks like. Um Many of us are the same age. We come from the same background, we have the same abilities and most are still men. So we end up creating products that suit our own needs and we forget about the people with requirements that differs from the ones we have or maybe even conflict with the ones we have and that's, it's not good enough. OK, I am passionate about diversity and I am passionate about making people feel included, which made me realize that I had to focus more on accessibility and I needed also to inspire others to do the same. So I hope that today with this session that I sparked some new thoughts and ideas and if you want to spread it to others as well and dig into it even more. So, thank you so much for listening. I really enjoyed it. I hope you did too.

If you have any questions, please uh post them in the chat. We have two minutes before the session is up. Um I'll see here. Thank you so much for thinking. It's insightful. That makes me really happy. To hear, please repeat slide with the five tips. Yes, I'll head back to that one. Here you can take a photo with quick Yes. Um Cassandra here wrote that she sent me a linkedin request. Uh Please uh add me on linkedin. If you want to um um to uh connect, I'm happy to connect with uh anyone. I always think it's fun to talk to other people in the tech industry. Um Why do you always have to put al on images? Um Well, as I said, it's because uh the screen reader will uh be able to describe the picture for people who can see them. And it's one other thing to remember is that when you um develop a site that is good with um accessibility, it also improves the Sao the search engine optimization because they encourage sites to be good. So my time is up. Uh Thank you so much once again for joining this talk and uh have a great rest of the conference.