Website Accessibility Rules
Accessibility is an important consideration when creating a website. Although ExpressionEngine takes care of many accessibility tasks for you, there are still a few that need your attention. These are listed below, along with numbered instructions for obeying each rule within ExpressionEngine.
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]”).
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.
The documents that you link to 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)
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.
- Highlight the text of your heading
- Click on the first dropdown menu in the editor window
- Select the appropriate heading style
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.
- Highlight an image and click the image button
- Type the alternative text in the box marked "Screen tip" (this box is called "Image Description" in newer editors)
- Click "Apply" ("Update" in newer editors)
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:
- Highlight text written in a foreign language
- Click on the "HTML" button (or the "Source" tab in older editors)
- 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)
- At the end of the text, type: </span>
- Example: <span lang="es">se habla español</span>
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:
- 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.
- If possible, use the title of the page you are linking to as the link text, provided the page title is descriptive enough.
- When linking to a document, use the title of the document as the link text.
- 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.
Keywords and Description metadata must be filled in. These are used for search engine optimization.
- Open a page entry for editing in ExpressionEngine and click on the "Metadata" tab
- Type a comma-separated list of keywords into the box labeled “SEO Meta Keywords”
- Type a short, one sentence description of the page into the box labeled “SEO Meta Description”
- Click "Save Revision" or "Submit" to save your changes
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.
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.
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.
- Click on the border of a table and click the tables button (in older editors, choose "Table Properties" from the table menu).
- To add a caption, click the "Options" tab ("Advanced" in newer editors) and fill in the box marked "Caption".
- To specify heading cells in the old editor, click the "Cell" tab and choose "Column heading" or "Row heading" from the "Cell type" dropdown. Then, use the arrow buttons marked "Previous Cell" and "Next Cell" to change the highlighted cell to the next cell that needs to be changed, repeating until all cells have been changed. When finished, click "Apply".
- To specify heading cells in the new editor, click one of the cells that needs to be changed to a heading cell, then click the dropdown arrow next to the table button and choose "Table Cell Properties". Change the "Cell Type" to "Header" and then use the bottom dropdown menu to "Update all cells in row" or "Update all cells in column" if desired. When finished, click "Update".
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.
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.
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.