Accessibility update
-
Hi,
I’m currently testing the plugin and noticed that I can’t focus on the copy button or icon when using keyboard navigation. Is it possible to add this functionality to improve the plugin accessibility ?
Thanks !
-
Hi,
Thanks a lot for testing the plugin and for raising this accessibility point — it’s really helpful.
I’ve checked the current version of the plugin:
- The Copy Button block is rendered as a native
<button>element, so it is already focusable and can be activated via keyboard (Tab + Enter/Space). - The Copy Icon block is currently rendered as a
<span role="button">without atabindex, which means it isn’t reachable via keyboard focus. This is an accessibility issue and matches what you’re seeing.
I’m going to update the Copy Icon block so that the icon is keyboard-focusable (e.g. with
tabindex="0") and can be activated with Enter/Space, and improve the ARIA labelling so it clearly announces its purpose (e.g. “Copy code” instead of “Copied”).Just to double‑check: are you using the “Copy Icon” block, the “Copy Button” block, or something else (e.g. shortcode / theme integration)?
That will help me confirm we’re fixing the exact case you’re hitting.This will be included in an upcoming release. I’ll update this thread once the fix is shipped so you can retest it.
Thanks again for the feedback and for helping improve the plugin’s accessibility!
Regards,
Support TeamHi,
Thanks for your reactivity. Indeed, the copy button works but I didn’t notice because there isn’t a default style for it, I’ll update it on my site. The copy icon does not like you said. I just downloaded the plugin this morning so I didn’t test the shortcode yet
Improving the aria label can also be useful yes 🙂 Could you make it customizable to change it if the site is not in english (same for “Copied!” actually) ?
I would be glad to retest the new version once you’re done. I’ll test with a screen reader and will give you a feedback.
Thank you for considering accessibility issues 🙂
Okay I didn’t see you could already customized the “Copied” textbox in the dashboard so that’s cool 🙂
Hi @raalknz,
Quick update on the accessibility improvements we discussed earlier: the Copy Icon block is now keyboard‑focusable and screen‑reader friendly in the latest version of Copy Anything to Clipboard. The icon can be focused with Tab and activated with Enter/Space, and we’ve improved the ARIA labelling so the action is announced clearly (plus all strings remain fully translatable).
When you have a moment, please update to the latest version, test it with keyboard navigation and your screen reader, and let me know if you notice anything else we can improve.
Thanks again for your help and for keeping us honest on accessibility.
Regards,
Support TeamHi ! Thanks for the update, a quick feedback :
- focusing on icon now works and aria-label is read correctly for the “Copy to clipboard” button but no feedback is given -> the screen reader does not read “Copied”
- focusing on overlay and pressing spacebar/enter copy the code but no overlay is being displayed on screen (only works with hover) and like before, the screen reader does not announce if the content has been copied
Thank you for your time 🙂
- The Copy Button block is rendered as a native
You must be logged in to reply to this topic.