Alternative Text

What is "Alt Text"?

'Alt text' is a contraction of 'alternative text'. It's a short written description of an image, which makes sense of that image when it can't be viewed for some reason. Well-written alt text is important to your website's accessibility, and its search engine optimization (SEO).

Accessibility

• It's read by screen readers in place of images, allowing your image content to be accessed by people who are blind or have visual impairment

• It can be useful to people with certain sensory processing and/or learning disabilities

• It's displayed in place of the image in browsers if the image file hasn't loaded, or when the user has chosen not to view images.

Tips for writing good alt text

Adding useful alt text to images is one of the easiest ways to make your website more accessible. But it's not necessarily an easy thing to get the hang of – and can even harm accessibility if done poorly. 

1. Be short and concise

• Keep it to 125 characters or less, if possible. Some screen readers may have a limit.  Think how you’d briefly describe the image over the phone.

• Describe the content of the image. Say what you see,  don't make assumptions. Add information about skin tone, hair color/style etc. if it will help to build the picture for someone who can't see the image.

• Where text is included as part of an image, be sure to transcribe it as part of your description. 

• Use plain language that is relatable and understandable for everyone. Avoid abbreviations

2. Never start with “Image of …” or “Picture of …”

• • It's obvious and implied, and that is wasting character counts.

  • It is good to explain the type of image. Examples:  headshot, illustration, chart, or screenshot.

3. Purely decorative images

1. • Leave empty the alt tag attribute empty, or add a single pace between the " ". 

4. Convey the "why"

1. • Alt text is meant to explain why this image is on this web page and how it relates to the content.

   • Describe the feeling, emotion, purpose, and/or context of the image.

5. Describe the "what"

• Consider including the setting, location, action, item of focus, descriptors, and relationships.

6. Always end alternative text with a period (.).

• This improves the screen reader experience by allowing for a pause at the end of the text.

Tips for writing headshot alt text

Please also consider the Tips for Writing Good Alt Text from above. 

1. Say it's a Headshot

• • This conveys several things about the image, like it is professional and they are likely in a business attire.

2. Include the person's full name

3. Interesting headshots need descriptive text

1. • If the person is holding something of interest, performing an action, or sitting in an setting other than a studio, include that in your alt text.

   • If shows more than a headshot, describe it as a close up photo.