Back to top

Web Accessibility Tips for Content Editors

It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities. As a state university, we are required by law to be ADA compliant. Many aspects of making sure our websites are accessible to people with disabilities are taken care of at the development stage, but content editors have a great responsibility to make sure that any type of content they add is accessible.

I have pulled together some tips for content editors from https://www.w3.org/WAI/eval/preliminary that will help you create accessible content. Search engines work the same way screen readers do so making sure content is accessible is also good for SEO. If you have any questions, please content Beth Armour at barmour@cns.umass.edu

Page Title

Page titles are shown in the window title bar in most browsers and in browsers’ tabs when there are multiple web pages open. It is one of the first things screen readers say when a user goes to a new page. They are also shown in search engine results and used for bookmarking pages in browsers.

When creating a new webpage, make sure your page title adequately describes the content of the page so that someone using a screen reader will know they have landed on the correct page and that they can orient themselves when moving between pages.

The page title on any CAFE related websites will automatically append the Page Title shown in the browser window title bar with the subsection as well as “UMass Amherst Center for Agriculture, Food and the Environment”.

Image text alternatives (“alt text”) (pictures, illustrations, charts, etc.)

Any image on your website which shows useful information must have appropriate alternative text which describes the image. Text alternatives are used by anyone who does not see the image, such as people who are blind who use screen readers or people who have images turned off.

The text should be functional and provide an equivalent user experience for someone who cannot see the image. Alternative text depends on the context.  Images that are functional need alt text that is the functional equivalent. For instance, the text alternative for an image for a search button would be “search”, not “magnifying glass”.

If the image has complex information — such as charts or graphs — the image should have a short alt text to identify the image, and then the detailed description of the information should be provided elsewhere (for example, in a data table).

Introductory phrases like “An image of…” or “Graphic:…” are not necessary. Screen reader software specify that it is a graphic before reading the alt attribute. The same is true for images that are links. This does not have to be mentioned in their alt content either.

If an image is not important for understanding the content and is just decoration, it does not need alternative text, but it should have null alt (alt=””).

Links

Make sure that links provide context for meaning and that the link text is unique when it leads to a new resource. "Learn more" or "read more" links don't provide enough description of where the link will go and a bunch of “read more” links produce a long series of links with the same text and different destinations, making those links useless. In order for these links to make sense, users have to read the surrounding text to put the link into context. For someone navigating the site using a screen reader, this adds an extra burden. Screen readers have the ability to pull out just the links within content and easy-to-understand links make the page more scannable because they provide both information about what is on the page and an idea of where to go next.

Headings

Heading levels should have a meaningful hierarchy, e.g.:

Heading Level 1 <h1>

Heading Level 2 <h2>

Heading Level 3 <h3>
Heading Level 3 <h3>

Heading Level 2 <h2>

Heading Level 3 <h3>

Heading Level 4 <h4>
Heading Level 4 <h4>

Heading Level 2 <h2>

The page title is always a Heading Level 1 and there should only be one Heading Level 1 per page. Any heading within the content area should start with Heading Level 2.

Screen readers can scan a page by just the headings to get an overview of the page content so the heading hierarchy needs to be meaningful.

Moving, Flashing, or Blinking Content

Users need to be able to control moving content, especially some people with attention deficit disorder or visual processing disorders. This includes slide carousels, videos, auto-updating content. Don’t have a video or slideshow automatically start upon page load. Allow the user to control when and what to play.

Multimedia (video, audio) alternatives

(Captions are known as "subtitles" in some areas.)

Most video on the web that provides captions has "closed captions" that can be turned on and off. ("Open captions" are always shown.) For example, in YouTube, you turn on captions with the CC button.

Automatic captions are not sufficient for accessibility because they are not accurate enough. For example, in YouTube, if only "automatic captions" are listed, there are no sufficient captions and the video is not accessible. Captions in the specific language need to be listed.

Closed Captioning Resources:

One company that makes closed captioning is 3Play Media, http://www.3playmedia.com/ which is already a UMass vendor.

How to use the YouTube caption tool - https://www.youtube.com/watch?v=XJGiS83eQLk

UMass resource for closed captioning - http://www.umass.edu/brand/brand-elements/video/video-recording-tips#cc

Transcript

If possible, provide both captions and transcripts.

A transcript for a video needs to provide all the audio and all the visual information, so that a person can get all the content of the video by reading the text.

Transcripts should be easy to find near the audio/video itself and any links to the audio/video.