Skip to Main Content
Perspectives
Digital Transformation

Accessibility Best Practices for Content Editors

Make sure to always follow these content-specific recommendations to ensure a pleasant browsing experience for all your visitors.

Accessibility Best Practices for Content Editors

Make sure to always follow these content-specific recommendations to ensure a pleasant browsing experience for all your visitors.

What’s the first thing that comes to mind when you hear the phrase “accessibility best practices?” You might think of things like color contrast, text size, and other key elements of experience design – and you wouldn’t be wrong. However, from a content writing perspective, there are many additional factors to consider if you want to create a truly accessible experience.

Make sure to follow these content-specific recommendations to ensure a pleasant browsing experience for all your visitors.

Headings

Use meaningful heading structure

Headings are intended to describe the content that follows in a concise way. They act as a table of contents for your page and outline the major sections, sub-sections, and so on. Headings are helpful for all users to understand how content is divided and relates to each other.

A level-one heading <h1> should indicate the content’s main title.

The heading level 1 <h1> of each page should reflect the title of the main page content. Include only one h1 on the page.

Use heading levels 2 through 6 for sections of a page.

Heading levels 2 through 6 label major sections of content.

Example of logical heading order:

1<h1>Page Title</h1>
2<h2>Section Title</h2>
3<p>Information pertaining to section title</p>
4<h2>Section Title</h2>
5<h3>Sub section title</h3>
6<p>Information pertaining to sub section title</p>

Don’t use a heading for its style alone

Headings convey semantic information telling the user the heading contains content, and where the content falls in the page table of contents. If a heading element is used only for its font size, color, spacing, etc.—and not because it’s a true section—that creates a confusing page outline.

Do not skip heading levels

Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.

Avoid using empty heading tags.

If you have an empty heading, a screen reader will alert the user that a heading is present, but it will not read out any text because there is none available to read.

Empty Headings are commonly added accidentally

  • When a content manager presses the enter key from within a heading, accidentally adding a second tag right after the first one.
  • When a heading’s text is selected and deleted but the entire heading is not removed.
  • A content manager might intentionally add an empty heading because they’re trying to insert a larger space between other elements.

Images

Do not use images of text

Use text is used to convey information rather than images of text. Your content will respond better to users increasing the font size in their browser or zooming in on the content, without losing readability. Font styles can be customized by the user for their needs. It will be easier for search engines to discover your content, improving your SEO.

This decision tree describes how to use the alt attribute of the <img> element in various situations.

Alt Text Best Practices

Decorative Images

Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.

In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers.

Length of the text alternative

Keep alt text short. If anything more than a short phrase or sentence is needed, it would be better to use one of the long description methods discussed in complex images.

Superfluous information in the text alternative

Usually, there’s no need to include words like “image”, “icon”, or “picture” in the alt text. People who can see will know this already, and screen readers announce the presence of an image.

Alt text on images

Ensure alternative text conveys the content and function of the image. It should be succinct, accurate, and useful. A good rule of thumb to consider is to include what you might relay over the phone.

An alternative description can also provide the image’s context in case it fails to load.

Not all users can visually tell a new window or tab is opened, or they simply want to stay in the same browser tab or window.

The user should be able to decide where a page opens using their preferences.

Provide descriptive link text

The purpose of each link must be able to be determined from the link text alone, or from the link text and the context. Context = same sentence, paragraph, list item, or table cell as the link, or in the table header cell for a link in a data table.

Link text patterns to avoid

  • “Click here”/”here”
  • “Click the link below/above/etc.”
  • “Click the button”
  • “Read more/learn more”
  • “Link to [destination]
  • Using the full URL

Link text patterns to follow

A link contains text that gives a description of the information at that URI

A page contains the sentence “There was much bloodshed during the Medieval period of history.” Where “Medieval period of history” is a link.

A link is preceded by a text description of the information at that URI

A page contains the sentence “Learn more about the Government of Ireland’s Commission on Electronic Voting at Go Vote!” where “Go Vote!” is a link.

Both an icon and text are included in the same link

An icon of a voting machine and the text “Government of Ireland’s Commission of Electronic Voting” are combined to make a single link. The alt text for the icon is null, since the purpose of the link is already described by the text of the link next to the icon.

A list of book titles

A list of books is available in three formats: HTML, PDF, and mp3 (a recording of a person reading the book). To avoid hearing the title of each book three times (once for each format), the first link for each book is the title of the book, the second link says “PDF” and the third says, “mp3.”

News article summaries

A Web page contains a collection of news articles. The main page lists the first few sentences of each article, followed by a “Read more” link. A screen reader command to read the current paragraph provides the context to interpret the purpose of the link.

This ensures that all sighted users can adequately distinguish the link from the text regardless of their ability to see color.

It can be helpful to users to know when a link will open a file or lead to a destination in a non-web format, such as a PDF document, or Word document, etc. Including a text indication (e.g. “PDF document”) or an icon with equivalent alt text are two of the most common ways to indicate this. Ensure the indication is available to both sighted users and screen reader users.

