The internet has made it easier than ever to spread awareness for your business. But what if I told you there are people out there who want to view your website but can’t? And what if I told you that the reason they can’t is not because they lack the desire or the ability to search the web, but rather it’s because your website isn’t designed in such a way that they can use it?
Accessibility is often talked about in terms of physical places, such as offices, shops, and restaurants. But it’s equally as vital to have your online presence be accessible as well. Similarly to how a shop might miss out on the business of a wheelchair user if they don’t have a ramp, websites might miss out on business if the patron can’t navigate the site properly. In both cases, at least here in America, these can be violations of the ADA and can get you in legal trouble. This article hopes to serve as a beginner’s guide to making your website accessible for everyone. In addition to this, be sure to check out the ADA’s website for a full list of things to make your website accessible
Is Your Website Keyboard Friendly?
In the simplest of terms, your website should be built so that it can be navigated without the use of a mouse. A lot of assistive technologies rely on keyboard-only navigation. This is often used by people with limited mobility, as well as people with visual impairments. As such, it is vital that all the important parts of your website are able to be accessed with just the keyboard.
Luckily, this is easy to test! Put your mouse to the side and try to go through the different pages of your site using your keyboard. If you can do it, great! You don’t need to worry about this step. If you find you are unable to get to every part of your site, WebAIM has a guide on keyboard accessibility.
Note Any Dynamic Content
Dynamic content is anything on your page that can change without the entire page reloading. This can cause trouble for screen reading software, as it will only “read” the page when it first loads. Because of this, you need to inform the screen reading software that there are going to be changes, as well as what those changes are.
ARIA landmarks are tags in your website’s code that you add to content to clearly define it on the page. Tagging a landmark as a “live region” will allow screen readers to know when content will be changing. WordPress has some handy articles on ARIA landmarks, as well as some accessibility-ready themes that have them built-in. These are great starting points to ensure screen readers are able to get the full scope of content on your website.
Adding Alternative Text to All Images
If you’ve added an image into wordpress, you’ve probably noticed one of the fields you can fill out is labeled “alternative text”. This field fills a few rolls for your website. First, if for some reason the image doesn’t load properly, this text will replace it. Second, and the reason it’s an accessibility must, is because this is how screen readers know what the image is. For people who are visually impaired, images won’t mean much or enhance their experience. Having the alternative text feature give a description of the image allows everyone to get the most out of your images.
Need a third reason alternative text is useful? What if I told you that using it can help you improve your SEO? If your text is descriptive enough, and you can naturally fit in keywords where they make sense, your SEO might see a boost!
The Colors of Your Website
Presentation is important, and you want your website to look good, but it’s important to be mindful of what colors you are using. When we talk about color blindness, we think of it as a “black-and-white” issue, no pun intended. The reality is that color blindness, like all disabilities, is a spectrum. As an example, remember the dress? People see colors differently. Choosing contrasting colors can help your text stick out from the background.
Are Your Forms Accessible?
If your website has fillable forms, it’s important to make sure they are clearly labeled for ease of use. Having fillable fields labeled clearly will help people who use screen readers fill out your forms correctly. Caldera forms is a great tool to help build accessible forms.
Resizable Text Shouldn’t Break Your Site
The majority of web browsers today will allow you to resize the text on any site, but that doesn’t mean that the site will still be usable. A lot of site’s layouts break after it’s zoomed in to a certain point, making navigation difficult or impossible. A good rule is to avoid using absolute units to define sizes. Instead, use relative sizes. This will allow your text to scale depending on the other content on your screen, as well as screen size. The way your site scales is easy to test by simply zooming in on your web browser and trying to navigate your site.
Put a Stop to Automatic Media and Navigation
Back in the days of MySpace, it was common to have music automatically play when someone visited your page. This was a nuisance at best, and an issue with accessibility at worst. For starters, figuring out how to turn the music off while using a screen reader can be impossible. The sound can also scare people who are not expecting the noise.
Additionally, the use of carousel images, which have an automatic slideshow of images, is equally as difficult for screen readers to process.
These are a few ways to help your website be more inclusive. This list is not comprehensive, as everyone has different needs, but these are some basics to get you started. What accessibility features do you utilize? What do you wish more websites included? Let us know in the comments!
