Alternative Text
WCAG 2.0 States
1.1.1. Non-text Content: All non-text content that is presented to the user has a text alternative that
serves the equivalent purpose, except for [some exceptions]. (Level A)
Introduction
Alternative text (alt text) provides screen reader users with access to all of the non-text information.
Thus, when defining the alt text on an image, context matters the most. It is important to ask, “What
important information is the image being used to deliver to the user?”
Screen readers, such as JAWS, linearize content on a website by reading through the HTML code, so that
individuals using the software can interact with the website. Any non-text content that is used to
convey meaning needs to have a text equivalent.
How alt text is written can vary depending on the type of image. Most screen reader software
announces the presence of an image by appending a word such as “graphic” to the alt text, so using
words such as “photo”, “graphic”, and “image” should be avoided in the alt text, unless it helps convey
further meaning important for a user to know.
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 lengthier description, it is best practice to describe the
image in the content and provide a short alt text, although the attribute long description can be used as
well. Long description allows for a wordy alt text.
Example
Without Alt Text:
Screen Reader will read http://dev-grays-harborcollege.gotpantheon.com/sites/default/files/imce/images/100_1935.jpg
With Alt Text:
Screen Reader will read “143 stairs leading up to 2000 building”
Image with Text
Images that contain text should generally be coded to just include the text as the alt text.
Example
Without Alt Text:
Screen Reader will read “https://app.arts-people.com/index.php?show=52322”
With Alt Text:
Screen Reader will read “Spamalot showing at the Bishop Center July 23 thru July 26”
Linked Image
Images that serve as links should include both the description of the image and where the link navigates
to. Images of just text that are links should just have alt text using those words. 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 ship and “Grays Harbor College” located on the top left pages on GHC’s website is used
as a link back to GHC’s homepage. In this case, the alt text is "Grays Harbor College Homepage." Screen
readers announce the presence of a link, so using words like "link" "visit" or "website" are not necessary.
Also, using the word "tag" or "logo" would probably not be necessary here as well, as it does not add
anything to the meaning.
Without Alt Text:
Screen Reader will read “http://ghc.edu”
With Alt Text:
Screen Reader will read “Grays Harbor College Homepage”
Decorative Image
Many images are used on websites only for visual interest, they aren't meant to convey any meaning or
important information. In this case, it is best to use what is called NULL alt text or empty alt text.
NULL alt text is just <alt=""> two quotation marks after the alt=. NOTE that the alt attribute is still
present, that is always important. When a screen reader comes across null alt text, it will completely
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.
Another possible option for those with coding experience is to code the image as a background image.
By putting the image in the style sheet (CSS) you remove it from the HTML and from the view of screen
reader software. This is a simple solution, especially if the same image is used often.
Example
The picture below is used on the Disability Support Services home page. If used for decoration only than
a null alt text would be used.
Without Alt Text:
Screen Reader will read “/sites/default/files/imce/images/students_3.jpg”
Null Text: If the image is for decoration using <alt=””> will allow the screen reader to skip it.
Good Rule of Thumb: Try not to use Decorative Images. Create some meaningful alt text for each
image.
Complex Images
When the image is complex, including things such as charts, data, statistics, etc. where a short
description is not possible, there are multiple options.
The absolute best solution, that would benefit all visitors, would be to include a thorough description
of the complex image in the content of the page, immediately before or after the image. This way,
everyone would be able to get the full meaning of the chart. To avoid adding more content to a page,
another preferred alternative would be to create another web page with just a description of the
complex image and link to it near the image.
The traditional way to provide this extra context has been through an attribute called a long description.
It is not as widely supported by browsers and rarely implemented correctly. The long description
attribute serves as a link within the image element to another page with just the description of the
image on it. The long description only provides access to a link through a screen reader, so only
someone using a screen reader would know more detail exists.
Example
Without Alt Text:
Screen Reader would read “http://www.ghc.edu/admissions/cost.jpg”
With Alt Text:
Screen Reader would read “Comparison of GHC costs versus 4 year and online colleges”
Long Description: Linked file or the page content should then contain a description similar to the
following:
Linked Page with Content: The chart above shows the estimated cost and comparison of attending nine
colleges in 2013-2014 academic year for three quarters.









Grays Harbor College tuition and fees are $4350
Eastern Washington University tuition and fees are $7433
The Evergreen State College tuition and fees are $8299
Central Washington University tuition and fees are $8973
University of Phoenix tuition and fees are $10,200
Washington State University, Pullman tuition and fees are $12,300
University of Washington, Seattle tuition and fees are $12,383
Pacific Lutheran University tuition and fees are $32,800
University of Puget Sound tuition and fees are $40,250
How to add Alt Text on the Website
1. Select the image icon shown in the picture below
2. Enter brief description in Alternative Text Box
3.
If Long Description is needed, a new page will need to be created with the description. The
new page’s URL is then pasted in the Long Description URL which is under the Advanced Tab.