Accessibility in Practice

Introduction

At UAS, we are committed to making our content accessible to all our users, including persons with disabilities. In the context of website content creation, "design for accessibility" means to design for persons with disabilities. Disabilities may include:

• Vision
• Hearing
• Cognitive
• Situational

In addition to desiring to reach as large an audience as possible with our content, the university has a legal obligation to do so as well. Sections 504 and 508 of the Rehabilitation Act of 1973 (amended in 1986, 1998) prohibits the university from discriminating against persons with disabilities.

This document outlines several methods that CMS managers and users should take in order to make their content as accessible as possible to all our users. Designing for accessibility is good design in general: by following these style guidelines and statutory requirements you are making your content more accessible for all users.

Guidelines

Follow the Website Content Guide

The Website Content Guide contains a comprehensive set of guidelines for structuring content so that it is able to be understood quickly and accurately by site visitors. The guidelines listed on this page are meant to supplement the remainder of the Website Content Guide.

Use the “alt” attribute for images that convey meaning

If using an image to convey any sort of meaning you are required to provide an “alt” attribute which describes the image to the page visitor. If the image is strictly a decoration, use the “This is a decorative image” checkbox.

Use Unique Page Titles / Display Names

Try to identify your page uniquely amongst all the other pages in our site. Example: instead of "FAQ", a more descriptive page display name could be, "Registration FAQ" or similar.

Organize your content semantically

Sub-headings

The “Sub-Headings” section of the “Develop Your Content” page in the Website Content Guide introduces the proper use of heading styles present in the WYSIWYG. Bottom line: use heading styles (“Heading 2”, “Heading 3”, etc.) to establish a hierarchical relationship of the content within the document and not as formatting styles. Think of your document structure as an outline: the different levels of the outline become the different headings of the page.

For example, a page about the “Animals of Southeast Alaska” might be briefly outlined as follows, with their heading level in parentheses:

Bold != Header

Avoid using the bold feature in the WYSIWYG to signify a header. To screen readers, the bold signifies text which is strongly emphasized, but has no meaning outside of that.

Use lists where appropriate

Whenever you have a group of similar items that need to be presented to the reader, use a list. There are two types of lists available: unordered and ordered. Use an unordered list when the order of the list items is not important, like a shopping list. On the other hand, an ordered list works well for lists of things where the position in the list implies a relative value or a sequential set of steps to be taken.

Using Styles (or request styling help)

Rule of thumb when creating content for the web: (relationships between content) > (the styling of the content). Instead of using headers and tables to get the layout and look-and-feel that is appealing to you, focus more on the content and the relationships between sections of your document. For help in making the output look “just right”, request help from the website coordinator to create styling rules for blocks of content.

Accessible Tables

Tables can pose unique challenges for screen readers. Some tips:

• Never use tables as a layout tool. Tables are for tabular data only; for positioning content around on a page see a CMS administrator for assistance.
• Avoid large complex tables with multiple sections within the same table; these are frequently inaccessible.
• Use the WYSIWYG table editing functionality within the CMS to set headers for rows and columns; this will ensure screen reader viewers can get proper context for each table cell.

Avoid “Click Here”

With the rise of touch devices and screen reader browsers, not everyone’s clicking. In addition, links entitled “click here” don’t provide users who use screen readers who are cycling through links on a page with much information about what to expect about that particular link. Instead, rearrange the sentence to make a link out of the _thing_ that a user should expect to see when they click on the link. For instance, instead of, “click here to see a schedule of upcoming events”, try, “a schedule of upcoming events is published on our website”.

In some uncommon circumstances that a link doesn’t have descriptive link text associated with it, use the “title” attribute to specify what a user can expect upon following that link.

Using color

Not all visitors see colors in the same way. Best practice dictates that you should use color to supplement the meaning of content, but it’s not be relied upon solely. Think of two blocks of text, one positioned in a tinted red box to signify an error and the other block appearing in a box tinted green to signify success. In addition to the color of the boxes not being “read” to screen readers, some users may not be able to perceive the difference between the two boxes. While color is a useful tool to the content creator, make sure that there are other cues as to the meaning of the content other than color.

Provide textual alternatives for “time-based media”

Certain media content requires text alternatives in order to be accessible. For instance:

• Videos: in addition to providing closed captions, providing a text-based document that provides the same content is recommended
• Audio: similar to video, any audio content should have a text-based alternative for persons with hearing disabilities

Provide alternative text for images

• Images which are on a page to convey information or meaning need to have alternative text assigned to the image using the CMS. If an image is strictly decorational then be sure to select “This is a decorative image” when including the image.
• Images with text: how often have you seen a web page for an event with an image of a poster as the sole content? How would someone with a vision disability be able to view your content? Ideally, a CMS user should separate the text and the image content into separate sections. If this isn’t possible, be sure to include alternative content to the user side by side.