Making Your Websites More Accessible

What Is Accessibility and Why Is It Important?

Web accessibility in its purest form relates to the usability of a website for all people. Can a website be used by everyone? Can everyone perceive, understand, navigate, and interact with the functionality of your website / digital product?

Unfortunately, this can't be said for every website you may stumble across, but making websites usable for everyone should be the standard. Accessibility should be at the forefront of your mind when you create any product, especially for the web. Accessibility should be part of the design, user experience, coding, and testing of everything created to be used by the masses.

How Can I Check The Accessibility Of My Website?

You should try to keep accessibility as an essential, high priority part of any work you do. However, you might be thinking about how potentially unaccessible sites you have made previously may be.

Accessibility can be retro-fitted in situations like this, but this should be the exception not the norm. There are many accessibility tools that will tell you how accessible a website is, and may also provide tips on how it can be improved, two that I recommend are:

• WAVE Web Accessibility Evaluation Tool - https://wave.webaim.org
• Google Lighthouse Accessibility Audit Tool - https://medium.com/accessibility-a11y/do-an-accessibility-audit-using-google-chrome-lighthouse-30ff7887901c

I Want To Make All My Websites Accessible! Where Can I Start?

Great! Here are 6 things you can do right now to make all your sites more accessible…

1. Use Semantic HTML.

Using correct semantic HTML is a great foundational step towards an accessible website. Semantic HTML gives us a built-in way to represent logical sections of our web apps, and while they don't perform any real functional differences, they work well with assistive technologies to provide alternative ways of viewing / navigating a web page.

My biggest take-away for you for this point is that div & span elements are for layout only. Try to find other elements that are more appropriate semantically if you can (like nav, footer, button, etc.). To skill up on semantic HTML elements, have a read of the W3Schools page on it!

2. Correct Heading Structure.

Along the same vein, let's talk about headings. We all know the correct usages of H1, H2, H3 etc. elements, but using them in the appropriate hierarchy on your web page is really important. Headings should be nested by their 'level' - so the top-most heading should always be a H1 element and so on. W3C has great documentation explaining this in detail.

3. Add Alt Text To Your Images.

Using visual elements on your website is great, as long as they are supported by alt text to allow all users to perceive them. Alt text should be understandable and describe the picture as clearly as possible as it will be read out to those using a screen reader to access your website. This allows us to give necessary context that users may otherwise miss out on if they cannot see the image on the site.

4. Contrast!

Choose your colours wisely! Make sure the colours that you select to use in your site design have adequate contrast so that all users can distinguish between elements and comfortably read text on your website. Ensure that text stands out well against the background so it can be read easily.

If you're unsure how to make sure your colour palette is cute and accessible, choose your colours and then pop them into a contrast checker to ensure everyone can enjoy them!

5. Keyboard Navigation Is A Must.

Accessible websites should be navigable without the use of a mouse. In general, it should be possible to use all of your website's important features & functionality using just the keyboard alone. Using focus indicators correctly and making sure the navigation order of your website is logical and intuitive makes your website a whole lot easier to use for lots of people.

WebAIM have a great guide you can follow to work on improving your site's keyboard accessibility.

6. Always Have Accessibility In Mind.

With all that being said, remember to always have accessibility principles at the forefront of your mind when you are doing any sort of work. Not everyone experiences the web in the same way that you do, and it's good to be mindful of that so that we can create a fun and accessible web for everyone. Accessibility is a priority, not an afterthought.