When the content includes links for downloading files, the following information should be included in the link text:

  • Document title.
  • Document type.
  • Size of document.
  • Document language (if it is different from the main page language).

For example, if the link “Toronto travel guide” lead to a PDF file weighing 346 kb, the link text can be optimized to show “Toronto travel guide (PDF, 346 kb)”.

Standalone links that open a new window should give advance notice

This can be achieved via text, such as “(opens in a new window)”, or by using an icon, placed at the end of the link text and given an equivalent alt attribute for screen reader users. Example: alt="opens in a new window."

Exception: A page consisting of a list of external links. In this case, a clear heading designating it as a page of links should be sufficient to minimize cognitive confusion for users, avoiding the need for additional labelling.

Readability

Use plain/clear language

When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available.

Semantics and Structure

Mark up text semantically

Text that needs emphasis or special formatting should be done in the semantic way, especially if the formatting contains meaning. This includes bolding, italicizing, and insertions or deletions.

Emphasizing Text Semantically Best Practices

  • Avoid underlines for emphasis. Underlines are typically reserved for identifying links within text. It can be confusing to think something is clickable when it’s really not.
  • Use bold or italics for visual emphasis.

Tables

Tables for Layout

Tables should not be used for layout purposes. Use Cascading Style Sheets (CSS) for layout.

A table in HTML makes a lot of sense when you want to organize data that would look best in a spreadsheet. An HTML table is a great way to display things such as financial data, calendars, pricing, feature comparison, the nutrition facts information panel, bowling scores, and many other tabular data.

Add header cells

Headers tell users which cells in a table are categories certain data, rather than being data itself. This makes it easier to understand table content semantically, especially if using assistive technology to navigate a table.

Table Header Best Practices

  • Table headers are designated with a table header element (<th>).
  • Use scopes to indicate whether the header is a column header or row header.
    • If a column header, the scope is “col” (<th scope="col">)
    • If a row header, the scope is “row” (<th scope="row">)
  • Empty cells in the header row should be marked as a data cell <td> instead of <th>.

Multimedia

Provide users with a way to pause/stop/hide autoplay animation

Content that autoplays can be distracting for site visitors with attention-related disabilities or vestibular disorders, which may prevent the visitor from being able to use the rest of the page.

People that use screen readers may also experience autoplay while trying to listen to their screen reader audio—this makes it difficult to navigate a page, if not impossible.

Unless the media content is essential for presenting the content, do not have media autoplay by default.

Provide audio descriptions for time-based media

Audio descriptions allow people with visual impairment to hear what’s happening or displayed on the screen that they can’t see.

Audio descriptions are an additional audio file that can be played over a video to describe the visual content in order to progress with the narrative.

What is time-based media?

Put broadly, time-based media is anything that’s embedded on a website that: moves, makes noise, displays content synchronized with another element of the site, or displays content that changes without user input.

Content is considered time-based media if it’s:

  • Audio-only
  • Video-only
  • A combination audio/video
  • Audio and or video combined with an interaction.

Provide captions for synchronized media and live events

Captioning makes video and live events more inclusive for people who are deaf and/or have hearing deficiencies. It also helps users understand content if the surrounding environment makes the video hard to understand (like a noisy restaurant or concert), and can aid in learning by letting users follow the captions as they watch video.

Not sure if your media or event needs captions?

Use the Captioning Decision Tree to learn when captions are needed, and to request captioning services.

Provide transcripts for audio/video-only content

Transcripts are helpful for a variety of users. Users that are deaf-blind, or learn best by reading text-based content can access media through a transcript. For audio only content like podcasts, transcripts make it accessible for deaf/hard-of-hearing users or users with hearing loss.

Transcript Best Practices

  • Include or link to the transcript near the video
  • Include speaker identifiers when introducing new speakers or when the speaker changes

A text equivalent is not required for audio that is provided as an equivalent for video with no audio information. For example, it is not required to caption video description that is provided as an alternative to a silent movie.

User Interface

Don’t use color alone to convey information

Users that are completely blind, have low vision or have a color vision deficiency will have trouble perceiving content if only color is used to indicate differences. The content should also use patterns to distinguish content as needed, or use meaningful semantics to describe information, rather than relying on color alone.

Use of Color Best Practices

  • If color is needed to convey meaning, ensure there is a text alternative for that meaning as well.
  • Non-text elements need a 3:1 color contrast ratio with the background, and/or with surrounding non-text elements.

Ensure text and interactive elements have enough color contrast

Text and interactive elements need to have high contrast so that your content is readable to all users. High contrast especially benefits site visitors that may have low vision, color blindness, or are aging. It can also help mobile users still see content even if the screen is being affected by sun glare.

Color Contrast

  • The minimum contrast ratio allowed for smaller text is 4.5:1.
  • For 14 point (~19px) bold text or 18pt (24 pixels) standard text, the minimum ratio is 3:1. Important graphical icons, and user interface controls like radio buttons and checkboxes, must also meet the 3:1 contrast ratio.

References

Other Relevant Articles

Read more posts about Digital Transformation

Let's make an impact

Share a little bit about what you’re building and an expert on our end will reach out to start a conversation.

Let's Talk