--- title: I Learned The First Rule of ARIA the Hard Way | daily.dev description: A developer shares their experience of breaking a button's accessibility by adding an ARIA role attribute. The button worked perfectly as native HTML, but... canonical: https://daily.dev/posts/i-learned-the-first-rule-of-aria-the-hard-way-bf3esumgq twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: I Learned The First Rule of ARIA the Hard Way | daily.dev og:description: A developer shares their experience of breaking a button's accessibility by adding an ARIA role attribute. The button worked perfectly as native HTML, but... og:url: https://daily.dev/posts/i-learned-the-first-rule-of-aria-the-hard-way-bf3esumgq og:image: https://api.daily.dev/og/posts/bF3EsUMGQ.png og:image:alt: I Learned The First Rule of ARIA the Hard Way 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. # I Learned The First Rule of ARIA the Hard Way **[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 7 min read · 210 upvotes · 12 comments ## Summary A developer shares their experience of breaking a button's accessibility by adding an ARIA role attribute. The button worked perfectly as native HTML, but adding role="link" caused keyboard navigation and screen reader issues. The fix was simple: remove the ARIA attribute and use CSS classes for styling instead. The key lesson is that semantic HTML already provides robust accessibility features, and ARIA should only be used to communicate missing state information, not to redefine element roles. When you override native semantics with ARIA, you take on responsibility for keyboard interactions, focus management, and cross-platform behavior. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@ghost** · 7 upvotes > I didn’t know we can break a11y by adding random attributes without knowing what they do. Nice catch! **@johndiddles** · 5 upvotes > I've never been bothered about accessibility until the day I saw a visually impaired student use their phone in a way I had never seen before. That was the day everything changed for me. Now, I don't take accessibility concerns lightly. **@byteoutlaw** · 5 upvotes > Thanks! Just read tldr, that was super neat! **@petecapecod** · 2 upvotes > Good advice thanks for sharing 🙌🏻 **@geoffbutterfield** · 2 upvotes > The one thing stressed over and over is no ARIA is better then bad Aria. ## Similar posts on daily.dev - [Read Me First](https://daily.dev/posts/read-me-first-3vaevawvz) · Hacker News · 1 upvotes · 0 comments - [Building Better Buttons](https://daily.dev/posts/building-better-buttons-kfg2u6xfq) · Simple Thread · 68 upvotes · 5 comments - [Explaining the Accessible Benefits of Using Semantic HTML Elements](https://daily.dev/posts/explaining-the-accessible-benefits-of-using-semantic-html-elements-qzckf8xz9) · CSS-Tricks · 10 upvotes · 2 comments - [Barriers from Links with ARIA](https://daily.dev/posts/barriers-from-links-with-aria-1gi6b0uo0) · Adrian Roselli · 1 upvotes · 0 comments - [Fixing my tooltip accessibility mistake](https://daily.dev/posts/fixing-my-tooltip-accessibility-mistake-xabm2iz7t) · Jake Archibald · 7 upvotes · 0 comments --- Tags: [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/i-learned-the-first-rule-of-aria-the-hard-way-bf3esumgq) ```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":"I Learned The First Rule of ARIA the Hard Way","url":"https://daily.dev/posts/i-learned-the-first-rule-of-aria-the-hard-way-bf3esumgq","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/i-learned-the-first-rule-of-aria-the-hard-way-bf3esumgq"},"datePublished":"2026-01-21T17:55:39.228Z","dateModified":"2026-01-21T17:56:15.237Z","description":"A developer shares their experience of breaking a button's accessibility by adding an ARIA role attribute. The button worked perfectly as native HTML, but...","image":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/08/accessibility-a11y.png","thumbnailUrl":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/08/accessibility-a11y.png","isAccessibleForFree":true,"articleSection":"CSS-Tricks","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":"CSS-Tricks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks","url":"https://daily.dev/sources/css_tricks"},"commentCount":12,"discussionUrl":"https://daily.dev/posts/i-learned-the-first-rule-of-aria-the-hard-way-bf3esumgq","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":210},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":12}],"keywords":"html,accessibility","timeRequired":"PT7M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"I Learned The First Rule of ARIA the Hard Way"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/i-learned-the-first-rule-of-aria-the-hard-way-bf3esumgq","comment":[{"@type":"Comment","text":"I didn’t know we can break a11y by adding random attributes without knowing what they do. Nice catch!","datePublished":"2026-01-25T15:09:42.644Z","url":"https://daily.dev/posts/bF3EsUMGQ#c-GhEbCwK48","author":{"@type":"Person","name":"Deleted user","url":"https://daily.dev/ghost","image":"https://media.daily.dev/image/upload/s--hNIUzLiO--/f_auto/v1705327420/public/ghost_vlftth"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7}},{"@type":"Comment","text":"I’ve never been bothered about accessibility until the day I saw a visually impaired student use their phone in a way I had never seen before. That was the day everything changed for me. Now, I don’t take accessibility concerns lightly.","datePublished":"2026-01-27T01:21:29.589Z","url":"https://daily.dev/posts/bF3EsUMGQ#c-ZoqR7P0yq","author":{"@type":"Person","name":"Adepelumi John","url":"https://daily.dev/johndiddles","image":"https://lh3.googleusercontent.com/a/ACg8ocIAHXEXqjxtmrl__59VvFeZQxU8Wpw9ppnXvugAFjrGiUU_bA=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"Thanks! Just read tldr, that was super neat!","datePublished":"2026-01-23T08:14:49.891Z","url":"https://daily.dev/posts/bF3EsUMGQ#c-GkvZR3Jzg","author":{"@type":"Person","name":"Jacob B. Bonde","url":"https://daily.dev/byteoutlaw","image":"https://media.daily.dev/image/upload/s--veTChHK7--/f_auto/v1733220070/avatars/avatar_5cQvIZKr5tDFDotVDjulg"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"Good advice thanks for sharing 🙌🏻","datePublished":"2026-01-28T13:38:33.349Z","url":"https://daily.dev/posts/bF3EsUMGQ#c-ZG5RBvXBN","author":{"@type":"Person","name":"Peter Cruckshank","url":"https://daily.dev/petecapecod","image":"https://media.daily.dev/image/upload/s--ZJhQyKws--/f_auto/v1721235024/avatars/avatar_A9xh33q0QoxtkGoJRCosp"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"The one thing stressed over and over is no ARIA is better then bad Aria.","datePublished":"2026-02-04T23:43:05.427Z","url":"https://daily.dev/posts/bF3EsUMGQ#c-CQAo5FCaF","author":{"@type":"Person","name":"Geoff Butterfield","url":"https://daily.dev/geoffbutterfield","image":"https://lh3.googleusercontent.com/a/ACg8ocK443EUL_Qro8TpOqx7ZD19i944IF95aKc9_TKOXjNSadY=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}}]} ```