901 Accessibility on the web
Why web accessibility?
Web accessibility encompasses people with all different types of disabilities. While web accessibility is the primary focus for people with disabilities, it also benefits people without disabilities.
The key principle of web accessibility is to increases the general usability of the web and lets people with or without disabilities to use websites according to their needs. It allows people with disabilities to do more things themselves, without relying on others.
Web Accessibility also provides financial and technical benefits to organizations.
What does this mean?
- For site managers, site owners, content contributors: all site content should be equally accessible to all website visitors.
- For web developers: websites and applications should be built with accessibility in mind.
- For buyers: products purchased from external vendors should be accessible.
- For users of technology: website users should be able to access the UVU Public web site according to their needs.
UVU accessible web standards
UVU strives to ensure compliance with AA standards according to WCAG 2.0, as recommended by W3C. In order to facilitate these efforts, the following standards have been determined. All UVU websites should strive to meet these standards and may be subject to review.
General
- All pages must have descriptive/information page title. Page titles are edited in the page properties.
- Heading tags, list tags, emphasis tags, etc., should be used appropriately. Heading tags should be used only to identify headings and sub-headings, and should be used in the correct order (for example, do not use H3 without previously using H2 to label a parent section).
- The page must be readable and functional when the text size is doubled. This can be checked by using your browser's zoom functionality.
- HTML/XHTML code must be valid and used properly.
Images
- Background images must be decorative (should not convey information or include text).
- On-page images must have alt attributes, which are descriptive. Learn how to add alt tags to images.
- Images can be used to supplement text, but not in place of text. Any words or information on the image must be represented as text on the page as well.
- Images that are used to convey complex information, such as flow charts, graphs, infographics, etc., should provide an alternate text version of the information. This information may be included via a link with a descriptive title. See an example from Penn State.
Videos
- Embedded videos (including those embedded from YouTube, Vimeo, etc.), iframes, and other embedded content must include descriptive title attribute.
- All videos must be captioned (use Kaltura if needed).
- Video without audio tracks must include a text description via “long description” attribute.
- When a video file with audio includes information that is not related via audio (such as background information), an audio description must be provided.
Audio
- Audio files must include link to TXT or HTML with transcript.
Color
- Color must not be the only method of conveying content or distinguishing visual elements.
- The contrast of text and background colors should pass WCAG 2.0 AA: a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px and larger). Use the WebAIM Color Contrast checker to ensure colors meet AA standards.
Navigating Pages
- Instructions should not rely on size, shape, or visual location (e.g., “click square icon” or “instructions are in right hand column”).
- Instructions should not rely on sound (e.g., “a beeping sound indicates that you may continue").
- Instructions should not rely on color (e.g., “click the blue icon").
- All elements on a page must be in correct tab order; navigation order and content tabbing must be logical. This can be tested by using the "tab" key on your keyboard to ensure that the page is traversed in a logical, expected order.
- Interactive elements are intuitive or have clear instructions or labels or examples.
- Elements that have the same functionality across multiple pages are consistently identified.
- All content on the page must be able to function via keyboard alone, including snippets, iframes, etc. No keyboard traps (i.e., visitors should not get stuck in one spot while using keyboard to navigate). This can be tested by using the "tab" key on your keyboard to ensure that you are able to access all of the page's content.
Tables
- Tables must only be used for tabular data, and must include table heading tags
- Tables must have descriptive table caption tag