6 Ways to Make Your Digital Content Accessible: Tips for Inclusive Design

March 22, 2021
Taniesha Walker

There are a lot of different ways you can design digital content that’s more inclusive and accessible. Inclusive design doesn’t just involve making sure your website or app is usable and pleasant for everyone, it also means creating content that is equally accessible for people with disabilities, whether they have visual impairment or other types of impairment. Inclusive design goes beyond the accessibility features provided by the operating systems such as VoiceOver on Apple devices or TalkBack on Android devices. If your digital content has images, video, audio files or even interactive elements like buttons, sliders or drop-down menus, you can take specific steps to improve their accessibility for users with visual impairments. Here are some tips for inclusive design in your next project.


Check your font sizes

If you’re designing a digital content asset like a website or an app, you’ll need to pay careful attention to your font sizes. What you select will have a strong impact on an individual’s ability to read your content. If the font is too small, it may be impossible to read. But even if a font is slightly too small, it can have a huge impact on someone’s ability to read your content. You can get a sense of how difficult it is to read a given font size by using both a ruler and a visual tool. To get a sense for how a given font size looks when written out on a ruler, lay a ruler next to your computer screen or printed copy of your font. You can also use a visual font size tool.


Create a color contrast checker

Color is another important consideration in inclusive design. When you’re designing digital content like a website or app, you need to keep in mind that colorblind people — approximately 8% of the population — may not be able to see certain colors. To check for color blindness, you can use a color contrast checker. This will help you select colors that are distinguishable for people with normal vision as well as people with other types of visual impairment. Color contrast checkers will tell you the contrast ratio between two colors. The higher the ratio, the more visible the color will be. A good contrast ratio for text is a minimum of 4.5:1. But a contrast ratio of 7:1 or higher is ideal. That means that if you have two different colors that you plan to use for text, you should take into account how much contrast there is between those two colors. If the contrast ratio isn’t high enough, people with visual impairments won’t be able to tell the difference between the two colors.


Create Text Alternatives for Images and Videos

If you’re designing an image or video into your digital content, it’s important to provide a text alternative. This is also referred to as “describing your images” or “alt text.” In particular, you should always include a text alternative for images that have text associated with them. For example, if you have an image of someone’s name, you should include their name in the alt text of that image. Alt text is what digital devices use if an image is not available to them. It’s also helpful for people who are visiting your site on a computer with a slow internet connection, reading your content in a foreign language, or if they’re simply trying to avoid looking at an image for whatever reason. A great rule of thumb for creating alt text is to think about what a person might say about the image if they were describing it out loud. Alt text should also be relevant to the image or video, as well as the surrounding text. If you have a chart or graph in a slide or article, include the data that’s being presented in the alt text.


Utilize Labels and Translations

If you’re designing a website, you can also improve accessibility by including a label or translation for any interactive element on the page. For example, if you have a button that says “submit” or a slider that someone can use to adjust the volume, you should include a label that describes what it does and how to use it. That way, if someone’s screen reader isn’t able to recognize the button that says “submit,” it will read the label instead. You can create language-specific labels for your buttons and other interactive elements. This is particularly important for websites that are translated into multiple languages.


Create a TTS Checklist

As you’re designing a digital asset, it’s a good idea to write down a checklist of everything that should be included for people with visual impairments to be able to use it. This will help you be sure that everything is accessible and inclusive. That way, you can go back and make any necessary adjustments. Some simple things to include on this checklist are: - Textual content - Images - Video - Audio - Location-based content - Buttons - Drop-down menus - Navigation


Add a Screen Reader Wrapper

Another way to improve accessibility and make your digital content more inclusive is by adding a screen reader wrapper around it. This is a simple bit of code that tells screen readers to run in “read-only” mode. That means that the screen reader won’t be able to navigate through your content. It will only be able to read through the content that you’ve designed specifically for it. This has a few benefits. For one thing, it will help prevent a screen reader from accidentally clicking on and navigating away from your content. This is particularly important for touch-based digital products.


Conclusion

The Internet is the largest and most inclusive library the world has ever seen. But like libraries, it’s a place of shared space where all people can come to learn and grow. To ensure everyone can access the content, it’s up to us designers to build a level playing field through inclusive design. The key is to look for ways to make digital content more inclusive, whether that’s by using color contrast checkers to select the right colors, designing with font sizes and styles that are readable, or choosing images that include alt text. With a little bit of extra effort, we can create a better experience for everyone.