How do you associate multiple labels with one input?

0-2 years experience

1. 1How would you make a single checkbox have two visible labels — one on the left saying 'Subscribe to newsletter' and another on the right saying 'Opt in' — both clicking to toggle the checkbox?
2. 2What happens if you give two <label> elements the same 'for' attribute pointing to one input? Does the browser handle it correctly?

2-5 years experience

1. 1We have a form where a single 'Email' input needs three different label texts depending on user role (admin sees 'Admin Email', user sees 'Your Email', guest sees 'Contact Email'). How would you implement this without duplicating the input?
2. 2A screen reader user reports that only the first label is announced for an input with multiple labels. How would you debug and fix this?

5-8 years experience

1. 1Design a reusable FormField component that supports multiple associated labels for complex validation messages (e.g., a primary label, a hint label, and an error label) while maintaining proper accessibility semantics.
2. 2In a large codebase, you find inputs with multiple labels where some labels are conditionally rendered. What accessibility risks does this create, and how would you enforce consistent patterns?

8+ years experience

1. 1Your team is migrating a legacy form library that used nested labels (invalid HTML) to a new design system. How would you approach the migration strategy across 50+ micro-frontends owned by different teams?
2. 2Propose an RFC for a standardized 'multi-label' pattern in your organization's component library that handles internationalization, dynamic label visibility, and ARIA relationships — what stakeholders do you involve and what tradeoffs do you document?