banner with accessibility strategies for your content team above a content team illustration

Accessibility Strategies for Your Content Team

Resources for putting accessibility into practice tend to focus on the people who design and build websites and applications, but a lot of your day-to-day updates and maintenance are performed by content creators. “Content creators” are often members of a marketing team, but they could also be people in admin roles or other, less technical areas of an organization. In this post, we’re going to broadly define “content creators” as anyone who writes and publishes information for websites (including PDFs, videos, blog posts, infographics, downloadable content), email communication, and social media.

These team members can have a major impact on their organization’s accessibility, so we wanted to share some tips and tools to help empower content creators to take ownership of their role in accessibility. We’ll be looking at accessibility as it applies to any written content, basic page/content layout, PDFs, and video. We’ll also talk about the Content Creator’s role in promoting their organization’s overall accessibility by acting as QA for their organization’s website and other public-facing properties and picking accessible 3rd party tools.

Stay tuned for a follow-up post on the SEO impact of these tips.

Written Content

This section applies to any kind of written content you may be creating, whether it’s for a website, email, social media, software application, internal communication, etc.

Link Text

All links should have text that uniquely identifies the link target.
Screen readers provide a lot of different ways for their users to navigate through content, including jumping directly between links on the page, which means these users are likely to encounter the link text without any context. If your link text is all “click here”, “learn more”, or something equally vague, the user is not going to be able to find what they’re looking for. (And they’ll have to listen to the screen reader saying, “Learn more, learn more, click here, learn more, click here,” over and over again.)

Checkpoint: If someone were to list off the link text on your page, would they know what those links are for?

The best way to deal with link text is to make sure it flows within your paragraph and also makes sense out of context. If you absolutely cannot make the link text more descriptive, you could add a title attribute or an ARIA label to the link’s HTML code. If you don’t know what any of that means, reach out to one of the site/application developers for help; however, it’s best to avoid hidden text altogether. It’s easy to forget those hidden HTML attributes when you’re making updates.

Images

All images should be purely decorative or include meaningful alt text.
First things first: all images need to have an alt-text attribute in their HTML code. You’ll want to have your dev team make sure that all image elements default to including alt=”” as an attribute. If you don’t have that alt attribute in there, screen readers will read out the file name, which is typically unhelpful and unnecessary. To simplify image accessibility, don’t use images to present information – make sure any images you include in your content are purely decorative. If they are decorative and your alt attribute is set to null (i.e. alt=””), you’ll be good to go.

If you have to use an image for informational purposes, you will need to include descriptive alt text (i.e. alt=”Clear and helpful description of this image”). It’s pretty common for Content Management Systems to include an alt text field in the image placement/editor tool.

Screenshot of wordpress alt-text field in use
This is what it looks like adding alt text to an illustration of a corgi in wordpress.

It’s also important to make sure you’re including alt text on images you post to social media. Twitter actually provides an “add description” option when you upload your image – this will be your alt text. If your social media tool doesn’t provide an alt text capability, it’s common to write alt=”Description of the image you’re posting on social media” at the beginning or end of the text content of the post.

Checkpoint: If you replaced all the images in your content piece with their alt text, would you be missing any important information?

When you’re writing alt text, the key is to describe what you want your audience to get out of the image rather than a simple description of what the image is. If your image is a graph showing the use of the phrase “Who you gonna call?” in popular media over time, simply calling it “Graph showing the use of the phrase ‘Who you gonna call?’ in popular media over time,” is not helpful. Good alt text would be, “Graph illustrating an 800% increase in the use of the phrase ‘Who you gonna call?’ in popular media after the release of Ghostbusters on June 7th, 1984.”

Finally, make sure that alt text is part of your regular content review process.

Abbreviations

When you use abbreviations, make sure to write out the whole name first (with the abbreviation in parentheses).
For example, let’s talk about the Web Content Accessibility Guidelines (WCAG). Now that I’ve written it out and shown you the abbreviation in parentheses, I can simply refer to them as WCAG for the rest of this blog post. This is common practice in legal documents, academic papers, and other documents that need to use jargon but can’t assume that everyone knows the jargon or defines it the same way. In some cases, the abbreviation is much more familiar to the general public than the full name, and you can dive straight into using the abbreviation (e.g. NBC, KFC, IRS). If you referred to The Good Place as your favorite National Broadcasting Company (NBC) show, that will probably come across as unnecessarily pedantic.

There is an HTML element for abbreviations, but it’s not always supported by assistive technology, so you’re better off going with the Written Out Name (abbreviation) format.

