<img alt="" src="https://secure.mile0tire.com/193182.png" style="display:none;">
Subscribe

Brand Accessibility: How to Make Your Brand an Inclusive Space for Everyone

by Michael O'Mara, on Jun 23, 2021 12:00:00 AM

Accessibility is the smartest business decision you can make for your brand.

Why? You should be asking yourself why not?! It’s just the right thing to do. Over 60 million adults in the United States have a disability that impacts some aspect of their life. I’d wager at least a handful of those kind folks are active or prospective customers of your business. 

The entrance to your physical business is accessible, and your brand should be too. Your customers want a brand that is inclusive and accessible, and since you’re reading this blog, I know you do too.

Over the next few minutes, I invite you to read several simple ways you can shift your brand from unaware and concerned to accessible and inviting.

Section 1: Copy

Structure your website copy with headlines and titles

Want to make sure your message is clear? Be intentional about how you structure your copy. Walls of text can be difficult to read and cause your audience to bounce, or give up before reading your message. Structuring your blogs with descriptive heads that group content and sections result in a pleasant reading experience for your visitors. 

An important note about headers: be consistent with your header size! Proper structure is ideal, but consistency is the glue that holds it all together. Always double-check your header size.

Besides accessibility, headlines and titles are also good for SEO.

Alternative text for pages, media, and posts

Image alt-text is as necessary for your website visitors as it is for search engine optimization. If a visually impaired visitor uses a screen reader to browse your website, alt-text describes images. If a prospective customer browses for your products, alt-text helps search engines rank your website. A higher-ranking website means more traffic and sales.

Alt-Text example: Smiling man in a wheelchair working at his office computer

Each social media platform offers different approaches to accessibility. Some are doing a much better job than others. The University of South Carolina compiled a list identifying social media accessibility options. Click here to read a USC blog about applying alt text to new and existing social media posts.

Write better links and hashtags

Write links that clarify where they lead. Instead of 'click here,' type 'click here to read my blog.' Communicating action and location creates an accessible link for every reader.  

Consider this: the shorter the link, the less space a finger has to click. If a visitor is motor or visually impaired, longer links mean an easy user experience.

If you use hashtags in your copy, write out tags in camel case. What is camel case? Here is a quick example: 

  • This is a Sauce Marketing example of what not to do: #growsmarter
  • This is the correct way to write out a hashtag in camel case: #GrowSmarter 

Notice the difference? Since each word is capitalized, a hashtag written in camel case is clearer and simpler to read. Plus, screen readers have an easier time reading the hashtags. 

One final hashtag tip: place your hashtags at the end of a social post. Think about it: do you like reading hashtags in the middle of an important update? No. Screen readers read out entire hashtags and sometimes have trouble deciphering the words. Instead of peppering hashtags throughout your marketing copy, place them at the end of your posts.

Write simpler

Remember: when you confuse, you lose. Your brand voice must speak to everyone, no matter what. Don't try to be clever with key information. Be clear, be simple, be direct. A simple message means more customers, more revenue, and a better customer experience for everyone.

Our production team at Sauce Marketing use three tools to write simpler. These tools are industry-standard services that offer free or paid options:

Section 2: Design

Design for colorblind, low-vision, and blind visitors 

Do not use color to convey primary information. Instead, use color to accent and improve primary information. When you use color to communicate essential information, such as correct or incorrect user feedback, you alienate colorblind visitors. Ensure all necessary and relevant information is accessible to everyone, even those who cannot perceive color.

For low-vision website visitors or social media followers, contrast is vital. Use high contrast for as many assets as you can. The minimum contrast ratio for website design and social media text and graphics is 3:1. We’ve provided some handy reference links below, including a contrast checker!

Designing for blind website visitors is tough— but it's not impossible. Here are two great ways to build navigation for blind visitors:

You can adapt your navigation bars to be accessible for colorblind, low vision and blind visitors in one swoop: indicate current page location. Instead of using contrasting colors to convey navigation, use contrasting shades and bold underlining.

Navigation bar examples for regular vision, color blind, and low-vision users

To indicate navigation for blind visitors, add website code visible only to screen readers. This is a great way to communicate placement and navigation for blind and low-vision visitors. For information and coding examples, read this tutorial from Harvard.

Here are five invaluable resources to design for disability:

 Empty form labeling

