Improving accessibility | Web development knowledge base

1. Why websites need to be inclusive... 3 powerful reasons...

There are approximately 14 million disabled people in the UK. Even if you aren’t targeting them you should ensure that they are not excluded from your website. A disabled person could be influencing your target audience. Or interested in your business which could lead to an enquiry. So if your website is not inclusive, then it might have consequences for your business.
It might also be breaking the law.
Accessibility strategies can also help your search engine performance. A little known fact!

2. What's the law in the UK?

The UK Equality Act 2010 says you need to have made ‘reasonable adjustments’ to ensure your site is accessible. Your web developer should have done this for you. But sadly, a lot of sites I see developed these days are not inclusive. In fact, some really didn’t try at all.

If your organisation is a public service then you need to ensure that your website is WCAG AA compliant. This is law. And you might be breaking the law if it isn’t.

What does reasonable adjustments mean? Well, the UK Government uses WCAG 2.1 as its standard. WCAG stands for Web Content Accessibility Guidelines. And it has different levels of compliance. Level A, the lowest, and level AAA, the highest. It’s wise to head for the middle ground, level AA, as a starting point. Since this is the level that the government has chosen for public service websites. Who knows at some point in the future, the Government might make it law for every business to be AA compliant.

3. My top ten accessibility implementations

Below are 10 useful ways to make your website more accessible. They will help show that you have made reasonable adjustments for compliance.

For each implementation I have added a link for further information from WCAG.

3.1 Alternative textual content - not only images

This comes from the rule that all non-text web assets need to have a text alternative. This is so screen-readers can read out the content. Most people use the alt tag for images. An easy win. But did you know that you should include text alternative for your videos and podcasts? For videos you could embed sub-titles in the video itself. But podcasts will definitely need a transcription.

If you have embedded a presentation type tool, then remember to sort a transcription for it too. For example, these days you can embed Google Slides into web pages.

If you have a background image, then this will not necessarily have an alt tag. Any background image that is conveying an important message should be re-evaluated.

In a nutshell, any content you add to the page that is non-text needs to have a text counterpart. So that a screen-reader can use it to describe the content.

3.2 Skip to content

Websites often have a lot of preamble… for example, marketing messages, testimonials, sliders and other stuff. It’s good practice to have a skip to main content link. This should appear when your visitor uses their tab button on their keyboard. When they hit return the screen should jump to the main content on the page. This way the user does not have to try and sort through the pre-amble.

**Navigating by keyboard:**Your website needs to be navigable by keyboard. What does this mean? Let go of your mouse and start using the tab key to navigate around your site. Press the return key, or space bar, when you want to visit that link. Can you do it? How hard is it? TIP: to go backwards use the shift key at the same time as the tab key.

3.3 Font contrast and font size

Font contrast: Some web designers love using pale colours for fonts. Light greys are often used in designs. But to be accessible there needs to be enough contrast between the font’s colour and the background colour.

The WCAG state that text colour needs a contrast ratio of 4.5:1. There are some exceptions, large fonts have lower ratios - 3:1.

Chrome makes this easy for you to check. Every Chrome browser has a developer tools screen. This has a feature to check contrast of fonts. Use it as follows:

Open up Chrome and visit the website you’d like to check
Go to Developer Tools by selecting the option View > Developer > Developer Tools. You’ll find this in the main Chrome menu at the top of the screen.
Once Dev tools is open, then select the Element Inspector. It’s the first icon, in the first row of Dev Tools. It has a square with a mouse arrow in it.
Hover the element selector over the text you’d like to check
A box will appear and it will give you the contrast ratio. It will also provide you with a tick or cross so that you don’t have to remember the above ratio of 4.5:1

TIP: If text is on top of an image then contrast is not guaranteed. The text will not always appear over the same part of the image on different devices. You could be using a black font which, on mobile, part of it overlaps with a part of the image which is dark. Bang! Out goes your accessibility. We always suggest a faded background behind text when it appears over an image.

Font size: Another popular design feature is to use contrast with font size. Designers often like to have very large fonts next to very small fonts. That’s great as long as the small font is big enough!

There is no specific size definition. But as a rule of thumb, you should aim for a smallest font size of 12pts / 16pxs. And a user should be able to enlarge the font by 200% without it destroying the design of the site.

3.4 Helpful anchor links

Imagine a screen reader and a user tabbing through all the links on your web page. What’s going to be more useful a weblink that says ‘Read more’ or a link that says ‘Read more about our web development service’? Users need to know where the link is going to take them.

In short, make sure your anchor links clarify the page that they are pointing to.

3.5 Aria labels and semantic elements

Aria Labels

