When designing and developing websites, most people only think about the overall design and layout of their site. This can include anything from elements like colors and shapes, to the images that will be used. But rarely do people think about website accessibility. One billion people, or 15% of the world’s population, has a disability, so making your website accessible to people of all walks of life has never been more important.

508 Compliance is a federal law in the United States that requires that all federal government websites be accessible and safe to those with disabilities. While 15% of people might not seem like a huge portion of the population to cater to (although in the U.S. the disability rate is closer to 20%), by not making your website accessible you are cutting out a potentially large part of your target audience, thereby lowering page views, lead creations, and conversions. Plus, there is nothing detrimental in adding these compliance measures to your website. Even if your business is in the private sector or is a nonprofit, including website accessibility is a must for good web design practices.

But what exactly do you need to add or change on your website to make it accessible to people with disabilities? Here are some of the common website accessibility problems and how they can be addressed on your website.

Example of 508 Compliance and Accessibility Problems

Keyboard Access

Individuals with motor disabilities may only be able to access a website through a keyboard, instead of a keyboard and mouse. This can be a problem because many websites don’t allow you to move through the navigation of the website except by clicking on links and tabs to open new pages and forms. For those using keyboards only, a website needs to be designed so that certain buttons on the keyboard guide a user through navigating the website. For example, the “tab” key can be used to allow the user to move through the navigation links or jumping through headers. Make sure that these actions are programmed on your website.

Another thing to note is that most website have a default setting where the browser displays a visual outline (usually a blue outline or dotted line) are the content element that is in focus. This allows those with motor disabilities to see which element they are “hovering” over and are about to select. However, many businesses disable this indicator on their website for aesthetic purposes, but this should not be done as it is more important that keyboard focus is visible at all times to those that need it.

Closed Captioning and Subtitles

Closed captioning and subtitles is when text is included on a video or image for those with hearing disabilities so they are included in the audio component of the file. While places like YouTube automatically include a caption option for those with these disabilities, it can sometimes be a bit faulty. To deal with this issue, we suggest that if you have a very important video or audio component to your website, that you either create the captions yourself or hire a professional company to provide caption and subtitle transcripts for your video and audio files.

Alternative Text on Images

When you upload an image on your website, there is an option to add alternative text. Since most people don’t know what this is, they either leave it blank or add a simple word, such as “girl” to the image. But this is insufficient for those how are blind or have severe visual disabilities. For those with these disabilities, if they have a screen reader, which is software that converts text to speech, the alternative text provides a description of an image, which the screen reader can then read out. Without this, visual elements to a website will be lost on those with severe visual disabilities and they will therefore miss important parts and information on your website.

For a website to meet website accessibility standards, every image must include alternative text. When uploading the image to your website, during the upload process there is an option to add alt text. The alternative text of an image is determined by the function of the image, and whether it is a link or just added for visual decoration. Either way, add a one to two sentence description to each image so it becomes compliant with accessibility standards.

Color Contrast

Another problem for those with visual impairments can be color contrast. For those with low vision, color blindness (which affect about 8% of men and 0.5% of women), and reading disabilities, having a low contrast between elements on a web page can be a big problem. To deal with this, it is important to make sure that the text present on your website is large enough on the screen and that there is a strong contrast between all text and backgrounds. Some might be concerned that this could potentially mess up branding images and colors, but the best branding are usually done with high contrast colors, so this shouldn’t be too much of a problem.

Something else to note is that color coding icons on your website can also lead to website accessibility problems. For example, when filling out a form and having one field filled out incorrectly, it isn’t helpful to someone with color blindness if the only indicator of an inappropriately filled out field is a red border, compared to a green border. To address this, it is best to include both color-coding and labels to make sure the fields are more accessible and easier for screen readers to process. A great resource for designing your site’s structure and appearance while still being accessible is the A11Y Style Guide, which is free online.

Outdated Technology

This may be the simplest problem on this list, yet it is probably the most common. Technology and innovation is rapidly changing and advancing for the better, but individuals and companies don’t always keep up with the last tech, and as a business, you need to cater to those people as well. Keeping your website up to date and managed is the key.

New CSS tricks and modern front end frameworks may work in modern web browsers like Google Chrome, but websites may also need to be built for users with Internet Explorer 8 as their web browser, including older government contractors and some disabled individuals. Even though most people assume the web is streamlined,  websites look different whether you are using Chrome, Safari, Firefox, or Internet Explorer. To adjust for this, doing cross browser testing for all new and updated websites is important for making sure your website can function on old machines and web browsers.

Final Thoughts

While website accessibility is something that is easy to overlook, it is an important step in the web design and development process. By making sure your website is accessible, you are allowing your site to reach as much of your target audience as possible, thereby helping your website’s SEO and helping you reach more potential customers. There are a number of free sites that allow you to evaluate your website’s accessibility and also a number of online tools just for website accessibility. For great information and resources about website accessibility, we highly suggest checking out the Getting Started with Website Accessibility post from Medium. Alternative, a web design agency can help you evaluate our current website accessibility and will make sure your new website is completely fits with 508 Compliance.

DC Dev Shop offers services in web design and web development. For an questions or inquiries about your website, don’t hesitate to drop us a line on our contact page!