--- title: Web Accessible Button Design for Screen Readers description: Web accessible button design is key to achieving web accessibility and ADA compliance… image: https://blog.usablenet.com/hubfs/%5BSBM%5D%20Blog%20Images%202023/UsbaleNet-Web-Accessible-Button-Design-for-Screen-Readers.jpeg --- - [skip to menu](https://blog.usablenet.com/web-accessible-button-design-for-screen-readers#nav) - [skip to content](https://blog.usablenet.com/web-accessible-button-design-for-screen-readers#main-content) - [skip to footer](https://blog.usablenet.com/web-accessible-button-design-for-screen-readers#footer) Test the accessibility of your website for free! Try UsableNet AQA. [Test now!](https://usablenet.com/automated-accessibility-testing-tool) Close [![UsableNet home](https://blog.usablenet.com/hs-fs/hubfs/SaaS%20Theme/2023%20Header%20and%20Footer/logo.png?width=429&height=62&name=logo.png)](https://usablenet.com/) - [Solutions](https://usablenet.com) ## Solutions [UsableNet Assistive](https://usablenet.com/technology/assistive-technology-services) A managed service combining experts, technology and legal support to make your website accessible [UsableNet AQA](https://usablenet.com/technology/aqa) Accessibility management and testing software for designers, developers, and testers [Accessibility Audits & Support Services](https://usablenet.com/services) Expert guidance and training to empower your team to create accessible digital experiences Explore which of our digital accessibility solutions is right for you [Watch a Demo](https://info.usablenet.com/choose-a-demo?__hstc=181257784.2243d86205d8f41e204908d6f6578263.1725908600455.1737658630173.1737669055746.199&__hssc=181257784.7.1737669055746&__hsfp=3011104808) - [Resources](https://usablenet.com/resources) ## Resources - [E-books & Guides](https://usablenet.com/resources?contentType=E-books%20and%20Guides) - [Case Studies](https://usablenet.com/resources?contentType=Case%20Studies) - [Reports](https://usablenet.com/resources?contentType=Reports) - [Webinars](https://usablenet.com/resources?contentType=Webinars) - [Tools](https://usablenet.com/resources?contentType=Tools) - [All Resources](https://usablenet.com/resources) ## Essential Resources ![](https://blog.usablenet.com/hs-fs/hubfs/SaaS%20Theme/2023%20Header%20and%20Footer/resources-1.png?width=100&height=100&name=resources-1.png) [ADA accessibility lawsuit tracker](https://info.usablenet.com/ada-website-compliance-lawsuit-tracker) ![](https://blog.usablenet.com/hs-fs/hubfs/SaaS%20Theme/2023%20Header%20and%20Footer/resources-2.png?width=100&height=100&name=resources-2.png) [Checklist: how to achieve and maintain digital accessibility](https://info.usablenet.com/digital-website-accessibility-checklist) ![](https://blog.usablenet.com/hs-fs/hubfs/SaaS%20Theme/2023%20Header%20and%20Footer/resources-3.png?width=100&height=100&name=resources-3.png) [Which remediation approach is right for me?](https://info.usablenet.com/website-accessibility-remediation-quiz) ![](https://blog.usablenet.com/hs-fs/hubfs/ADA%20Primer.png?width=100&height=100&name=ADA%20Primer.png) [A Primer on ADA and Digital Accessibility](https://info.usablenet.com/a-primer-on-ada-and-digital-accessibility) The EAA is in Effect — Is Your Website Compliant? [Get Help with EN 301 549 Compliance](https://info.usablenet.com/eaa-en-301-549-compliance) - [Who We Serve](https://usablenet.com/strategic-relationships) ## Industry [E-commerce and Consumer Goods](https://info.usablenet.com/e-commerce-accessibility-solutions) [Food Service and Hospitality](https://info.usablenet.com/-industries-food-service-hospitality) [Banking and Financial Services](https://info.usablenet.com/industries-financial-services) [Healthcare](https://info.usablenet.com/industries-healthcare) [Technology and Business Services](https://info.usablenet.com/-industries-technology-and-business-services) [Public Sector and Education](https://info.usablenet.com/industries-public-sector-and-education) ## Compliance [Canadian Accessibility Laws](https://info.usablenet.com/compliance-canada) [European Accessibility Laws](https://info.usablenet.com/eaa-en-301-549-compliance) [Other International Accessibility](https://info.usablenet.com/compliance-international) [United States Accessibility Laws](https://info.usablenet.com/compliance-united-states) 2026 Midyear report on digital accessibility lawsuits in the US [Download Now](https://info.usablenet.com/2026-midyear-report) - [Pricing](https://usablenet.com/pricing) - [Blog](https://blog.usablenet.com/) - [About Us](https://usablenet.com/about-us) [Get a Demo](https://info.usablenet.com/contact) Close Open Menu - Solutions ## Solutions [UsableNet Assistive](https://usablenet.com/technology/assistive-technology-services) A managed service combining experts, technology and legal support to make your website accessible [UsableNet AQA](https://usablenet.com/technology/aqa) Accessibility management and testing software for designers, developers, and testers [Accessibility Audits & Support Services](https://usablenet.com/services) Expert guidance and training to empower your team to create accessible digital experiences Which accessibility remediation approach is right for me? [Take our Quiz](https://info.usablenet.com/website-accessibility-remediation-quiz) - Resources ## Resources [E-books & Guides](https://usablenet.com/resources?contentType=E-books%20and%20Guides) [Case Studies](https://usablenet.com/resources?contentType=Case%20Studies) [Reports](https://usablenet.com/resources?contentType=Reports) [Webinars](https://usablenet.com/resources?contentType=Webinars) [Tools](https://usablenet.com/resources?contentType=Tools) [All Resources](https://usablenet.com/resources) ## Essential Resources [ADA accessibility lawsuit tracker](https://info.usablenet.com/ada-website-compliance-lawsuit-tracker?__hstc=181257784.2243d86205d8f41e204908d6f6578263.1725908600455.1736198093211.1736205902814.174&__hssc=181257784.1.1736205902814&__hsfp=3011104808) [Checklist: how to achieve and maintain digital accessibility](https://info.usablenet.com/digital-website-accessibility-checklist?__hstc=181257784.2243d86205d8f41e204908d6f6578263.1725908600455.1736198093211.1736205902814.174&__hssc=181257784.1.1736205902814&__hsfp=3011104808) [Which remediation approach is right for me?](https://info.usablenet.com/website-accessibility-remediation-quiz?__hstc=181257784.2243d86205d8f41e204908d6f6578263.1725908600455.1736198093211.1736205902814.174&__hssc=181257784.1.1736205902814&__hsfp=3011104808) [A Primer on ADA and Digital Accessibility](https://info.usablenet.com/a-primer-on-ada-and-digital-accessibility?__hstc=181257784.2243d86205d8f41e204908d6f6578263.1725908600455.1736198093211.1736205902814.174&__hssc=181257784.1.1736205902814&__hsfp=3011104808) The EAA is in Effect — Is Your Website Compliant? [Get Help with EN 301 549 Compliance](https://info.usablenet.com/eaa-en-301-549-compliance?__hstc=181257784.2243d86205d8f41e204908d6f6578263.1725908600455.1736198093211.1736205902814.174&__hssc=181257784.1.1736205902814&__hsfp=3011104808) - Who We Serve ## Industry [E-commerce and Consumer Goods](https://info.usablenet.com/industries-e-commerce-consumer-goods) [Food Service and Hospitality](https://info.usablenet.com/-industries-food-service-hospitality) [Banking and Financial Services](https://info.usablenet.com/industries-financial-services) [Healthcare](https://info.usablenet.com/industries-healthcare) [Technology and Business Services](https://info.usablenet.com/-industries-technology-and-business-services) [Public Sector and Education](https://info.usablenet.com/industries-public-sector-and-education) ## Compliance [Canadian Accessibility Laws](https://info.usablenet.com/compliance-canada) [European Accessibility Laws](https://info.usablenet.com/compliance-europe) [Other International Accessibility](https://info.usablenet.com/compliance-international) [United States Accessibility Laws](https://info.usablenet.com/compliance-united-states) 2026 Midyear report on digital accessibility lawsuits in the US [Download Now](https://info.usablenet.com/2026-midyear-report) - [Pricing](https://usablenet.com/pricing) - [Blog](https://blog.usablenet.com/) - [About Us](https://usablenet.com/about-us) [Get a Demo](https://info.usablenet.com/contact) # Web Accessible Button Design for Screen Readers **By** [Michael Taylor](https://blog.usablenet.com/author/michael-taylor) on Aug 30, 2023 **Topics:** [Web Accessibility](https://blog.usablenet.com/topic/web-accessibility) 0 Comments - - - ![Person on laptop with color using screen reader ](https://blog.usablenet.com/hubfs/%5BSBM%5D%20Blog%20Images%202023/UsbaleNet-Web-Accessible-Button-Design-for-Screen-Readers.jpeg) Buttons are an essential element of any website, program, or mobile application. They allow visitors to navigate the site, move back and forth between pages, and complete tasks. Though buttons may seem relatively simple to sighted users, accessibility flaws can make buttons unnecessarily complicated for blind assistive technology dependents like me. Web accessible button design is important to understand to ensure everyone has reasonable access to content and capabilities on the web. As always, I will be focusing exclusively on my experience as a screen reader user. [![→ Read how to build a complete Accessibility Testing Program in our free guide. ](https://no-cache.hubspot.com/cta/default/3280432/6922792a-d0e2-49cc-8b05-64deb9a47db0.png)](https://cta-redirect.hubspot.com/cta/redirect/3280432/6922792a-d0e2-49cc-8b05-64deb9a47db0) ###   Web Accessible Button Labels  Help Screen Readers Find Buttons For a [screen reader](https://blog.usablenet.com/how-why-design-your-site-for-screen-reader-compatibility) to meaningfully locate a button, a corresponding text label must be in the code that identifies the button. As an example, consider a generic ecommerce website. Across the site's top navigation bar are the menu, search, and shopping cart buttons. The shopping cart button, for example, is denoted by a small graphic of a physical wagon. If no button labels are present in the site’s code and I were to navigate to the top bar using my screen reader, I would hear the term “button” three times as my screen reader finds the three unlabeled buttons. Depending on the specific screen reader and the types of button graphics used, the software may also announce the term "image" or "graphic."  In other less common but certainly possible scenarios, the screen reader will not detect unlabeled buttons and skip directly past the navigation bar. As a result, buttons without corresponding text labels in the code serve no valuable purpose for screen reader dependents. Vague terms like "button" or "graphic" neglect accessible button design, significantly delaying my shopping experience and making the site virtually unusable. ###   How to Create the Perfect Accessible Button Label Not all button labels are created equal. The key to developing a practical label for accessible button design is to convey the button's function in as few words as possible. [Watch a video on accessible button design with our Sr. UI/UX Designer. Click here.](https://share.vidyard.com/watch/gXrTgqA35diXiDU5hqNBZX?) [![Accessible Design for Buttons](https://cdn.vidyard.com/thumbnails/-XynKZhK-JVgbvlhM1FmPw/f98d22b079a04106ed49a1_play_button_small.jpg)](https://share.vidyard.com/watch/gXrTgqA35diXiDU5hqNBZX?)Let's revisit the shopping cart tab example from the generic website in the previous section. Attached to this button in the code should be a text-based label. An appropriate label for a shopping cart button can include "cart," "shopping cart," or "cart (followed by a number representing the number of items in the cart)." These short and sweet labels convey the button's meaning and purpose to improve [web accessibility](https://info.usablenet.com/web-accessibility-your-roadmap). Though keeping labels as concise as possible is essential, you should not do this at the expense of clarity. For example, if the button label for the site's main menu has the text "navigation" instead of "navigation menu," it may leave the user uncertain about what the button does. Will the button serve as a skip navigation link? Will the button navigate me to a different point on the page? Will the button take me to a tab bar? These are all valid questions when encountering unclear button labels. On the flip side, long and drawn-out button labels are equally problematic. Unfortunately, I have witnessed multi-sentence labels that are not only annoying but also unnecessary. Here’s an example from a retail site I recently discovered while shopping: When navigating to the cart button with my screen reader, I heard, "This will take you to the cart. The cart has a list of your potential item purchases." The fact that the word "Cart" was the seventh word means this label is too lengthy and frustrating. It was encouraging that the web designer tried to use detailed button labels, but unfortunately, they missed the mark. ### What Not to Include in Button Labels Several labeling characteristics can make buttons futile or inaccessible—and thus useless. Therefore, do not include the following descriptors in your button labels: - File attachment names - Complicated punctuation - Links It’s crucial that links never appear on a button label. If proper syntax is employed, the link will appear in a different part of the button's code. ### How to Ensure Button Label Consistency Each button on a site should be appropriately labeled. It is irritating to browse products, add them to my cart, proceed to checkout, and then find that the site designer forgot to mark the "place order" button, causing me to abandon my purchase. These experiences occur all too often in the lives of assistive technology users. #### Persistent Buttons Ensure labels appear on all pages for persistent buttons, such as "back" and "forward" page navigation, search fields, and navigation menus. For example, one popular ecommerce site labels the static shopping cart button correctly on the home page only. On every other page of the site, including the product detail pages, the cart button has no label and is therefore announced as “image.” Verify that buttons have substantial touch targets on mobile screen readers. Test for label and button functionality during routine accessibility audits. ### Pay Particular Attention to Repeat Or Redundant Button Labels Most screen reader users utilize functionality that allows them to filter by web element and then navigate through a list that displays only items relevant to the selected type of web element. For example, let’s take a search results page of a generic ecommerce site. The site displays products in a list with an “add to cart” button under each item. If I only navigated the page using buttons, I would repeatedly hear the “add to cart” announcement. Out of context, this makes very little sense. To fix this, include the name of each product with the “add to cart” button label associated with that particular item. For example, a random button on the list may read “add to cart, 16-piece ceramic dinnerware set, gray.” Whenever a list of redundant buttons is part of the navigation experience you should include specific details in the label that separates individual buttons from the rest. ### Encouraging Web Accessible Button Design Buttons are an integral part of any website. Luckily, it is relatively easy to ensure that a website's buttons are screen reader accessible through text-based labels best practices. These labels should be short and sweet while still retaining clarity. If all call-to-action and navigation buttons are adequately labeled, the website can significantly improve its accessibility and [ADA compliance.](https://info.usablenet.com/a-primer-on-ada-and-digital-accessibility) [![The European Accessibility Act is Now in Effect - Schedule a Consulation now to see if you're affected](https://no-cache.hubspot.com/cta/default/3280432/interactive-191261690494.png)](https://blog.usablenet.com/hs/cta/wi/redirect?encryptedPayload=AVxigLI1l%2FBqJor6%2BGueeip6s%2BBmOGZi6d6w%2BHSmkfi26PSk3y1CmWvOX0Xh5ccV96jUarvDDBy%2BDwG34K5LvfwTfpPTsUf6C2%2FyTwKbXoBH6M67OvNnrcJRg3a8rP1NaNRpCO5%2F7wEMNAmsfkQtLfKqYOYIRJCUcFB72ToOHc8%2FBvHzEBhWDXkdDncMSEGPZOeckdr1LJx79MQCVQAjFppZ2xdQBoiE9pRH&webInteractiveContentId=191261690494&portalId=3280432) ![Michael Taylor](https://blog.usablenet.com/hubfs/Imported_Blog_Media/Michael%20Taylor-4.jpg) ### [Michael Taylor](https://blog.usablenet.com/author/michael-taylor) I am a regular contributor to the UsableNet blog on digital accessibility. I develop, write, and edit content for the company blog related to my experiences with digital accessibility. I explore various areas of the digital world and combine my unique perspective as a screen reader user with my fun and creative writing style to deliver an informative and engaging final product. My goal is to advance the company's marketing initiatives while also raising awareness about digital accessibility and how it affects the lives of real-world assistive technology users. My work covers everything from common accessibility challenges to robust and accessible design to tutorial-like content for specific web elements. - - - - ### Related posts ![Airline Website Accessibility: Booking and Seat Selection While Blind](https://blog.usablenet.com/hubfs/shutterstock_144112840.jpg) [Airline Website Accessibility: Booking and Seat Selection While Blind](https://blog.usablenet.com/airline-website-accessibility-booking-and-seat-selection-while-blind) Aug 11, 2026 ![AI and Accessibility for Ecommerce: What the Tools Really Do and What they Don't](https://blog.usablenet.com/hubfs/%5BSBM%5D%20Blog%20Images%202023/usablenet-generative-ai-and-accessibility.jpeg) [AI and Accessibility for Ecommerce: What the Tools Really Do and What they Don't](https://blog.usablenet.com/ai-and-accessibility-for-ecommerce-what-the-tools-really-do-and-what-they-dont) Aug 5, 2026 ![Airline Website Accessibility: Comparing Flight Results while Blind](https://blog.usablenet.com/hubfs/shutterstock_144112840.jpg) [Airline Website Accessibility: Comparing Flight Results while Blind](https://blog.usablenet.com/airline-website-accessibility-comparing-flight-results-while-blind) Aug 4, 2026 ![Digital Accessibility Lawsuits in 2026: Five Trends Companies Should Know](https://blog.usablenet.com/hubfs/Digital%20Accessibility%20Lawsuits%20in%202026_%20Five%20Trends%20Companies%20Should%20know.png) [Digital Accessibility Lawsuits in 2026: Five Trends Companies Should Know](https://blog.usablenet.com/digital-accessibility-lawsuits-in-2026-five-trends-companies-should-know) Jul 31, 2026 ### Sign Up for the UsableNet Blog ### Recent Posts ![feature image](https://blog.usablenet.com/hubfs/shutterstock_144112840.jpg) [Airline Website Accessibility: Booking and Seat Selection While Blind](https://blog.usablenet.com/airline-website-accessibility-booking-and-seat-selection-while-blind) Aug 11, 2026 ![feature image](https://blog.usablenet.com/hubfs/%5BSBM%5D%20Blog%20Images%202023/usablenet-generative-ai-and-accessibility.jpeg) [AI and Accessibility for Ecommerce: What the Tools Really Do and What they Don't](https://blog.usablenet.com/ai-and-accessibility-for-ecommerce-what-the-tools-really-do-and-what-they-dont) Aug 5, 2026 ![feature image](https://blog.usablenet.com/hubfs/shutterstock_144112840.jpg) [Airline Website Accessibility: Comparing Flight Results while Blind](https://blog.usablenet.com/airline-website-accessibility-comparing-flight-results-while-blind) Aug 4, 2026 ### Posts by Topic - [Web Accessibility (317)](https://blog.usablenet.com/topic/web-accessibility) - [User Experience (115)](https://blog.usablenet.com/topic/user-experience) - [ADA Lawsuits (46)](https://blog.usablenet.com/topic/ada-lawsuits) - [ADA Website Compliance (39)](https://blog.usablenet.com/topic/ada-website-compliance) - [European Accessibility Act (34)](https://blog.usablenet.com/topic/european-accessibility-act) - [Mobile Web (30)](https://blog.usablenet.com/topic/mobile-web) - [Mobile Apps (29)](https://blog.usablenet.com/topic/mobile-apps) - [Retail (27)](https://blog.usablenet.com/topic/retail) ![](https://blog.usablenet.com/hubfs/Consultation%20Icon.svg) Need to improve digital usability, accessibility or performance? We can help. [Partner with us. Get in touch..](https://usablenet.com/getintouch?hsCtaTracking=34f54ed4-8696-43c9-b740-a3982b4b5d91%7Cf4246c48-bf25-487f-9058-34abb838058e) ## Page Footer ### Have a question? **Contact Us** [Book a Consultation](https://calendly.com/usablenet-accessibility/introduction?month=2025-02) [Watch a Demo](https://info.usablenet.com/choose-a-demo) ### Solutions - [UsableNet Assistive](https://usablenet.com/technology/assistive-technology-services) - [UsableNet AQA](https://usablenet.com/technology/aqa) - [Accessibility Audit & Support Services](https://usablenet.com/services) - [Pricing and Plans](https://usablenet.com/pricing) ### Resource Library - [Blog](https://blog.usablenet.com/) - [E-Books](https://usablenet.com/resources?contentType=E-books%20and%20Guides) - [Case Studies](https://usablenet.com/resources?contentType=Case%20Studies) - [Reports](https://usablenet.com/resources?contentType=Reports) - [Test your website for accessibility](https://usablenet.com/automated-accessibility-testing-tool) - [ADA Monthly Lawsuit Tracker](https://info.usablenet.com/ada-website-compliance-lawsuit-tracker) - [Webinars](https://usablenet.com/resources?contentType=Webinars) - [All Resources](https://usablenet.com/resources?all=true) ### Who We Serve - [Public Sector and Education](https://info.usablenet.com/industries-public-sector-and-education) - [Banking and Financial Services](https://info.usablenet.com/industries-financial-services) - [E-commerce and Consumer Goods](https://info.usablenet.com/industries-e-commerce-consumer-goods) - [Food Service and Hospitality](https://info.usablenet.com/-industries-food-service-hospitality) - [Healthcare](https://info.usablenet.com/industries-healthcare) - [Technology and Business Services](https://info.usablenet.com/-industries-technology-and-business-services) ### Compliance - [European Accessibility Laws](https://info.usablenet.com/compliance-europe) - [United States Accessibility Laws](https://info.usablenet.com/compliance-united-states) ### Company - [About Us](https://usablenet.com/about-us) - [LLM Resources](https://usablenet.com/for-ai-assistants) [Accessibility Support](https://blog.usablenet.com/support)| [Privacy Policy](https://blog.usablenet.com/privacy)| [Accessibility Statement](https://blog.usablenet.com/accessibility-statement)| [Diversity and Inclusion Statement](https://blog.usablenet.com/diversity-and-inclusion)| Accessibility Status | [Technology Patents](https://blog.usablenet.com/technology/patent) ## **Sign Up** for the **UsableNet Blog** Join our mailing list to receive email notifications when we publish a new blog, infographic, whitepaper or newsletter. Stay up-to-date on our insights, the latest tech news and digital trends. ![International Association of Accessibility Professionals logo](https://blog.usablenet.com/hs-fs/hubfs/SaaS%20Theme/2023%20Header%20and%20Footer/IAAP-logo.png?width=150&height=81&name=IAAP-logo.png) © 2026 UsableNet Inc. ![International Association of Accessibility Professionals logo](https://blog.usablenet.com/hs-fs/hubfs/SaaS%20Theme/2023%20Header%20and%20Footer/IAAP-logo.png?width=150&height=81&name=IAAP-logo.png) © 2026 UsableNet Inc. ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Michael Taylor", "url" : "https://blog.usablenet.com/author/michael-taylor" }, "dateModified" : "2025-06-11T18:25:05.895Z", "datePublished" : "2023-08-30T12:28:00.000Z", "headline" : "Web Accessible Button Design for Screen Readers", "image" : [ "https://blog.usablenet.com/hubfs/%5BSBM%5D%20Blog%20Images%202023/UsbaleNet-Web-Accessible-Button-Design-for-Screen-Readers.jpeg" ], "mainEntityOfPage" : { "@id" : "https://blog.usablenet.com/web-accessible-button-design-for-screen-readers", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.usablenet.com/hubfs/UsableNet%20Logo_Black.png" }, "name" : "UsableNet Inc." } } ```