How to Create More Accessible Online Content
According to the CDC, one in four U.S. adults live with a disability that impacts major life activities. Mobility and cognitive disabilities are the most prevalent, but many Americans also have trouble hearing, seeing, living independently, or completing self-care tasks such as dressing or bathing. Many people living with visual or auditory disabilities need to use assistive technologies to access content online. Some people use only a keyboard, navigating with the tab or arrow keys. Some rely on screen reader software that announces the page content aurally. And others read captions as a text alternative to audio tracks.
If you want to create a company that is truly inclusive, it’s important to make sure that your website, digital content, and ad campaigns are accessible to everyone. From designers to developers, each department makes decisions that affect the accessibility of your content. Train all team members on how to make accessibility part of the conversation during all phases of each project. Here’s how each of your teams can create more accessible content.
For Marketers and Content Creators
When you’re putting together a preliminary schedule, build time into the project plan for accessibility testing and implementation for each workflow. (For example, budget time to create transcripts and captions after video production wraps so that people in the deaf and hard of hearing community can understand what’s happening.) Learn and use accessible practices in documents and communications with your team, and communicate accessibility standards to partners (such as creative and design agencies) to ensure everyone is on the same page.
When you post something on your blog, social media accounts, or other online platforms, create an alt text (an invisible description that can be read by a screen reader). Doing so will ensure users with visual impairments can understand what’s being said. For blogs and other online content, use descriptive text for links to indicate its destination without needing adjacent text. (It’s important to do this because a screen reader user may skip ahead to links and won’t necessarily have context to what “Click here” or “Learn more” corresponds to.) And because screen reader software announces emojis in very literal ways (for example, a star emoji is read as “yellow five-point star”), emojis should be used strategically, and should be placed in a way that's mindful of potential interruptions to key messaging.
Since ADD can impact how much content a person can focus on at a time, try to make everything as organized and consolidated as possible. Shorter subject lines (under seven words) generally perform better than longer ones. Present important information and calls-to-action early, since users often leave the website within the first 20 seconds.
For Designers
Red-green color blindness is the most common type of color blindness. To make it easier for colorblind individuals to differentiate between the text or images, try to use other colors (or more distinct shades of red and green). Designers can select a function in Adobe Illustrator or use this tool (which simulates color blindness) when choosing a color palette to make sure colorblind individuals can distinguish between the shades. Be mindful of what colors you’re using in user interfaces as well, since red is often used to highlight errors or negative numbers.
Checking color contrast is one of the most commonly overlooked parts of the design process, and it can cause designers to have to spend extra time recreating graphic assets. To avoid this issue, you can use a color contrast tool to check the contrast ratio when selecting font colors. Aim to meet the Web Content Accessibility Guidelines (WCAG) minimum contrast ratio for colors used with text. (If needed, you can work with your design team to select an alternate shade for your brand colors and make any needed updates in a future blog redesign.) Leave critical information in text form rather than in image assets, and use alternative means such as a text description to reinforce the meaning of colors.
Because it’s harder for people with dyslexia and other learning disorders to read center alignment and dense text spacing, use left-aligned text with sufficient line-spacing for text longer than two lines. And while designers often like using all capital letters because the consistent letter height gives clean vertical alignment, all-capital letters are actually harder to read and understand. Screen readers can also misinterpret short words for acronyms (for example, “us” capitalized is read as U.S.). To avoid this kind of confusion, refrain from using all-capital letters.
For Content Management and Publishing Teams
Start by being aware of the accessibility limitation of your publication or social media platform. For example, some websites or social media platforms may lack accessibility features such as alt text for images or captions for videos. A web developer can help your team select a blog platform and assess the published website accessibility. If needed, they can also help you select a new color theme or customize the website to meet WCAG guidelines.
For visual-focused social media posts, ensure static images and GIFs include descriptive alt text. If optional captions cannot be added on videos for a particular social media platform or website, burn captions into the videos so that everyone can still understand your message.
Finally, avoid repetitive content for screen readers. For example, if an image contains text that is available elsewhere in the message, allow screen readers to bypass the image by leaving the alt text empty. The CMS might also have an option to hide the image from screen readers or mark the image “presentational” (as in decorative). In the HTML code, this is role=presentation. Adding the presentation role on an image maintains consistency across screen readers and allows you to enter alt text for image SEO without affecting the screen readers.
For Developers
HTML email designs rely on tables for visual layout. Include the attribute role=presentation on every table element (unless it is presenting tabular data) to inform screen reader software how to announce the content. You can also allow screen readers to bypass images that are decorative or contain redundant information by using the empty alt attribute `alt=””` and role=presentation.
Use screen reader software on your devices for testing HTML content:
You can also refer to these additional resources for the established standards and recommendations for web accessibility techniques:
And remember that these guidelines are just the tip of the iceberg. It’s impossible to cover every aspect of accessibility in a single post, so continue to educate yourself by working with knowledgeable developers or agencies to understand and implement accessible practices. It’s also important to get feedback from people who have disabilities to ensure that they can easily interact with your content. By making it a priority to understand and implement the latest best practices for accessibility, you will be better able to reach people in the ways that resonate with them.