Re: [css-content] Request for note regarding selection, search, and accessibility of generated content

> On 13 Nov 2015, at 09:30, Michiel Bijl <michiel@agosto.nl> wrote:
> 
> 
>> On 11 Nov 2015, at 17:51, Joanmarie Diggs <jdiggs@igalia.com> wrote:
>> If by "handy information" you mean content with meaning such as the
>> phrase "Example 6" or "Issue 1", then isn't this document an example
>> where handy information is put in generated content instead of in your
>> HTML: https://drafts.csswg.org/css-pseudo-4/ ?
> 
> Yes.
> 
>> Phrases such as "Example 6" and "Issue 1" are the sorts of things I'd
>> like to be able to jump to quickly via my browsers' find in page
>> feature, and be able to select, copy, and paste. But it's generated
>> content, so….
> 
> I agree this text should be selectable and searchable. This is the equivalent of a button made out of a div that you can’t tab to.

We've discussed this at a recent CSSWG conf call, and while we are fully aware that this is a loaded question with a lot of history to it, we have proposed a way forward (finally! thank you Daniel for pushing the idea), now experimentally included in the css-ui-4 specification for people to think about and browsers to experiment with.

https://drafts.csswg.org/css-ui-4/#content-selection

By default (as per the legacy behavior), generated content in pseudo elements is not searchable/copyable/selectable. However, using the user-select property on the pseudos could make them searchable/copyable/selectable.

.warning::before {
  content: "!";
  color: red;
  display: inline-block;
  width: 1em; height: 1em;
  text-align: center;
  border: solid;
  border-radius: 50%;
  margin-right: 1ex;

  /*user-select:none;  implied */
}

vs

.issue { counter-increment: issue; }
.issue::before {
  content: "Issue " counter(issue) ": " ;

  user-select: text;
}

 - Florian

Received on Monday, 23 November 2015 02:37:40 UTC