College of Agriculture & Natural Resources Web Team

Accessibility Rules

It is important to become familiar with digital accessibility when creating a website. Although dotCMS takes care of many accessibility considerations for you, there are still a few that need your attention. Click the tabs above to learn about these rules.

To learn more about MSU's Accessibility Policy and what types of training or other resources are available, visit https://webaccess.msu.edu/.

Color

Some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color. In order to avoid this, check that any information conveyed by color is also available in text. For example, ensure that charts do not use only color as a key, and that links are distinguishable by something other than their color (for example, via an underline).

Documents

The documents linked on a website must also be formatted to be accessible. This is a function of the file editor used to create the document. Some general guidelines include:

• Create well-formed documents (include paragraph headings and other structural elements)
• Use meaningful link text if there are links in the document (see Link Text, below)
• Use alternative text for images, charts and graphs, and table headers
• Keep a strong contrast between text and background color (avoid colored text)

For additional information on creating accessible documents, visit https://webaccess.msu.edu/Tutorials/.

Images

Images must have alternative text. It should brief and either describe the image or communicate the same meaning. Alternative text is a substitution for the image when the image cannot be displayed. For example, blind people use screen reading software that reads the alternate text.

1. Highlight an image and click the “Insert/edit image” button
2. Type the alternative text in the box marked "Image Description"
3. Click "Ok"

Seizures

Individuals who have photosensitive seizure disorders can have a seizure triggered by content that flashes at certain frequencies for more than a few flashes. In order to avoid this, your web pages cannot contain any flashing content.

Languages

Both assistive technologies and conventional user agents can render text more accurately if the language of each passage of text is identified. Screen readers can use the pronunciation rules of the language of the text. Visual browsers can display characters and scripts in appropriate ways. To assist with this, languages other than English must be properly labeled in the HTML code. For each section of text in a language other than English:

1. Highlight text written in a foreign language
2. Click on the "Source code" button
3. At the beginning of the text string type: <span lang=""> Between the quotation marks, type the language code.(See http://www.w3schools.com/tags/ref_language_codes.asp for a list of codes)
4. At the end of the text, type: </span>
   • Example: <span lang="es">se habla español</span>

Audio

In an audio-only presentation, information is presented in a variety of ways including dialogue and sounds. In order to present the same information in accessible form, content creators must also link to a transcript that tells the same story and presents the same information as the prerecorded audio-only content. Transcripts should include the speakers' names, all speech content, relevant information about the speech (example: “John: “Go State! [yelled]”), and relevant non-speech audio (example: “[the buzzer sounds and the crowd starts to cheer]”).

Videos

In order to provide accessible video content, all videos must be presented with captions. Captions should not only include dialogue, but identify who is speaking and include non-speech information conveyed through sound, including meaningful sound effects. For a YouTube video, see the Captions and Subtitles page at the YouTube website for assistance.

To provide people who are blind or visually impaired access to visual information, all videos must also be accompanied by an alternate track which provides an audio description. During existing pauses in dialogue, the audio description provides information about actions, characters, scene changes, and on-screen text that are important and are not described or spoken in the main sound track.

Webinars

To provide people who are blind or visually impaired access to real-time broadcasts, all real-time broadcasts must be accompanied by captions created by a real-time captioning service.

Titles

Descriptive titles help users find content, orient themselves within it, and navigate through it. The title can be used to identify the web page without requiring users to read or interpret page content. Users can more quickly identify the content they need when accurate, descriptive titles appear in site maps or lists of search results.

The title of each web page should be as short as possible, identify the subject of the web page, and make sense when read out of context (for example by a screen reader or in a site map or list of search results). It may also be helpful for the title to be unique within the website. Note that most of our websites are automatically programmed to display the site name after the page title, so there is typically no need to include the site name when entering a title.

Headings

Web pages are often divided into a variety of sections. When such sections exist, they need to have headings that introduce them. This clearly indicates the organization of the content, facilitates navigation within the content, and provides mental "handles" that aid in comprehension of the content. Other page elements may complement headings to improve presentation, but visual presentation is not sufficient to identify document sections.

Descriptive headings identify sections of the content in relation both to the web page as a whole and to other sections of the same web page. Authors should put the most important information at the beginning of each heading (for example, a heading in the "Students" section could be "Undergraduate Students"). The main heading should use "Heading 2" while subheadings should use "Heading 3" or smaller, in a properly nested way.

1. Highlight the text of your heading
2. Click on the first dropdown menu on the second row of the editor window
3. Select the appropriate heading style

Link Text

The text in a web link is intended to describe the purpose of the link. When the purpose of a link can be identified from its link text, links can be understood when they are out of context, such as when the user agent provides a list of all the links on a page.

In order to ensure that the purpose of your web links can be identified from their text alone, follow these steps when creating a link:

1. Ensure that the text of each web link is descriptive enough for the purpose of the link to be understandable even in the absence of any surrounding text.
2. If possible, use the title of the page you are linking to as the link text, provided the page title is descriptive enough.
3. When linking to a document, use the title of the document as the link text.
4. If there is more than one link on a website that leads to the same page or file, use identical link text for all such links.

Lists

When a website visually formats items as a list but does not indicate the list relationship, users may have difficulty in navigating the information. An example of such visual formatting is including asterisks in the content at the beginning of each list item or pressing enter after each item to create the appearance of a list. Follow these steps to properly create a list that can be read by assistive technologies:

1. Click on the first line of test in your list, or highlight all of your list items
2. Click the “Bullet list” or “Numbered list” button, as appropriate, to add list styling

Tables

Data tables must have proper captions and heading cells specified. This allows users with screen readers to know the purpose of the table. Captions should describe the type of information stored in the table, while any cell that contains a row or column label should be marked as a heading cell.

1. To add a caption, click on the border of a table and click the “Table” button, then click on "Table Properties". Check the box marked "Caption", then press “Ok”. Fill in the caption area that appears above your table.
2. To specify heading cells, click one of the cells that needs to be changed to a heading cell, then click the “Table” button and choose “Cell” and then "Cell Properties".  Change the "Cell type" to "Header cell”. Alternately, you can use the “Row” or “Column” menus under the “Table” button to change entire rows or columns to header cells.

Shape, Size, and Position

Some content relies on knowledge of the shape or position of objects that are not available from the structure of the content (for example, "round button" or "button to the right"). Some users with disabilities are not able to perceive shape or position due to the nature of the assistive technologies they use. To mitigate this, check that all references in the page that mention the shape, size, or position of an object contain additional information that allows the item to be located and identified without any knowledge of its shape, size, or relative position.