5 ways to make your website more accessible

When we were re-designing our website, one of our main goals was to make it as accessible as possible for everyone.

Our brilliant web designer Leyla Alexander helped us to make sure that anyone wanting to know more about Cause Communications can find that information online easily and without hassle.

So we asked Leyla to write us a guest blog on how she did it, together with tips and advice for anyone else who would like to make sure their website works for everyone, no matter how they are accessing it.

Cause Communications website designer Leyla Alexander

An accessible website is a website that is easy for everyone to use and understand, regardless of disability.

In the UK, an estimated 1 in 5 people have a disability of some kind. Many more will have temporary disabilities. Sadly however, the vast majority of websites that are developed today have accessibility barriers that exclude people from the content they wish to see and the tasks they hope to undertake.

Aside from the fact that improving accessibility is fundamentally the right thing to do, having an accessible website also:

· improves the user experience for all users

· improves the SEO of your website

· improves the reputation of your brand

So as you can see, it makes good business sense too.

Where to start?

With people. Consider how different people might access your content. For example, can someone with limited movement easily navigate your site using the tab key on a keyboard, instead of a mouse? If you use video, does it have subtitles, audio descriptions as well as transcripts? Does your web copy use clear and simple language so that users with cognitive impairments will understand it?

Improving the accessibility of your website might seem like a daunting task at first, especially if you're not a web designer or developer. But there are some simple things that you can do.

So here are 5 quick tips to help you take that first step towards a more accessible website.

1. Page Titles

Every web page requires a unique and concise page title that accurately conveys the page's content and purpose. Writing these well is critical for screen reader users as they are always the first page element to be dictated when landing on a web page. They will also boost your SEO!

2. Correct use of headings.

There are 6 levels of the heading element in HTML, from <h1> down to <h6>. If you use a content management system, these will be labelled heading 1, heading 2 and so on. By providing consistent and logical headings throughout your web pages, screen reader users are able to navigate the structure of the page.

Do:

All pages should have a <h1> level heading giving the title of the page.

Your headings should then step down in logical order.

Don’t:

Never skip levels e.g Heading 1 to Heading 3.

Never choose heading levels to achieve a certain font size.

Never use more than one <h1> on a page.

Good use of headings is also beneficial to people without visual impairment, allowing all users to quickly scan and make sense of the content on a page. It will also give your SEO a boost!

3. Colour contrast ratio

Having good colour contrast between your text and background is really important - and not just for people with low vision. Creating good readability is good for everyone. Thankfully there are loads of great tools you can use to check that you are meeting web accessibility standards when it comes to colour contrast ratio. I use SiteImprove.

4. Alt text

"Alt text” describes the content of an image and should be provided for all images. It's really easy to include and makes a huge difference to screen reader users, allowing them to gain meaning and context of what's on the page. Without it, these users are excluded from important information on the image, especially if it is a chart or instructional information.

5. Descriptive link text

Be descriptive with your link text to indicate where a link is going to go. For example, using “click here” for a link to your contact page isn't descriptive.

If someone is using a screen reader to scan your page for links, “click here” provides no context. It would be better to use "contact me" as your link text instead. Being descriptive with your link text also makes for a more compelling call to action.

There is so much to learn when it comes to accessibility and these tips only scratch the surface. But taking that first step and consistently implementing these tips is a good place to start.

If you want to learn more, there are some great courses available - and many of them are free! Before designing this website for Cause, I completed the EDX Introduction to Web Accessibility course because it was important to Sam and Jenna that the site would be as accessible as possible. I highly recommend anyone responsible for creating or maintaining websites to take this course too.

Remember, accessibility benefits everyone. So if inclusivity is important to your business, the accessibility of your website should be important too.