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?
Furbland's Very Cool Mastodon™@Edent i love that "navigator" is still the way to refer to the browser. now all we need is to bring back the blink tag
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…
Christopher M0YNG@shaknais @Edent this. I'd suggest something informative of the action, e.g. "copy code block to clipboard"
You probablly also want a tooltip ("title" is probablly fine) that says the same thing for sighted people who don't guess the symbol.
Edit, also ideally you'd confirm it happened.
E.g. change to "code copied"
Check how I do it on https://mypronouns.fyi/they/.../themselves
If you want "inspiration" (I'm not saying mine is perfect)
Timo TijhofConsider no icon. That might double reach among sighted users, and removes the need for the a11y workarounds. From:
<button onclick=".." title="Copy code" aria-label="Click to copy code">emoji</button>
To:
<button onclick='..">Copy</button>
And then perhaps:
<button onclick="..; this.textContent='Copied!'"> Copy</button>
Python and several others do this. I implemented it in MediaWiki as well. E.g.:
* https://docs.python.org/3/library/string.html#format-string-syntax
* https://www.mediawiki.org/wiki/Quickstart?safemode=on
MJ Ray