Web accessibility is a hot topic—and for good reason. It influences how people find your webpages and consume them. So how do you create a web experience that’s inclusive and user-friendly? Our friends at Technology Advice have some ideas!

Help us out, Tamara!

While organizations aren’t legally obligated to make their digital spaces accessible like the government, they should make accessibility a strategic priority, not an afterthought. 

Companies that don’t make their products and services accessible on the web for both desktop and mobile phones miss a large segment of potential customers and can open themselves up to lawsuits that demand payment of court fees and website compliance changes.

Companies need to think about, plan for, and implement accessible features from the design stage. That means training your employees on inclusion practices and building those practices into your processes. 

This article covers the why and how of accessibility as a strategy and gives you some best practices to follow when implementing inclusive design on your website.

Accessibility as a strategy

People consume digital content via:

• Home, business, and publicly available desktop computers
• Mobile devices like mobile phones, smartphones, and tablets that access data via wifi or cellular networks
• Screen readers
• Braille translators
• Podcasts and audio files

Each of these forms of digital media broadens your company’s reach, but each of them can also pose a barrier if you only present your content in a single form. Content accessibility strategy takes these potential barriers into account from the planning stage, resulting in some positive side effects. 

Reach the widest possible audience

Building accessibility into your website or app makes good marketing sense because it means that your product or service is available to the widest possible audience. If your website/app is inaccessible, you fail to reach a percentage of the population. On the other hand, if it contains usable features, you pull market share from other brands and companies that fail to make their sites accessible. 

Avoid unnecessary legal issues

Individual companies, especially large brands, who offer inaccessible websites or apps, can be sued for posing an undue burden on individuals with disabilities. Target, for instance, had to pay out $6 million settlement in 2008 because its website wasn’t accessible to the blind community.

While web accessibility is not yet required by law in the US, the internet is considered a public utility in many locations. This means that companies can be held liable if individuals are unable to access their websites in alternative ways. 

Improve search engine optimization (SEO)

Accessible sites can also improve your visibility within search engine results. When two sites with similar on-page content go head to head, Google will rank the more accessible site higher. 

This is for two reasons:

1. Descriptive elements like alt tags, title tags, and clear navigation make it easier for users to understand the page.
2. The Google crawler bots that scan page content better understand pages with clear descriptive elements.

Search engines deploy computers to crawl websites and understand what content matches best for user queries, and these computers don’t have eyes. Think of them like screen readers: they need text and code elements to understand what a page contains. By following accessibility principles that provide context to your non-text elements, you improve how search engine robots and your customers navigate your site. 

According to the Yoast blog, “alt text strengthens the message of your articles with search engine spiders and improves the accessibility of your website.” The Google webmaster guidelines specifically request clear title and alt tags under their “Help Google understand your pages” section. A Moz study on search ranking factors finds a correlation between inclusion of keywords in your alt text and higher search rank. Correlation is not causation, but by putting all of this together, there’s a strong case that Google highly values the user experience on web pages for all users.

Ways to make your digital experience more accessible

So how do you build a site and/or app that can be consumed by any and every visitor? Here are 5 things to consider:

Note: For more ideas, check out the suggestions on the WAI website.

Alternative text for images

Alternative (alt) text is the text that shows up on the page should an image not load, and screen readers use it to describe a picture. It is possibly the easiest way to add accessibility to your site. But if your descriptions are insufficient or poorly written, they’re basically useless. Bad alt text is often left blank or doesn’t describe what’s in the picture at all. Many SEOs have cited alt text as a great place to add your keywords but stuffing keywords into your alt text may not actually help those using a screen reader. 

Best practices for alt text:

• End your description of the image with a period. This signals to the screen reader to pause before the next piece of text. 
• Aim to describe the picture.
• Keep your descriptions brief but informative.
• Don’t use the space for keyword stuffing. 

Colorblind-friendly displays

Designers and app developers should be aware of color vision deficiencies (CVD) when planning new data visualizations and design elements for a web page—as millions of people are colorblind. 

CVDs make it difficult for individuals to see colors across the spectrum, but it’s especially difficult to distinguish between red, green, and blue tones. Fun fact: Mark Zuckerburg chose blue for the Facebook theme colors because of his red-green colorblindness.

Best practices for color blind-friendly displays

• Label charts and graphs clearly.
• Use contrasting colors with high saturation. Test readability in grayscale.
• Use textures as well as colors to distinguish elements.
• Provide two distinguishing characteristics for each element. For example, underline hyperlinked text, and color the text itself. 

Screen readers

Screen reading software increases accessibility for those with visual impairments. These tools read on-page elements like menus and body text for users, and rely on titles and tagging methods to differentiate between elements. 

If an element isn’t tagged correctly (or at all), then the screen reader doesn’t have the information it needs to give the user. This means poorly-tagged or unlabelled elements like social sharing icons without text elements are functionally invisible to a screen reader.

Best practices for screen readers

• Label image elements with alternative text such as alt attribute, caption, or descriptive text within the main body text.
• Include text for clickable icons, including social sharing buttons and hamburger menus on mobile sites.

Keyboard, switch access

Users don’t navigate every page with a mouse or by tapping a mobile device. In fact, some users need to move between on-page elements with a keyboard or a switch. Android developer Riggaroo puts it succinctly: 

“TL;DR: Make sure views that are clickable are selectable and reachable by a keyboard. Make sure views that require gestures can also be properly navigated to without using the required gesture.”

Best practices for keyboard and switch access

• Label all elements as you would for screen readers.
• Test that users can navigate around the page via keyboard.

Video and audio files

Building accessibility into your multimedia elements impacts how users interact with your pages and, perhaps even, your visibility in search results. Deaf and hard of hearing individuals cannot access video or podcast content without the help of closed captions or transcripts. And while search algorithms are improving, they cannot yet parse audio and video files for content. Adding captions, transcripts, and full descriptions improve access to this content. 

Best practices for video and audio files

• Turn on closed captioning features to show automatically for video files.
• Provide a transcript for audio files like podcasts and interviews.
• Write complete descriptions for video and audio files uploaded to third party sites like YouTube, Vimeo, and SoundCloud.

It’s dangerous to go alone. Take this with you.

There are lots of tools out there that can check your website and app for accessibility. Most notably, you can use the (free!) accessibility audit in Google Chrome’s developer tools to understand how others view your web pages. Or check out this list by the Web Accessibility Initiative (WAI) for an extensive list of tools. You’ll also find many marketing automation and email marketing platforms include ways to improve access to all of your marketing and brand materials.

Customer feedback and your own awareness are your first line of defense in the fight for greater accessibility. Solicit feedback from your customers on how they access your site, what parts of your UI give them trouble, and where you can improve by using forms. 

 

Tamara Scott is the Research and Content Manager for TechnologyAdvice.com. She lives and writes in Nashville, TN.