Skip to main content


When creating accessible web applications using HTML, what are the recommended practices for editable elements?

Say I have a list of cards, each of which have a title which can be edited. Should all these cards be individual forms? Or should these be naked input elements with appropriate labels? Or something different altogether?

#a11y #wcag #webdev

in reply to Chronocide

If I were you, I'd put a tiny little Edit button with a pencil icon on each of those, it would be super easy to edit things accidentally otherwise. but generally yes, make it an input with a label and wrap your whole card in something like an article or section.
in reply to André Polykanine

@menelion If the title of the card is inside a heading element, would you have the input be inside the heading, or next to it (and toggle the visibility of the heading and input based on the user editing the input field)?
in reply to Chronocide

Definitely not inside a heading! It's a no-no from every side. First, your screen reader users navigate by headings, and the worst thing I want in this case is to land in some input :) And second, I guess it's prohibited by the HTML standard. Maybe to have the input beneath the heading and you can listen to something like KeyUp and update the heading live. If you change the heading's visibility, I guess it's also not a good idea because I might want to come back to the heading, and… it's not there anymore.
in reply to André Polykanine

@menelion Inputs inside heading elements are prohibited by the HTML standard yea, as input elements require parents to be phrasing content (developer.mozilla.org/en-US/do…).

The KeyUp is a really good idea actually. Thinking about it, hiding the visibility of the heading is unneccesary for non-sighted users as the problem I'm trying to solve here is preventing duplicate (visible) text. Making the heading invisible for sighted users but visible in the a11y tree might be better in this case. Many thanks!