Speaker 1: If you're designing websites you have to know what accessibility for websites means and over the last year lawsuits over websites which are not accessible has been on the rise so actually legally if you're a designer you need to know what accessibility means. On this video we're going to cover what accessibility means and how you can make sure that the website you design are accessible. Stay tuned. Hey everybody what's up my name is Ron Segal. I'm a freelance designer and today we're going to be talking about accessibility when designing for the web. Now accessibility I want to explain what it is but it's actually something that I wasn't really not aware of but it wasn't top of mind kind of up until the last two years when it started to really rise in importance and people started paying attention to it and as I've said in the intro legislatively like there was some new laws and there has been a lot of new laws and there's been a lot of new laws that have been a rise in people who are actually suing website owners for not being accessible so designers really need to understand what it is. So basically let's cover what it is. The basic core concept is that not everybody has the same you know some people have disabilities might be that they're not be able to see at all or have some kind of visual impurities meaning they can't see color well they can't see you know as good as some other people or maybe they're not able to see they can't you know they have some other disabilities so they maybe they're operating their their computer and browsing through voice and through other tools and so we need to make sure that those people will be able to browse the web as well and it's it's kind of kind of a basic right to be able to browse the law these days. So there's basically two aspects to it. One of them is how the website looks meaning that they'll be able to see and read it properly. The other aspect of it is how the website is developed developing it correctly meaning that they'll be able to use some of the features like voice activation and stuff like that and as designers who are basically managing the project and obviously designing the visuals but also a lot of times making sure that the development correlates to or we're actually managing the development at least you know when I'm working and I'm actually building the website using Webflow or you know managing developers I have the responsibility of explaining to them what they need to do to make sure that the website is good and accessible. So let's get down to it. Basically I got into or really learn more about the concept from this article from Pablo Stanley from about a year and so ago and I'll link to the article below. He really covered kind of the core aspects or key concepts in accessibility in a really fun Pablo Stanley way so make sure to check the article cover some of the concept that he mentioned a drill down on on some of them to make sure that you'll be able to implement it when you're designing for the web. So let's talk about kind of like the key key concept and by the way Pablo mentioned in this article that there is a Chrome extension that you can install and that Chrome extension will show you if your website is already developed what's what's wrong and broken because there is what's called the WCAG which is the Web Content Accessibility Guidelines. It's kind of a bunch of people who decide what are they what means that a website is accessible what has to happen and there's actually some rankings like A double A and triple A which means how good or how accessible your website is. So I'm not going to drill down to every tiny law here. I just want to cover the basic concept with you. But the the Chrome extension that I've mentioned does go in depth and tells you oh this font is a little bit too small and stuff like that. So you might want to check out it'll be in the description as well. Check it out and it'll help you. But let's get start with the main concept before you even have a website that's designed and developed. So the first concept is color contrast and text size. And the idea here is that as I said some people maybe old people or maybe people that have some visual impurities can't see as good and maybe you know we're designers we usually work maybe on a Mac or on a fancy on a fancy display that shows color really really nice. And so we like to create hierarchies with like let's say some kind of a shade of gray or something. But for people who can't see super super well or have an amazing display like we have that makes reading really really tough job sometimes to the point of impossible. The same size the same thing goes for text size. We as designers we like to make things fancy and leave a lot of kind of like white space and stuff like that by using tiny fonts. But we have to consider that first a lot of people using these type of. Super small fonts makes it hard to impossible to read. So just like that in packaging design when when somebody is you know designing a medication and they put this tiny little paper there is actually laws that says the font size can't be lower than something because people old people need to be able to read this. The same thing goes with Web site guidelines your font can't speed up your web site. And that's basically what I said there is. So once you have that you have and the same thing goes with website guidelines your font can't and can't be lower than something because people old people need to be able to read this the same thing goes with website guidelines your font can't be below some combination of color and size to make sure that it will be seen. Now, Matt MDS, my friend, has actually created this really awesome tool for Mac, which, you know, you can check the samples of your fonts and color contrast, even in your sketch or whatever design tool that you're using. This will actually tell you while you're designing if you have enough contrast going on. And as you can see from the screenshot, it gives you kind of your rank. Is it A, AA, AAA, which is like the best of the best accessibility rate. You need to have some kind of a high contrast, again, enough for people to see. So check out MDS's contrast. Might be a good tool for you to use. Now, one more thing that you should, when you're designing, take in mind is that you don't want to use color alone to make kind of differentiations, right? Because. Some people are colorblind and they might not see the difference. So let me give you an example. So let's say here, if you look at the right, we have two types of card and one of them is labeled with a yellow and one of them is labeled with an orange, but somebody that has colorblindness might not actually see that they are different. And if you're imagine that you're designing some kind of maybe a task management or something like that, and you want to show a status of a project, if you're going to be only relying on color, then somebody that's looking at it. Might not even see that there is a different or urgency or something like that. So make sure that when you're designing, you add something else to this besides color. For example, if you look at the example on the right, I've added, for example, team A and team B. So it's not only relying on color, obviously for those of us who can see, well, we're going to be able to make decisions or understand very quickly because of the help of color. But color is not the only way that's going to help us understand what's going on here. All right, so one more thing that you should care about is focus states. So we, as designers, obviously we like to focus a lot on hover states and what happens when people move and hover with the mouse over something, create fancy interactions. But we, a lot of times forget about the focus state. So focus states basically is for people who use the keyboard to navigate websites and stuff like that. So they might click the tab and then they kind of the, the selected link is going to be somehow selected, right? And we need to show how that looks like. So this state is called focus state and a lot of designers don't even bother designing it or telling the developers that they should implement this because again, this is not something that's visible or used by them. And so they forget about it. So make sure that you also design for the focus state for people who are using tab to select and then navigate. Through the websites. All right. One more thing is labels. So these days, a lot of kind of trendy or this kind of design that you might see on dribble or stuff like that. When people are designing forms, it's very kind of minimalistic, right? So it's like the example on the left, they're not even using a label for the form. And by label is what you see on the right. When you have kind of a text that is above the form field. So a lot of times people would just use what's called the placeholder. Text inside the label to specify what this label is for. So again, like the example on the left, you can see that the full name is actually not a label. It's what's called a placeholder text. Now, the problem with this is, as I've mentioned, some people use tools that read the websites to them. And when there is no label, they're not going to be able to know what this form field is just because the website readers actually read the labels of the form. So. You have to have kind of a label for the form. Just build it this way. Otherwise, they won't be able to know what this form is for and won't be able to fill it out. All right. Next thing is alt tabs. Now, alt tabs is basically when you design some kind of a website and there's a code that says, for example, show this image and alt tag is a piece of the code, some letters inside the code that actually explains what this image is. So again, as you can see in this example, here we have alt, by the way, alt stands for alternative. So if you can see it and a machine is going to read the website to you for this image, it's going to say Nike Air Zoom so that you can understand if you can't see what's on the website, what's in there. Now, again, this is part of the development process. Not when you design, when you're working in Sketch, alt tags is meaningless, but when you're making the transition from your Sketch files into Webflow. Or working with a developer or whatever, the way that you're building your website, you must have a system for putting these alt tags in place. You also, if you're going to hand over the website to your client, you have to educate them about alt tags and how whenever they, let's say, put in a new blog post or update content in their website, they should be using alt tag to make sure that their website is accessible. Right. So this kind of leads into how to make sure that the website is. Developed correctly. And it has to do with things like how to set up the correct markup, which means let's say that the code, um, is, is, uh, written correctly so that they would know what an article is, what a navigation is, what a footer is, and how to make sure that, you know, the website will be navigatable with keyboard. And this gets a little bit technical, but again, it's not yours. If you're a designer and you're not developing yourself, the website, obviously it's not your responsibility, but you. Have to educate, or you have to make sure that the developer, the developer that you're working with will do a good job by developing the website correctly. Now, as I've mentioned in the beginning of the web, uh, of, of the video now, it's kind of like a little bit of scary in terms of lawsuit. Like is my, is my website, you know, lawsuit safe. Um, and some clients are afraid of that. And because, you know, we are at the end of the day, we're designers. We. The law. And if you're trying to read everything that's in the, you know, uh, web content, accessibility guidelines, you might not understand everything. You might not be able to implement everything. So if your clients care about not being sued for, you know, accessibility issues, you want to make sure a hundred percent that, you know, that, that you're safe. So in that case, I personally don't know everything that there is to know and, but there is a solution. So this is a company. Accessi is a company. Actually, I know these guys are based here in Israel and I've met them a few times and they've built basically a product, which by just entering one line of code into your website, it takes care of basically two things. First of all, it kind of uses AI to put in all the out tags and change the markup to make sure that the development is developed according to the standard. That's one thing. And then. On the visual side, it kind of adds a little, if you want a little pop up. That can give you this kind of options to increase tech size, contrast and stuff like that. So you don't have to, and in some, in some countries, for example, in Israel, it is, um, legally binding actually to put these kinds of pop-ups in every website to make sure that people who want to make the web, uh, the font bigger or more contrast or see the black, the. Website just black and white, um, can do that using some kind of a menu. So this tool actually helps you. Um, implement that inside the, you know, inside the tool. Now I have to be super, super honest. That they are my friends. As I said, I never used actually their product in any of the website that I've built. This is not kind of a sponsored video. They not asked me to do this. Um, so I'm just like, I've recommended this product to a lot of my students in the webflow masterclass who were looking for a solution for making sure that their website are accessible. And I've heard great things about this again. I'd never used it personally. So I can only say that it looks great. It looks like a great solution. I've heard good things from my students, but, um, you know, it's just, um, I'm just showing you that it's a solution if you're looking for it and just, just to make sure that you're legally covered. So I want to give you some final thoughts and be like super honest and open about this. Look, I have to admit that not every website that I've designed, um, has been like 100% fully like legal. Proof and, and super accessible. Um, this is something that's just, I feel like in the last two years have been gaining traction and shifting the mindset of designers. So I know I'm not like perfect in that sense. I'm trying to be better with every website that I'm designing. And also in terms of kind of like the, the legal, like, are you scared? Like every website has to do this. I think it really depends on who your client is. I think that when you're kicking off a project with your client and you're getting to. Know them, you have to ask and you have to make sure, and it really depends on who their audience is and so forth. How important is accessibility for you as a client, right? You as a, as a designer, you have to have the responsibility to educate them, to tell them what are the legal requirements. But again, you're not a lawyer, so you can't. Like fully just like you have to tell them, put a privacy policy, but you don't really, you can't write the privacy policy for them. I feel it's the same with, you know, accessibility. You have to tell them it's a thing. You have to. Tell them what the options are. Like you can say from my end, I'm going to make sure that there's going to be enough contrast and everything. If you're taking care of development, you're responsible for making sure that it's developed correctly. We can use this plugin or we can not use this plugin. It's your, you know, you're the client, you make the final decision. Um, so just understand the context, uh, educate your clients and then make the right decisions. And I think that as the years go by website will be better, more accessible. Um, and it's thanks to me and you, if we'll do a better job as designers. All right. I hope this video was helpful for you guys. Um, make sure you're subscribed and lots more awesome videos coming up on web design, sign general freelance life. And, uh, yeah, see you on the next video.