Using ARIA for Labels with Embedded Fields (MDN Web Docs)

MDN’s guide to labeling a form control whose accessible name is split across text before and after it in the same sentence — e.g. “Delete history after [ ] days” — rather than sitting beside one self-contained label.

License: CC BY-SA 2.5+ (Mozilla Contributors).

Key points

• aria-labelledby accepts multiple, space-separated ids, read in the order listed, letting a screen reader concatenate several text fragments into one accessible name for a single control.
• aria-labelledby takes precedence over a <label for> association where both are present — keep the <label> anyway, as a fallback for assistive technology that doesn’t support aria-labelledby.
• Screen reader support varies: works well in NVDA, Window-Eyes, and Orca; JAWS 8 had known limitations.

Cited In

Patterns

• Form Design