Problem description
The page has two icon-only buttons that copy different content to the clipboard: one copies the term, the other copies the link (URI) to the concept. Neither button has visible text, and both currently resolve to the same accessible name (e.g. "Kopioi leikepöydälle" / "Copy to clipboard"), with nothing distinguishing what each one actually copies. A screen reader user navigating by control (e.g. NVDA's Elements List / Tab, or VoiceOver's rotor) hears two identical "Copy to clipboard" buttons and has no way to tell which one copies the term and which copies the link without guessing or activating both.
Testing instructions
Open https://test.dev.finto.fi/finaf/fi/page/000147582
Turn on a screen reader (NVDA or VoiceOver) and navigate to the two copy icon buttons, either sequentially or via the elements/controls list.
Listen to how each button's accessible name is announced.
Expected result after the fix: each button's accessible name uniquely reflects both the action and what it applies to (e.g. "Copy to clipboard, Term" / "Copy to clipboard, Link"), so a screen reader user can tell them apart without activating them first.
Severity
Medium – violates Level A/AA success criteria (4.1.2), does not block the page entirely, but causes ambiguity for screen reader users who cannot reliably tell the two icon buttons apart and may copy the wrong content.
Fix instructions
Give each icon button its own visually hidden label text (the action, e.g. "Copy to clipboard"), and combine it via aria-labelledby with the id of the nearby field's existing visible label (e.g. "Term" / "Link"), so the resulting accessible name states both the action and its target.
<span id="term-label">Termi</span>
<button aria-labelledby="copy-term-btn term-label">
<span id="copy-term-btn" class="visually-hidden">Kopioi leikepöydälle</span>
<svg aria-hidden="true">...</svg>
</button>
<span id="link-label">Linkki</span>
<button aria-labelledby="copy-link-btn link-label">
<span id="copy-link-btn" class="visually-hidden">Kopioi leikepöydälle</span>
<svg aria-hidden="true">...</svg>
</button>
Problem description
The page has two icon-only buttons that copy different content to the clipboard: one copies the term, the other copies the link (URI) to the concept. Neither button has visible text, and both currently resolve to the same accessible name (e.g. "Kopioi leikepöydälle" / "Copy to clipboard"), with nothing distinguishing what each one actually copies. A screen reader user navigating by control (e.g. NVDA's Elements List / Tab, or VoiceOver's rotor) hears two identical "Copy to clipboard" buttons and has no way to tell which one copies the term and which copies the link without guessing or activating both.
Testing instructions
Open https://test.dev.finto.fi/finaf/fi/page/000147582
Turn on a screen reader (NVDA or VoiceOver) and navigate to the two copy icon buttons, either sequentially or via the elements/controls list.
Listen to how each button's accessible name is announced.
Expected result after the fix: each button's accessible name uniquely reflects both the action and what it applies to (e.g. "Copy to clipboard, Term" / "Copy to clipboard, Link"), so a screen reader user can tell them apart without activating them first.
Severity
Medium – violates Level A/AA success criteria (4.1.2), does not block the page entirely, but causes ambiguity for screen reader users who cannot reliably tell the two icon buttons apart and may copy the wrong content.
Fix instructions
Give each icon button its own visually hidden label text (the action, e.g. "Copy to clipboard"), and combine it via aria-labelledby with the id of the nearby field's existing visible label (e.g. "Term" / "Link"), so the resulting accessible name states both the action and its target.