Checkpoint: Do you define your abbreviations when they are first used? If not, are the abbreviations more widely known than the full name?

Similarly, if you use jargon-y terms in your content, it never hurts to define those terms when you first use them.

Use of Language

Write as simply and clearly as possible.
It can be really difficult to know what constitutes “beginner” content or “basic” knowledge for your audience. Making assumptions about what your audience already knows can be frustrating and alienating for visitors who don’t know those things, and you could unintentionally lose opportunities to broaden your audience. At the same time, it’s impossible to write content that always meets the needs of everyone no matter what their skill set or skill level is. How do you find a balance?

  1. Try to avoid making assumptions about what your audience already knows.
  2. If the content is for a specific audience, define the assumptions you’re making about the audience and what you expect them to know already. Include this information in the content itself. (E.g. “This piece assumes you are already familiar with this, that, and the other thing.”)
  3. Don’t be afraid to spend time explaining things that might be obvious. If the reader is new to the subject, you’ve educated them. If the reader is not new to the subject, your explanation can indicate how this content aligns with their knowledge/perspective on the subject and helps manage their expectations.
  4. Don’t feel obligated to write out all the helpful background information within every piece of content. Provide links to helpful background materials, definitions, and whatever else you think might be helpful. You can add a short list of helpful resources in the paragraph where you explain the assumptions you’re making about what the audience already knows.

If you need help ensuring your language is clear and concise (shout-out to my fellow former academics), there are tools to help you. I like to use Hemingway. You won’t always be able to follow all of the tool’s suggestions – I’m pretty sure it’s impossible to write content about web accessibility testing at anything less than a 9th-grade reading level – but it definitely gets you thinking about your communication style.

Page Layout

The layout and presentation of your content can really make or break its accessibility and will have a significant impact on how your users engage with your content, regardless of ability level. Are you presenting a well-organized piece of content that’s been broken down into clear, manageable sections or a wall of text? Can your users find a specific piece of information without having to comb through the page or blog post? It all comes down to layout.

Headings and How to Use Them

When we talk about headings, we’re specifically talking about text designated as a heading in HTML. You can have up to six levels of headings in HTML with <h1> as the top-level heading. You can learn more about HTML headings on MDN, but it’s not a requirement. Most content editing tools will provide some kind of style menu that you can use to designate parts of your content as heading 1, 2, 3, etc. or as paragraph text.

  1. Headings give your content structure and help users identify what kind of information is contained within each section of content and  serve three purposes for accessibility:
  2. Navigation points
  3. Labeling sections of content
  4. Describing the structure of the page content

Headings as Navigation

Use headings to organize your content sections.
Headings serve as landmarks for your users and help them understand how different pieces of information relate to each other. Sections that start with level 3 headings probably provide information in support of the information provided in the previous level 2 heading, and so on. Screen readers can navigate by jumping from heading to heading. If headings are used correctly, this is a great way for them to get a basic outline of your content and make it much easier for them to find the information they’re looking for.

Screenshot of NVDA speech viewer reading headings of this blog post
Here you can see a screen reader printing out the heading structure of this post, allowing users to quickly skip to relevant subsections of the page. Note: you don’t have a use a screen reader to see your heading structure – it’s just an easy visualization for the blog post.

It’s not unusual for people to use headings as a way to simply change the font-weight, color, etc.  – for example, maybe they want some word or list item to be bold and in a serif font, they notice their “Heading 4” style fits the bill, and proceed to apply the “Heading 4” styling to this item. Do not use headings as a way to arbitrarily style your text. When you apply that “Heading 4” style, you’re adding an <h4> heading tag to that item, and when a screen reader user decides to navigate the page by jumping from heading to heading, that item will be read out as a heading and the user won’t know why.

On the flip side, if you want a piece of text to serve as a genuine heading, make sure you are applying the appropriate heading level with your drop-down style menu (or add the appropriate HTML heading tag in the text view).

Headings as Section Labels

Make sure heading text describes each section succinctly while still being descriptive.
Your headings should help users identify what kind of information they can expect to get from each section of content. If the text you are identifying as a heading isn’t immediately followed by information or subheadings supporting that text, it probably shouldn’t be a heading.

Other things that should not be headings are taglines, block quotes, or single items of information (like your account balance in a monthly banking statement). These are not section labels.

Headings as Structure

