Accessibility Tips for Modern Websites

1st Jun 2020

Bold fonts. Colour schemes. Animations. These visual tools are very good at drawing in your audience. You want your website to attract the largest target audience possible, so you load it with all of the cool new trends and leave your audience gasping with technical wonder. But how accessible is your new website?

Ensuring your website is accessible means that people with disabilities can access it without any struggle. Building a website without accessibility in mind is the easiest way to lose a portion of your target audience. Prioritising accessibility doesn’t mean you have to ditch that perfect colour combination, or increase your font sizes by half a rem globally, though. It does, however, mean there is more to take into account than you may have originally thought. You don’t want your design decisions to act as a barrier to access!

Here at think3, we build modern, robust websites that prioritise user accessibility using a variety of techniques. We will be sharing some of those secrets with you today in this article.

Legibility is key

The written content on your new website could match that of the most renowned wordsmiths, but that is somewhat thrown out of the window if your text isn’t readable for your audience. There’s a variety of ways that you can improve the readability of your text. For example, the BDA (British Dyslexia Association) describe how using a font without serifs can improve the legibility of your writing for people with dyslexia, as the lack of weight to the letters makes words appear less crowded. Adding more spacing between letters can also aid readability for dyslexic people.

The colour contrast between the background and text could also be a driving factor in making your website accessible. In general, it is a good idea to ensure enough of a contrast between foreground and background colours, but an interesting study by the Web Accessibility Initiative (an initiative of the W3C) shows that people with dyslexia have an easier time reading text on a yellow background.

Of course, the issue with these adaptations are the limitations they bring with them. Yellow backgrounds, or larger font sizes, can be hard to incorporate into a design. You still want your website to look great, too! For the most part, having a high enough contrast in colour between the text and background should be sufficient, and avoiding fonts that are too small may also boost your website’s accessibility. If you want to go that extra mile for your audience, however, adding functionality that supports the dyslexic, primarily on text-heavy websites, will push your website’s accessibility that much further!

ARIA listening?

Most people who are visually impaired have assistive technologies installed which help them browse the internet without a struggle. That doesn’t mean there isn’t anything we need to do, however! We need to communicate with this technology so that our website can be understood by it. This is done using ARIA, which stands for Accessible Rich Internet Applications. We ensure that all of our websites are screen reader friendly using ARIA attributes.

ARIA is a set of attributes which are used by assistive technologies to understand what certain parts of your website represent. For example, the role attribute defines what it is the element does, which is especially useful if you have elements which aren’t using semantic markup (e.g. using an anchor tag instead of a button tag for a button).

Pretty cool, right? Well, it doesn’t end there. ARIA can also be used to tell screen readers to ignore parts of your markup. For example, if certain text is hidden using CSS, it’s still readable in the markup. The attribute aria-hidden tells the screen reader that this part of the page isn’t visible. This is especially useful for content hidden using JavaScript!

It’s as simple as that – adding ARIA attributes to your HTML makes your website friendlier for screen readers and assistive technologies, therefore making your website more accessible.

To conclude

There are many things you can do to make your website more accessible, but it’s easy to forget! Here at think3, we ensure that our websites are suitably accessible as we understand the importance of capturing the largest target audience possible for your business. Leave the hard work in our hands and we’ll make sure to leave a beautiful, accessible and capturing website in yours!