Alt Text Basics
What is Alt Text?
Alternative text (alt text) is a short description of an image. If an image is used in any sort of document or page, and the page cannot or does not load correctly, then the image’s alt text will appear instead. If the alt text is effective, this can really help those needing to access the document when they are in such circumstances.
Another instance where alt text is extremely helpful is with assistive technology. Assistive technology is used by those with disabilities to make the internet and other technology more accessible to them. One particular type of assistive technology is called a screen reader, which reads whatever is on the screen. This is used by mostly blind and low-vision persons. Good alt text is very important to these users - it means they can get the same information and experience that every other user can!
Writing Alt Text
Here is a basic overview of what alt text should look like and what it should include.
- Look at the image, and the basic context that it’s in. One image can have many different appropriate alt texts depending on what’s around it- context is really important.
- The aim of good alt text is to convey the same information you would get from the image. Summarize and describe the information you get from the image based on both the context and the image itself. Try to find a good balance between descriptive and succinct.
- If you closed your eyes and thought about the image and the alt text you wrote, would it make sense? Will it mean the same thing? This is usually a pretty good test of the effectiveness of alt text.
- Always end alt text with punctuation, even if it isn’t a technically ‘complete’ sentence. Ending alt text with punctuation causes a screen reader to pause at the end of reading the alt text- which helps users know when they are no longer within the alt text and helps the whole document make more sense to them.
- An image can be marked as decorative if it doesn’t contain any relevant information - these images are those that only add aesthetic value or don’t have a relation to the text. These would be images such as decorative borders, and any other images that aren’t adding to the document or page. Some programs may include a button or a checkbox that will make the image decorative, and some may not. In that case, simply putting “” in the alt text field will do the same thing.
- Never include “picture of”, “graphic of”, “image of”, etc. in alt text. Screen readers and websites identify images as images, so including any of these is just repetition. Sometimes it is okay to include things like “a flow chart/ graph/ table/ cartoon depicting…”, but be careful not to overuse it.
- Don’t leave out alt text! If we don’t include alt text, then the file name could be inserted as alt text, it could be skipped over entirely, or the technology itself may try to write alt text for the image. ‘Okay’ alt text is always better than no alt text at all - just a little bit of effort goes a really long way in terms of accessibility and usability.
Examples
Image alt texts can differ depending on the image's context in the page. If it's in a page about photography, the close-up, detailed nature of the photo should be included. If it's part of a page about houseplants, “several succulent plants” may be sufficient. If it's in a botanical page, it would be a good idea to include the scientific names of each of the plants, or if those were noted elsewhere, a more detailed description of the plants.
Image alt text should be both descriptive and succinct. This image came from an architectural website, so “a house" is far too succinct. However, “a large L-shaped house with a brick and stone exterior, a two-level four car garage, brick stairs and an arched entryway, 25 windows, 4 big trees, a landscaped yard with bushes and grass, planter boxes at three sets of windows, a curved driveway, an exterior chimney, a gray shingled roof, white trim, and several dormers” is far too descriptive, especially since an architectural page would likely describe it elsewhere. A better option is “The exterior rendering of a large, elegant, Tudor-style home, with a large driveway, a four-car garage, and a landscaped yard.” 
This is an example of an image that should be marked as decorative. It doesn’t give any information to the reader; it’s an image that we might glance at, deem unimportant, and move on from. Marking it as decorative allows users of screen readers to do the same.