UXcellence Exploring excellent user experience

Designing for Accessibility: Content & Context

If content is king, accessible content is a benevolent and transparent ruler indeed. But what is accessible content? Accessible content is clear, contextually independent, well-structured, and available no matter how users try to access it. Clear content is written in plain language, without idioms, jargon, and unnecessary words. Contextually independent content explains itself naturally and makes sense with or without the surrounding content and design. Well-structured content is organized logically, using the proper semantic elements for each piece of content.

And, most of all, accessible content is available to users whether they are blind, deaf, or otherwise impaired. This means providing alternate options for content that can’t otherwise be accessed using the primary method, such as transcripts for video and audio or alternate descriptions for images.

Readability

Wait a minute, you might say, great readability is important for every user! That’s true, but readability can especially benefit people with learning and vision disabilities. You can improve readability with a two-pronged approach: make the actual content easier to read, then improve its visual style.

Readable content is concise and simple. Here are some quick tips for writing great content:

  • Avoid unnecessary words.
  • Choose simpler words.
  • Don’t use jargon or abbreviations. If you must, explain them or provide links to further information.
  • Aim for short sentences and short paragraphs.
  • Create content that can be quickly scanned. Break up large bodies of text with elements of visual interest, like lists, quotes, and images (with proper alternative text).

Good content is more than half the battle. Once you have a solid foundation, enhance it with better visuals:

  • Use fonts that are easy to read. Avoid script, handwritten, and gothic fonts, or use them sparingly.
  • Balance your line length and line spacing for optimal readability. Try to keep lines to 80 characters or less in length, especially in larger bodies of content.
  • Leave ample white space around unrelated text.
  • Use contrasting type for headings vs. body copy: a serif heading with a sans-serif body, bold and heavy headings with regular weight body.
  • Don’t capitalize full words, phrases, or sentences. All caps not only suggests yelling, it also takes longer for our brain to parse the words individually. Screen readers may also interpret all caps as acronyms and read each letter individually (so if you must use all caps, apply it via CSS).
  • Set text in resizable units like em and rem.
Quick tips for readability
  • Use plain language. Cut the cruft and jargon. The Hemingway text editor can help.
  • Use headings, quotes, images, lists, tables, and more to break up large bodies of text.
  • Watch your line length. Keep lines of text between 45 and 85 characters in length.
  • Avoid all caps.

Putting the text in context

It can be easy to think of text as “clutter” in an otherwise clean design. Too much text can be a distraction sometimes. But not enough text in the right place is equally frustrating. Raise your hand if you’ve ever used an app or been to a site that used one or more icons that were meaningless to you. Adding a single word (or short phrase) to icons may increase the visual clutter slightly, but it can help all of your users immensely. It’s especially important for those who rely on screen readers and for whom icons alone may otherwise convey literally nothing.

Speaking of conveying nothing, images without proper alternative text are as useful as a black hole in your page to blind visitors. If your content relies on images, then great alternative text helps fill in the picture for those who can’t see the images. That isn’t just blind users, by the way. Images are often the largest assets on your site (unless you have audio and video), and users with low bandwidth may be unable to load them. Good alt text helps those users, too. In addition, alt text helps bots parse your content to better understand and catalog it, which can contribute to better search engine optimization.

Writing good alternative text

A lot of people phone it in when writing text alternatives for images. This is the accessible equivalent of picking the first generic stock image from a poorly framed search. You wouldn’t do that, right? Then why provide crappy alternative text? One exercise that helps me is to ask myself, How would I explain this image to someone over the phone to help them understand it? Here are some quick pointers I use when writing alternative text:

  • What kind of image is it? Don’t say that it’s “an image of” something, but it can sometimes help users to know if it is an animation, screenshot, illustration, or photo.
  • Is there text in the image? Is it important to know the actual text? (Avoid using images solely for decorative text whenever possible.)
  • What emotion or mood does the image convey? Images often add more emotional context. Add descriptive text to help convey it.
  • Are there actors and actions in the image? Who or what is the primary focus of the image? What is happening?
  • Is there subtext implied by the image? What meaning do you want users to take away from seeing the image?
  • What do you convey outside the image? If you have a caption or otherwise talk about the image in nearby text, avoid being redundant in the alternative text.

