Master WCAG 2.1/3.0 success criteria vocabulary including the POUR principles, conformance levels, and audit terminology.
0 / 26 completed
1 / 26
What does the WCAG acronym POUR stand for?
POUR is the four-principle framework of WCAG: content must be Perceivable, Operable, Understandable, and Robust for all users.
2 / 26
A website is described as meeting 'WCAG 2.1 Level AA'. What does Level AA mean?
WCAG defines three conformance levels: A (minimum), AA (mid-level, most commonly required by laws and regulations), and AAA (highest/optional enhancements).
3 / 26
A tester says 'the page fails success criterion 1.4.3'. What is success criterion 1.4.3 about?
SC 1.4.3 (Contrast Minimum) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text between foreground and background colours.
4 / 26
Which WCAG principle covers the requirement that users must be able to navigate and use interface components with a keyboard?
The Operable principle (Principle 2) covers all interaction requirements, including keyboard accessibility (guideline 2.1) and sufficient time to interact (guideline 2.2).
5 / 26
In a WCAG audit report, what does 'SC 4.1.2 — Name, Role, Value' test?
SC 4.1.2 requires that all user interface components have a name and role that can be programmatically determined, and states/values that can be set programmatically — critical for screen reader compatibility.
6 / 26
Sarah: "Hey team, I'm reviewing this PR and noticed the form field labels aren't using ARIA roles. It seems like a Level A issue – we need to ensure screen reader users can understand what each field is for."
Sarah correctly identifies a key WCAG guideline. Success Criterion 1.4.3 mandates that every operable UI component must have a name associated with it that is accessible to keyboard users. Missing ARIA roles effectively removes this name, making the form inaccessible for screen reader users and thus violating Level A standards. The other options misunderstand the scope of 1.4.3 or incorrectly associate it with color contrast.
7 / 26
// This code snippet is from a React component's onChange handler
onChange={(event) => setInputValue(event.target.value)}
During a code review, Alex comments: 'This input field doesn't have an `aria-label` attribute. We should add one to explicitly tell screen reader users what the field is for, as per WCAG guidelines.' Which of the following best explains why Alex's comment is important?
Alex's comment highlights the crucial role of explicitly labeling form elements for screen reader users. While aria-label offers a direct way to communicate this purpose, simply relying on the field name or placeholder text isn't always sufficient, especially when those names may be ambiguous. WCAG success criterion 1.4.3 mandates that labels are clearly associated with their corresponding form fields, and an aria-label provides this explicit association.
8 / 26
Alex comments on a PR that lacks an `aria-label` attribute for an input field. He states we need to add one 'as per WCAG guidelines.' What is the primary reason Alex's comment highlights a potential accessibility issue, specifically concerning users with screen readers?
Alex's comment correctly identifies the core purpose of `aria-label` within WCAG guidelines. Success criterion 1.3.1 – Info and Contrast – mandates that screen reader users must be able to understand the content and functionality of UI elements; the aria-label directly provides this essential information by explicitly stating the field's purpose. The other options misrepresent the role of `aria-label` or suggest it's a substitute for proper form label design and semantic HTML.
9 / 26
During a Slack conversation about accessibility, Maria says: 'I'm seeing that the error messages aren't using sufficient contrast. It's probably a WCAG 2.1 Level B issue – we need to make sure users with low vision can easily read them.' Which of the following best explains Maria's concern regarding the error message design?
Maria's comment centers on WCAG 1.4.3 - Contrast (Minimum). This success criterion mandates sufficient contrast between text and its background to ensure readability for users with low vision. Level B requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. The incorrect options misinterpret the core focus – it's not about keyboard navigation or dynamic updates, but specifically about color contrast.
10 / 26
Sarah: "Hey team, I'm reviewing this PR and noticed the form field labels aren't using ARIA roles. It seems like a Level A issue – we need to ensure screen reader users can understand what each field is for."
Sarah correctly identifies a key WCAG guideline. Success Criterion 1.4.3 mandates that every operable UI component must have a name associated with it that is accessible to keyboard users. Missing ARIA roles effectively removes this name, making the form inaccessible for screen reader users and thus violating Level A standards. The other options misunderstand the scope of 1.4.3 or incorrectly associate it with color contrast.
11 / 26
// This code snippet is from a React component's onChange handler
onChange={(event) => setInputValue(event.target.value)}
During a code review, Alex comments: 'This input field doesn't have an `aria-label` attribute. We should add one to explicitly tell screen reader users what the field is for, as per WCAG guidelines.' Which of the following best explains why Alex's comment is important?
Alex's comment highlights the crucial role of explicitly labeling form elements for screen reader users. While aria-label offers a direct way to communicate this purpose, simply relying on the field name or placeholder text isn't always sufficient, especially when those names may be ambiguous. WCAG success criterion 1.4.3 mandates that labels are clearly associated with their corresponding form fields, and an aria-label provides this explicit association.
12 / 26
Alex comments on a PR that lacks an `aria-label` attribute for an input field. He states we need to add one 'as per WCAG guidelines.' What is the primary reason Alex's comment highlights a potential accessibility issue, specifically concerning users with screen readers?
Alex's comment correctly identifies the core purpose of `aria-label` within WCAG guidelines. Success criterion 1.3.1 – Info and Contrast – mandates that screen reader users must be able to understand the content and functionality of UI elements; the aria-label directly provides this essential information by explicitly stating the field's purpose. The other options misrepresent the role of `aria-label` or suggest it's a substitute for proper form label design and semantic HTML.
13 / 26
During a Slack conversation about accessibility, Maria says: 'I'm seeing that the error messages aren't using sufficient contrast. It's probably a WCAG 2.1 Level B issue – we need to make sure users with low vision can easily read them.' Which of the following best explains Maria's concern regarding the error message design?
Maria's comment centers on WCAG 1.4.3 - Contrast (Minimum). This success criterion mandates sufficient contrast between text and its background to ensure readability for users with low vision. Level B requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. The incorrect options misinterpret the core focus – it's not about keyboard navigation or dynamic updates, but specifically about color contrast.
14 / 26
Sarah: "Hey team, I'm reviewing this PR and noticed the form field labels aren't using ARIA roles. It seems like a Level A issue – we need to ensure screen reader users can understand what each field is for."
Sarah correctly identifies a key WCAG guideline. Success Criterion 1.4.3 mandates that every operable UI component must have a name associated with it that is accessible to keyboard users. Missing ARIA roles effectively removes this name, making the form inaccessible for screen reader users and thus violating Level A standards. The other options misunderstand the scope of 1.4.3 or incorrectly associate it with color contrast.
15 / 26
// This code snippet is from a React component's onChange handler
onChange={(event) => setInputValue(event.target.value)}
During a code review, Alex comments: 'This input field doesn't have an `aria-label` attribute. We should add one to explicitly tell screen reader users what the field is for, as per WCAG guidelines.' Which of the following best explains why Alex's comment is important?
Alex's comment highlights the crucial role of explicitly labeling form elements for screen reader users. While aria-label offers a direct way to communicate this purpose, simply relying on the field name or placeholder text isn't always sufficient, especially when those names may be ambiguous. WCAG success criterion 1.4.3 mandates that labels are clearly associated with their corresponding form fields, and an aria-label provides this explicit association.
16 / 26
Alex comments on a PR that lacks an `aria-label` attribute for an input field. He states we need to add one 'as per WCAG guidelines.' What is the primary reason Alex's comment highlights a potential accessibility issue, specifically concerning users with screen readers?
Alex's comment correctly identifies the core purpose of `aria-label` within WCAG guidelines. Success criterion 1.3.1 – Info and Contrast – mandates that screen reader users must be able to understand the content and functionality of UI elements; the aria-label directly provides this essential information by explicitly stating the field's purpose. The other options misrepresent the role of `aria-label` or suggest it's a substitute for proper form label design and semantic HTML.
17 / 26
During a Slack conversation about accessibility, Maria says: 'I'm seeing that the error messages aren't using sufficient contrast. It's probably a WCAG 2.1 Level B issue – we need to make sure users with low vision can easily read them.' Which of the following best explains Maria's concern regarding the error message design?
Maria's comment centers on WCAG 1.4.3 - Contrast (Minimum). This success criterion mandates sufficient contrast between text and its background to ensure readability for users with low vision. Level B requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. The incorrect options misinterpret the core focus – it's not about keyboard navigation or dynamic updates, but specifically about color contrast.
18 / 26
Sarah: "Hey team, I'm reviewing this PR and noticed the form field labels aren't using ARIA roles. It seems like a Level A issue – we need to ensure screen reader users can understand what each field is for."
Sarah correctly identifies a key WCAG guideline. Success Criterion 1.4.3 mandates that every operable UI component must have a name associated with it that is accessible to keyboard users. Missing ARIA roles effectively removes this name, making the form inaccessible for screen reader users and thus violating Level A standards. The other options misunderstand the scope of 1.4.3 or incorrectly associate it with color contrast.
19 / 26
// This code snippet is from a React component's onChange handler
onChange={(event) => setInputValue(event.target.value)}
During a code review, Alex comments: 'This input field doesn't have an `aria-label` attribute. We should add one to explicitly tell screen reader users what the field is for, as per WCAG guidelines.' Which of the following best explains why Alex's comment is important?
Alex's comment highlights the crucial role of explicitly labeling form elements for screen reader users. While aria-label offers a direct way to communicate this purpose, simply relying on the field name or placeholder text isn't always sufficient, especially when those names may be ambiguous. WCAG success criterion 1.4.3 mandates that labels are clearly associated with their corresponding form fields, and an aria-label provides this explicit association.
20 / 26
Alex comments on a PR that lacks an `aria-label` attribute for an input field. He states we need to add one 'as per WCAG guidelines.' What is the primary reason Alex's comment highlights a potential accessibility issue, specifically concerning users with screen readers?
Alex's comment correctly identifies the core purpose of `aria-label` within WCAG guidelines. Success criterion 1.3.1 – Info and Contrast – mandates that screen reader users must be able to understand the content and functionality of UI elements; the aria-label directly provides this essential information by explicitly stating the field's purpose. The other options misrepresent the role of `aria-label` or suggest it's a substitute for proper form label design and semantic HTML.
21 / 26
During a Slack conversation about accessibility, Maria says: 'I'm seeing that the error messages aren't using sufficient contrast. It's probably a WCAG 2.1 Level B issue – we need to make sure users with low vision can easily read them.' Which of the following best explains Maria's concern regarding the error message design?
Maria's comment centers on WCAG 1.4.3 - Contrast (Minimum). This success criterion mandates sufficient contrast between text and its background to ensure readability for users with low vision. Level B requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. The incorrect options misinterpret the core focus – it's not about keyboard navigation or dynamic updates, but specifically about color contrast.
22 / 26
During a code review of a React component handling form submissions, Sarah notices the `aria-labelledby` attribute is missing from several input fields. She explains to the team: 'Without this attribute, screen reader users won't be able to easily associate the labels with their corresponding inputs.' Which WCAG guideline does Sarah's comment primarily relate to?
The `aria-labelledby` attribute is crucial for associating labels with form inputs, directly addressing the need to provide clear and understandable information to screen reader users. Incorrect options focus on other aspects of accessibility like contrast or keyboard navigation, which are not the primary issue highlighted by Sarah's comment regarding the missing label association.
23 / 26
Alex is reviewing a Slack channel discussing an accessibility bug. Maria writes: 'Our error messages aren't using enough color to stand out for users with low vision – it's likely a WCAG 2.1 Level B issue.' What specific aspect of WCAG guidelines does Maria's statement primarily refer to?
Maria is referencing the requirement for sufficient color contrast between text and background elements to ensure readability for users with visual impairments. This directly relates to WCAG 2.1 Level B guidelines concerning color contrast as it's a fundamental aspect of accessibility design that impacts users with low vision.
24 / 26
During a standup meeting, David reports on his progress. He says: 'I've implemented the JavaScript for the modal window, but I haven't yet added ARIA attributes to make it accessible.' What is the *most* important reason David should immediately add ARIA attributes to the modal window?
Adding ARIA attributes is essential to provide semantic information to assistive technologies like screen readers. Without these attributes, the modal window would be effectively unusable by users who rely on screen readers to navigate and understand web content – fulfilling WCAG guidelines for interactive elements.
25 / 26
You're reviewing a JSON API response from a mobile app. The response includes the following data structure:
{
"status": "success",
"message": "User profile updated successfully",
"data": {
"id": 123,
"name": "John Doe"
}
}
What accessibility consideration should you prioritize when designing the UI to consume this API response?
Screen reader users rely on descriptive text to interpret API responses. Providing a textual description of the data (e.g., 'User profile with ID 123 and name John Doe') allows screen readers to accurately convey the information to the user, directly addressing accessibility needs.
26 / 26
Liam is writing a PR description for a new feature. He states: 'This component now fully supports keyboard navigation – all interactive elements are focusable and can be activated using the Tab key.' Which WCAG guideline does Liam's statement primarily align with?
Liam's statement directly addresses Level AA guideline regarding 'Keyboard Navigation', which mandates that all interactive elements are accessible and operable using a keyboard. This ensures users who cannot or prefer not to use a mouse can effectively interact with the feature.
What will I practice in "WCAG Guidelines Vocabulary Quiz"?
This is an Accessibility Language exercise set. It walks through 26 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 26 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.