The Art of Creating Accessible Content

Creating accessible content is a necessity. Unfortunately, many businesses don't consider that when planning their content marketing strategy. Although there's a gradual shift from bigger corporations who are beginning to understand accessibility's value. Take LinkedIn, for example; they have started incorporating accessibility into their platform. You can see it on their PDF reader; when you open it, you'll notice an accessibility button on the top right. This focus on inclusivity is a sign of the times— any content creator worth their salt should be thinking about how to reach the broadest possible audience.

Here's why accessibility matters: 16% of the global population lives with a disability. That's 1 in 6 people. These disabilities can range from visual impairments to cognitive challenges and can significantly impact how people interact with the world, both online and offline.

To bridge this gap and ensure equal access, international guidelines like the WCAG (Web Content Accessibility Guidelines) have been established. These guidelines aim to create a level playing field, ensuring everyone has the same rights and opportunities when it comes to consuming information online. Unfortunately, the current reality paints a different picture: 97.4% of live web content falls short of accessibility standards. This translates to content not reaching a significant portion of the population.

The good news? If you start creating accessible content, you'll unlock a great deal of benefits. Not only will you reach a wider audience, but you'll also cultivate a positive brand image as a company that prioritizes inclusivity. And let's not forget the SEO advantages — accessible content is often considered more search-engine friendly, giving you an extra edge in the digital world.

Let's dive into the hows.

Why should you care about accessibility?

At its core, accessibility is the practice of creating content that can be easily understood and used by everyone, regardless of their abilities. In the world of content creation, this means ensuring your message is inclusive and reaches the broadest possible audience.

Reach wider audiences

That's the first great reason to start creating inclusive content: to reach a new audience. 

Put yourself in the shoes of a person living in a world where information is locked away, where engaging content remains frustratingly out of reach. For over 1 billion people, this is a daily reality. People with visual impairments, hearing loss, cognitive differences, mobility limitations and more often face barriers when encountering inaccessible content.

A captivating infographic, a thought-provoking video, or a downloadable guide can render valuable marketing collateral meaningless if they're not designed with accessibility in mind. By prioritizing inclusivity, you open the door for everyone to participate in the digital world, to learn, connect, and be empowered by information.

Answer to legal obligations

Accessibility is also becoming an increasingly important legal consideration. International regulations like the Web Content Accessibility Guidelines (WCAG), 

Developed by the World Wide Web Consortium (W3C), the leading international community for web standards, WCAG is overseen by the Web Accessibility Initiative (WAI). W3C is like the international governing body for web development, and WAI is a dedicated task force within W3C that focuses specifically on accessibility best practices. WCAG serves as a set of best practices ensuring everyone has equal access to information. These guidelines address various aspects of content creation, from color contrast and keyboard navigation to alternative text for images and video captions. Adhering to WCAG standards can avoid potential legal issues and ensure your content complies with accessibility regulations.

This focus on accessibility reflects a broader shift towards creating a more inclusive digital world. Prioritizing WCAG compliance shows your commitment to social responsibility and ensures your content is truly accessible to all.

We are a proud advocate for accessibility, and as of March 20th, 2023, we achieved WCAG 2.1 AA certification. Our platform offers the tools and features you need to create accessible and engaging content. Read this article to learn more about our accessibility features.

How can you structure accessible content?

Great question. Like a house, accessible content relies on a clear and logical structure. 

The foundation: build a clear hierarchy

Each section functions like a distinct floor, and heading tags act as directional signs, guiding users through the information. Using headings (H1, H2, H3) in a hierarchical order creates a user-friendly experience for everyone.

Screen readers rely on heading structure to understand the organization of a document or webpage. Clear H1, H2, and H3 tags act as signs, allowing users to navigate to specific sections or grasp the overall flow of information. Proper heading hierarchy ensures that users who rely on screen magnification or text-to-speech tools can jump between sections and grasp the logical flow of the content.

Many users scan content to pick out key points. A strong heading hierarchy allows them to see the main topics at a glance and identify relevant sections for further exploration.

Prioritize key information

When creating your content, place the most important information at the top of the page. This allows users who navigate by tab key to access key details quickly and efficiently. Screen reader users often rely on tab navigation to jump between focusable elements on a webpage. By placing crucial information at the beginning of the content flow, you ensure they encounter it first.

Test your content by navigating solely with the keyboard to identify any areas that might pose difficulties for users with motor impairments.

Use free accessibility testing tools like the Siteimprove Browser Toolkit to identify potential accessibility issues in your website or content. These tools can crawl your webpage and provide valuable insights into areas requiring improvement.

Use the right language

Ensure your document or webpage language is set correctly for your target audience. This is important for users who rely on language-specific settings for screen readers and other assistive technologies. The correct language setting allows screen readers to announce the content in the appropriate language, improving users' comprehension. 

If you're responsible for the website or content development, consider using free accessibility testing tools like the WAVE Web Accessibility Evaluation Tool or the AXE DEV Extension Evaluation Tool. These tools can crawl your website or content and provide valuable insights into accessibility issues and areas for improvement. Regularly testing your content with these tools helps you identify and address potential accessibility barriers before they impact your audience.

Best practices for creating accessible content

Design for readability

Color and font choices play a vital role in the accessibility of your content. Good color contrast is essential for ensuring your text is easily readable by everyone. A webpage with light grey text on a white background would be difficult to read, especially for users with visual impairments. 