Aria stands for Accessible Rich Internet Applications. Your web developer can use Aria html attributes to help explain different areas of your web page. For example, if you have a marketing banner, then you could add the following to your code: aria-label=”marketing banner”. Any screen reader now scanning that banner can read out the ARIA label.

*TIP: Check your web page for ARIA labels. Open up Chrome and navigate to the page you’d like to check. Using Chrome’s main menu navigate to View > Developer > View Source. You will now see all the html code of your website. Use Chrome’s find feature to search for ARIA as follows. From Chrome’s main menu > Edit > Find > Find… in the search box enter: aria-label=" or aria-labelledby=" *

Some developers add spaces between their code, so you might need to also search on aria-label = "

Some page builders don’t tend to add ARIA labels to the html they create.

Aria is a useful tool and I recommend using it. Read more about Aria.

Semantic Elements

The latest release of html. Known as html5 comes with new elements that help clarify the different areas of your web page. There’s a whole host of them to help describe what is going on in the code of your website.

For example, you main content of the page should be wrapped in a <main> element. A navigation menu should be wrapped in a <nav> element. Your sidebar should be wrapped in an <aside> element.

Your web developer should have taken care of this for you. But often everything on a web page is wrapper in a <div> element. This isn’t helpful.

TIP: In the same way you searched for ARIA labels above, search for semantic elements. E.g. search for <main or <aside

3.6 On focus styling

If you have been following this article from the beginning. Then you might have tried tabbing through a web page. When you were tabbing your way through the web page, was it clear which link you were resting on?

When an html anchor link is tabbed to… it receives what is known as ‘focus’. Your web developer can style a link that has focus. For example, by changing it’s colour or making it bigger. Or by adding an outline to it. On our website when you tab to a link it has a dotted outline around it. Have a go and try for yourself.

It’s a super helpful way to show which link the user is on so that they can navigate to it or not.

3.7 Using heading tags appropriately

All the headlines on your web page should be in html heading elements. And I recommend styling them differently so they are identified with ease.

Heading elements have a hierarchical structure. Your main heading should be in an H1 element. The next important heading(s) should be in an H2 etc.

There are up to six levels that you can use. H1 to H6…

You should also nest your headings appropriately. For example, on this page the main headline is in an H1. There is another sub-headline in an H2. Then further nested (child) headings are in H3s. If an H3 headed section of text has some child headlines then they should be in H4s. And so on.

You should follow the hierarchical structure in order. I.e. don’t jump from a H2 to an H4 without an H3 in there. Otherwise it can be confusing for the user.

3.8 Breadcrumbs

You need to make it clear where the current web page is in the context of the whole site. For example, this article belongs to the web developer knowledge base section of this website. It’s nested in this folder. The user’s screen reader should be able to relay its location.

Breadcrumbs can help the user understand where they are in the whole website. What are breadcrumbs? They are a series of links prominent on the page. They usually look like this:

Home > Web developer > Knowledge base > this article's name

Check out the one on this page. They’re a great way to help the user navigate their way around your website.

Does your website have breadcrumbs? We highly recommend adding them. Read more about breadcrumb trails.

3.9 Page content menus

With a long article it’s useful to have a page content menu, i.e. a table of contents. So that a user can jump to any part of the article quickly. Their screen reader can read the page menu as the user tabs their way through it. If they hit the return key (or space bar) then the website scrolls or jumps to that section.

Read about tables of content.

3.10 Click rather than hover on navigation

If a user finds using a mouse challenging but doesn’t use a keyboard to navigate, then you can help them by changing your nav to click only. What do I mean by this? Often there are drop-down menus that appear in your main navigation. And often they appear by hovering over the main parent link. It can be difficult for the user to engage the hover and then navigate to the child.

Your web developer can change this hover behaviour to a click behaviour. I.e. the drop down menu only appears if you click the parent. We use this behaviour on this website.

4. The spin off, helping search engine rankings

The above techniques are making your website easier to understand for assistive technology. The same techniques also help the search bots of the search engines to better understand your website.

From breadcrumbs, to heading elements, to using useful anchor text. These approaches are helping Google to better navigate your site, index it and direct visitors to the best landing page.

Wearing my SEO hat, out of the top ten above, the following approaches are recommended to use:

Alternative textual content for videos, podcasts etc.
Font contrast and font size
Helpful anchor links
Semantic tags
Using heading tags appropriately
Breadcrumbs
Page content menus

Google is extremely hot on accessibility. Check out their documentation.

I hope this article has given you some simple ways to make your website more accessible. If you’d like to discuss any element of this article with us, then please do not hesitate to contact us.

We’re based in the UK but work on projects wherever you may be.

About Web Accessibility