Accessible Web Design: What Is It & How To Do It

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 gonna cover what accessibility means and I can make sure that the website you design are accessible stay tuned hey everybody what's up my name is Ron Sega I'm a freelance designer and today we're gonna 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's has 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 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 imperative meaning they can't see color well they can't see you know as good as some other people or maybe they can't you know they have some other disabilities so they maybe they are 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 laws 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 not developing it correctly meaning that they'll be able to use some of the features like voice activation and stuff like 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 who we're actually managing the development at least you know when I'm working and I'm actually building the website we're using web flow 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 Pavlov 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 pavla Stanley way so make sure to check the article I'll cover some of the the concept that he mentioned they'll 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 it so I'm not gonna drill down to every tiny law here I just want to cover the the basic concept with you but the the the Chrome extensions that I've meant 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 a lil B 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 may be old people or maybe people that have some in parodies can't see as good and maybe you know we're designers will 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 grey 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 a 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 for 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 and medication and they put this tiny little paper there's 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 be below some some combination of color and size to make sure that it will be seen now Matt mvs my friend has actually created this really awesome tool from 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 and this will actually tell you while you're designing if you have enough contrast going on as you can see from the screenshot it gives you kind of the your your rank is it a double a triple a 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 is 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 difference differentiations bright because some people are color blind 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 is labeled with an orange but somebody that has colorblindness might not actually see that they are different and if your 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 gonna be only relying on color then somebody that's looking at it might not even see that there's a difference 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 egg and Team B so it's not only relying on color obviously for those of us who can see well we're gonna be able to make decisions or understand very quickly because of the help of color but color is not the only way that's gonna help us understand what's going on here alright 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 you know 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 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 tax that is above the 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 the websites to them and when there is no label they're not gonna 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's this form is for and won't be able to fill it up all right next thing is out tabs now alt tab is basically when you design some kind of a website and there's a code that says for example show this image an 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 out by the way out stands for alternatives so if you can't 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 web flow or working with a developer or whatever the way that you're building the your website you must have a system for putting these out tags in place you also if you know if you're gonna 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 is 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 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 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 and some clients are afraid of that and because you know we are at the end of the day were designers we the law and if you're trying to read everything that's in the you know web content accessibility guideline 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 100% 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 excessively 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 alt 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 text size contrast and stuff like that so you don't have to and in some in some countries except for example in Israel it is legally binding actually to put these kind of popups in every website to make sure that people who want to make the web the font bigger or more contrast or see the black the website just black and white can't do that using some kind of a menu so this tool actually helps you 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 did not ask me to do this so I'm just like I've recommended this product to a lot of my students in the web flow masterclass we're 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 great solution I've heard good things from my students but um you know it's just 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 has been like 100% fully like legal proof and and super accessible 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 legal like are you scared like every web site 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 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 plug-in or we can not use this plug-in it's your you know you're the client you make the final decision so just understand the context educate your clients and then make the right decisions and I think that as the years go by website will be better more accessible 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 make sure your subscribe and lots more awesome videos coming up on web design son general freelance live and yeah see you on the next video

Channel: Flux

Views: 38,839

Rating: 4.8039927 out of 5

Keywords: Design, designer, ran segall, flux, startups, startup, freelance designer, web design, web designer, web development, web developer, web development freelancer, web development tools, freelance web developer, web flow, how to start freelancing, web design business, how to freelance, start freelancing, freelance web design, Freelance, freelancer, freelancing, graphic design, graphic designer, web designer career, web design tutorial, website design, web accessibility, accessible

Id: -ao_Kc_8rpE

Length: 16min 24sec (984 seconds)

Published: Mon Nov 04 2019