Writing for accessibility

• Why is accessible content important?
• How people with disabilities access the web
• The 9 rules for making content accessible
• Make each page title unique and descriptive.
• Structure your content with hierarchical headings.
• Write purposeful link text.
• Supply meaningful, equivalent text alternatives for all images.
• Caption videos.
• Provide clear instructions.
• Use simple, concise language.
• Make sure PDFs and other downloadable files are accessible.
• Use proper HTML markup for tables.
• Video on creating accessible online content
• How to test
• Relevant W3C WAI document

If you manage content on an ASU website, you may have heard that you are responsible for ensuring the content is accessible. What does that mean?

Creating accessible content means using a few simple rules to allow all people equal access to your website. Often simple changes can improve access to a website for people with:

• vision impairments or blindness
• color blindness or deficiency
• hearing loss or deafness
• impaired mobility
• neurological or cognitive impairments

Moreover, techniques for making a website more accessible for users with disabilities makes it more usable for all users.

To begin making your content accessible, review and follow the 9 rules for creating accessible content. 

Why is accessible content important? 

According to the World Health Organization, about 15% of the world's population has some form of disability. As you create content for your website, remember that a significant portion of your audience may have a learning or physical disability. Another portion of your users may not speak English natively or may be experiencing situational limitations such as:

• technical issues like slow or intermittent internet connections
• environmental constraints such as low-lighting, bright sunlight, loud noise or imposed silence (as in a library)
• short-term disabilities such as a broken arm or eye surgery

 In addition, creating accessible content will also improve SEO for your site.

How people with disabilities access the web

When creating content for the web, it's helpful to keep in mind how people with disabilities access that content:

• Individuals who are blind often use screen readers, a software program that reads textual content out loud. They seldom use a mouse or touchpad, but instead rely on the keyboard.
• People with low vision may use screen magnification software that zooms into parts of a webpage.
• Users with hearing impairments depend on captions and transcripts to access audio.
• People with limited mobility often use technology such as voice-activated or eye-tracking software, head or mouth pointers and other devices.

The 9 rules for creating accessible content

1. Make each page title unique and descriptive.

Provide descriptive, unique page titles. In Webspark (and other content management systems), the page title is used as the document's <title> tag and is displayed above the browser address bar, in tabs, favorites and bookmarks, and by search engines.

As the first thing screen readers read, your page titles should be brief, clear and informative. Particularly for users who can't visually scan the page, page titles should describe the content and distinguish it from other pages to minimize confusion and prevent your users from getting lost on your site.

Back to top

2. Structure your content with descriptive, hierarchical headings.

Headings are about logical structure, not visual effects.

Screen readers can generate browsable lists of headings, providing users who are blind with a mental picture of the structure of a page and helping them find content more quickly. Additionally, automated search and analysis engines use heading information to construct an index of a page's contents. Finally, for sighted users large blocks of text without headings appear dense and daunting, and many will simply skip over them.

    Example of using headings to organize content and make text more approachable.

Correct order of headings

Headings have special meaning on the web, and it's important to get them in the right order. There are six levels of headings in HTML: H1-H6. Every page should have one (and only one) H1.

Section headings (H2-H6) are used to organize content and should be hierarchical--that is, H2 headings are the second most important heading, while H3 headings are children of H2 headings, etc.  Properly nested headings look much like an outline:

Page Title (H1)
Section (H2)
Subsection (H3)
Sub-subsection (H4)
Subsection (H3)
Section (H2)
Subsection (H3)

Because real headings convey meaning:

