ARIA Vocabulary Quiz
Test your knowledge of ARIA roles, properties, and live regions used in accessible web development.
0 / 45 completed
1 / 45
What does the ARIA attribute `role="navigation"` communicate to assistive technologies?
role="navigation" marks a landmark region containing navigation links, helping screen reader users jump directly to the site navigation.
2 / 45
Which ARIA attribute provides an accessible name for an element when no visible label text is present?
aria-label provides a text string as the accessible name directly on the element, useful for icon buttons without visible text.
3 / 45
What is the difference between `aria-live="polite"` and `aria-live="assertive"`?
aria-live="polite" announces updates after the user finishes their current action; aria-live="assertive" interrupts immediately and should be used only for critical alerts.
4 / 45
What does `aria-expanded="false"` communicate on a disclosure button?
aria-expanded="false" tells screen reader users that the controlled region (e.g. a dropdown or accordion panel) is currently collapsed, and "true" indicates it is open.
5 / 45
When should you use `aria-labelledby` instead of `aria-label`?
aria-labelledby references the ID of an existing visible element to use its text as the accessible name, avoiding duplication and keeping visible and programmatic labels in sync.
6 / 45
Sarah: "Hey team, I'm updating the API response for the user profile. I've added an aria-describedby attribute to the The correct answer highlights the purpose of
aria-describedby: it establishes a link between an element and another source of information (in this case, the label text within the details section) for screen reader users. The common misconception is to think of aria-describedby as simply providing a basic description; it's designed to connect to existing labels or other elements that offer more context. Using aria-label would be an alternative approach but less precise in this scenario.7 / 45
David: "I'm submitting this PR to update the dashboard layout. I've used aria-label on the 'Refresh Data' button to provide a text description for screen readers. Should I be using aria-describedby instead?"While
aria-label can provide a text description for screen readers, it's generally best practice to use aria-describedby when linking an element directly to its descriptive content. This creates a stronger semantic connection for assistive technologies and clarifies the purpose of the button more effectively. Using aria-describedby allows you to precisely control which element provides the description, unlike aria-label which relies on the label being present on the button itself.8 / 45
Mark comments on a PR: "Just noticed this button isn't accessible. It lacks a clear label and doesn't use any ARIA attributes to describe its function. Users with screen readers won't know what it does.". Which of the following approaches would Mark recommend to improve accessibility in this situation?Mark's suggestion correctly identifies the two key components for accessible buttons: `aria-label` provides immediate context to screen readers, while `aria-describedby` allows linking to more detailed information if needed. The other options either misinterpret the role of each attribute or offer overly simplistic (and ultimately insufficient) solutions. It's crucial that developers understand the difference between providing a concise label and offering supplementary descriptive content for assistive technology users.
9 / 45
John: "I'm reviewing this PR. The component uses aria-hidden="true" on the loading spinner. Should I remove it? It seems like a visual indicator is enough."The key misunderstanding here is around the purpose of `aria-hidden`. While a visual spinner *is* useful, it's not sufficient for users relying solely on screen readers. `aria-hidden="true"` tells assistive technologies that the element should be ignored entirely – this would prevent screen reader users from receiving any information about the loading state. The correct approach is to provide alternative descriptive text using
aria-live or a properly labeled button, ensuring all users have access to the same information.10 / 45
Maya: "I think you should use aria-describedby instead. It gives screen readers more context about what the button does."
While `aria-label` can be used to provide a short description, it's often insufficient for complex user interface elements. `aria-describedby` allows you to link the button to more detailed text or other UI components that explain its role, offering screen readers greater context and understanding. Therefore, Maya's suggestion of using `aria-describedby` is the more appropriate approach in this scenario.
11 / 45
Sarah: "Hey team, I'm updating the API response for the user profile. I've added an aria-describedby attribute to the The correct answer highlights the purpose of
aria-describedby: it establishes a link between an element and another source of information (in this case, the label text within the details section) for screen reader users. The common misconception is to think of aria-describedby as simply providing a basic description; it's designed to connect to existing labels or other elements that offer more context. Using aria-label would be an alternative approach but less precise in this scenario.12 / 45
David: "I'm submitting this PR to update the dashboard layout. I've used aria-label on the 'Refresh Data' button to provide a text description for screen readers. Should I be using aria-describedby instead?"While
aria-label can provide a text description for screen readers, it's generally best practice to use aria-describedby when linking an element directly to its descriptive content. This creates a stronger semantic connection for assistive technologies and clarifies the purpose of the button more effectively. Using aria-describedby allows you to precisely control which element provides the description, unlike aria-label which relies on the label being present on the button itself.13 / 45
Mark comments on a PR: "Just noticed this button isn't accessible. It lacks a clear label and doesn't use any ARIA attributes to describe its function. Users with screen readers won't know what it does.". Which of the following approaches would Mark recommend to improve accessibility in this situation?Mark's suggestion correctly identifies the two key components for accessible buttons: `aria-label` provides immediate context to screen readers, while `aria-describedby` allows linking to more detailed information if needed. The other options either misinterpret the role of each attribute or offer overly simplistic (and ultimately insufficient) solutions. It's crucial that developers understand the difference between providing a concise label and offering supplementary descriptive content for assistive technology users.
14 / 45
John: "I'm reviewing this PR. The component uses aria-hidden="true" on the loading spinner. Should I remove it? It seems like a visual indicator is enough."The key misunderstanding here is around the purpose of `aria-hidden`. While a visual spinner *is* useful, it's not sufficient for users relying solely on screen readers. `aria-hidden="true"` tells assistive technologies that the element should be ignored entirely – this would prevent screen reader users from receiving any information about the loading state. The correct approach is to provide alternative descriptive text using
aria-live or a properly labeled button, ensuring all users have access to the same information.15 / 45
Maya: "I think you should use aria-describedby instead. It gives screen readers more context about what the button does."
While `aria-label` can be used to provide a short description, it's often insufficient for complex user interface elements. `aria-describedby` allows you to link the button to more detailed text or other UI components that explain its role, offering screen readers greater context and understanding. Therefore, Maya's suggestion of using `aria-describedby` is the more appropriate approach in this scenario.
16 / 45
Sarah: "Hey team, I'm updating the API response for the user profile. I've added an aria-describedby attribute to the The correct answer highlights the purpose of
aria-describedby: it establishes a link between an element and another source of information (in this case, the label text within the details section) for screen reader users. The common misconception is to think of aria-describedby as simply providing a basic description; it's designed to connect to existing labels or other elements that offer more context. Using aria-label would be an alternative approach but less precise in this scenario.17 / 45
David: "I'm submitting this PR to update the dashboard layout. I've used aria-label on the 'Refresh Data' button to provide a text description for screen readers. Should I be using aria-describedby instead?"While
aria-label can provide a text description for screen readers, it's generally best practice to use aria-describedby when linking an element directly to its descriptive content. This creates a stronger semantic connection for assistive technologies and clarifies the purpose of the button more effectively. Using aria-describedby allows you to precisely control which element provides the description, unlike aria-label which relies on the label being present on the button itself.18 / 45
Mark comments on a PR: "Just noticed this button isn't accessible. It lacks a clear label and doesn't use any ARIA attributes to describe its function. Users with screen readers won't know what it does.". Which of the following approaches would Mark recommend to improve accessibility in this situation?Mark's suggestion correctly identifies the two key components for accessible buttons: `aria-label` provides immediate context to screen readers, while `aria-describedby` allows linking to more detailed information if needed. The other options either misinterpret the role of each attribute or offer overly simplistic (and ultimately insufficient) solutions. It's crucial that developers understand the difference between providing a concise label and offering supplementary descriptive content for assistive technology users.
19 / 45
John: "I'm reviewing this PR. The component uses aria-hidden="true" on the loading spinner. Should I remove it? It seems like a visual indicator is enough."The key misunderstanding here is around the purpose of `aria-hidden`. While a visual spinner *is* useful, it's not sufficient for users relying solely on screen readers. `aria-hidden="true"` tells assistive technologies that the element should be ignored entirely – this would prevent screen reader users from receiving any information about the loading state. The correct approach is to provide alternative descriptive text using
aria-live or a properly labeled button, ensuring all users have access to the same information.20 / 45
Maya: "I think you should use aria-describedby instead. It gives screen readers more context about what the button does."
While `aria-label` can be used to provide a short description, it's often insufficient for complex user interface elements. `aria-describedby` allows you to link the button to more detailed text or other UI components that explain its role, offering screen readers greater context and understanding. Therefore, Maya's suggestion of using `aria-describedby` is the more appropriate approach in this scenario.
21 / 45
Sarah: "Hey team, I'm updating the API response for the user profile. I've added an aria-describedby attribute to the The correct answer highlights the purpose of
aria-describedby: it establishes a link between an element and another source of information (in this case, the label text within the details section) for screen reader users. The common misconception is to think of aria-describedby as simply providing a basic description; it's designed to connect to existing labels or other elements that offer more context. Using aria-label would be an alternative approach but less precise in this scenario.22 / 45
David: "I'm submitting this PR to update the dashboard layout. I've used aria-label on the 'Refresh Data' button to provide a text description for screen readers. Should I be using aria-describedby instead?"While
aria-label can provide a text description for screen readers, it's generally best practice to use aria-describedby when linking an element directly to its descriptive content. This creates a stronger semantic connection for assistive technologies and clarifies the purpose of the button more effectively. Using aria-describedby allows you to precisely control which element provides the description, unlike aria-label which relies on the label being present on the button itself.23 / 45
Mark comments on a PR: "Just noticed this button isn't accessible. It lacks a clear label and doesn't use any ARIA attributes to describe its function. Users with screen readers won't know what it does.". Which of the following approaches would Mark recommend to improve accessibility in this situation?Mark's suggestion correctly identifies the two key components for accessible buttons: `aria-label` provides immediate context to screen readers, while `aria-describedby` allows linking to more detailed information if needed. The other options either misinterpret the role of each attribute or offer overly simplistic (and ultimately insufficient) solutions. It's crucial that developers understand the difference between providing a concise label and offering supplementary descriptive content for assistive technology users.
24 / 45
John: "I'm reviewing this PR. The component uses aria-hidden="true" on the loading spinner. Should I remove it? It seems like a visual indicator is enough."The key misunderstanding here is around the purpose of `aria-hidden`. While a visual spinner *is* useful, it's not sufficient for users relying solely on screen readers. `aria-hidden="true"` tells assistive technologies that the element should be ignored entirely – this would prevent screen reader users from receiving any information about the loading state. The correct approach is to provide alternative descriptive text using
aria-live or a properly labeled button, ensuring all users have access to the same information.25 / 45
Maya: "I think you should use aria-describedby instead. It gives screen readers more context about what the button does."
While `aria-label` can be used to provide a short description, it's often insufficient for complex user interface elements. `aria-describedby` allows you to link the button to more detailed text or other UI components that explain its role, offering screen readers greater context and understanding. Therefore, Maya's suggestion of using `aria-describedby` is the more appropriate approach in this scenario.
26 / 45
Sarah: "Hey team, I'm updating the API response for the user profile. I've added an aria-describedby attribute to the The correct answer highlights the purpose of
aria-describedby: it establishes a link between an element and another source of information (in this case, the label text within the details section) for screen reader users. The common misconception is to think of aria-describedby as simply providing a basic description; it's designed to connect to existing labels or other elements that offer more context. Using aria-label would be an alternative approach but less precise in this scenario.27 / 45
David: "I'm submitting this PR to update the dashboard layout. I've used aria-label on the 'Refresh Data' button to provide a text description for screen readers. Should I be using aria-describedby instead?"While
aria-label can provide a text description for screen readers, it's generally best practice to use aria-describedby when linking an element directly to its descriptive content. This creates a stronger semantic connection for assistive technologies and clarifies the purpose of the button more effectively. Using aria-describedby allows you to precisely control which element provides the description, unlike aria-label which relies on the label being present on the button itself.28 / 45
Mark comments on a PR: "Just noticed this button isn't accessible. It lacks a clear label and doesn't use any ARIA attributes to describe its function. Users with screen readers won't know what it does.". Which of the following approaches would Mark recommend to improve accessibility in this situation?Mark's suggestion correctly identifies the two key components for accessible buttons: `aria-label` provides immediate context to screen readers, while `aria-describedby` allows linking to more detailed information if needed. The other options either misinterpret the role of each attribute or offer overly simplistic (and ultimately insufficient) solutions. It's crucial that developers understand the difference between providing a concise label and offering supplementary descriptive content for assistive technology users.
29 / 45
John: "I'm reviewing this PR. The component uses aria-hidden="true" on the loading spinner. Should I remove it? It seems like a visual indicator is enough."The key misunderstanding here is around the purpose of `aria-hidden`. While a visual spinner *is* useful, it's not sufficient for users relying solely on screen readers. `aria-hidden="true"` tells assistive technologies that the element should be ignored entirely – this would prevent screen reader users from receiving any information about the loading state. The correct approach is to provide alternative descriptive text using
aria-live or a properly labeled button, ensuring all users have access to the same information.30 / 45
Maya: "I think you should use aria-describedby instead. It gives screen readers more context about what the button does."
While `aria-label` can be used to provide a short description, it's often insufficient for complex user interface elements. `aria-describedby` allows you to link the button to more detailed text or other UI components that explain its role, offering screen readers greater context and understanding. Therefore, Maya's suggestion of using `aria-describedby` is the more appropriate approach in this scenario.
31 / 45
Sarah: "Hey team, I'm updating the API response for the user profile. I've added an aria-describedby attribute to the The correct answer highlights the purpose of
aria-describedby: it establishes a link between an element and another source of information (in this case, the label text within the details section) for screen reader users. The common misconception is to think of aria-describedby as simply providing a basic description; it's designed to connect to existing labels or other elements that offer more context. Using aria-label would be an alternative approach but less precise in this scenario.32 / 45
David: "I'm submitting this PR to update the dashboard layout. I've used aria-label on the 'Refresh Data' button to provide a text description for screen readers. Should I be using aria-describedby instead?"While
aria-label can provide a text description for screen readers, it's generally best practice to use aria-describedby when linking an element directly to its descriptive content. This creates a stronger semantic connection for assistive technologies and clarifies the purpose of the button more effectively. Using aria-describedby allows you to precisely control which element provides the description, unlike aria-label which relies on the label being present on the button itself.33 / 45
Mark comments on a PR: "Just noticed this button isn't accessible. It lacks a clear label and doesn't use any ARIA attributes to describe its function. Users with screen readers won't know what it does.". Which of the following approaches would Mark recommend to improve accessibility in this situation?Mark's suggestion correctly identifies the two key components for accessible buttons: `aria-label` provides immediate context to screen readers, while `aria-describedby` allows linking to more detailed information if needed. The other options either misinterpret the role of each attribute or offer overly simplistic (and ultimately insufficient) solutions. It's crucial that developers understand the difference between providing a concise label and offering supplementary descriptive content for assistive technology users.
34 / 45
John: "I'm reviewing this PR. The component uses aria-hidden="true" on the loading spinner. Should I remove it? It seems like a visual indicator is enough."The key misunderstanding here is around the purpose of `aria-hidden`. While a visual spinner *is* useful, it's not sufficient for users relying solely on screen readers. `aria-hidden="true"` tells assistive technologies that the element should be ignored entirely – this would prevent screen reader users from receiving any information about the loading state. The correct approach is to provide alternative descriptive text using
aria-live or a properly labeled button, ensuring all users have access to the same information.35 / 45
Maya: "I think you should use aria-describedby instead. It gives screen readers more context about what the button does."
While `aria-label` can be used to provide a short description, it's often insufficient for complex user interface elements. `aria-describedby` allows you to link the button to more detailed text or other UI components that explain its role, offering screen readers greater context and understanding. Therefore, Maya's suggestion of using `aria-describedby` is the more appropriate approach in this scenario.
36 / 45
Sarah: "Hey team, I'm updating the API response for the user profile. I've added an aria-describedby attribute to the The correct answer highlights the purpose of
aria-describedby: it establishes a link between an element and another source of information (in this case, the label text within the details section) for screen reader users. The common misconception is to think of aria-describedby as simply providing a basic description; it's designed to connect to existing labels or other elements that offer more context. Using aria-label would be an alternative approach but less precise in this scenario.37 / 45
David: "I'm submitting this PR to update the dashboard layout. I've used aria-label on the 'Refresh Data' button to provide a text description for screen readers. Should I be using aria-describedby instead?"While
aria-label can provide a text description for screen readers, it's generally best practice to use aria-describedby when linking an element directly to its descriptive content. This creates a stronger semantic connection for assistive technologies and clarifies the purpose of the button more effectively. Using aria-describedby allows you to precisely control which element provides the description, unlike aria-label which relies on the label being present on the button itself.38 / 45
Mark comments on a PR: "Just noticed this button isn't accessible. It lacks a clear label and doesn't use any ARIA attributes to describe its function. Users with screen readers won't know what it does.". Which of the following approaches would Mark recommend to improve accessibility in this situation?Mark's suggestion correctly identifies the two key components for accessible buttons: `aria-label` provides immediate context to screen readers, while `aria-describedby` allows linking to more detailed information if needed. The other options either misinterpret the role of each attribute or offer overly simplistic (and ultimately insufficient) solutions. It's crucial that developers understand the difference between providing a concise label and offering supplementary descriptive content for assistive technology users.
39 / 45
John: "I'm reviewing this PR. The component uses aria-hidden="true" on the loading spinner. Should I remove it? It seems like a visual indicator is enough."The key misunderstanding here is around the purpose of `aria-hidden`. While a visual spinner *is* useful, it's not sufficient for users relying solely on screen readers. `aria-hidden="true"` tells assistive technologies that the element should be ignored entirely – this would prevent screen reader users from receiving any information about the loading state. The correct approach is to provide alternative descriptive text using
aria-live or a properly labeled button, ensuring all users have access to the same information.40 / 45
Maya: "I think you should use aria-describedby instead. It gives screen readers more context about what the button does."
While `aria-label` can be used to provide a short description, it's often insufficient for complex user interface elements. `aria-describedby` allows you to link the button to more detailed text or other UI components that explain its role, offering screen readers greater context and understanding. Therefore, Maya's suggestion of using `aria-describedby` is the more appropriate approach in this scenario.
41 / 45
Sarah: "Hey team, I'm updating the API response for the user profile. I've added an aria-describedby attribute to the The correct answer highlights the purpose of
aria-describedby: it establishes a link between an element and another source of information (in this case, the label text within the details section) for screen reader users. The common misconception is to think of aria-describedby as simply providing a basic description; it's designed to connect to existing labels or other elements that offer more context. Using aria-label would be an alternative approach but less precise in this scenario.42 / 45
David: "I'm submitting this PR to update the dashboard layout. I've used aria-label on the 'Refresh Data' button to provide a text description for screen readers. Should I be using aria-describedby instead?"While
aria-label can provide a text description for screen readers, it's generally best practice to use aria-describedby when linking an element directly to its descriptive content. This creates a stronger semantic connection for assistive technologies and clarifies the purpose of the button more effectively. Using aria-describedby allows you to precisely control which element provides the description, unlike aria-label which relies on the label being present on the button itself.43 / 45
Mark comments on a PR: "Just noticed this button isn't accessible. It lacks a clear label and doesn't use any ARIA attributes to describe its function. Users with screen readers won't know what it does.". Which of the following approaches would Mark recommend to improve accessibility in this situation?Mark's suggestion correctly identifies the two key components for accessible buttons: `aria-label` provides immediate context to screen readers, while `aria-describedby` allows linking to more detailed information if needed. The other options either misinterpret the role of each attribute or offer overly simplistic (and ultimately insufficient) solutions. It's crucial that developers understand the difference between providing a concise label and offering supplementary descriptive content for assistive technology users.
44 / 45
John: "I'm reviewing this PR. The component uses aria-hidden="true" on the loading spinner. Should I remove it? It seems like a visual indicator is enough."The key misunderstanding here is around the purpose of `aria-hidden`. While a visual spinner *is* useful, it's not sufficient for users relying solely on screen readers. `aria-hidden="true"` tells assistive technologies that the element should be ignored entirely – this would prevent screen reader users from receiving any information about the loading state. The correct approach is to provide alternative descriptive text using
aria-live or a properly labeled button, ensuring all users have access to the same information.45 / 45
Maya: "I think you should use aria-describedby instead. It gives screen readers more context about what the button does."
While `aria-label` can be used to provide a short description, it's often insufficient for complex user interface elements. `aria-describedby` allows you to link the button to more detailed text or other UI components that explain its role, offering screen readers greater context and understanding. Therefore, Maya's suggestion of using `aria-describedby` is the more appropriate approach in this scenario.
Frequently Asked Questions
What will I practice in "ARIA Vocabulary Quiz"?
This is an Accessibility Language exercise set. It walks through 45 scenario-based multiple-choice questions built around real usage of Accessibility Language terminology that IT professionals encounter on the job.
Is this exercise free to use?
Yes. Every exercise on CoderSlingo, including this one, is free to complete with no account, sign-up, or paywall.
How many questions are in this exercise?
This set contains 45 questions. Each one shows immediate feedback and a detailed explanation after you answer, so you learn the correct usage right away rather than waiting for a final score.
Do I need prior experience to complete this exercise?
No prior experience is required. Each question includes a full explanation covering the reasoning behind the correct answer, so the exercise itself teaches the Accessibility Language vocabulary as you go.
Can I retry the exercise if I get questions wrong?
Yes — use the "Try again" button on the results screen to reset your answers and go through all the questions again. There is no limit on attempts.
Is my progress saved?
Your answers and score for the current session are tracked in the browser as you go. No account or login is needed, and there is nothing to install.
What if I don't understand a term used in a question?
Read the explanation shown after you answer each question — it breaks down the correct term in plain English with a real-world example. You can also check the site Glossary for quick definitions.
How is this different from reading a blog article on the topic?
Exercises like this one are interactive drills that test and reinforce specific vocabulary through multiple-choice questions, while blog articles explain concepts in prose. Practising here after reading builds active recall, not just passive recognition.
Where can I find more Accessibility Language exercises?
See the Accessibility Language exercises hub for the full set of related pages, or browse all exercise categories from the main Exercises index.
Can I use this exercise to prepare for a technical interview?
Yes — Accessibility Language vocabulary comes up often in technical discussions and interviews. Pair this exercise with our dedicated Interview Preparation section for role-specific practice.