Today’s blog post is from a guest contributor, Michael Graf. Michael is part of the OCPS legal department and is responsible for overseeing ADA compliance for the OCPS family of web sites. He reminds us all that ADA compliance within our web sites is a matter of concern for all of us whether our site represents a school or one of the district offices .
How to add alt-text to an image?
- In design mode, right click the image and select “Properties”
- Enter the descriptive text of the image in the area labeled “Alt Text”
|
What should I include in my alt-text?
- Ask yourself: Why is the image used? What information is this image intended to communicate?
- Keep descriptions short, to a maximum of 140 characters. Generally, an alt-text description doesn’t have to be more than a sentence.
- It is unnecessary to begin a description with “photo of” or “picture of.”
EXAMPLE
Okay alt text: Rooster
Better alt text: Rooster crowing
Best alt text: Red-crested rooster crowing
|
What if my image is too complex to briefly describe?
- Complex images, such as graphs, charts, or diagrams, may contain too much information to be effectively described using alt text.
- If the description will be over 140 characters then include a thorough description of the complex image 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 preferred alternative would be to create another page with just a description of the complex image and link to it near the image.
|
EXAMPLE
|
|
|
The Link should take you to a separate page with the Long Description below:
The chart shows the website hits for the first quarter of 2014. It shows that Site 1 has more visitors than either of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant number of visitors, while for Site 3 page hits are increasing month on month.
Numerical values presented on the image:
2014 First Quarter visitors per site (in thousands)
Period Site 1 Site 2 Site 3
Jan 135 112 92
Feb 117 114 99
March 96 111 126
Total 348 337 308 |
|
What if my image is decorative?
- Even if your image is purely decorative it is still a good idea to use “decorative” as the alt-text so the user knows there is nothing meaningful in the image.
EXAMPLE
Best alt text: decorative
|
What if my image is a logo, do I need to still add an alternative text attribute?
- Logos should be captured by using the organization’s name as the alt-text.
EXAMPLE
Best alt text: Orange County Public Schools logo
|
What if my image contains text or information, do I need to still add an alternative text attribute?
- Images of text should be avoided. However, if they must be used, the alt text should (usually) be the same as the text in the image.
EXAMPLE
Best alt text: The quick brown fox jumps over the lazy dog
|
Like this:
Like Loading...
Related
