Terence EdenWhich of these #Unicode symbols do you think *best* represents the concept of "copy"?
That is, if you click it, something will be copied to your clipboard.
(Other suggestions welcome if they are in Unicode.)
| ⮺ | |
| ⎘ | |
| ⎙ | |
| ⧉ |
Poll ends at .
I've added a "copy" button to all my code samples.
The JS is surprisingly lightweight.
<button class=copy onclick="navigator.clipboard.writeText( this.parentNode.lastChild.textContent );" title="Copy code">⧉</button>
Wonder if there's any other semantics / accessibility stuff I need to consider?
James 🌈💜Well the unicode you chose is spoken as "Two joined squares", so you probably want an aria-label to tell me what that actually means.
Wouter Lindenhof@shaknais The `title` does that.
Update: Incorrect, it adds, it doesn't replace.
See: https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#name_calculation
Title is spoken after the text content. Aria-label replaces it.
So with title:
"Two joined squares copy code"
Or with a aria-label:
"Click to copy code"
Right, that makes sense. Thanks for pointing that out to me. I hadn't realized that the "content" of the button would still be spoken.
@DevWouter You're right that title is usually the right thing to use.
Its just in cases where you have symbols, you probably need something else - because the accessible audience may never have seen one.
It’s the curse of never having experienced an accessibility issue: I don’t always realize when something is inaccessible.
The moment you pointed it out I realized the frustration I have when I my phone speaks a text with a strange smiley. But those are “easy” to understand.
Your mention of symbols is a good rule for me to keep in mind.
/me looks nervously at an app he is building with a lot of symbols
Yikes…