When creating your website, a lot of thought and planning is required to ensure that all users have the same experience of the website. This means you need to understand that there are parts of the population that experience the world differently than you do. To create an accessible website that can be used by many, you need to follow some simple guidelines. To help you along the way, we’ve compiled a list of 7 helpful tips that can serve as a foundation for an accessible future.
1. Arrange your menus, headings and heading elements logically
To make it easier for a screen reader to read your content, you need to arrange all menus, submenus, headings and other heading elements correctly. This is because most screen readers indicate to the listener in different ways which heading level or menu they’re in.
To illustrate this, think of an article with headings. If these headings are all in bold and don’t use the correct HTML heading markup ( – ), the software cannot tell that they’re headings. Instead, they’re simply perceived as part of the whole text.
For people using screen reading software, this can also mean that they’ve a hard time navigating quickly through longer posts and content. Therefore, heading elements and correct highlighting are fundamental to the user’s ability to navigate through the available content on the page.
2. Use colours for better accessibility
There are many different levels of colour deficiencies that cause many people in the world to not understand certain visual elements. If you use contrasting colours to indicate elements on your page, you may want to include secondary visual indicators in the form of icons to convey your message to these groups of people.
You should also use contrasting colours to organise your content for people with other disabilities, such as learning disabilities. Even though people with colour deficiencies aren’t able to understand colours, there are parts of the population that rely on colours to effectively understand and organise information in their minds.
Therefore, the use of colours and corresponding symbols can help make your site accessible to many different people.
3. Choose a content management system that allows for better accessibility.
When you create your website, you’ll probably use a content management system. With these different systems you can easily optimise your website and make it accessible.
Starting with the themes and templates you choose. Select those that allow for easier thematic browsing or that best present your content in a logical layout. Once you’ve determined your theme, you should focus on adding plugins, widgets, modules and elements that enable accessibility. These include subtitles for videos, easy navigation using an online keyboard and voiceover options during navigation.
Your content management system is the key to adding more options that promote accessibility on your website.
4. Always assign alt attributes to images
Alt attributes are text that can be read by a screen reader instead of an image. They’re very important for visually impaired people so that they don’t miss the content you provide.
Setting alt attributes is relatively easy. Even images that have no particular meaning on your website should be given an alt attribute so that screen readers can read these sections and possibly skip them depending on the code used.
The way you write alt attributes for images can vary depending on the CMS you use, but in most cases only simple HTML code is required.
5. Make all content accessible via the keyboard
The mouse is usually more difficult to use than the keyboard for people with mobility impairments. If you design your website to be easy to navigate by using only the keyboard, you automatically allow more access to your content.
When creating your website, think about the logical order in which your content should be laid out. Keyboard users should be able to navigate through the entire page by simply using the ‘tab’ and ‘arrow’ keys. For longer pages, headings and anchors allow users to quickly skim and read the content that interests them.
Your page menus are one of the most important aspects of your site. Elements that only work when you hover your mouse over them should be avoided at all costs. Instead, all elements should only open with the keyboard.
6. Use ARIA
Accessible Rich Internet Applications, or ARIA, is a technical specification that can be used to improve accessibility. While most of the things described above can be implemented simply by using HTML code, there are certainly more complex accessibility elements that require ARIA. ARIA should only be used when HTML or HTML5 cannot meet the desired accessibility requirements.
The ARIA attributes are particularly good for adding interactive widgets or elements and warnings for screen readers or keyboard users. Similar to how the mouse pointer over certain elements is only accessible to mouse users, these ARIA elements are only accessible to the users they’re intended for.
7. Always test your website
The only way to find out if all your steps towards accessibility have worked is to test your website using accessibility apps and see if it works.
Start with speech, move on to screen readers and then try navigating with just the keyboard. Testing your website will give you an idea of what areas need improvement and what content is missing. Once your website is online, you can also gather feedback from users who’re using accessibility to further improve your website.
Creating an accessible website only takes a few extra steps, yet it can make a big difference to how others experience your website. When creating your website, always try to think logically and imagine how your elements, features and widgets will be used by different users. Testing what you’ve created and optimised will also help you understand what further steps you can take to improve the accessibility of your website.