Web accessibility is important because it guarantees that the internet will be accessible to everyone, regardless of any disabilities. It is a way of ensuring that those who have vision impairment, hearing impairment, learning disabilities, limited movement, speech disabilities or photosensitivity can still easily and equally access websites. In order to make this happen, it’s important to keep accessibility standards in mind and design for accessibility right from the start. Use these steps as a guide when designing your website to avoid any accessibility issues.

Steps to Design for Accessibility

Choose a content management system that supports accessibility

To design for accessibility, you need a solid foundation. Choosing a content management system (CMS) that supports accessibility will make this process easier for you. One of the easiest and most popular is WordPress. However, be cautious when using WordPress themes. WordPress as a platform is already quite accessible, but some of the themes often fall short. WordPress themes designed for accessibility and tested by users will give you a good place to start.

Have a strategy for color

Part of web accessibility is designing for users who are colorblind. Sometimes websites don’t have enough contrast between colors, making it difficult for people with colorblindness to see all content. To design for accessibility, make sure there is significant contrast between the background and the foreground. Additionally, do not rely on color alone to convey important information. A good rule of thumb is a color contrast ratio of at least 4.5:1. Make sure you have a strategy in place before beginning the design process so color does not create an accessibility barrier.

Don’t use tables for layout

The W3C no longer considers tables used in layout to be a good practice, for the sake of accessibility across multiple different interfaces and devices. Layout tables are complex, and this can be difficult for screen readers to comprehend, complicating accessibility. In an attempt to separate content and structure from the physical presentation of a website, do not include tables as part of your plan for layout with your new site.

Design forms for accessibility

Forms play an important role in the design of your website; this is often a pivotal way that users interact with your site. When creating your form fields, make sure you use labels instead of placeholder text. Screen readers register labels, but not placeholders. Use a tag to offer a description, so screen readers can interpret the purpose of forms. Make any areas that require a button a large and clickable area. Be sure to set up error messages so they are easily seen, easy to understand, and accessible to screen readers.

Provide alternatives for images and media

Providing text alternatives (alt text) for images or any other media is a quick and easy fix for web accessibility. Always keep in mind that someone who is visually or hearing impaired may be trying to use your site. How are they supposed to understand what the image, video or audio conveys if they cannot see or hear it? Provide text alternatives for images and video, and consider inserting an audio transcript to make audio pieces accessible.

Place navigation in clear & consistent places

Site navigation can quickly become a big obstacle for web accessibility. It’s ideal to have multiple ways to navigate your site, especially if your site is large. Placing your navigation menu at the top of your site is the easiest method, but it does not have to be there — sidebar navigation can be just as effective. You might also use a sitemap or a search bar to make navigation easier. Just make sure it’s also mobile responsive, and keep navigation in the same place across every page on your site.

Use focus indicators

A focus indicator is something such as the box that outlines a button or form field when you’re filling it out. It’s a visual indicator to show which element of a web page the user is focused on. This is especially helpful for users who use a keyboard to access your website, as it clearly conveys where they are on a page.

The W3C requires link text to accurately describe the purpose of links. This is so those with screen readers can understand what links throughout a page mean, and determine whether they would like to follow that link. If a link contains no text, or the linked text isn’t clear, then the purpose of that link cannot be properly explained to the user. As you plan your new site, keep these tips in mind so you don’t have to go back later and fix an overwhelming amount of links.

Use headings appropriately

You want to set up headings according to their level. Levels range from H1 to H6. Higher levels (H1, H2, H3) indicate the start of a new section, and headings such as H4 or H5 may indicate subheadings within those sections. Try not to make this structure confusing. The W3C advises against using headings out of order, such as an H4 directly below an H2, since it can quickly make content confusing to people using screen readers or other assistive technology.

Design for different platforms

Something to keep in mind while designing your website is to make sure that it is fully accessible across all possible devices and platforms — mobile, tablet, desktop, and so on. This means you must consider color, layout, forms, alternatives for multimedia, navigation, focus indicators, links and headings for each platform. Testing tools like Accessible Metrics can help you double-check your work.

Web accessibility can be stressful, since noncompliance can expose your business to lawsuits or expose your government department to penalties. Utilize these steps to protect your website as much as possible, and keep up with regular accessibility maintenance to make sure nothing falls through the cracks.