Alt text is crucial for web accessibility since it helps people who use screen readers understand the content and function of the image. Good alt text also improves SEO (Search Engine Optimization) and appears when an image fails to load.

Dos

Be descriptive and concise

Describe the key elements of the image

Use punctuation to ensure the screen reader pauses before continuing to the next element

Designate if an image is a logo, illustration, painting, or cartoon

Don’ts

Avoid using “image of”, “picture of”, “graphic of”, etc. Screen readers announce the element is an image.

Duplicate text that is adjacent to the image

Examples

Open

Good Alt Text

Tree-covered mountains beneath a blue sky with fluffy, white clouds.

Bad Alt Text

Picture of hills.

Open

 

Good Alt Text

A small, wild bird perched on a branch against a bright green, blurred background.

Bad Alt Text

Small brown bird sitting on a stick.

Decorative Images

A decorative image does not add information to the content of the page, but is for aesthetic purposes. If the image was removed, users would still have all of the necessary information.

An example of a decorative image would be a small star icon next to a list of favorite features, the icon is purely visual and has a meaning that is clear from surrounding text.