Alternative text (alt text) helps make your images accessible to visitors and search engines. It serves as a description when images can't be displayed and assists screen readers in conveying image content to visually impaired users. Here's how to add and optimize alt text across different elements:

Best Practices for Alt Text

• Keep descriptions concise (under 12 words)
• Make text useful and descriptive
• Include relevant keywords naturally
• Use normal sentences without hyphens
• Omit articles ("the," "a") and terms like "photo" or "image"

Adding Alt Text to Different Elements

Image Blocks:

• Click the Content tab in the Image block editor
• Enter up to 250 characters in the Image alternative text field
• Changes save automatically

Automatic Layouts:

• Click Edit Content while editing the page
• Select the Content tab
• Click the desired image
• Add alt text in the Image alternative text field
• Click Back, then Save

Gallery Sections:

• Image descriptions automatically become alt text and captions

Product Images:

• Hover over a product and double-click
• Click the three dots on the product image
• Select Edit Metadata
• Add up to 200 characters of alt text
• Click Apply

Default Alt Text Behavior

• Site Logo: Uses site title as alt text
• Blog/Event Featured Images: Uses post/event title
• Page Featured Images: Uses filename
• Product Images: Uses product name if no alt text is added
• Image Filenames: Serve as alt text when none is provided

Background Images and Limitations

• Background images cannot have alt text added directly
• Decorative images don't require alt text per accessibility guidelines
• Alternative solution: Use Image block as background with alt text
• Custom code can be used but isn't officially supported

For optimal SEO and accessibility, ensure all meaningful images have appropriate alt text following these guidelines. Purely decorative images can be left without alt text.

Related Articles

Previous Articles