How To Make Your Website More Acessible

The following is a short article outlining 5 simple ways you can optimise your website for accessibility.

What Is Web Accessibility?

Web accessibility is about designing and developing websites, tools, and technologies that people with disabilities can use without confronting barriers that disrupt or make it impossible to complete their tasks.

Examples of common accessibility barriers on websites:

  • Not compatible with screen readers
  • Cannot be navigated using a keyboard
  • Missing alternative text(alt) for images
  • Multimedia without transcripts, audio descriptions or captions
  • Missing form input labels
  • The low colour contrast makes the text hard to read

Why make your website more accessible?

Other than the obvious which is being able to serve your website to a wider range of people and have them be able to use your site effectively it is a legal requirement. Granted no one seems to recognise this but it does come under the 2010 Equality Act.

UK goods and service providers (this includes both public and private sector organisations) have a legal obligation not to discriminate against people based on several protected characteristics – including disability. This covers people with visual, motor, hearing, cognitive and learning disabilities.

Adding a hidden ‘Scroll to content’ link

Why implement this?

Having these hidden links on your site means that people with difficulties using your navbar or interacting with websites just through keyboards have a place to go that allows them to skip past headers and navigation items.
This is a really easy thing to implement and took me about 20 minutes to implement site wide on my website.

How to add a hidden scroll link on your website

First you would need to add this one line of code to the top of your page:
<a href="#contact-section" class="skip-nav-link">Skip Navigation

HTML code for a Link that says Skip Navigation

This will add a link like this:

Screenshot with a button saying Skip Navigation at the top of a web page

You then need to add the div id element at the point you want the button to scroll to.

HTML code for a Link that says Skip Navigation

I’m guessing you don’t just want this boring link at the top of your site forever so let’s look at styling it and then hiding it off the page.

Here’s the CSS I used to style and hide this link. Having it hidden unless focussed means no one will see this link unless they press tab after opening the site.

CSS code for a button with a black background and white text

This made my button look like this:

Screenshot of a webpage with a button with a black background and white text

And that’s it. You now have a way for people interacting with your site through a keyboard to skip past the unnecessary content on your page.

Properly implement alt-text for all non-decorative images

Alt-text is useful for a few reasons. It is read aloud by screen readers to describe the image, it is indexed by search engines so assists with your SEO efforts and it is what’s displayed if the image fails to load.

What makes a good Alt description?

  • Add alt-text to all non-decorative images.
  • Keep it short and descriptive.
  • Don’t include “image of” or “photo of” in the description.
  • Leave alt-text blank if the image is purely decorative and doesn’t add to the content.

If you have icons for downloading PDFs or advancing to another page your alt-text should convey this.

If you are using images as links then the alt tag should be used to say what happens if you click on the image.

Remove placeholder text from forms

Often placeholder text is a light grey on a white background, this has very low contrast and therefore is harder to read and can be confusing. Instead of or as well as using placeholders, you can use labels that sit above the form field. This may look less appealing but it ensures that your form fields are more widely understood.

A great article on how to design accessible forms can be found here.

While I was researching for this article I looked back on my own website contact forms and realised how poor it was for accessibility.

A form poorly optimised for accessibility with low contrast ration placeholder text

Since learning this I have redone my website form and it now looks like this:

A form optimised for accessibility with label text

Use Descriptive Links

Having links that just say ‘Click Here’ aren’t very helpful without context. If you use more descriptive links that describe where that link takes you or what it does it helps everyone especially people using screen readers.

Add captions and transcriptions if you have Video content

Having these embedded in your video means a wider range of people can understand and enjoy your video content.

If you’re uploading on youtube you may have these features automatically available for your videos but if you’re using other sites this may not be the case.

Sites that are very well optimised for accessibility

Google Calendar

You can move through the entire site and operate it as usual just using your keyboard. They even have a list of keyboard shortcuts that can be accessed by pressing tab when you open the calendar.

Google Calendars great accessible keyboard navigation

As someone who has designed and built countless websites, I now realise how little I thought about accessibility and how this has potentially led to poor website experiences for users. I now aim to go back and fix these issues on any old sites, and for any sites I aim to make in the future accessibility will be at the forefront of my designs.

I aim to publish an accessibility statement that will apply to my websites soon.

Need Help Improving Your Websites Accessibility?

Contact Me

Related Articles

How to Crawl Websites with Google Sheets?

An automated way to scrape data within Google Sheets seems too good to be true? In this article, I will show you how and go through some examples of how I’ve used this in my role as a Paid Media Marketer.

Read More

10 marketing KPI’s you should be tracking in 2021

KPIs ensure that you execute a more successful marketing strategy as well as helping you to identify which campaigns and tactics are having the biggest impact for your business.

Read More

Top 10 ways to market your business in 2021

Strategies that you can use in this new era of cookie-less, privacy focused browsers.

Read More

Let’s talk

Start your project with me

Start Talking