Accessibility at its core is about inclusion. Why deliberately exclude an audience that could find value from your business? It’s important to remember that some people can be at a disadvantage when they navigate your site. They may have issues with their sight or hand movements, for example. They want to use your website just like anyone else, so it’s important you facilitate their needs. Here are five steps you can take to ease their access.
BONUS: At the end of this post you’ll find a list of helpful tools you can use to improve your own site’s accessibility.
1. Make your fonts readable
Having grey text on a white background can already be hard to see, but for users with colour blindness it can be near impossible. While it may look appealing, it could be losing you users. The same principle also stands with with images; text on top of images needs to stand out. You can keep your images bright, just make sure the text is readable!
TIP: An easy way to remedy this is by using text shadow as this allows you to keep the same font colour. You can use Wave to check for contrast errors and other font issues.
2. Give your images Alt Tags
As a baseline, all images should have a descriptive Alt tag. Of course for simple logos an Alt tag of “Company Logo” will do, but for more complicated images a more detailed Alt tag would need to be provided. In regards to the images themselves, specifically informative images, there needs to be multiple ways to convey information. Different colours, labels or graphics that have meaning are all ways to achieve this.
TIP: The guidelines for Alt tags are simple; read this helpful guide to get them perfect every time.
3. Use obvious Hover States
“A link's hover state is activated whenever your mouse is located over the link, hovering it. This is also known as the rollover state.” - Baymard
It’s a good idea to have obvious hover states to help users with keyboard navigation. It’s a lot easier for a user to see which button they’re on when the hover states have an obvious difference. Make sure that the user can see what a button looks like without the hover so they can easily make the distinction.
TIP: The hover state should also use more than just colour to distinguish them from the rest. You can also alter the size or its border to separate it from the rest.
4. Get your HTML Markup in tiptop condition
Proper semantics in HTML allow users and screen readers to fully understand the structure of your webpages. If you use a ‘div tag’, for example, it doesn’t mean anything to anyone, we just know that it’s a container. Whereas the ‘nav tag’ lets users know that this is the container that holds the navigation links.
When a screen reader encounters an element, it will also read out the tag. If you create a button using the div tag, and then style it like a button - a screen reader will not understand that it’s a button. On the other hand, if you use the button tag, a screen reader will easily understand that the tag it’s currently on is a button. Also, as an added bonus, it makes your HTML easier to understand.
TIP: ‘Tab Index’ is a good thing to note too. You can use this attribute to manipulate the tab order. However, this can be really tedious if you use it to order elements. The reasons for this is because tab order is decided based on source code and your source code should be . ‘-1’ will pull something out of the tab order, ‘0’ will force it to the end of queue and positive values indicate the order of navigation.
5. Use ‘For’ Attribute & Aria
There are a couple of tricks you can use to make your forms more accessible. Firstly, you can give a label tag the ‘For’ attribute. This value allows you to tie the label to an input tag. This means that when you click on the label, it focuses on the input so that users who may have fine motor impairments don’t have to click a small checkbox.
TIP: You can also use Aria to give certain form elements more information for screen readers to give to users. ‘Aria-label’ can be used to label a form element, which will only be used by screen readers. This should only be used on text/elements that are not screen. Inversely, you can use ‘aria-labelledby’.
Helpful tools to improve your site accessibility
The base accessibility audit will give you information and a score for your site.
There are a number of colour blind simulators out there to choose from, however I used the NoCoffee extension for chrome.
This tool will open up a sidebar on the page of your choice and add useful icons and tooltips pointing out potential issues with your site.
To test screen reader functionality, I used the VoiceOver feature that comes out of the box with Macs.
WCAG 2.0 Guidelines
There is a set of guidelines available to help you figure out how accessible your site is. These guidelines work in three grades: A, AA and AAA.
- A guideline must be the standard your website should achieve to be accessible.
- AA are should haves.
- AAA are nice to haves.
There are four topics that the guidelines are split up into: Predictable, Operable, Understandable and Robust; each having their own guidelines for each grade of accessibility. The majority of A grade guidelines are very straightforward.
There is a WCAG 2.0 checklist that allows you to filter through the guidelines to find the one that is relevant to you.
Accessibility helps everyone!
Using these tools and following these principles should improve your accessibility rating and set you on the path to making your website more accessible, which in turn will allow more users to interact. But the journey isn't over! There are plenty of guidelines to meet with WCAG, and until you can meet the single A grade - your work isn’t complete. I wish you luck in your quest for true accessibility.
If you’d like to receive updates for more content from us then subscribe to the Access Newsletter, check out the link at the top of the page.
