0

I'm asking for a suggestion more than for a real problem. I would like to use the more appropriate approach rather than limit to solve my problem.

I have a DIV containing text, and a button, that toggle "contenteditable" attribute on it, in order to make it editable. Obviously, I could have more than one couple "button-div" in page.

<button class='toggle-edit'>Start Editing</button>

<div id='div-to-be-edited' contenteditable='false'>
  ...
</div>

I need to link button to its relative editable div, and I thought about rel attribute or custom aria-attribute like:

<button class='toggle-edit' rel='div-to-be-edited'>Start Editing</button>

or 

<button class='toggle-edit' aria-edit-div='div-to-be-edited'>Start Editing</button>

My idea is to intercept via jQuery, rel or aria-attribute of clicked button, and than apply contenteditabile attribute to relative DIV.

Problem is that these attributes seems to not be thought for this particular purpose by specific. Can you suggest me the most clean solution?

Thank you.

Luca Detomi
  • 4,888
  • 6
  • 45
  • 70

2 Answers2

1

The button element can’t have a rel attribute (as you can easily check yourself), and WAI-ARIA does not define an aria-edit-div attribute.

I don’t have experience with it, but maybe (!) the aria-controls attribute is appropriate:

Identifies the element (or elements) whose contents or presence are controlled by the current element.

It would look like:

<button class="toggle-edit" aria-controls="div-to-be-edited">Start Editing</button>
<div id="div-to-be-edited" contenteditable="false"></div>

However, making an element editable might not fall under controlling "contents or presence", in the strict sense of the words. So check if it’s appropriate before using it.

If aria-controls should not be appropriate, I don’t think there is an alternative. In that case, you would have to use attributes that don’t convey any meaning/relationship, which means class or id, or else data-*:

<button class="toggle-edit" data-controls="div-to-be-edited">Start Editing</button>
<div id="div-to-be-edited" contenteditable="false"></div>
Community
  • 1
  • 1
unor
  • 82,883
  • 20
  • 183
  • 315
  • `data-*` attribute seems the more appropriate, also because I saw that _Bootstrap_ too uses it to generate modal and accordions, using `data-toggle` and `data-target` attributes gto link buttons and relative `DIV`s. Do you agree? – Luca Detomi Feb 24 '15 at 07:51
  • 1
    @LucaDetomi: `data-*` [should](http://programmers.stackexchange.com/a/257026/63183) only be used if there are no more appropriate attributes. From HTML5’s global attributes, only `id` and `class` would be possible in your case, and I’d say that neither `id` nor `class` are a good match for this, so yes, I agree. – unor Feb 24 '15 at 08:41
0

You should use neither of the attributes you were thinking about, since they are formally invalid and practically useless (or, theoretically, worse: some future specification might assign a meaning to them, possibly very different from your ideas, possibly just close enough to cause a mess).

The only relevant attribute would be role=button, but it is the default for a button element anyway. See the WD Using WAI-ARIA in HTML.

There is no way in HTML to say “this button affects that element”, which seems to be what you are after. Such things should be explained verbally in the user interface, or made obvious in all browsing modes.

Jukka K. Korpela
  • 178,198
  • 33
  • 241
  • 350