ArtOfCode.org
Toggle Menu
Home
Online Rust Compiler
Tutorials
Algorithms 101
Html Css Tutorial
Javascript Tutorial
Blog
All Posts
Web Accessibility with HTML
Test ARIA roles and semantics.
1. What is the primary purpose of the 'alt' attribute for images in HTML?
To add tooltips when hovering over images
To improve search engine optimization (SEO)
To provide a text alternative for screen reader users
To automatically resize images for mobile devices
2. Which of the following are semantic HTML elements that inherently improve web accessibility?
<div>
<nav>
<section>
<span>
<article>
3. ARIA (Accessible Rich Internet Applications) roles should be used instead of native HTML elements whenever possible.
True
False
4. What does the acronym WCAG stand for (full name)?
5. Which HTML element is natively focusable via keyboard navigation by default?
<div>
<span>
<button>
<p>
6. Which practices help improve accessibility for keyboard-only users?
Providing a 'skip to main content' link
Using 'tabindex="-1"' on all interactive elements
Ensuring all interactive elements are focusable
Hiding focus indicators with 'outline: none'
Using a logical tab order
7. All images must include an 'alt' attribute to be accessible.
True
False
8. What HTML attribute is used on a <label> element to associate it with an <input> element?
9. Which ARIA role is most appropriate for a custom-built search input field?
role="alert"
role="searchbox"
role="navigation"
role="button"
10. Which heading practices improve accessibility?
Using a single <h1> per page
Skipping heading levels (e.g., <h1> followed by <h3>)
Using headings to structure content hierarchically
Styling text to look like headings with CSS instead of using <h1>-<h6>
Including descriptive heading text
Reset
Answered 0 of 0 — 0 correct