Accessible Web Design – 7 Tips to Get Started

We live in an increasingly connected world; the internet has shaped every aspect of our lives, and is so pervasive it’s almost impossible to avoid doing anything online. Social media and web design are the easiest ways for a brand to connect with a wide audience. However, the web can be a difficult place to navigate for consumers with disabilities. Hearing or visually impaired users may find there are large swathes of content online that are inaccessible or difficult for them to use. Making sure your website is accessible is one of the most important ways you can avoid alienating potential customers. 

“Accessibility” is an umbrella term that is used to describe aspects which influence a person’s ability to function within an environment. In web design, this translates to how easily your site can be navigated by someone of differing ability.

It may be a legal requirement for your business’ website to be accessible. Under the Americans with Disabilities Act (ADA), businesses that fall under two different distinctions (Title I and Title III) must have accessible websites. 

Title I businesses are defined as businesses that have 15 or more employees and operate 20 or more weeks per year. Title III businesses are categorized as “public accommodations” such as banks, public transport, or hotels. 

The ADA does not have specific guidelines for web accessibility, but there are many ways you can ensure your website is accessible to all users. These 7 tips below will get you started:

1. Add Alt Text to Images

Images on your website help to visually break up text and add meaning to your content, but what about users who are visually impaired? Any important images or graphics used on your website should have alt text embedded into the code, so people who use screen reading software can have a meaningful description of the image. This is especially important for infographics; make sure your alt text includes not only a description of the visuals of the infographic, but a transcription of any words contained in the infographic, as well. 

If an image used is purely decorative, you can leave the alt text empty. This will allow a screen reader to ignore the image entirely.

2. Add Captions or Provide Transcripts with Video or Audio 

Any video or audio that appears on your site should contain text captions. Many online platforms offer the ability to generate captions automatically, but adding captions to your produced videos is the best way to display an accurate script for your audio. This ensures users with hearing impairments (or even people who prefer to watch video without sound) are able to understand your video content. If you cannot add captions or your content is audio-only, you can provide a transcript of the audio the user can download to understand the meaning of your content. 

3. Use Proper Headings for Organization

Screen readers can pick up on headings and subheadings to better organize website text. Marking sections with <h1>, <h2>, <h3>, etc is a simple way to ensure visually impaired users will be able to hear your content as intended. Don’t skip around in numerical order, however. Going from <h1> to <h3> might look nice visually, but it can confuse someone using a screen reader and make them think there is content missing. Keeping content in a logical sequence makes it easier for screen readers to follow; skipping numbered heading formats may be disorienting or confusing. 

4. Simplify Navigation

Organize your menu options to be the same on every page. This makes your site predictable and easier to navigate. Some users are not able to use a mouse due to movement difficulties. Including the ability to navigate your website by keyboard could make navigation easier for them. Users should be able to follow internal and external links with ease, and be able to go forwards and backwards through content without getting stuck. Test your web page by trying to navigate without using your mouse to check that navigation is intuitive and simple.

5. Be Mindful of Color

Using color to distinguish parts of your text may give your website a polished look, but solely using color can run you into trouble for accessibility. Approximately 8% of men and .4% of women around the world have some form of color blindness; red-green color blindness is the most common deficiency. Add other design elements, such as patterns or different fonts to better visually distinguish different parts of your content. You can also utilize borders or whitespace to separate out sections. And be sure to use enough contrast between the background of your page or image and your text; there are many tools available, like this color analyzer, that will test contrast levels to make sure they are within accessibility guidelines. 

6. Use Readable Font

Set your default font size to something reasonably large. Users can use their browser’s settings to increase or decrease as needed. However, your design should ensure that enlarging fonts won’t interfere with readability or functionality. Choose a typeface that is simple with distinct letters and wide enough space between letters. Users with dyslexia will have an easier time tracking text that is spaced further apart. Use plenty of space between paragraphs, as well. 

Avoid using images of text instead of text for headers or other text assets. Screen readers won’t be able to read them without a well-written caption, and it makes editing content more difficult.

7. Make Links Descriptive

A simple “click here!” might be catchy clickbait for some links, but it can be confusing to screen reading software. Make your links descriptive with phrasing such as “check out our about page to learn more” or “contact us here”. A little bit of description goes a long way, as screen readers typically don’t read links within the context of the rest of the page. If you’re using an image as a link, include a description of the destination page as the image’s alt text. 

What More Can I Do?

Many content management systems, such as WordPress, have accessibility settings built-in to themes and templates. This can help get you started, along with the previous tips above. In addition, the World Wide Web Consortium (W3C) has created a system of guidelines to better help developers with accessibility. The Web Content Accessibility Guidelines, or WCAG, are a detailed list of actions you can take within your web design to make your website fully accessible to users with disabilities. There is even a quick reference guide with examples you can use to get a better idea of the types of accommodations that can take your website to the next level of accessibility.

Of course, if you need assistance, you can always contact us for help! We can be there with you every step of the way while you build a website that is sure to wow and be accessible to everyone.