[
    {
        "role": "user",
        "content": "using%20a%20screen%20reader%2C%20in%20a%20table%20i%20hear%20an%20announcement%20of%20download%20button%20button.%20what%20causes%20this%3F"
    },
    {
        "role": "assistant",
        "content": "When you hear a screen reader announce \u201cdownload button button\u201d (or similarly, a label ending in \u201cbutton button\u201d) while navigating within a table, it\u2019s usually due to the accessible name of the interactive element being constructed in a way that repeats the word \u201cbutton.\u201d Here are the common causes and how to fix them.\n\n---\n\n## \ud83e\udd14 What\u2019s Causing the Double \u201cButton\u201d\n\n1. **Label text includes the word \u201cbutton\u201d**  \n   If the visible text of a `<button>` element contains \u201cbutton\u201d (for example `<button>Download button</button>`), the screen reader will announce the label *plus* its role (button). Many screen readers append the role name automatically, leading to \u201c\u2026 button button.\u201d  \n   Source: In Android\u2019s TalkBack documentation, including words like \u201cbutton\u201d in the label produces \u201cSave button button\u201d when the system already announces the role. ([support.google.com](https://support.google.com/accessibility/android/answer/6378990?hl=en&utm_source=openai))\n\n2. **Redundant accessible name attributes**  \n   When you use `aria-label` or `aria-labelledby` to provide a name that\u2019s identical (or very similar) to visible text, you may end up duplicating the text in speech. For example:  \n   ```html\n   <button aria-label=\"Download button\">Download</button>\n   ```  \n   Here, \u201cDownload button\u201d gets read from `aria-label`, and \u201cbutton\u201d is added by the screen reader because of the element\u2019s implicit role. That can produce \u201cDownload button, button.\u201d  \n   Source: A blog post on common ARIA mistakes covers this exact issue. ([dev.to](https://dev.to/priya_nair/aria-labels-done-wrong-the-most-common-mistakes-i-see-in-production-code-39ga?utm_source=openai))\n\n3. **Misuse of ARIA techniques inside tables**  \n   In tables, you might have multiple elements contributing to the element\u2019s accessible name \u2014 perhaps a header cell plus row context plus explicit label attributes. If some of those attributes or labels themselves include the word \u201cbutton,\u201d then you can get duplication.  \n   Additionally, tables that use `aria-labelledby` referencing both the button\u2019s text *and* some parent or related cell headers can confuse the accessible name algorithm, especially if the same string is included more than once. ([w3.org](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/?utm_source=openai))\n\n---\n\n## \ud83d\udee0 How to Fix It\n\n- **Don\u2019t include \u201cbutton\u201d in the visible text if it isn\u2019t necessary.**  \n  The screen reader already says \u201cbutton\u201d because of the role; letting visible text be concise removes the redundant voice. Change something like `<button>Download button</button>` to `<button>Download</button>`.\n\n- **Avoid repeating the visible label in `aria-label`.**  \n  If you have visible text in the button that already describes its action, you usually don\u2019t need `aria-label`; or if you use it, make sure it adds *different* context (e.g. format, file size).  \n  Example:\n  ```html\n  <!-- Bad: duplicates -->\n  <button aria-label=\"Download\">Download</button>\n  \n  <!-- Better: clarifies -->\n  <button aria-label=\"Download PDF file\">Download</button>\n  ```\n\n- **Use ARIA attributes correctly in tables.**  \n  If the button is inside a cell and you\u2019ve used `aria-labelledby` pointing to both the table row or column header plus the button text, ensure those headers don\u2019t themselves contain extra \u201cbutton\u201d text. Also check that you\u2019re not including the same text in multiple accessible name sources.  \n\n- **Test with different screen readers (NVDA, JAWS, VoiceOver, TalkBack)**  \n  Because accessible name computation and announcement vary between platforms, check how your labeling behaves in practice. What causes double announcements in one system may show up differently in another.\n\n---\n\nIf you want, I can review the specific HTML snippet you\u2019re using (especially the button inside the table), and help you modify it so the screen reader says just \u201cDownload button\u201d rather than repeating \u201cbutton.\u201d Want me to take a look at your code?"
    }
]