Accessibility Tips for Modern Websites (updated 2022)
1st Jun 2020
Written by Gaz Jones
Bold fonts. Colour schemes. Animations. These visual tools are very good at drawing attention. 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.
We will be sharing some of the accessibility tips for websites in this blog!
What is website accessibility?
Accessibility means that people can access your website’s full functionality with ease (including the cases where accessibility software is in use).
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 is 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. 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 is 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. 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.
Why should you make your website accessible?
Building a website without accessibility in mind is an easy way to lose a significant portion of your target audience. Prioritising accessibility doesn’t mean you have to ditch that perfect colour combination or increase your font sizes, it does, however, mean there is more to consider than you may have originally thought.
You don’t want your design decisions to act as a barrier to accessing your website.
How to improve your website accessibility?
So, how do you actually improve your website? Here are some of our accessibility tips for websites!
Choose the right content management system
Choosing a content management system that supports accessibility is key. There are many CMS options available to help you to build your website. Examples include Drupal and WordPress. Make sure that themes, page layouts, plugins, videos, and all other elements of the CMS you have chosen, support creating accessible content. All the administration options, such as creating blog posts or comments need to be accessible as well.
Structure & Organise headings
Using headings correctly is a great resource to correctly structure and organise content on a website. Used strategically (<h1>, <h2>, etc) will help those that use screen readers, as they rely on using heading structure to navigate the content on your web pages, additionally, this can also help to increase the SEO score of your website, making it easier for you to generate more organic traffic.
Use alt text correctly for images
Alt text’s purpose is to help visually impaired users ‘see’ the images. Most often, these users use assistive technologies, that either read out the text or turn it into braille. Make sure to be as accurate and descriptive as possible while writing alt-text. By doing that – you’re allowing disabled users to experience the visuals.
Accessible links
Describe where your links are going once you put them in your content. Most screen readers have an option to only read out the links, but they don’t read out the links behind them. Try to avoid linking phrases like ‘click here’ or ‘read more’ as they’re not descriptive of the content on the other side of the link.
Let’s say you’re looking to link your services page to your content.
- So, instead of: ‘read more to explore our services page’
- You should say: ‘explore our services page’
Chose colours with readability in mind
Colour blindness affects a lot of people. Making it harder for them to read content where the colours are mismatched or more importantly – low-contrast. If your background colour is dark red and your font is black, it will be extremely difficult to read, not only for people affected by colour blindness but for almost anyone.
In other words, don’t pick colours that are too close in saturation. Instead, try to maintain a clear contrast between the background and text colours. You can utilise some free online tools to assess contrast on your website, like WebAIM.
Design forms for accessibility
Filled in forms lead to conversions a lot of the time. So, you can imagine how important it is to make them easy to complete. By making them accessible you’re not only tailoring it for disabled individuals, but you’re also improving UX & UI for everyone.
CLEARLY label each field. Make sure to structure the forms where a label is always followed by the required field to fill. Each form should be made in a way for individuals to ‘tab’ through it without issues.
Keyboard friendly site navigation
Making your website navigation keyboard-friendly is especially important for mobility disabilities, in cases where people can’t use a mouse or trackpad. In these cases, users depend on ‘arrow’, ‘tab’ keys, or alternative devices to navigate online. This means that website’s visual layout – should be easy to navigate through keyboard-only.
Some of the good practices can include, adding anchor links for long-form content. It allows users to skip to the relevant parts without needing to scroll far. Navigational menus should be created in a way, where they’re accessible without the need for a mouse/trackpad. Additionally, don’t add elements that only work once you hover over them, as accessibility software users may use – won’t be able to activate them.
ARIA listening
ARIA (Accessible Rich Internet Applications) helps you to make dynamic content more accessible. 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.
ARIA is a set of attributes that 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 that 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 all around.
Conclusion
There is a variety of things that you can do to improve your website accessibility. Unfortunately, they’re easy to miss if you’re not affected by them personally.
We hope that our accessibility tips for websites helped and hopefully will make you take action in some of the key areas:
- Choosing the right content management system
- Structuring & organising headings
- Using alt text correctly
- Making links accessible
- Choosing the right colours for readability
- Designing forms correctly
- Creating websites with keyboard friendly site navigation
- Implementing ARIA listening into your website
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!
