In response to our need and ethical duty to ensure equal access to electronic and information technologies, Bellevue College has established policy 5110 to ensure that our web technologies meet the needs of our students and employees.
To comply with policy 5110 and state and federal law, all content presented on the web should meet or exceed the web standards established by the Worldwide Web Consortium (W3C), specifically the Web Content Accessibility Guidelines (WCAG) version 2.0 level AA.
The following standard highlights areas of WCAG 2.0 which may be particular help to website managers working within the Bellevue College Content Management System (BC CMS).
Images are a great way to add interest to your web content, but they provide challenges for users who can not see. Using alternative (alt) text allows all users to get the information they need from your website.
Alternative (Alt) Text
Images and icons should have appropriate alternative (alt) text. It is the responsibility of website managers to add informative alt text to all images when they are added to pages:
- Alt text is used by assistive technology to describe images and graphics to users who are blind, or who can not load the image due to slow internet. Alt text should describe an image in the context of the page content.
- Alt text can be added through the Alt Text field within the Add Media interface within the BC CMS (See Figure 1).
Information contained in a caption does not need to be duplicated in alt text; instead simply use the alt text to let the user know that a caption will follow the image.
- If the image is purely decorative (for example, a telephone icon above in-page text reading ‘Call Us’), mark it as decorative using the available checkbox, or place a space character within the alt tex field, allowing assistive technology to skip the image entirely.
- If you are manually adding an image using HTML, make sure to add the alt tag directly to the image element, as follows:
<img src=”cat.jpg” alt=”Cat stalking mouse in an old barn” />
- An in-depth article on writing alt text is available at webaim.org/techniques/alttext/.
- Text in Images: If an image includes text within it, all included text must be included as alt text, or be repeated adjacent to the image within the page content. Avoid using images that include large amounts of text – instead simply place the text directly on the page.
As video often includes both visual and audio elements, take care to make sure it is accessible to users who may not be able to see or hear the content presented. Consider the following when adding video to your website:
- Video without audio should be accompanied by a descriptive text or audio transcript to allow blind and low-vision users to access the contents of the video.
- Synchronized captions should be provided for video that includes an audio element to allow access by deaf users. Captions also help users without audio on their computers, ESL students, and users with learning disabilities.
- Audio descriptions should be included with videos to allow blind users to access visual elements.
- Avoid video that flashes or strobes faster than three times per second, especially if there is a high level of red, as this can trigger seizures in some people.
A descriptive transcript should be provided for audio content to provide access for deaf users and users without access to speakers or headphones.
Use HTML headings and lists to lay out your content (where appropriate). These structures make it easier for blind users to navigate your pages. Keep in mind:
- Headings can be added through the Visual Editor in the BC CMS (see Figure 2). Headings should be used in a nested fashion, starting with Heading 2 (Heading 1 is used as the page title). Your primary page headings should be Heading 2s, with subheadings to these being Heading 3s, etc.
- Text color or style (such as bold or italic) should not be used as the sole means of conveying information or distinguishing content, as assistive technology does not communicate this to blind users. For example, avoid: “Courses in red are required.”
- Instructions in text should not rely on shape, size, color, or visual location. For example, avoid: “Click the round green button to continue.”
- The purpose of each link should be distinguishable from the link text; avoid generic titles like “Click Here.”
Only use tables to present tabular data. It is recommended that you use the integrated table creation system within the BC CMS, and avoid using tables for layout or stylistic reasons. If you create custom tables, ensure they have proper headings and markup. Avoid nesting tables.
Last Updated April 19, 2019