Is your website accessible? (Beginners Guide)

Key Takeaways

making your website as accessible as possible is not just a legal or ethical requirement it's also a practical concern allowing everyone to benefit from your content while there are professional accessibility Auditors who check large government and corporate sites anyone who has a website should do some basic checks this will benefit not only those with registered disabilities it will ensure every user of your site enjoys a frictionless experience I'm going to take you through four areas you should look at media text navigating and responsiveness not using this checklist this is just a prop media includes things like images but what if your user is blind they're not able to see those images so we need to use something like alt text just show up for alternative text and you'll have this little tag within every image if you're writing out the code you'll write the alt equals but in any sort of modern no code development software like web flow there's always a space for that alt text and you you got to make sure you include that and it needs to be something descriptive about the image not just bag it needs to be you know a brown leather handbag with a gold clasp or some sort of detail the exception to this would be if that image is a link in that case we wouldn't want something like a white stroked outline of a simplified dwelling we would want it to say home we wouldn't want a white stroked outline of a magnifying glass we would want it to say search so just making it clear for people who are using the screen readers the next thing with images is if the images themselves like contain some text actually within the image and th that text you know would just be you know pixels within that jpeg or PNG or whatever file format and that's generally a no no it's something you don't want to do because the screen readers can't pick that up so this becomes diff difficult uh for people from an accessibility point of view so in that instance you would want to make sure there's good descriptive text around the image within the context uh of the image is a better way of doing it rather than including text within the image or if you have to do it include descriptive text around and repeat it in the alt tags there are exceptions to this like things like logos certain brand elements that's okay to use it needs to be presented you know as the form of the logo so in those instances it's okay but don't put large blocks of text just within an image make it plain text within the page other forms of media like video and motion you need to think about maybe introducing a warning if you've got very fast moving repeated flashing motion this kind of thing can uh bring on seizures in some people so we want to put a warning in place uh for that kind of thing and if you are using a video using captions is best practice using things like YouTube and Instagram you know different social media or things that are embedded if you embed something from YouTube on your website they help you because they often autogenerate captions and translations and things like that if you're doing it yourself you'll have to put that caption file in there similarly with audio you're going to want to include a transcript so that people who are not able to listen to it are able to read it next we've got text now with text there's many things that we want to think about to make it accessible as possible firstly our font choices we want to choose a font that is legible easy to read for our body copy for our headings we might bring in a little bit more flare a little bit more style and variety to bring some personality to the design but for body copy we always prioritize legibility is this font easy to read that also leans into things like the font size so it's got to be large enough for people to read at the kind of you know the normal sort of settings within the browser but also resizable because people who have these issues reading often have already got a setting within their browser to make the text larger or they know the controls to be able to increase the size there of the text so make sure it is resizable and then having a good color contrast between the type and the background so we want more than a 4.5:1 ratio of contrast now you're not going to see that maybe just by looking unless it's just black text on a white background but there are loads of great online tools and we'll link some of them that are just color contrast Checkers so you can just pop those in and this is even good for elements like buttons standing out from the background but especially with text we want a really good contrast between the color of the type and the color of the background below it or if there's something like an image behind it or there's some motion behind the text even more so we want to limit that kind of thing or make sure the text is placed on an area of clear space and there's always good contrast between text and the background type setting is a whole bigger subject but how we set our type really affects its legibility and if you want to get into some of more of the detail of that I made a video called how to ruin a good font there's a little link for that above here and you can also click the link in the description and find out how to set your type in the best way to make it readable for your user and in general with our text we want to use plain and inclusive language we want to be straightforward easy to understand concise and so doing some proof reading making sure everything is spelled correctly grammatically correct that will really help the user and also if anything is then autot translated or anything like that it's a lot easier to do when you've already got it very solid in its native language the next area is navigating so we want a layout of our site that is simple it's straightforward it makes it easy for the visitor to get around they can have a look and make sense of it it's like any area of layout it's like if you walk into a building it should be easily navigable there should be some sort of sense of where you're going you know I have a local hospital where they've just built extension after extension after extension there's like 12 different buildings that all connect and I still get lost there even though I've been going there for decades whereas an easily navigable building it just the layout of it makes sense as soon as you walk in you have a sense of what's where and we want that with a a website we want to get a sense of that things are in a place that we expect them to be where the navigation should be leading us through the different sections and another important thing in this is your header structure so we don't just want type to be uh larger for headings that's important but we want it to also be using the correct tags in the HTML so not just using a styling to make the heading bigger than the body copy but using the actual H1 H2 H3 Etc tags because people particularly who using screen readers are going to use these headings to scan through the site as well all users kind of just have a little scan visually as well those who can see to get a sense of the structure of your site What's the title of this page what are the subheadings and just scan through to get to where they want to be so having that structure in place is really important we also want to make sure that we're using descriptive links so they're not things like click here on a button or just an underlining link or see more not things like we want to uh give people a sense of what they're trying to do like uh apply for your badge clearance or some that's very specific something that's leading them to to to where they want to go uh register for the webinar that is a better link than click here and clear instructions all the way through uh our site and in everything that we're doing we shouldn't rely as well when we're navigating a site on things like color or shape alone to convey info or for people to navigate that causes problems uh for people who are using these different kind of Technologies to access the website or also uh with color blindness and things like that so don't ask people to do things like click on the green button or click on the round button or click on the big button this is not very clear we need to make it obvious not just relying on color or shape but all those things let them work together to guide your viewer through through the site if you're using something like an icon for somebody to click on or navigate make sure that's larger than 44 pixels and make sure there's space around it that it's easy for people to make the selection that is their choice and try out if you're testing the site as you should do navigating the site just with a keyboard there's a lot of people who don't have the motor skills to use a mouse and they use keyboard only to navigate SES so see if you can just by using you know the tab controls and the the arrows enter and Escape if you can get around your website and navigate to where you want to be with things like forms they particularly should be navigable so it should be easy as you go through the different fields of a form to Just Tab through them as you're entering your information and make sure things like that are always labeled correctly so don't have your form fields in the back end as like a b c d you know the title should should be there clear like name email message uh both with the caption but also with the the typ or the tag of the form field itself if you are using forms and and and collecting people's data then that officially makes you a data controller which means you have a legal responsibility and that's particularly relevant if you're collecting data from people in the European Union because of something called gdpr I'm not going to go into that in this video this is an introductory thing but if you are using forms you need to research that so type into Google gdpr look up data controller and and make sure you're familiar with the compliance there you don't want to get into any sort of uh legal trouble with that similarly with cookies and the rules about letting people know that you're using cookies on your website the last thing area that you should look at that I want to introduce to you in this short video is responsiveness and that means you want want to test things at different screen sizes so first of all on your desktop on your bigger monitor you want to just drag that browser window to make it narrower make it shorter and make sure that things work well that the line lenser are changing and and that the website always looks good on those different browser wids but then you want to physically go onto different devices go from a desktop to a laptop to a tablet to a mobile phone and make sure your site is working on all those different places get the tablet or the phone and turn it from portrait to landscape and make sure that the layout is changing in an appropriate way that the font sizes are still an appropriate size for the device that you're using and there should be changing As you move through and the layout should always work in those different places try resizing by increasing and decreasing the size of the text and see how that still works try using the zoom in controls and see if you're still able to get around and how your website behaves in that way and the best way to test is to have multiple different people test your website you kind of know what you're looking for and getting around but ask some different people whomever you have available but ideally and if you want to be more rigorous and you've got a little bit more budget or you know something within a professional company you want to make sure you have people with different disabilities test the website as well and make sure all um different kinds of people can get around the website if you want to dive deeper into this subject there are links in the description and make sure you subscribe to the channel to enjoy more web design content until next time happy designing