• don't use bold in place of a heading (it may look like a heading, but it has no meaning)
• don’t skip a level (e.g., don't use an H4 directly after an H2)
• don't use headings based solely on their visual appearance (instead, ask a developer to write a special CSS style for that header)

Headings in CMSs like Drupal and WordPress

Most common CMSs such as Drupal or WordPress provide a WYSIWYG (rich-text) toolbar to make styling elements easier. Highlight the text you want to make into a heading, then choose the heading level from the Paragraph dropdown.

Back to top

3. Write purposeful link text.

Screen readers can generate and read aloud a list of the links found on a page. This is a useful way to navigate, provided the links are descriptive.  For instance, a list of Read more links doesn't adequately describe the links' various destinations. Using the destination page's title or subject matter as the link text is much more informative.

Other tips for writing accessible link text include:

• Use unique text for links with different destinations (two or more Click here links going to different pages is confusing).
• Use the same text for links that go to the same destination page.
• Don't use the link URL (https://webapp4.asu.edu/programs/t5/majorinfo/ASU00/LAMATBS/undergrad/false) as the link text. (Screen reader users find it tedious to have to listen to long URLs read aloud.)
• When linking to files, it's helpful for users to know the file type they're opening or downloading.

Back to top

4. Supply meaningful, equivalent text alternatives for all images.

All images must have an ALT tag. As a content creator, you must provide a text equivalent of images that can substitute for images when they are not available to the user. This alternative text is called an ALT tag.

ALT tags are important, and many people depend on them to describe non-text content. For example, screen readers and other software (such as search engines) can't analyze or read images. In addition, some users with cognitive impairments find text easier to interpret than images, and users with low vision often turn off images and instead depend on alternate text, which scales better than images.

Effective ALT tags can be difficult to write.  As a rule of thumb, ALT text should briefly (less than 125 characters) describe the content and function of the image, while taking the context into account.

Content

Knowing how much description to give about an image can be difficult.  Ask yourself what the image is trying to convey, and explain in as few words as possible, without sacrificing the meaning or intent of the image.

Graphic text

When possible, try not to use images that contain text. Graphic text doesn't scale well for low vision users who must increase the page size, and search engines, screen readers and other assistive devices cannot read text in images. However, sometimes using graphic text is unavoidable.  In these cases your ALT text usually should be the same as the text in the image.

Image	ALT text
	Hayden 50 - Celebrating our past, building our future
	Best Colleges U.S. News Most Innovative 2017

Context

When writing ALT text, context is of the utmost importance.  For instance, consider this photo of Daniel Boone's home. If the surrounding content is an article about famous houses around the nation, it may be enough to identify the house: "Daniel Boone House in Defiance, Missouri."  If the article is about 19th century building techniques, it might be more appropriate to say: "The Georgian style Daniel Boone House in Missouri was built in 1800 from hand-hewn limestone blocks."  Again, if the content is a club newsletter, the event may be of more importance: "Club members visiting the Daniel Boone House."  Let context dictate what you include in ALT text.

Function

Some images not only supply content, but perform a function as well.  In these cases it's usually more important to describe the function of the image than the content.

Image	Function	ALT text
	The function of this image as a link to https://www.asu.edu is more important than its content	ASU homepage
	The function of this image as a link to the next page of content is more important than what it looks like	Next
	The function of this image to inform users that a link opens in a new tab or window is more important than what it looks like	Opens in a new window or tab

Decorative images

Sometimes an image is used for visual effect only.  Decorative images convey no information and/or are used strictly to enhance the visual appearance of a page.  Decorative images still need an ALT tag, but it is left empty (or you can input a single space). Screen readers will recognize this null ALT as a decorative image and skip over it.

You should never remove or leave off ALT tags, even for decorative images.  Screen readers don't know how to interpret an image if it has no ALT tag, and they often read out the full URL path to the image in an attempt to supply the user with some information.

To determine if an image is decorative, ask yourself what information would be lost without the image.  If none, it's decorative.  For instance, all of the images below are decorative:

Image	Explanation
Call us at 480-965-0000.	The stock photo of a woman smiling conveys no information and has no function. It is strictly eye candy.
Text above. Text below.	The horizontal line separates content visually.  It conveys no new information and has no function or meaning beyond appearance.
Don't forget to watch our calendar of events!	The image is used to visually highlight a block of text and has no real meaning beyond appearance.

For more on writing effective ALT text, see the W3C's Images Tutorial.

ALT text using WYSIWYG toolbars

When adding images to a page using a WYSIWYG toolbar, always put something in the ALT field (input a single space for decorative images).

Do not use the TITLE field unless absolutely necessary. The TITLE tag is not recognized by screen readers.  Also, it displays as a tooltip and can confuse and get in the user's way.

Back to top

5. Caption videos.

All video on ASU websites must be captioned.  Video captions are critical for many people--users who are deaf or hard of hearing, non-native speakers, people in noisy (or quiet) environments, individuals with cognitive impairments that make processing auditory information difficult, and others.

UTO Training offers Closed Captions for Video training that gives you options for adding captioning. We recommend YouTube as a quick and easy solution.

YouTube's free auto-generated captions

We strongly recommend that all ASU site owners and content editors host their video (even temporarily) on YouTube. YouTube now uses voice recognition technology to automatically add captions to most videos uploaded to its site.  All ASU affiliates already have an ASU/YouTube account.

1. Sign in to YouTube with your ASUrite.
2. Click the upload link  in the upper right.
3. Select the video on your computer.
4. Click Publish. (See YouTube's upload instructions for more detail.)

An .SRT file that contains the captions will be added to your video.  Because voice recognition software isn't perfect, the captions are sometimes inaccurate and should be reviewed and edited.  A few hours or so after uploading your video, follow these instructions to review and edit the captions in your YouTube Account Manager. 

The following video also explains how to edit captions in YouTube. Click the closed caption icon  on this video to see what captioning looks like.

Once your video has been captioned and edited, you can leave it on YouTube or upload it to other platforms, such as Vimeo. You'll want to download the .SRT file from YouTube and upload it along with your video on your other host.

Back to top

6. Provide clear instructions.

Don't assume users will know what you want them to do on your site.  Provide simple, clear instructions, help tips, and error messages.  Avoid jargon and technical terms.  Describe form input requirements such as date and phone number formats.

Unclear	Clear

Instructions should not rely solely on sensory cues such as color, shape, size, visual location, orientation, or sound.  For instance, red button, round button, or button on the left may confuse users who are blind.  If you use such sensory indicators, also include a label in the directions - click the red submit button, select the round button labeled Add, or use the Close button on the left - and ensure the element referred to is properly labeled.

Back to top

7. Use simple, concise language.

Clear, concise writing takes skill and time, but the benefits to your users are often profound.  Most people don't read closely on the web. Instead, they skim over content, searching for the information they need.  Text that is brief and to the point not only helps these people, but is crucial for users with reading, memory and attention deficit or other cognitive disorders or who speak English as a second language.

Edit your content to make it as understandable and brief as possible:

• Use numbered or bulleted lists, which are easy to scan and comprehend.
• Clarify your text with images or video.
• Avoid ambiguous, obscure or complex words and phrases.
• Cut or condense what 4 Syllables calls wordy writing, repetition, and low-value content - such as welcome messages and introductions that state the obvious or repeat information that appears further down the page.

Back to top

8. Make sure PDFs and other downloadable files are accessible.

Linked (attached or downloadable) documents (such as PDF and Word docs) should be accessible.  Most word processing software can create accessible content if used correctly. For instance, accessible lists and headings are made by using the 'Formatting and Style' options for those elements. See the articles on PDFs and MS Word docs for specific instructions on making these file types accessible.

More information on making files accessible is available from the various software manufacturers:

• Make your Word documents accessible
• Make your [Google] document accessible
• Create and verify PDF accessibility

Back to top

9. Use proper HTML markup for data tables.

Most content creators work with a rich-text (or WYSIWYG) toolbar, and tables are marked up for you.  In Webspark, the toolbar has a number of buttons for working with tables:

When creating a table with column headings in Webspark, remember to highlight the heading cells and click the Table Row Properties button . In Row Type, select Header.

Unfortunately, the rich-text toolbar doesn't create all of the correct markup required. You will need to do one more step to ensure that your table headings are accessible. Click the Disable rich-text link below the body field. You'll see markup that looks something like this:

<table style="width: 278px; height: 122px;"><thead><tr><td>Fruits</td><td>Cheeses</td>
<td>Breads</td></tr></thead><tbody><tr><td>Pears</td><td>Cheddar</td>...

Search the markup for the <thead> tag.  Then between the opening and closing <thead> tags, change all the <td> tags to <th>, like this:

<table style="width: 278px; height: 122px;"><thead><tr><th>Fruits</th><th>Cheeses</th>
<th>Breads</th></tr></thead><tbody><tr><td>Pears</td><td>Cheddar</td>...

Click the Enable rich-text link below the body field to return to rich-text (or WYSIWYG) format.

Proper HTML markup for simple tables with one column header, looks like this:

<table>
  <thead>
    <tr>
      <th>Column Head</th>
      <th>Column Head</th>
      <th>Column Head</th>
    </tr>
  </thead>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>

Back to top

Video on creating accessible online content

Creating accessible content for online courses is very similar to creating accessible content for websites. This video discusses many of the concepts covered here and is a good supplement to the web content guidelines.

Back to top

How to test

See the ASU Web Accessibility Audit tool.

Back to top

Relevant W3C WAI documents

• WCAG 2.1 Guideline 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
• How to Meet WCAG 2.1 Guideline 1.1.1

• WCAG 2.1 Guideline 1.2.2 Captions (Prerecorded): Captions are provided for all prerecorded audiocontent in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
• How to Meet WCAG 2.1 Guideline

• WCAG 2.1 Guideline 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
• How to Meet WCAG 2.1 Guideline 1.3.1

• WCAG 2.1 Guideline 1.3.3 Sensory Characteristics: Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
• How to Meet WCAG 2.1 Guideline 1.3.3

• WCAG 2.1 Guideline 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
• How to Meet WCAG 2.1 Guideline 1.4.1

• WCAG 2.1 Guideline 2.4.2 Page Titled: Web pages have titles that describe topic or purpose.
• How to Meet WCAG 2.1 Guideline 2.4.2

• WCAG 2.1 Guideline 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
• How to Meet WCAG 2.1 Guideline 2.4.4

• WCAG 2.1 Guideline 2.4.6 Headings and Labels: Headings and labels describe topic or purpose.
• How to Meet WCAG 2.1 Guideline 2.4.6

Back to top