Editorial Phase

Perceivable

1.1 Non-text content

Important Images have a text alternative.

Information conveyed by an image should have a text alternative in case the image cannot be viewed. This is a basic concept, but there is an art (and a level of subjective decision making) to writing appropriately descriptive text to replace an image.

How to do it

Every image needs an alt attribute that contains the associated text. Depending on the situation or type of image, the intent of the text will vary.

Informative Images

Informative images contain information that is not represented elsewhere. Alternative text for these images should relay a description of the meaning of the image. So for an image of a dog might you could write: alt="Dog with a bell attached to its collar.", but if that dog represents obedience within a system, then you might write: alt="Dog sitting outside a store, representing obedience.".

It is worth noting that screen readers do not read the same way we as humans read, with context and nuance. They will read the literal phonics that the words and letters represents. For example, abbreviations and acronyms are read as words (alt="USA" will be read as "oosa"), so in this case it is important to write out the abbreviation with spaces (alt="U S A").

More complex examples of informative images include:

• Images as buttons - The text of the link should be conveyed through the alternate text: alt="Submit".
• Images of text - The text of the image should be relayed in full through the alternate text: alt="Join Our Mailing List".
• Complex images (such as charts) - An alt tag will never replace the complexities of a complex image or chart, but we can provide alternate sources; in the example of a chart, we can provide a text description of what the chart holds, and then provide a table (with proper captions and header rows) near the chart to relay the actual data. Or, the text description of the chart can be linked to a separate page: alt="See http://www.site.com/graph for the full text."
• Collective images (such as star ratings) - If images are meant to be viewed as a group, assign the alt tag to one image and leave the others blank. Or, you can leave the entire set of image blank and bake the rating text into the code itself, so the alternate text is only seen when the set of rating mechanism images are gone/hidden.

Decorative Images

Decorative images are images that do not provide content or context to the page - instead, they are (obviously) purely decorative. These include spacers, icons, background tiles, and CAPTCHA images.

An empty alt attribute alt="" will signal an image can be ignored by a screen reader. If there is no alt attribute, the image file name is read, which is typically a unintended and poor exerience.

The decision whether or not an image is decorative can be a frustrating one to make. What classifies an image as decorative? Does a hero image count as decorative, especially if the image is meant to do nothing more than provide visual stimulus for a call to action? What about a promo area that features a title, a related but not defined image, and a text with link? The image may actually distract from the user in this example.

When determining whether or not an image should be considered decorative, ask this question: Will inclusion of this image strengthen or provide clarity to the task, or will it add clutter and confusion?

Thankfully, there's help: W3C has created an Alt Decision Tree to help these decisions along.

Redundant Alternative Text

Wait, what do we mean by "redudant?" Simply, that an image is already described (via a caption) within the same area, or that a title is assigned within the same content chunk, such as a name next to a headshot on a directory page.

How not to do it

While following accessibilty requirments will totally and completely improve site searchability and crawling from external search engines, accessibility itself is not an SEO hack. You do not want to use alt text as an opportunity to sutff keywords into the page. That creates a terrible experience for anyone relying on the alt text to describe the page content.

Alternate text in development

Not all alt tags are necessarily editable within the content model - there are addtional situations where alt attributes are part of the CMS itself:

• Design elements, such as image spacers and background images
• Navigation elements such as a search icon or graphical buttons
• Site logo, though more and more CMSs are allowing editing of the site logo, especially packaged solutions like Squarespace

Critical Form inputs have properly associated text labels.

Labeled form fields mean a screen reader can explain what information should be entered in each form element.

How to do it

Labels should be brief and descriptive of the information being requested. If the field is required, that should be noted in the label as well. For example:

Checkboxes or radio buttons should have a legend to help describe them. Note that a single checkbox, or simple checkboxes that makes sense from their lables alone do not require this extra description.

1.2 Audio and video

Critical Text transcript is included for all prerecorded audio or video.

Audio-only and video-only content needs to be supported by text transcripts that convey the same information as the media.

How to do it

• Write text transcripts for any audio-only media.
• Write text transcripts for any video-only media.
• Record an audio-track for any video-only media.
• Place the text transcript, or link to it, close to the media.

Important Synchronized captions are provided for non-live video.

Add closed captioning to all videos with sound.

How to do it

There are companies that provide this service.

YouTube offers guidlines for adding subtitles an closed captions on their platform.

Supplimental description for video with sound.

Provide more information than the regular soundtrack offers. This includes movements that are not audibly explained in the video, or adding context to visual information.

How to do it

Provide a full text transcript of the video.

Critical Level AA Synchronized captions are provided for live video.

Adding captions to live videos helps people access live streaming content.

How to do it

Use a content management system that allows captions to be added live and probably a professional subtitler to do it for you.

Level AA Supplimental descriptive audio for video with sound.

An audio description is an edited version of a video’s soundtrack that adds more information than the regular soundtrack offers. This might mean narrating movements that are not audibly explained in the video, or adding context to visual information.

How to do it

Provide a version of the video with an audio description.

