Chrome Developer Tools -Accessibility

Question

The Accessibility tab in Chrome developer tools run on a input without a label compiles to:

• aria-labelledby: Not specified
• aria-label: Not specified
• From label: Not specified
• placeholder: Not specified
• aria-placeholder: Not specified
• title: Not specified

Could someone explain the context of the 'From' label.

Thanks

Answer 1

It’s referring to an HTML label tag.

<label for=“answer”>Answer</label>
<input id=“answer”>

This is the “right” way to mark up a label for a form field.

• aria-labelledby is a work-around when the label can’t be marked up by a label tag (e.g. see this recent answer)
• aria-label is an alternative when for whatever reason there isn’t a tag whose content identifies the label
• the others are not intended to be used as labels, but assistive technologies sometimes use them as fallbacks