In this example, the red and blue text elements are highly contrasted against the white background, making them clear and easy to understand.

Color blindness affects a significant portion of the population (300 million people worldwide). To ensure your message is clear for everyone, avoid using color as the sole method of conveying information. For instance, don't rely on color-coded charts or graphs to explain data. Always supplement color with text labels or alternative visual cues.

There's no guesswork required. Many free tools online, like the WebAIM Contrast Checker, can help you assess the color contrast between your text and background. These tools evaluate your choices against the Web Content Accessibility Guidelines (WCAG), ensuring your content meets accessibility standards.

Just like color, your font selection can significantly impact readability. Opt for clear, easy-to-read font. Avoid overly decorative fonts or small font sizes. Remember, the goal is to ensure your content is legible to everyone, regardless of their visual abilities.

Use the right alt text

Images, graphics, and infographics can enhance your content's visual appeal and understanding. However, without proper descriptions, these elements can become roadblocks for users with visual impairments who rely on screen readers. 

Most SEO experts use alt text as a great leverage, but at its core, it was created for accessibility purposes. Alt text acts as a voice for your images, describing their content to screen reader users. When someone is browsing your content with a screen reader, without alt text, they would only hear "image" with no further context. Adding descriptive alt text allows them to understand the image's significance and how it relates to your content.

Not all images require alt text. Purely decorative images, like small spacer elements or background patterns, can be ignored. However, any image that conveys information or contributes to understanding your content needs descriptive alt text.

Here's an easy trick to identify images needing alt text:

Imagine explaining your content over the phone. Pretend you're on the phone with someone describing your webpage. Those images require alt text if you describe specific images to explain a point. They likely play a functional role in conveying your message.

How to write an effective alt text

• Focus on the content and purpose of the image, not its aesthetic qualities.
• Keep your alt text concise, ideally under 125 characters. Screen readers often cut out lengthy descriptions.
• Consider the surrounding content and how the image relates to it.
• Don't use generic descriptions like "image" or "photo."

Here's an example:

Bad alt text: "Image of a pie chart"

Good alt text: "Pie chart illustrating the distribution of global internet users by region"

For complex images like charts or infographics, consider providing a more detailed description in a separate section near the image or within a long description element.

Bonus: Are you unsure about your alt text? WebAIM offers a wealth of information and helpful exercises to help you write effective alt text. 

Buttons, form, and navigation guidelines

Interactive elements like buttons, forms, and navigation menus allow users to engage with your content. So, it’s important to design them with accessibility in mind. Let’s explore how you can do that.

Clear buttons

Buttons act as call-to-actions, guiding users through your content. The label text on a button should be clear and concise, accurately reflecting the action it triggers. For instance, in this Foleon Doc created by Lexia, the first button says, "See all episodes," indicating what will happen once you click it.

Don't forget about screen reader users. For buttons that trigger actions beyond basic navigation (like opening overlays, submitting forms, etc.), consider adding alt text to describe their functionality. This provides additional context for screen reader users and ensures they understand what will happen upon clicking the button. This example by the University of Manchester is great; each image that serves as a button or a CTA has alt text explaining what will happen if you click on it.

Here's an example:

• Bad button: "Click Here" (unclear)
• Good button with alt text: "Click Here (Opens Glossary Overlay)" (clear and informative)
  
  

Accessible forms

Always associate a clear label with every form field. This label explains what information needs to be entered in that specific field.

Indicate which fields are mandatory for form submission. You can do this by:

• Adding "(required)" to the end of the label.
• Using an asterisk (*) next to the label, with a clear explanation at the top of the form stating that all asterisks indicate required fields.

Maintain good color contrast between input fields (text boxes, dropdown menus) and the background. This ensures clear visibility for users with visual impairments.

This Foleon Doc is a great example of an accessible form. The form clearly labels each field and indicates required fields using asterisks with a corresponding explanation.

Use multimedia with accessibility in mind

Videos and audio can enhance your content's engagement and information delivery. But you should keep a couple of best practices in mind when including them in your content.

Closed captions and transcripts are essential for users with hearing impairments or those in noisy environments. Users may prefer to skim content by reading transcripts, especially for longer audio pieces. Captions provide text overlays that display the audio content, while transcripts offer a written version of the audio alongside your video or audio file.

While background videos can add visual appeal, avoid placing crucial information within them. Overlays like captions might obstruct the information, hindering accessibility. Consider alternative ways to present essential details, like text overlays outside of the background video.

Background videos are a great way to add atmosphere, but some users may need to pause them for better focus or accessibility reasons. Ensure your content has an accessibility toggle that allows users to pause background videos if needed. This provides greater control for the user and avoids potential distractions. Check out this example from the University of Manchester. See how the accessibility toggle can easily be accessed at the top right of your screen. This toggle allows anyone to pause the background video.

For a deeper dive into Foleon Doc accessibility features and best practices, refer to the comprehensive guide available in our Help Center.

If you're interested in learning more about accessibility in content creation, check out our Foleon Academy course. You’ll learn: ​​

• What is accessibility, and why is it important?
• Structure your content for accessibility.
• Fine-tune your content for accessibility.
• How do you test if your Foleon Doc is accessible?

Conclusion

By ensuring your content is clear, well-structured, and usable for everyone, you're opening doors to a broader audience and fostering a more inclusive online environment.

Creating accessible content is an investment in the future. Following the guidelines outlined here, you can create content that reaches a broader audience, fosters brand loyalty, and contributes to a more accessible digital world.