1.3 Page structure

Important Headings, lists, and special text are used appropriately.

Headings and other tags provide information about what content is available, and which piece is most important on the page. This information allows people using assistive technologies to “see” an overview of the page and jump quickly to the section that is relevant to them.

How to do it

Use heading tags to create an outline structure for the main content on the page. The page title is an <h1>, so technically, any top level sections of the page should start with <h2> headings and proceed down in heading order as needed.

Use lists or special text to help describe the type of content being presented. For example: <strong> semantically means important, while <b> just means visually bold, not necessarily more important.

Operable

2.3 Don’t cause seizures

No page content flashes more than 3 times per second.

Flashing content within a certain range has the potential to cause seizures for some people, and is distracting for everyone else.

How to do it

Avoid adding animated GIFs or other video or animation elements that flicker too fast, especially anything red. For more information, review this definition of general flash and red flash thresholds.

2.4 Navigation

Each page has a descriptive title.

A good web page title tells users what the page is about without needing to read more. This lets users quickly understand if they are on the right page.

How to do it

A common page title structure is: ‘Page name – Page description – Website name’. Typically this structure can be managed through the CMS, but the individual page titles still need to be well written.

Link text and context indicates the purpose of the links.

Make links clear and easy to understand so the user knows what to expect before they click.

How to do it

Here are some ways a link can pass this test:

• The text within the link descriptive enough on it’s own.
• The purpose of the link is clear from the surrounding content.
• If the link is an image, the alt text of the image makes the link purpose clear

Note - To avoid confusion, only links with the same destination should have the same description.

Understandable

3.1 Languages

Level AA The language of page content that is in a different language is identified using the lang attribute.

How to do it

<blockquote lang="es">
   Hola Mundo!
</blockquote>

Level AAA Unusual words, abbreviations, and idioms are defined or avoided.

Largely, content should be written in a way that refrains from using unusual or over-technical terms, and should especially refrain from using idioms, which are largely untranslatable.

How this is done is ultimately a question of editorial judgement, and should rely on audience testing for final decision making. For example, a main site audience that is used to an industry's technical terms may be perfectly fine with more complicated content.

How to do it

Rewrite content to remove unusual word or phrases. PlainLanguage.gov gives the following examples of terms that can be simplified by using more simple language:

Abbreviations should be defined, if possible, in the first occurance on every page. This follows basic journalistic standards, making it both good for accessibility and good for writing in general.

If unusual words are unable to be avoided, you can:

• Create a glossary or description list to which unusual words can be linked.
• Create an inline definition using the dfn tag.
• Use an external source, such as an online dictionary, as a link from unknown words.

Level AAA Content should be understandable by the highest percentage of people possible.

Content, whenever possible, should be understandable by someone with no more than a lower secondary education level's worth of language skills. In the event that something requires a higher level of skill, a supplemental summary or less advanced option should be available for general understanding.

How to do it

The best resource for creating better and more universally comprehendable content is through PlainLanguage.gov, who provides not just resources and checklists, but before-and-after examples.

Beyond this, content can be simplified by:

• Run page content through a reading level test, such as Flesch-Kincaid or XKCD's Simple Writer, to confirm reading level, and then make adjustments accordingly.
• Provide visual illustrations, icons, pictures, or symbols of difficult text concepts.
• Provide text summaries that can be understood by those with a lower secondary education level reading ability.

3.3 Forms and error handling

Required form elements or specific format requirements are noted in the element’s label.

Provide clear error messages that explain what is wrong with a specific field.

How to do it

• If a form requires input in a certain format, show and describe the required format.
• Don’t ask for too much information, just what you need.
• Be specific. Use clear, concise instruction and form field labels.
• Provide contact details on all pages (the footer is fine).

Important Sufficient labels, cues, and instructions for required interactive elements are provided.

Clear labels and instructions mean users will know what to do.

How to do it

• Where a field needs a specific format, give an example (For example, for a ‘date’ field in a form you might use ‘Enter the date as dd/mm/yyyy’)
• Keep labels simple. (ex: ‘First name’, ‘Email’ , ‘Your message’)
• Keep instructions simple. (ex: ‘Required fields are in red and have a * symbol’, ‘Fill in this form and click ‘Submit’ to get in touch’)

Level AA If an input error is detected, provide suggestions for fixing the input.

This guideline adds the requirement to make suggestions on how to fix form errors.

How to do it

• If the error is in the format of the input, the suggestion shows the correct format (for example, ‘The date must be in the form DD/MM/YYYY’).
• If the error is because the input needed to be from a limited list of values, provide these values and explain them.

Robust

4.1 Maximize compatibility

Formatted text has correct tags

When writing content for the web, all HTML tags need to be implemented correctly with complete start and end tags.

How To Do It

This is largely a structural template issue, but there will be rare times when an editor needs to manually add a <strong> or <em> tag around some chunk of content. This rule simply states to double check that all tags are closed properly.

To test this, you can use any number of web validation sites, including the W3C’s own Markup Validation Service.