HTML Accessibility Issues
Authored by Maria Lucia
Computers
Professional Development
Used 2+ times
AI Actions
Add similar questions
Adjust reading levels
Convert to real-world scenario
Translate activity
More...
Content View
Student View
10 questions
Show all answers
1.
MULTIPLE CHOICE QUESTION
2 mins • 1 pt
Invalid HTML Syntax
What is the issue with the following code?
<p><div>This is a paragraph with an incorrect nesting.</p></div>
The <div> element is improperly nested inside the <p> element.
There is no issue; this is valid HTML.
The <div> element should have an id attribute.
The closing </p> tag is incorrect.
2.
MULTIPLE CHOICE QUESTION
2 mins • 1 pt
Missing ARIA Live Region for Dynamic Content:
What is the issue with the following code, which shows dynamic content after a form submission?
<div class="status-message">Your form has been submitted!</div>
The div should have role="alert" to announce the message automatically.
The div needs a tabindex to be focusable.
The status-message class is missing an aria-live attribute.
There is no issue; the message is displayed correctly.
3.
MULTIPLE CHOICE QUESTION
2 mins • 1 pt
Duplicate IDs
What is the issue with the following code?
<input type="text" id="username">
<input type="password" id="username">
The IDs username are duplicated, which is not allowed in HTML.
The password field should have an aria-label.
The input elements should use semantic labels.
There is no issue with this code.
4.
MULTIPLE CHOICE QUESTION
2 mins • 1 pt
Missing Alt Text for Image Used as a Button
What is the issue with the following code?
<img src="submit-icon.png" onclick="submitForm()">
The image lacks an alt attribute to describe its purpose.
The img element should have role="button".
The image should be wrapped in a
There is no issue with this code.
5.
MULTIPLE CHOICE QUESTION
2 mins • 1 pt
Invalid Role for Input Field
What is wrong with the following code?
<input role="button" type="text" />
role="button" is incorrectly assigned to an input field.
The input element lacks an aria-label attribute.
The type="text" should not be used with role="button".
There is no issue with this code.
6.
MULTIPLE CHOICE QUESTION
2 mins • 1 pt
Missing aria-live for Error Message
What is the issue with the following code that displays an error message after a failed login?
<div class="error-message">Invalid username or password.</div>
The error message should have aria-live="assertive" to ensure it is announced by screen readers.
The error message should have role="alert".
The message needs to be displayed for at least 5 seconds.
There is no issue with this code.
7.
MULTIPLE CHOICE QUESTION
2 mins • 1 pt
Focusable Element without tabindex
What is the accessibility issue in the following code?
<div onclick="openMenu()">Open Menu</div>
The div is not focusable by keyboard users because it lacks a tabindex.
The div should have role="button".
There is no issue with this code.
The div needs to be inside a form element.
Access all questions and much more by creating a free account
Create resources
Host any resource
Get auto-graded reports
Continue with Google
Continue with Email
Continue with Microsoft
or continue with
%20(1).png)
Apple
Others
Already have an account?