Forms are everywhere nowadays. If you think browsing the web is frustrating, stop and think how frustrating all of those forms and pop-ups are for a user with motor or visual impairments. We understand forms are essential for capturing leads and driving long-term engagement. But that doesn’t mean you gloss over designing forms without accessibility in mind.Empty form labeling vs proper form labeling exampleAll forms must have a clear label and border. Instead of a blank form with grey text, label a form with a description and directions above the form. Clear labels and borders help visual, motor, and cognitively impaired visitors to understand your forms.

This information bears repeating: Do not communicate primary form information with color! Do not use color to indicate if a form entry or submission is successful or needs correction.

Minimize or eliminate hovering

Hovering over navigation menus is frustrating for everyone. When was the last time you successfully navigated a hovering navigation menu on a touchscreen? While it’s frustrating for people without disabilities, it’s downright impossible to deal with if you have a motor disability. Be mindful of excessive hovering implementation on your navigation and browsing. In fact, it’s best to eliminate hovering from your website entirely.

Section 3: Video

Captions

Auto-generated or manual captions are essential for your brand’s video content. Screen readers rely on video captions for low vision and blind viewers. Captions are fantastic additions to any brand. Here are two common issues regarding captions:

  • AI-driven, auto-generated captions are better than nothing. Expect errors and minor issues, which might lead to confusion and lost sales.
  • Manual captions are written by your business or by a third party. There is a lower chance for confusion and more opportunity for caption placement, appearance, and caption content. This option is better for accessibility but time-consuming. 

Most social media giants offer auto-generated caption features or the ability to upload an SRT file with your content. For more information on SRT files, visit a blog about SRT’s from HubSpot

Captioning your videos is an essential step in creating and maintaining an accessible brand for all of your customers. If you do not have the time to script your videos, auto-generating is the next best option. 

Here are several resources to learn more about captions on your preferred social platform:

This is not an exhaustive list of content captioning options. Do you have a tried and true method of captioning for accessibility? Tweet it to us here.

Media players

Your media player is more important than your content. Remember: the crux of your brand is the user experience and satisfaction. If your media player auto-plays, or fails to respond to keyboard commands, it is not accessible. Here is a checklist to determine whether your media player is accessible for all:

  • Make sure your video player plays only in response to user action
  • Do video controls respond to standard keyboard commands? 
  • Does each control have a descriptive name? For example, do the play and pause buttons communicate whether the video is playing or paused? 
  • Can captions be toggled?

If your media player fails to address these questions, stop making content, address these concerns, and use an accessible media player for all of your customers. 

For more information from the experts, visit the Web Accessibility Initiative website and Deque University’s tips for media player controls.

Ban flashing from your video content

Flashing lights are life-threatening to viewers with photosensitive viewing disorders. Blinking, or slower bursts of light, distract everyone and are concerning to the same photosensitive audience. Blinking, however, is not life-threatening. Flashing is faster and usually occurs more than three times a second. This rate will trigger a seizure. 

The world is better at reducing and removing flashing in videos than it used to be. It is still not good enough. Unless entirely unavoidable, remove seizure-inducing flashing from your videos. If absolutely necessary — there are few instances where that is true — be as proactive as possible. Add flash warnings to your titles, descriptions, captions, and video. Warning labels at every single viewing touchpoint show you are aware of accessibility and working to be compliant and considerate. Avoiding flashing is the safest, most accessible option for video content.

Including flashing in your videos is not worth it. For an exhaustive overview of recommendations for flashing and blinking media, visit W3C’s Web Content Accessibility guidelines here.

Accessibility action steps

This blog is not a comprehensive list of accessibility options for your brand. The resources throughout this blog have far more information and expertise than we do. We all start somewhere. The best accessibility steps you can take are to stay informed and to challenge your existing habits to find problems you can correct. 

Every brand, including Sauce Marketing, struggles to build an accessible, inclusive space for everyone. Searching for accessibility options and tips shows you are on the right path. You are one step closer to a better brand experience for your customers living with disabilities.

Here are four steps you can do right now to make your brand more accessible: 

  1. Read through this blog again and select five resources. 
  2. Cross-reference help and guidance from the resources with your social media and website.
  3. Create five clear action steps to make your brand more accessible.
  4. Apply changes and revisit your brand accessibility each fiscal quarter.

We want to hear from you about your brand accessibility. Interested but struggling to keep up with new ways to build accessible brands? Learn more about brand accessibility by scheduling a call with a certified Growth Guide today.

Topics:BrandingStrategy