As a business and website owner, you naturally want your website to attract as many people as possible so your business can flourish. However, not everyone takes the appropriate steps to ensure their website is accessible by everyone.
There are millions of users and potential clients among them who have special needs that you should take into account when designing your website. You need to understand their needs and the potential issues your website might be presenting them so you can address them and ensure they can successfully navigate your website and have a good experience doing so.
Fortunately, implementing accessibility measures is not that difficult. We’re going to take a look at some of the things you can do to make your website easy to use for everyone, so you don’t inconvenience visitors and lose out on potential clients.
A quick look at web accessibility
The main tenet behind the whole idea of web accessibility is that everyone should be able to use a website, regardless of any conditions they may have which affect their capabilities, or even the hardware or software they are using.
There are millions of web users with disabilities or certain impairments which may make it difficult or even impossible for them to use certain websites, but by keeping these challenges in mind when designing your website, you can create something that’s usable by pretty much anyone.
Some of the most common impairments include:
- visual impairments – partial or total inability to see or perceive color contrasts
- hearing impairments – reduced hearing ability
- physical disabilities – difficulty moving certain body parts or making precise movements
- photosensitive seizures – epilepsy, for example, can cause seizures when exposed to flashing lights
- cognitive disabilities – dementia, dyslexia, and so on
While making your website accessible is important simply from a humanistic standpoint, as mentioned earlier, it can also help you and your business simply by increasing your audience size. Not only that, but some of the measures you need to take can also benefit other visitors simply by improving your website’s overall design and usability. For more incentive, you’ll also be future proofing your site as you make it more accessible to everyone.
How to make your website more accessible
Now that we’ve learned what accessibility means and what some of the benefits are – both for you and your visitors – let’s get down to business and see what you can do to make your website accessible.
1. Make navigation possible with only a keyboard
This is probably one of the most important things you can do. Simply put, you want users to be able to navigate and interact with your entire website with only the use of their keyboards, since many assistive technologies only work with keyboards and many people have difficulty using a mouse.
The most common way of navigating websites using a keyboard is with the Tab key. To test this, simply open your website and start pressing Tab to see if you can highlight every link, button, or form on your site (use Enter to select and arrows or Spacebar to scroll).
Ensure your users can access any interactive element on your website, such as:
- drop-down menus
- anchor text
- dialog boxes
For help with making your website keyboard-friendly, you can consult this WebAIM guide.
2. Content has to be easily accessible
Now that your website can be used with a keyboard only, you have to ensure that all your content is actually accessible. This is mostly an issue with pages that have dynamic content on them, which can change without reloading a page.
This can be problematic if the assistive tool being used isn’t informed of the change. A common scenario is a screen reader only reading the page as it is the first time it loads, without any subsequent updates about content changes.
One way to solve this potential problem is by using ARIA landmarks. These are tag that you add to your content which communicate with assistive tools informing them about the type of content on your page and how it changes during a visit.
ARIA is useful in a number of other ways, including allowing visitors to skip directly to specific content instead of Tab-ing through dozens of links until they reach their desired location on the page.
3. Add alt text to images
Alternative text is essentially an image’s description that can be read by screen readers so that visually impaired visitors know that there is an image there and what that image contains.
Even better, alt text also helps by replacing the image if for some reason it isn’t loading correctly, informing all visitors that there’s normally an image there and what it contains. Alt text also helps search engines better understand the content on your site and can thus improve your SEO.
4. Be careful when choosing colors
Color blindness doesn’t describe one specific impairment, as different people can perceive colors differently. Essentially, this boils down to contrast, and choosing colors which contrast well with each other so that your content is easily visible to everyone.
The main thing you’ll want to check first is the contrast between your text and the background it’s sitting on. WebAIM thankfully provides a contrast checker that can help with choosing the right colors for your content and its background.
5. Use headings to organize your content’s structure
Screen readers can use heading structures to navigate pages, so by using headings correctly, your content will be well-organized and easily interpreted by a screen reader.
Fortunately, this is fairly easy to accomplish. You should typically only use one H1 per page, followed by H2 subheadings, and so on with H3 and H4. Remember that these should be used in order, though, so don’t jump to an H3 after an H1, for example.
Breaking up long pages into logical subsections by using heading will make it easier for users to jump to specific locations. For example, if you wanted to leave a comment after only reading the first paragraph of an article, you could immediately scroll down to the bottom and do it.
On content-heavy sites, however, the comment form can actually be somewhere in the middle of the HTML structure, even if visually it’s at the bottom of the page. This means that someone using a screen reader would need to get through a lot of content before they could reach it if there are no section headings to indicate where the form begins.
6. Make accessible forms
This one’s also pretty easy and it basically comes down to labeling form fields in your code so that screen readers will know which labels are associated with which fields, thus informing visitors of what they are expected to enter in each field.
Many forms use placeholder text for their fields in an attempt so save space. That placeholder text, however, is usually grey and the contrast between it and the field background is lower, making it harder to read. Screen readers also tend to skip placeholder text, which means some of your users simply won’t be able to use the form.
To avoid this, use <label> tags or ARIA attributes, as well as a high contrast between the label text and its background.
Required form fields should also be labeled accordingly.
7. Position important interactive elements toward the top of the page
Here’s a good accessibility exercise you should try yourself: locate important links and controls on your page and count how many times you need to press the Tab key to reach them.
Put yourself in your users’ shoes and see how you feel about how fast you were able to reach those elements and whether you could clearly identify when they were selected. This will give you a good idea of how someone with limited abilities will be able to use your website.
Based on your findings, attempt to place important elements like these higher up on the page. Not only will this help users with limited abilities, but it will also benefit everyone else, as people expect important items toward the top of a page.
8. Only use tables for tabular data
Using tables for your page layout can confuse screen readers because they inform users that there is a table present with a given number of rows and columns. It may also cause them to read the content in an order that doesn’t match the content’s visual order.
For layouts, it’s always best to use CSS instead of tables.
When you do need to add a data table, such as when you have some data that is best visualized and interpreted in table format, user headers for your rows and columns, as they help explain the relationship of cells. Complex tables will likely have a number of cells within them with unique relationships to each other, which should be identified using the HTML attribute “scope.”
Table captions (available in HTML5) can also help users with additional information about how to read and understand relationships within the table.
9. Assign unique links and descriptive names
When linking to other pages in your content, instead of using text like “click here,” which can be confusing when using a screen reader, provide unique and descriptive text that informs the user what to expect when they follow that link.
While sighted users can scan a page for links, so too can screen readers, the drawback being that they can’t read links within the context of the page, which is why they need descriptive text to explain the context.
10. Enable resizable text
Some users may need to resize the text on a page, so you need to ensure that you’ve designed your site with this in mind, otherwise it may break your site’s layout and make it difficult to use.
It’s typically good practice to use relative sizes for fonts instead of absolute units. For more help with font sizes, this WebAIM guide can be very useful.
11. Implement ARIA roles
ARIA is an acronym for Accessible Rich Internet Applications and helps make dynamic content more accessible.
ARIA roles offer screen readers or other assistive tools more information or context about a website’s elements.
An ARIA role can be added using the role=”<ROLE TYPE>” attribute.
These are some of the most common ARIA role categories:
- landmark – used for navigation
- document structure – offers structural descriptions of sections
- abstract – organizes and streamlines content
- widget – describes interactive elements which lack HTML semantic equivalents
- live regions – alerts assistive tools about changes to dynamic content on the page
- window – creates a subcategory of the main document
12. Make media accessible
Multimedia elements are crucial to increasing user engagement on a website. The trouble is that visually impaired users can’t see visuals, while those who are hearing impaired can’t hear audio.
To help those who have trouble seeing, you can use audio descriptions of visual elements like images, gestures, or changes in settings. Keep in mind, however, to be relevant and concise, so you don’t end up with hours of audio descriptions.
For those who have trouble hearing, you can simply use synchronized captions. When you do, however, ensure there’s good contrast between the captions and the background visuals.
13. Do not use auto-playing media
This one shouldn’t require much explaining since regular users also dislike auto-playing media on websites. It can be particularly stressful for users of assistive tools since the source of the sound might not be immediately visible or it may take a few seconds to be able to interact with it and stop it from playing.
Now that we’ve gone over all these things you can do to make your website more welcoming to everyone, it’s clear that there’s no reason to exclude any potential audiences, since it’s really not that difficult to cater to everyone’s needs.
As mentioned earlier, you’re also likely to see an increase in traffic and as such conversions, not only because more people will be able to use your site, but also because of the SEO benefits many of these measures offer.
While the most basic measures of making a website more accessible aren’t that difficult to implement, there’s still some know-how required to successfully do it and also to go a few steps further to ensure the absolute best experience for all your website visitors.
For more information about making your website more accessible, you can visit W3C’s Web Accessibility Initiative website.