Inside a crowded 1930s movie theater, showing a noir film. Monochrome, dramatic lighting. Image credit: Midjourney

Accessible Content and Media

Crafting Inclusivity in Digital Communication

7 minute read

Welcome back to our continuing series on web accessibility. Today, we turn our lens to a crucial aspect that often shapes the first impression of any digital platform: Content and Media. Accessibility in this realm isn’t just a compliance checkbox; it’s a commitment to inclusivity that opens doors for all users, regardless of their abilities.

Writing Accessible Web Content

Creating content that’s accessible to a broad audience means ensuring it’s understandable by everyone, regardless of their educational background, age, or cognitive ability.

Clear and Simple Language

In the pursuit of writing accessible web content, the emphasis on clear and simple language is important. This approach is vital as it makes the content accessible and understandable to a diverse audience, including:

Content Structure

As I’ve mentioned in other posts about accessibility, using appropriate semantic markup is just as crucial as the language used. Semantic HTML tags such as <article>, <header>, <footer>, and <aside> play a significant role in conveying the structure and purpose of content to users, especially those using assistive technologies like screen readers. These tags provide context to the content, enabling assistive devices to interpret and navigate the page more effectively. For instance, a <nav> tag indicates navigation links, helping screen reader users easily find the menu.

Similarly, <header> and <footer> tags define the top and bottom sections of a page, respectively. By clearly defining these areas, we ensure that users who rely on assistive technology can efficiently navigate and understand the layout and key sections of a website, enhancing the overall accessibility of the content. Use headings and subheadings to organize content logically. Ensure your headings are in a hierarchical order, with <h1> for main titles, followed by <h2>, <h3>, and so on.

Let’s look at a couple of examples that illustrate ways you could feasibly lay out a page. Both technically “work” in the sense that they render in the browser properly, but one is semantically optimized for accessibility:

Do This: Well-Formatted Semantic HTML

<header>
  <h1>MyWebsite</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Welcome to My Website</h1>
    <p>Here is some introductory text about my site.</p>
  </article>
</main>
<footer>
  <p>Contact us at email@example.com.</p>
</footer>

Not That: Poorly Formatted HTML

<div id="header">
  <div class="logo">MyWebsite</div>
  <div class="navigation">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#services">Services</a>
  </div>
</div>
<div id="main-content">
  <div class="article-title">Welcome to My Website</div>
  <div class="article-body">Here is some introductory text about my site.</div>
</div>
<div id="footer">
  Contact us at email@example.com.
</div>

In the “Not That” example, the content is structured using non-semantic <div> tags, making it difficult for assistive technologies to understand the layout and purpose of different sections. The “Do This” example, however, uses semantic HTML tags like <header>, <nav>, <main>, <article>, and <footer>, providing clear context and meaning, thus making it more accessible.

Alt Text for Images

Understanding when and how to use alt text is crucial for accessibility. Alt text, or alternative text, is a critical feature for users who rely on screen readers to access digital content. It provides a textual description of images on web pages, allowing those with visual impairments to understand the content conveyed by images.

Best Practices for Writing Alt Text

Alt Text in Assistive Technology

Examples of Good Alt Text

By following these best practices, you ensure that your web content is inclusive and accessible to all users, particularly those using screen readers.

Captioning and Transcribing Multimedia

Multimedia content should be accessible to users with hearing impairments or those who prefer text.

Closed Captions for Videos

Include captions that not only transcribe dialogue but also describe significant sounds. Tools like YouTube’s automatic captioning can be a starting point, but always review for accuracy. If you can’t (or don’t want to) use YouTube, there are other captioning platforms available:

Remember to review and edit captions for accuracy, as automated services may not always be perfect.

Transcripts for Audio

Let’s discuss how transcripts and captions are created and linked to audio and video content. Transcripts for audio content involve creating a text version of all spoken words and significant sounds within the audio. These transcripts are essential for users who are deaf or hard of hearing, and they also benefit those who prefer reading to listening. For videos, captions are synchronized with the audio and include time codes to match the text with the specific timing in the video. Common file formats for captions include:

Here’s a short example of what an SRT file might look like:

1
00:00:01,000 --> 00:00:04,000
Welcome to our weekly webinar on web accessibility.

2
00:00:04,500 --> 00:00:06,000
Today, we'll cover best practices and new trends.

Each section starts with a sequence number, followed by the time code indicating the start and end times of the text, and then the caption text itself.

This process can be adapted for localization by translating the text into different languages, allowing for a broader, more inclusive audience reach.

Accessible Documents

Beyond web content, ensure your downloadable documents are accessible. Creating accessible documents, especially tagged PDFs, is akin to using semantic HTML for web content, as both provide structure and meaning essential for assistive technologies. You’ll also want to ensure document formats are compatible with screen readers and include alternative text for images and charts.

Tagging in PDFs

Checking PDF Accessibility

Other Document Types

Microsoft Office Accessibility

Google Docs Accessibility

Apple Pages Accessibility

Ensuring document accessibility involves both technical tagging and making content comprehensible for all users, much like structuring web content with semantic HTML.

Testing Content for Accessibility

Testing web content for accessibility is a multi-step process that combines automated tools and real user testing. Don’t skip this step; it’s important!

Automated Tools

User Testing

Benefits of User Testing

Incorporating a blend of automated testing and user involvement ensures a more comprehensive understanding and resolution of accessibility issues, leading to a universally better user experience.

Content Is King

Embracing accessible content and media is about creating an environment where information is not just available but is also consumable by everyone. It’s a step towards a more empathetic and inclusive digital world. In our next article, we’ll navigate the intricacies of mobile web accessibility, ensuring your content is accessible across all devices.

What are your thoughts? Join me in the conversation over on Threads , Bluesky Social , or Mastodon .

Originally published July 17, 2023
File under: ux  accessibility