What are HTML ARIA attributes and how are they used?
Assesses fundamental understanding of HTML & CSS 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.
| Attribute | Description | Example |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| aria-label | Provides a short, descriptive label for an element that isn't already provided by its text content or associated label element. | <button aria-label="Search">🔍</button> |
| aria-describedby | References another element that provides additional information about the current element, such as instructions or help text. | <input type="text" aria-describedby="name-help"> <div id="name-help">Enter your full name</div> |
| aria-required | Indicates which form fields are mandatory and must be filled out before the form can be submitted. | <input type="text" aria-required="true"> |
| aria-expanded | Indicates whether a collapsible element like an accordion or dropdown menu is currently expanded or collapsed. | <button aria-expanded="true" aria-controls="menu">Menu</button> <div id="menu">...</div> |
| aria-disabled | Indicates whether an element is currently disabled or not, such as a disabled button. | <button aria-disabled="true">Submit</button> |
| aria-checked | Indicates whether a checkbox or radio button is currently checked or not. | <input type="checkbox" aria-checked="true"> |
| aria-haspopup | Indicates that an element has a pop-up or dropdown menu associated with it. | <button aria-haspopup="true" aria-controls="menu">Menu</button> <div id="menu">...</div> |
| aria-selected | Indicates that an element is currently selected or highlighted, such as a selected item in a list | <li aria-selected="true">Item 1</li> |
| aria-hidden | Indicates that an element is currently hidden or not visible to users, such as content that is only revealed when certain conditions are met. | <div aria-hidden="true">Hidden content</div> |
<br />
---
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.