by Don Busche
Santiago Canyon College is committed to achieving meaningful online accessibility for all users, including users with disabilities. We follow specific web accessibility standards designed to meet the needs of our students, faculty, and staff with disabilities. Our standards are based on standards used by the Federal government for technology accessibility for people with disabilities, and web content accessibility guidelines developed by the World Wide Web Consortium (W3C).
SCC uses Siteimprove Accessibility, a third-party subscription service that performs accessibility checks on a regular basis. Siteimprove automatically runs a scan of every SCC webpage every five days and manually as needed. This service automatically detects and highlights any accessibility issues that have arisen since the last scan.
When an accessibility issue is identified, a report is sent to the author of the page containing the accessibility issue. The author is then responsible for addressing the problem or, when necessary, requesting technical assistance to correct the problem.
Creating Accessible Images
Like most college websites, the SCC website is full of images. Siteimprove Accessibility reports show that many of these images have missing, incorrect, or poor alternative text. Since adding alternative text, or alt text as it is commonly called, to images is often regarding as the first principle of web accessibility, this article presents some basic tips and concepts on how to write alt text that improves accessibility, provides context when images do not load on a page, and communicates the image to a blind or low vision user using a screen-reader.
Writing Effective Alt Text
According to the April 2010 issue of WebAIM, alt text should:
-
Be accurate in presenting the same content and function as presented by the image.
-
Be succinct in presenting the correct content and function of the image. Generally, an alt-text description doesn't have to be more than a few words, or a sentence at most.
-
Not be redundant and does not provide the exact same information as text within the context of the image.
-
Not contain phrases like "image of . . ." or "graphic of . . ." to describe the image. It's usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary to include "image of" or 'graphic of" in the alt text.
The following examples illustrate the most common types of images, and how alt text should be used in each circumstance.
Standard Image
 |
If the image is a photograph, drawing or painting, the alt text needs to describe the image in as short of a phrase as possible. If the image requires a long description, it is best practice to describe the image in the content and provide a short alt text.
For example, if an image of SCC Interim President, John Hernandez was placed on a web page along with a message from the president, the alt text should just describe what the image is such as "Interim President, John Hernandez."
The alt text would be keyed in the "Alt Text" box on the Image tab in SharePoint as shown below. |
Image of Text
Image of Text  |
Images that contain text should include that text as the alt text. For example, the alt text of this non-linked image should just be the words in the image.
The alt text would be keyed in the "Alt Text" box on the Image tab in SharePoint as shown below. |
Linked Image
Images that serve as links should be described and the alt text should include what clicking the link would do as well. In most cases, describing what clicking will do is probably adequate, but again, context is most important and it will be a case by case basis.
For example, the hawk image is used at the top of every SCC webpage as a link back to the college homepage. As shown below, the alt text is "Santiago Canyon College." Screen readers announce the presence of a link, so using words like "link" "visit" or "website" are not necessary.
The alt text would be keyed in the "Alt Text" box on the Image tab in SharePoint as shown below.
Decorative Image
Many images are used on websites only for visual interest and are not intended to convey any information. For example, a line like the one here may be used at the bottom of each web page for decorative purposes. In this case, it is best to use what is called NULL or empty alt text.
The "Alt Text" on the Image tab in SharePoint would be blank as shown below. When a screen reader comes across a blank or null alt text, it will skip over the image, not even announcing its presence. Someone who is fully sighted would easily skip right over a decorative image, null alt text allows someone using a screen reader to do the same thing.
Complex Images
Complex images such as graphs, charts, diagrams, and statistical data that convey detailed information often need more than a brief description to convey the content or function of the image. In these cases, a two-part alt text should be used.
The first part is a short description to identify the image and, where appropriate, indicate the location of the long description.
The alt text would be keyed in the "Alt Text" box on the Image tab in SharePoint as shown below.
The second part is the long description – a textual representation of the essential information conveyed by the image. The long description is often in the content of the page, immediately before or after the image. If you don't want to add more content to your page, another option would be to create a web page with just a description of the complex image and link to it near the image.
Summary
ALT tags serve many purposes and all images on your website should have ALT tags. Remember, when creating ALT tags the goal is to convey the content and function that the image would portray if the user saw it.
<<Previous || Next >>
