2

We have some custom components which can be used for user input (CustomSelect, SegmentedControl, CustomCheckbox, etc).

In some cases, these internally use the semantic html tag like radiogroup or select, but in some cases, the markup is completely written using div and span elements and accessibility is provided using aria attributes. For such implementations, is there a way to associate a label element to them, to make them behave like native form inputs wrt label behaviour, or better, is there a way to get them treated like native form inputs?

Things that come to mind:

  • use a visually hidden html form element which somehow wraps the custom, and somehow hide its semantics.
  • fieldset and legend might make sense in some cases
  • using javascript to imitate label functionality

Are there any existing patterns for this?

Improve this question
4
  • 1
    CAn you explain why aria-label, aria-labelledby and aria-describedby wouldn't suit your needs ? Thank you. Commented Jul 22, 2022 at 20:32
  • because they are not for the visual user. The mouse user can't click on them to focus on the custom input (or to trigger the default behaviour of the custom input) Commented Jul 23, 2022 at 5:09
  • Well you always will need javascript when you don't use semantic HTML. So just use semantic HTML, that's why its there. Commented Jul 23, 2022 at 9:42
  • Sure, we are using semantic html wherever it makes sense, but html alone does not provide all the different input types or complex widgets for that matter. consider the menubutton pattern for example. HTML does not have a native menu implementation which complies with this. w3c.github.io/aria-practices/examples/menu-button/… .You can definitely use some semantic element to workaround these limitations in some cases, but that is not always enough Commented Jul 23, 2022 at 15:52

1 Answer 1

Reset to default
7

You need to do three things:

  1. Visually code it so that the label looks like it's associated with your custom element, typically because the label is to the left and the element is to the right (in LTR languages).
  2. Programmatically associate the label with the element by using aria-labelledby.
  3. Add javascript so that mouse clicking on the label moves the focus to the element.

Note that you can use a real <label> element but it would mainly be for more readable code, so it's easy to spot the label associated with the element. You most likely (*) cannot use the for attribute of the <label> element because the ID specified must be of a "labelable element", which is defined as:

  • button
  • input
  • meter
  • output
  • progress
  • select
  • textarea

(*) You can use the for attribute if you have a custom element with a form-associated attribute of true. A <label> can be used on a "form-associated custom element"

See https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example.

I have not created a custom form element before but the doc sounds like a real <label for="ID"> can be used with it, in which case you don't need aria-labelledby or javascript.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

For the autonomous custom element I just tested, <label for="ID"> logs an error to the console in Chrome: Incorrect use of <label for=FORM_ELEMENT>: The label's for attribute doesn't match any element id. etc. Firefox does not, but I don't think that means it's working. Also, as your example link shows: it's not a form-associated attribute, it's a static property of the class named formAssociated, and attachInternals() is key. Thanks for the great info on an obscure topic.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.