0

What is the recommended way to implement accessibility to copy text from within a <p> element?

For example,

<p class='text'>Some text to copy</p>

The <p> element is a inserted into DOM via AJAX call. What ARIA tags needs to be applied so that when it is being generated and inserted it becomes accessible to the user to copy easily.

All ideas appreciated.

SocialCircus
  • 2,002
  • 6
  • 24
  • 34

2 Answers2

2

There are at least two good ways to do this:

  1. Make your <p> a <textarea readonly> instead. Thus a user would freely navigate through the text in the textarea if he/she wants, and he/she is also able to copy everything at once just by pressing Ctrl+A.
  2. You can place a «Copy to clipboard» link or button. There is an IE-only solution with window.clipboardData, however in 2014 this is kinda ridiculous because blind users (among others) use different browsers, including (but not restricting to) IE, Firefox, Chrome, and Safari.
    However, I saw on different websites a button implemented using Flash. So you can use this if you manage to deal with it.
    You can see more info about the flash solution in the first answer to this question and following the links provided there.
Community
  • 1
  • 1
Andre Polykanine
  • 3,085
  • 15
  • 28
0

I did not remove <p> but ended up using a <input> under <p> with z-index:-1;. It solved two problems for me:-

  1. Keeping focus on the newly inserted role=dialog modal.
  2. Kept the text selected for a challenged user to copy.

I am sure there are better ways to do it. But for now it works for me.

SocialCircus
  • 2,002
  • 6
  • 24
  • 34