--- title: "Do image buttons have alt text?" date: "2024-12-18T14:28:31+00:00" summary: "Ensure that image buttons have descriptive names for accessibility. Learn how to review and improve button labels for all users." image: type: "page" url: "/web-governance/do-image-buttons-have-alt-text" id: "451a98b9-b7a0-45ac-8984-308a3361717c" --- Table of contents will be added 1.1.1 Non-Text Content ====================== Introduction ------------ This document provides information about the Acquia Web Governance accessibility check: * Do image buttons have alt text? This check is related to the Web Content Accessibility Guidelines (WCAG) success criteria _1.1.1 non-text content_. What ---- Image buttons must have accessible names that clearly describe their purpose. Note * Image buttons are HTML input elements with the type attribute set to `image`. * The accessible name is the name that assistive technologies, such as screen readers, convey to the user for the element. Why --- Users who cannot see the image on a button or icon rely on its accessible name to understand its purpose. The accessible name is conveyed through assistive technologies, such as screen readers, which may read the name aloud to users. Without clear labels like "Search" or "Add to Wishlist," users can become confused, make mistakes, or fail to complete tasks. Who --- ### This check affects individuals with: * Visual impairments: Who rely on screen readers to understand the purpose of buttons and interactive elements. ### User story ![Woman wearing a beige hijab smiles while looking down, with a blurred background.](https://acquia.widen.net/content/4373493e-e1fe-4824-b0f1-688cffd7f416/web/Mon_AccessibilityHelpCenter-UserStory-WomanWithHeadscarfOutside.png) Fatima is a 33-year-old woman from Morocco who lost her sight at the age of 12 due to a degenerative eye condition. She works as a radio presenter for a local station in Casablanca, focusing on social and cultural issues. "_It really annoys me when I use music websites and the features meant to make things easier just make it harder for me. I was trying to organize my playlist, but the buttons just said 'Move' without telling me if I was moving the song up or down. These tools are supposed to help us customize and enjoy the platform, but when they do not work for me, it feels like I am being left out. It is such a small thing to fix, but it would save me so much time and frustration_." Examples -------- This section provides some examples of the issue. ### Example: Non-descriptive accessible names for image buttons On some image buttons, the accessible names describe the visual content of the image but fail to communicate the function: ![Four buttons on a web page with insufficient alt text. It describes the visual content of the image with no other context: Magnification glass, Floppy disk, pencil, envelope.](https://acquia.widen.net/content/b81ce412-5980-45a8-b6ff-eedfa611ae9e/web/WebGov_AccessibilityGuide-Example-ButtonsWithIconName.png) Button Accessible Name Magnifying glass Magnification glass Floppy disk Floppy disk Pencil Pencil Envelope Envelope While these names reflect the images, they do not provide information about the actions the buttons perform, such as **Search**, **Save**, **Edit**, or **Send**. This can create barriers for website visitors who use assistive technologies. ### Example: Descriptive accessible names for image buttons On some image buttons, the accessible names are crafted to clearly describe their function. This ensures that visitors can easily understand the actions that the buttons perform.  ![Four buttons on a web page with insufficient alt text. It describes the visual content of the image with no other context: Magnification glass, Floppy disk, pencil, envelope.](https://acquia.widen.net/content/b81ce412-5980-45a8-b6ff-eedfa611ae9e/web/WebGov_AccessibilityGuide-Example-ButtonsWithIconName.png) Button Accessible Name Magnifying glass Search Floppy disk Save Pencil Edit Envelope Send These accessible names provide users, including those relying on assistive technologies, with meaningful descriptions of the button functions. This helps users interact and navigate effectively and improves the overall accessibility of the page. How  ---- This section provides information on how to review and fix the issue. ### How to review it For instructions on how to review the issue, visit [How to review an accessibility issue](/web-governance/how-review-accessibility-issue "How to review an accessibility issue"). ### How to fix it 1. Set the _HTML type attribute_ on image buttons to `image`. 2. Ensure that the _accessible name_ on the image button is a meaningful description of the button function. Additional resources -------------------- ### WCAG success criteria * [1.1.1 Non-Text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html)