In this Article
What is alt text?
What is alt text?
Alt text, the common shorting of the term 'alternative text,' refers to the text read to users using screen readers or displayed for users with images turned off in their browser.
Alternative Text is an important part of making a website accessible. Most people know that including "alt text" is essential, but many people aren't exactly sure what to put in this area.
A simple way to create "alt text" is to pretend that you are describing what you see in the image to someone over the phone. You want to be descriptive enough so that they can imagine the image but fairly succinct. Try to limit the description to a quick sentence. The industry standard says 125 characters or less.
Alternative text can help with SEO for a page but it should not be used as an SEO hack. Putting keywords in the alt text to improve SEO without consideration for actually making a coherent description of the image will actually make your website less accessible.
Some Alt Text Best Practices
Do
Explain not just what the image shows, but what is important about the image in the context in which it is being used.
End alt text with a period, even if it isn't a complete sentence. The period will make the screen reader pause to indicate the end of the alt text.
If the image is of words, the alternative text should be the words contained in the image.
If an image is utilized as a link with no other text, the alternative text should be the link's destination.
If an image is purely decorative and adds no valuable context to the page add
alt=""androle="presentation"to the <img> tag.
Don't
Don't repeat the text that is shown adjacent to the image.
Don't use an image's filename as its alt text.
Don't start the alt text with 'Image of' or 'Photo of', many screen readers announce the word 'graphic' along with the alt text.
Learn about Creating Good Alt Text for Images.
Resources
Alternative Text by WebAIM
Alt Text: What to Write by the Nielsen Norman Group
Learn More with WCAG
Understanding Non-text Content (Level A)
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!