Get instant access to this builder accessibility guide.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Choose Your Builder
Menu

Add Alt Text to Important Images - Elementor

Images that convey information must include clear alt text.
Equivalent
Developed by DAPEN.org

Add Alt Text to Important Images in Elementor

  1. Open your WordPress dashboard, navigate to the page you want to edit, and click Edit with Elementor.
  2. Select the first important image on the page. The left Elementor panel will load the widget settings.
  3. In the Content tab, click the image thumbnail to open the WordPress Media Library.
  4. In the Media Library panel, locate the Alt Text field on the right.
  5. Enter a clear, meaningful description that explains the purpose of the image (e.g., “Headshot of project manager Elena Ruiz” or “Product photo of walnut writing desk”).
  6. If the image is used as a link or button:
    • Write alt text based on the action, not the appearance (e.g., “Go to Services page”).
  7. Click Update in the Media Library panel, then click Insert Media to return to Elementor.
  8. Repeat steps 2–7 for all meaningful images, including:
    • Hero images,
    • Team photos,
    • Product or project images,
    • Icons that convey information.
  9. For images inside Galleries or Carousels:
    • Select the widget → Content → click each image to open the Media Library.
    • Add alt text per image as above.
  10. For background images set via Section or Column:
    • Select the Section or Column → Style → Background.
    • Since background images cannot receive alt text, add equivalent descriptive text somewhere in the same section if the image conveys meaning.
  11. Review any images loaded via HTML widgets:
    • Select the HTML widget and check the <img> tag.
    • Add a meaningful alt="…" attribute manually.
  12. Click Update to save page changes.
  13. Preview the page and confirm that all important images have appropriate alt text using your browser’s accessibility inspector.
Previous
Maintain Consistent Navigation - Elementor
Maintain Consistent Navigation - Elementor
Next
Mark Decorative Images - Elementor
Mark Decorative Images - Elementor