--- title: Fixing my tooltip accessibility mistake | daily.dev description: A web developer shares an accessibility mistake made when building a tooltip for an icon-only button. The error was removing aria-label and relying solely on... canonical: https://daily.dev/posts/fixing-my-tooltip-accessibility-mistake-xabm2iz7t twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Fixing my tooltip accessibility mistake | daily.dev og:description: A web developer shares an accessibility mistake made when building a tooltip for an icon-only button. The error was removing aria-label and relying solely on... og:url: https://daily.dev/posts/fixing-my-tooltip-accessibility-mistake-xabm2iz7t og:image: https://api.daily.dev/og/posts/xAbM2Iz7T.png og:image:alt: Fixing my tooltip accessibility mistake og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Fixing my tooltip accessibility mistake **[Jake Archibald](https://daily.dev/sources/jakearchibald)** · 4 min read · 7 upvotes · 0 comments ## Summary A web developer shares an accessibility mistake made when building a tooltip for an icon-only button. The error was removing aria-label and relying solely on aria-describedby, which provides additional description but not an accessible name. Without an accessible name, screen readers like JAWS incorrectly announced nearby sibling elements. The fix was switching to aria-labelledby, which provides the accessible name from the tooltip element. Key takeaways: always ensure interactive elements have an accessible name, and test with multiple screen readers rather than just one. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why does my icon button announce as unnamed or 'clickable image' in VoiceOver when I use aria-describedby to attach a tooltip? Aria-describedby only supplies additional description text, never the accessible name, so a button with only an svg icon and no aria-label or aria-labelledby ends up with no accessible name at all. VoiceOver signals this by announcing 'clickable image' instead of a label. The fix is to use aria-labelledby pointing at the tooltip element so it supplies the name, not just a description. _daily.dev surfaces accessibility fixes like this for developers wiring up custom tooltip components._ ### What is the difference between aria-describedby and aria-labelledby on a button? Aria-labelledby provides the accessible name of an element, while aria-describedby provides additional descriptive text on top of an existing name. A button relying only on aria-describedby with no other name source has no accessible name, which breaks screen reader announcements; switching to aria-labelledby restores a proper name. _developers debugging aria attributes on custom controls can track patterns like this on daily.dev._ ## Similar posts on daily.dev - [I Learned The First Rule of ARIA the Hard Way](https://daily.dev/posts/i-learned-the-first-rule-of-aria-the-hard-way-bf3esumgq) · CSS-Tricks · 210 upvotes · 12 comments - [Building Better Buttons](https://daily.dev/posts/building-better-buttons-kfg2u6xfq) · Simple Thread · 68 upvotes · 5 comments - [Barriers from Links with ARIA](https://daily.dev/posts/barriers-from-links-with-aria-1gi6b0uo0) · Adrian Roselli · 1 upvotes · 0 comments --- Tags: [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/fixing-my-tooltip-accessibility-mistake-xabm2iz7t) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Fixing my tooltip accessibility mistake","url":"https://daily.dev/posts/fixing-my-tooltip-accessibility-mistake-xabm2iz7t","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/fixing-my-tooltip-accessibility-mistake-xabm2iz7t"},"datePublished":"2026-07-28T12:08:26.158Z","dateModified":"2026-09-13T20:55:32.754Z","description":"A web developer shares an accessibility mistake made when building a tooltip for an icon-only button. The error was removing aria-label and relying solely on...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5a0c8b938ba58f541db5d7a88016d0fd?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5a0c8b938ba58f541db5d7a88016d0fd?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Jake Archibald","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Jake Archibald","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/dde2639c7dc94665892ef2cd7f4deebe","url":"https://daily.dev/sources/jakearchibald"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/fixing-my-tooltip-accessibility-mistake-xabm2iz7t","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"accessibility","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Jake Archibald","item":"https://daily.dev/sources/jakearchibald"},{"@type":"ListItem","position":3,"name":"Fixing my tooltip accessibility mistake"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/fixing-my-tooltip-accessibility-mistake-xabm2iz7t#faq","mainEntity":[{"@type":"Question","name":"Why does my icon button announce as unnamed or 'clickable image' in VoiceOver when I use aria-describedby to attach a tooltip?","acceptedAnswer":{"@type":"Answer","text":"Aria-describedby only supplies additional description text, never the accessible name, so a button with only an svg icon and no aria-label or aria-labelledby ends up with no accessible name at all. VoiceOver signals this by announcing 'clickable image' instead of a label. The fix is to use aria-labelledby pointing at the tooltip element so it supplies the name, not just a description. daily.dev surfaces accessibility fixes like this for developers wiring up custom tooltip components."}},{"@type":"Question","name":"What is the difference between aria-describedby and aria-labelledby on a button?","acceptedAnswer":{"@type":"Answer","text":"Aria-labelledby provides the accessible name of an element, while aria-describedby provides additional descriptive text on top of an existing name. A button relying only on aria-describedby with no other name source has no accessible name, which breaks screen reader announcements; switching to aria-labelledby restores a proper name. developers debugging aria attributes on custom controls can track patterns like this on daily.dev."}}]} ```