10 Ways to Make Your Website Accessible
Now we’re going to look at a few ways you can make your website more accessible right away.
- Make Sure Your Site Is Keyboard-Friendly
This step is also the most important. Put simply: for a website to be accessible, it must work without the use of a mouse. This is because many assistive technologies rely on keyboard-only navigation. As such, it must be possible to use all of your site’s major features via a keyboard and nothing else. This includes accessing all pages, links, content, and so on.
The most common way of navigating using a keyboard is with the Tab key. This will jump between areas on a page that can have “keyboard focus,” which includes links, buttons, and forms. Therefore, your goal should be to ensure that all web content and navigation can be accessed using Tab.
This is easy to test — simply use your own site without a mouse. If you find that you can’t access certain elements or that navigating is difficult, you can pinpoint those issues and address them. To help you out with this, WebAIM provides a handy guide for keyboard accessibility design.
What Is Website Accessibility?
We regularly report on diversity, accessibility, and representation in the tech industry. Subscribe to our newsletter so you never miss an article.
- Make Sure All Content Is Easily Accessible
In addition to making your site keyboard-friendly, you also need to ensure that all content on the page is actually accessible. While this is usually not a problem, it can be an issue when a page contains dynamic content.
In short, content is dynamic if it can change without the page it’s on reloading. This can become a problem if the site doesn’t inform assistive tools of the change. For example, many screen readers will only “read” the site as it appears when it first loads. As such, you need to make it aware when something shifts, or the user will miss the new content.
One way you can do this is by using ARIA landmarks. These are tags you add to content in order to clearly define it on the page. You can tag dynamic content as a “live region,” which enables screen readers and similar devices to understand the content as it changes.
ARIA is also useful for making navigation more straightforward as it lets users skip directly to specific content. This way, they won’t have to tab through every menu item just to get to your main content and can easily pass over other link-heavy sections. The same effect can be achieved using skip-to-main links, which are invisible links that let users skip menus. However, ARIA tends to be more flexible and efficient.
The Make WordPress Accessible handbook contains a section on ARIA landmarks that you may want to check out. It’s also worth noting that all WordPress themes with the accessibility-ready tag will have ARIA landmarks added by default.
- Add Alt Text to All Images
When adding images to WordPress, you’ve probably noticed this field.
alt text field example
Here, you can enter the alternative text for an image. This text acts as a replacement for the image if it fails to load.
example photo with alt text “photo of a green plant”
However, alt text (sometimes called alt attributes, alt descriptions, or alt tags) is also accessed by screen readers to “read” the picture. You can, therefore, use this field to describe an image, giving context to users who would otherwise miss it.
As if that weren’t enough, alt text can also help you improve your site’s SEO, giving search engines more information to crawl. Just make sure to write descriptive summaries of each image, and try to include your keywords whenever it makes sense.
- Choose Your Colors Carefully
We often talk about color blindness as if it’s a, no pun intended, black-and-white issue. However, it’s more of a spectrum since different people perceive colors in unique ways (remember The Dress)? As such, you need to make sure the colors you select on your site contrast well to ensure that everyone can distinguish between various elements on the page.
The most pressing issue is making sure text stands out against the background. Ideally, you should set a dark color against a light one, making sure that they don’t bleed into each other.
Let’s say you want to use a blue color scheme. You’d want to avoid creating a palette where the shades are too similar in hue and saturation, like this:
example of blue color scheme similar in hue and saturation
This is very difficult to read. Instead, a clearer color contrast works much better.
blue color scheme with clearer contrast
You’ll also want to avoid clashing colors that could cause eye strain. Check out this headache-inducing album cover if you don’t believe us.
There are plenty of online tools you can use to find and test color combinations. WebAIM has one, and we also like Contrast Checker because it gives you a score in real-time. The latter tool also enables you to switch to monochrome to get a rough idea of how effective any given combination is.
- Use Headers to Structure Your Content Correctly
Another key task to make your site accessible is structuring your content by using headers carefully. Doing this will make your content much easier to understand and digest and improves flow.
Additionally, clear headers also help screen readers interpret your pages. This makes it much easier to provide in-page navigation. It’s also simple to do as you only need to ensure you use the correct heading levels in your content.
For instance, you should only use one H1 per page – usually as the page title. This can be followed by subheadings starting with H2, which can then be nested further with H3, followed by H4. These should always be used in order so you should avoid using an H4 directly after an H2 (and so on).
- Design Your Forms for Accessibility
Forms are a useful addition to most sites but must be designed carefully. What’s most important is to ensure that each field is clearly labeled. You should also aim to place the labels adjacent to the respective fields. While a sighted user can easily match a label to the corresponding field or option, this may not be obvious for someone using a screen reader.
You should also aim to provide instructions and information in a clear way that the user can easily understand. To create accessible forms in WordPress, you can use a tool like the Caldera Forms builder. This is a plugin specifically focused on accessibility, which will make your job much easier.
- Don’t Use Tables for Anything Except Tabular Data
When it comes to displaying data, tables are handy. They make it much easier for all users, including those using assistive technology, to parse a large amount of data. To get the maximum benefit, however, you’ll want to keep your tables as simple as you can.
In addition, it’s best to avoid using tables for anything but tabular data. For example, you should never use a table for layouts, lists, or anything else. This can be confusing to screen readers and similar devices.
If you do need to create more complex tables, you can follow this guide from W3. It shows you how to code a table while maintaining accessibility standards.
- Enable Resizable Text That Doesn’t Break Your Site
Most devices and browsers will enable users to resize text, which can be helpful for those with visual impairments. However, if you don’t build your site to support this feature, resizing text could break your design or make it difficult to interact with your site.
A good practice is to avoid absolute units, such as specifying text size using pixels. Instead, use relative sizes, which enable the text to scale depending on other content and screen size.
You should also never turn off user scalability as this will make it difficult for users to resize the text at all.
To make sure your site meets these criteria, test your font sizes thoroughly by increasing the zoom level in your own browser. If you notice that content becomes difficult to read or navigate, you can check out this guide by WebAIM that discusses font size.
- Avoid Automatic Media and Navigation
Automatically-playing media files have been a bane of internet users since the days of MySpace. As annoying as it can be to have music or videos start when a page loads, this is an even bigger issue in terms of accessibility.
For example, figuring out how to turn off the media can be difficult when using a screen reader, while other users could simply be confused or even frightened by the sudden noise. You should, therefore, avoid including elements that start without the user first prompting them.
It’s also best to avoid automatic navigation, such as carousels and sliders. This can be incredibly frustrating if the viewer needs more time to absorb all the information before moving on to the next slide or section.
Related: Leveling the Web: 12 Questions with Accessibility Expert Gian Wild
- Create Content With Accessibility in Mind
Finally, we come to the core of your site: its content. While designing your site for accessibility is hugely important, you should bear the same considerations in mind when creating content.
This means paying attention to relatively minor things, such as always fully writing out acronyms, to more important points, like making sure you give all your links unique, descriptive names and anchor text.
If you’ve read through this entire tutorial, you’ll already have a clear idea of the potential issues that can cause certain users trouble. Keep in mind that — just as your site should usable by anybody — your content should be approachable and readable no matter who discovers it.
Web Content Accessibility Matters
Making sure your site is welcoming to as many people as possible should be a top priority. There’s no reason to exclude anybody, especially since it’s relatively easy to avoid doing so. Not only will your users thank you, but you’ll also likely see benefits in the form of increased traffic and conversions.
By taking the time to understand the possible flaws in your design and content, you can make sure your site is optimized for accessibility today.