Respect the heading hierarchy.
There is an order to heading levels – make sure you follow the nesting order (i.e. h2’s go inside h1’s, h3’s go inside h2’s, etc.). You should also avoid skipping levels. Explaining these rules in detail can get confusing pretty quickly. If you’re unclear on what “skipping levels” means, take a minute to look at that MDN page on headings. It should clear things up.

A last note on headings: there should only be one 1st-level (<h1>) heading on a page. Your <h1> should mark the start of the page’s main content, and it should act as the visible title of the content.

Page Titles

A page title should uniquely identify the page on the website.
Ideally, page titles follow this format: page label – section or flow label (optional) – site identifier. For example, a page title for this blog post could be “Accessibility Strategies for Your Content Team – Deque Systems” or “Accessibility Strategies for Your Content Team – Page Layout – Deque Systems”.

If you’re using a CMS like WordPress, it should let you specify a page title manually or create a page title automatically from the title heading (the h1 heading at the start of the main content) combined with the section and website identifier.

PDFs

Make sure your PDFs are accessible. Unfortunately, PDF accessibility techniques are a much bigger topic than we can tackle here. If you want to know how to make accessible PDFs, here are some resources:

  1. Requirements for an Accessible PDF: Part 1 by Denis Boudreau (links to parts 2-4 are included in the piece)
  2. PDF Accessibility – Deque University (online course)

But before you jump into making your PDF, ask yourself if that content really needs to be a PDF. More often than not, it would work just as well as a web page. If you’re trying to get people to share content information by offering them downloadable content, see if you can build pages behind a login or generate unique access URLs. If you think it’s the kind of content piece people would really want to be able to download, offer an accessible PDF in addition to the accessible web page.

Videos

ABC – Always. Be. Captioning. Apart from being a good accessibility practice, it is also a good marketing practice. People are much more likely to stop and watch video content on Facebook and other social media feeds if there are captions.

It’s also a good idea to provide a transcript of your video and audio content. Most captioning services will include a transcript file as well as the captions, so it won’t cost you anything extra.  The transcript is helpful to people who can’t consume the video/audio content for whatever reason, and now you’ve got all this nice crawlable content for the search-bots.

Accessibility Beyond the Web Page

In addition to what we’ve already discussed, content creators have these important roles to play in their organization’s accessibility:

Acting as QA

Content Creators are often the first people to find broken components, dead links, typos, and other website issues. They are also usually the first people to hear user complaints on social media or submitted through a contact form. Take ownership of these issues and complaints. If you can’t fix them yourself, make sure they make it to someone who can and follow-up with them.

3rd-Party Tools

Most content creators have a variety of tools they use to build web content. They’ll have their CMS for web content, a CMS for marketing tools like landing pages and lead nurturing, social media tools, maybe a chatbot, and so on. When you go shopping for your content tools, make sure you ask vendors about accessibility. Make sure they know it factors into your decision-making process. You may not get to decide what your organization ends up buying or have to move forward with an inaccessible product, but don’t go quietly. Keep asking and letting your vendors know that accessibility needs to be a priority.

Summary

As content creators, we are the stewards of our organization’s public face. We are responsible for the first impressions our users come away with. We may have limited control over our site’s accessibility, but the impact we can have on accessibility is significant.

update selasa

Comments 4 responses

  1. “In some cases, the abbreviation is much more familiar to the general public than the full name, and you can dive straight into using the abbreviation (e.g. NBC, KFC, IRS).”

    Keep in mind that these abbreviations are not equally familiar all over the world. E.g. there are no KFC where I live.

  2. In the example above, the alt tag description starts off “Illustration of…” we had been avoiding that verbiage because we were told screen readers introduce all as “Image: ” So you’d have “Image: Illustration of…” “Image: Picture of…” “Image: Image of…”.

    Should we be describing what type of ‘art’ it is (illustration, 3d model, photograph?) or is it more important to just describe what the art is depicting… “Image: A winking corgi” in this instance.

    Thanks for any clarity you can give.

  3. Hi Jeana – We try to add “Illustration of…” or “Picture of..” when we think that information provides meaning or context. We often think that the impression one can get from knowing that something is animated vs. real-life photography vs. a screenshot is worthy context to include. You’ll certainly find other opinions in this arena so don’t take ours verbatim please 🙂

  4. Abbreviations and acronyms may also be supported by <abbr title= , it's easy to do.

    Using parentheses to explode out complete spelling of abbreviations and acronyms is fine by me too.

    Acronym tag <acronym is deprecated.

    Definition is perhaps suitable in some cases too – <dfn .

Leave a Reply

Your email address will not be published. Required fields are marked *