Captions and transcripts

Captions and transcripts serve a similar purpose as alternative text, but for video and audio. Not only are they helpful for deaf users, but they allow extra ways of accessing the same content for everyone else, too: the person on a plane who can’t load the video, the open office worker who left her headphones at home, the parent trying to look something up in a hotel room with a sleeping child. Oh yeah, and bots can’t parse your video or audio nearly as well as they can read your transcript.

For video content, the best practice is to provide both synchronized captions and a transcript. For audio-only, a transcript is usually enough. WebAIM has a great in-depth look at captions and transcripts. Bello Collective has written a really great guide to transcribing audio specifically for podcasters. Great transcripts include the following:

  • The speaker’s name alongside a word-for-word transcription of what they say,
  • Any relevant non-speech sounds and non-verbal expressions,
  • Supplemental descriptions for visual elements that appear
  • Further details about the video such as when and where it took place, who was involved, etc.

You can transcribe video and audio yourself, but there are tools available to automate the process. (As with any automation, don’t trust it blindly. Double check the results and fix any errors.) A few resources I’ve had recommended to me include Descript, Rev, and Auto Edit. If you have any services or tools you recommend for transcription, I would love to hear about them!

Quick tips for text alternatives
  • Include text labels with icons.
  • Provide alternate text for images that provide meaningful content, and include the alternative text when handing image assets over to developers.
  • Avoid alternative text for images that are purely decorative (or use those images as background elements).
  • Don’t use images of text when styled text would suffice.
  • Add captions and transcripts for videos and audio. Automated transcript software can speed up the process, but take the time to double check it.

Use elements semantically

Semantic HTML makes the hierarchy of content meaningful for browsers, search engines, and screen readers.

Lara Callender Hogan, Designing for Performance

This is primarily aimed at front-end developers, but it’s helpful for designers to understand page structure and what elements best suit different content. Using elements semantically means using the right piece of structure to match the purpose of its contents. HTML5 has added quite a few new elements that help developers create a more semantic structure. Where before they might have used lots of <div>s, there are new container elements meant specifically for the header, main content, and footer of a page, as well as smaller parts like articles, sections, and asides.

When looking at semantic structure, let’s start with headings. Think of your headings (from <h1> to <h6>) like an outline of your content. Each heading deeper represents a further nested bullet in your outline. Using headings to outline your content and not just as a visual treatment is important because:

  • headings help sighted users quickly skim through your content to get a general idea of the structure (especially for longer content),
  • headings actually provide a navigable outline in screen readers for visually impaired users, and
  • headings can improve your search engine rankings and teach bots how your content is organized.

The other semantic containers introduced with HTML5 also define a more logical structure for your content. Instead of having a maze of nested, meaningless <div>s, you can better define the purpose of each region within your content using elements like <header>, <footer>, <nav>, <article> , and <main> (among others). In the same way that headings help to outline your content better for both people and software, these other elements can give screen readers and bots an even better understanding of your content’s structure.

Using semantic HTML can make your content accessible from the start. As your content (or your product) gets more complex, the basic semantic structures provided by HTML may not be enough. In those cases, you can apply additional semantic information to your site using WAI-ARIA. What is WAI-ARIA? It is a W3C spec with a set of additional HTML attributes that define more detailed roles, properties, and states. It was created in response to the exponential growth of rich internet applications, and the need to make them more accessible.

Semantic tips
  • Use headings for the logical structure of a document and not for their style.
  • Use <button> elements for actions the user is taking. Never use static text containers (like <p> or <div>) as interactive elements.
  • Use new HTML5 elements like <header> , <nav>, <main>, <footer>, and more for better logical grouping of content.
  • Supplement the above further by using ARIA roles to define more detailed expectations only when necessary.

Become a design a11y

Hopefully you’re now ready to create more accessible content and give your users the context they need. Explore how other aspects of design can improve the accessibility (and overall usability) in the Design A11y series below:

Follow along on Twitter, RSS, or by subscribing to the monthly newsletter if you want reminders when each article in the series is published.

Like this? Please share:

Explore more like this