What is the difference between aria-label and aria-labelledby?
Assesses fundamental understanding of Web Accessibility conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Both give an element an accessible name, but they work differently. aria-label sets the name directly to a string, for example a button with aria-label="Close dialog". aria-labelledby references the id of one or more elements whose text becomes the name, and multiple ids are concatenated in order.
<span id="billing">Billing address</span>
<input aria-labelledby="billing" />
Precedence matters: aria-labelledby wins over aria-label, which wins over native labelling such as label for, which wins over the element's own text content.
Use aria-labelledby when a visible label already exists, because it keeps the accessible name in sync with what sighted users see. Use aria-label when there is no visible text, and prefer a visually hidden native label for form fields over either. Do not put interactive content or long text in a label, and remember that aria-label is ignored on elements without a role that supports naming, such as a plain div.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.