Missing accessible name for copy to clipboard button

  • Resolved ctomczyk

    (@ctomczyk)


    2 years, 1 month ago

    Hello, Ryo (@looswebstudio).

    Thanks for your great work on the plugin. I have one suggestion. There is a button “copy to clipboard”, but it’s missing the accessible name. Therefore the screen reader users don’t know the purpose of the action.

    Basically, this code:

    <button class="hcb-clipboard" data-clipboard-target="[data-hcb-clip=&quot;1&quot;]" data-clipboard-action="copy"></button>

    should be:

    <button class="hcb-clipboard" data-clipboard-target="[data-hcb-clip=&quot;1&quot;]" data-clipboard-action="copy"><span class="visually-hidden">Copy to clipboard</span></button>

    Where .visually-hidden is the CSS class. Example code: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss

    The above would improve accessibility.

    We have applied changes locally so you can see how it works. Example page with code blocks and copy to clipboard button:

    8 tips to speed up image loading

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Ryo

    (@looswebstudio)

    Thanks for the report. I will improve it.

    Plugin Author Ryo

    (@looswebstudio)

    Latest version, Added aria-label to the Copy Code button.

    Thread Starter ctomczyk

    (@ctomczyk)

    I’d suggest visually hidden text because it helps automatic translators to translate the text. They aren’t working with aria-label.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Missing accessible name for copy to clipboard button’ is closed to new replies.