---
title: "HTML Semantics &amp; Web Accessibility"
lang: "en"
author: "Mohammad Abu Mattar"
canonical: https://mkabumattar.com/post/html-semantics-accessibility-quiz
---

[Home](/)›[Quizzes](/quizzes)›[All Categories](/quizzes/categories)›[HTML](/quizzes/categories/html)

Quizzes

[HTML](/quizzes/categories/html)[Accessibility](/quizzes/categories/accessibility)[Quizzes](/quizzes/categories/quizzes)

# HTML Semantics & Web Accessibility

[Mohammad Abu Mattar](/authors/mohammad-abu-mattar)20 QuestionsBeginnerPublished: 02 Mar 2026

[Markdown for AI(opens in a new tab)](/post/html-semantics-accessibility-quiz/index.md "Open the plain-Markdown version of this page, for pasting into an AI tool")

Series

[Frontend Essentials](/series/frontend-essentials)4/4

[PreviousCSS Fundamentals: Selectors, Box Model & Styling](/quizzes/post/css-fundamentals-quiz)

All posts in this series (4)

Quizzes4

1.  [JavaScript: Language Fundamentals & Modern Features](/quizzes/post/javascript-fundamentals-quiz)
2.  [TypeScript: Typed JavaScript Fundamentals](/quizzes/post/typescript-fundamentals-quiz)
3.  [CSS Fundamentals: Selectors, Box Model & Styling](/quizzes/post/css-fundamentals-quiz)
4.  [HTML Semantics & Web AccessibilityYou are here](/quizzes/post/html-semantics-accessibility-quiz)

## HTML Semantics & Web Accessibility

Up to 20 questions, shuffled on every run

Quiz Configuration

Enterto start

Welcome to the HTML Semantics & Accessibility Quiz! This quiz will test your knowledge of semantic HTML elements and web accessibility best practices. Each question has a hint to help you out, and you’ll get explanations for each answer to deepen your understanding. Good luck!

Answer key and explanations20 questions

The quiz above draws 20 questions at random from these 33, so a second attempt will not be the same run. Everything in the pool is listed here.

1.  What does semantic HTML mean?
    
    AnswerUsing elements that describe content meaning (e.g., <nav>, <article>)
    
2.  What is the purpose of the <header> element?
    
    AnswerDefines introductory content or a set of navigation links for a section
    
3.  What is the purpose of the <nav> element?
    
    AnswerIdentifies a section of a page that contains major navigation links
    
4.  What is the <main> element used for?
    
    AnswerIdentifies the dominant content unique to the document, excluding footers
    
5.  What is the purpose of the <article> element?
    
    AnswerRepresents self-contained content that is independently distributable
    
6.  What is the <aside> element used for?
    
    AnswerContains content tangentially related to the content around the element
    
7.  What does "accessibility" (a11y) mean in web development?
    
    AnswerDesigning websites so they are usable by people with various disabilities
    
8.  What is WCAG (Web Content Accessibility Guidelines)?
    
    AnswerThe international standard for making web content accessible to everyone
    
9.  What is alt text, and why is it important?
    
    AnswerA text description of an image for screen readers and broken links
    
10.  What is ARIA (Accessible Rich Internet Applications)?
     
     AnswerA set of attributes that add accessibility information to complex widgets
     
11.  What does the role attribute in ARIA do?
     
     AnswerExplicitly defines the purpose or type of an element for screen readers
     
12.  What is keyboard navigation accessibility?
     
     AnswerEnsuring that all website functionality is fully usable without a mouse
     
13.  What is the tabindex attribute?
     
     AnswerDetermines if an element is focusable and its position in the tab order
     
14.  What is a screen reader?
     
     AnswerAssistive software that converts digital text into synthesized speech
     
15.  What is color contrast in accessibility?
     
     AnswerThe ratio of luminance between the foreground text and the background
     
16.  What is a label in accessible forms?
     
     AnswerAn element semantically linked to a form field to provide a description
     
17.  What is the focus visible state in accessibility?
     
     AnswerA visual indicator showing which element currently has keyboard focus
     
18.  What is the difference between <label> and aria-label?
     
     Answer<label> is a visible element; aria-label provides an invisible description
     
19.  What is aria-live, and when is it used?
     
     AnswerNotifies screen readers about dynamic content updates without a refresh
     
20.  What is the skip link pattern?
     
     AnswerA hidden link that allows users to jump directly to the main content area
     
21.  What accessibility issues occur with color-only information?
     
     AnswerUsers who are colorblind may not perceive the meaning of the color change
     
22.  What is the purpose of the <figure> and <figcaption> elements?
     
     Answer<figure> groups content; <figcaption> provides a semantic caption for it
     
23.  What testing tools help evaluate web accessibility?
     
     AnswerAutomated scanners (aXe, Lighthouse) combined with manual testing
     
24.  What is the <footer> element used for?
     
     AnswerDefines a footer for its nearest sectioning content or the whole document
     
25.  What is the <section> element used for?
     
     AnswerRepresents a standalone section of a document with a specific theme
     
26.  What is aria-expanded, and when should it be used?
     
     AnswerIndicates whether a collapsible component is currently open or closed
     
27.  What is aria-describedby?
     
     AnswerLinks an element to another element that provides a detailed description
     
28.  What accessibility considerations apply to icons?
     
     AnswerIcon-only buttons must have an aria-label or hidden text description
     
29.  What accessibility issues apply to modals and dialogs?
     
     AnswerThey must trap keyboard focus and allow the user to exit using Escape
     
30.  What makes a data table accessible?
     
     AnswerUsing <th> elements with the scope attribute to link headers to cells
     
31.  What is prefers-reduced-motion?
     
     AnswerA media query that detects if the user wants to minimize animations
     
32.  What is the difference between role and semantic HTML elements?
     
     AnswerSemantic elements have built-in roles; use role only as a fallback
     
33.  What are ARIA live regions?
     
     AnswerDynamic areas that automatically announce updates to screen readers
     

## Tags

[#Html](/quizzes/tags/html)[#Html semantics](/quizzes/tags/html-semantics)[#Accessibility](/quizzes/tags/accessibility)[#A11y](/quizzes/tags/a11y)[#Wcag](/quizzes/tags/wcag)[#Aria attributes](/quizzes/tags/aria-attributes)[#Semantic html](/quizzes/tags/semantic-html)[#Screen readers](/quizzes/tags/screen-readers)[#Keyboard navigation](/quizzes/tags/keyboard-navigation)[#Inclusive design](/quizzes/tags/inclusive-design)[#Web standards](/quizzes/tags/web-standards)[#Color contrast](/quizzes/tags/color-contrast)[#Accessible forms](/quizzes/tags/accessible-forms)[#Web accessibility](/quizzes/tags/web-accessibility)

## Share

[Facebook](https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fhtml-semantics-accessibility-quiz "Share on Facebook")[Twitter](https://twitter.com/intent/tweet/?text=HTML%20Semantics%20%26%20Web%20Accessibility&url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fhtml-semantics-accessibility-quiz "Share on Twitter")[LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fhtml-semantics-accessibility-quiz&title=HTML%20Semantics%20%26%20Web%20Accessibility&summary=Master%20HTML%20semantics%20and%20web%20accessibility%3A%20semantic%20tags%2C%20ARIA%20attributes%2C%20WCAG%20guidelines%2C%20keyboard%20navigation%2C%20screen%20readers.%20Build%20inclusive%20web%20experiences.&source=https://mkabumattar.com "Share on LinkedIn")[WhatsApp](https://wa.me/?text=HTML%20Semantics%20%26%20Web%20Accessibility%20https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fhtml-semantics-accessibility-quiz "Share on WhatsApp")[Telegram](https://t.me/share/url?url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fhtml-semantics-accessibility-quiz&text=HTML%20Semantics%20%26%20Web%20Accessibility "Share on Telegram")[Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fhtml-semantics-accessibility-quiz&title=HTML%20Semantics%20%26%20Web%20Accessibility "Share on Reddit")[Hacker News](http://news.ycombinator.com/submitlink?u=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fhtml-semantics-accessibility-quiz&t=HTML%20Semantics%20%26%20Web%20Accessibility "Share on Hacker News")[Pinterest](https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fhtml-semantics-accessibility-quiz&media=&description=Master%20HTML%20semantics%20and%20web%20accessibility%3A%20semantic%20tags%2C%20ARIA%20attributes%2C%20WCAG%20guidelines%2C%20keyboard%20navigation%2C%20screen%20readers.%20Build%20inclusive%20web%20experiences. "Share on Pinterest")[Email](<mailto:?subject=HTML%20Semantics%20%26%20Web%20Accessibility&body=Check out this article: https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fhtml-semantics-accessibility-quiz>)

## Comments

Was this useful?

## You might also enjoy

More posts on similar topics

[![CSS Fundamentals: Selectors, Box Model & Styling](/_astro/hero.BuNubOK1_Z1Tx9uc.webp)](/quizzes/post/css-fundamentals-quiz)

## [CSS Fundamentals: Selectors, Box Model & Styling](/quizzes/post/css-fundamentals-quiz)

-   [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)
-   [CSS](/quizzes/categories/css)
-   [Frontend](/quizzes/categories/frontend)
-   [Quizzes](/quizzes/categories/quizzes)

Welcome to the CSS Fundamentals quiz! This quiz will test your knowledge of CSS basics, including selectors, the box model, properties, and layout techniques. Each question reinforces one concept so y

[#Css](/quizzes/tags/css)[#Css fundamentals](/quizzes/tags/css-fundamentals)[#Selectors](/quizzes/tags/selectors)+11 tags

[read more](/quizzes/post/css-fundamentals-quiz)

[![JavaScript: Language Fundamentals & Modern Features](/_astro/hero.CPnUQqYa_cqDLj.webp)](/quizzes/post/javascript-fundamentals-quiz)

## [JavaScript: Language Fundamentals & Modern Features](/quizzes/post/javascript-fundamentals-quiz)

-   [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)
-   [JavaScript](/quizzes/categories/javascript)
-   [Programming](/quizzes/categories/programming)
-   [Web Development](/quizzes/categories/web-development)
-   [Frontend](/quizzes/categories/frontend)

Welcome to the JavaScript Basics Quiz! This quiz tests your understanding of fundamental JavaScript concepts, syntax, and modern programming best practices. Each question is multiple-choice, and you'l

[#JavaScript](/quizzes/tags/javascript)[#ES6](/quizzes/tags/es6)[#Arrow Functions](/quizzes/tags/arrow-functions)+6 tags

[read more](/quizzes/post/javascript-fundamentals-quiz)

[![TypeScript: Typed JavaScript Fundamentals](/_astro/hero.BXknL-oV_plxRs.webp)](/quizzes/post/typescript-fundamentals-quiz)

## [TypeScript: Typed JavaScript Fundamentals](/quizzes/post/typescript-fundamentals-quiz)

-   [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)
-   [TypeScript](/quizzes/categories/typescript)
-   [Programming](/quizzes/categories/programming)
-   [Web Development](/quizzes/categories/web-development)
-   [Frontend](/quizzes/categories/frontend)

Welcome to the TypeScript Basics Quiz! This quiz covers fundamental TypeScript concepts, static typing, and type-safe programming best practices. Each question is multiple-choice, and you'll find hint

[#TypeScript](/quizzes/tags/typescript)[#Static Typing](/quizzes/tags/static-typing)[#Interfaces](/quizzes/tags/interfaces)+6 tags

[read more](/quizzes/post/typescript-fundamentals-quiz)

[![API Security & Authentication: Protecting Your APIs](/_astro/hero.2Uu4_QSF_2sP126.webp)](/quizzes/post/api-security-authentication-quiz)

## [API Security & Authentication: Protecting Your APIs](/quizzes/post/api-security-authentication-quiz)

-   [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)
-   [API Security](/quizzes/categories/api-security)
-   [Security](/quizzes/categories/security)
-   [Quizzes](/quizzes/categories/quizzes)

Welcome to the API Security & Authentication Quiz! This quiz will test your knowledge of key concepts and best practices for securing APIs. Each question is designed to challenge your understanding of

[#Api security](/quizzes/tags/api-security)[#Api security fundamentals](/quizzes/tags/api-security-fundamentals)[#Authentication](/quizzes/tags/authentication)+11 tags

[read more](/quizzes/post/api-security-authentication-quiz)

[![Observability Stack: Monitoring, Logging & Tracing](/_astro/hero.DapUZrH0_Z1uLFau.webp)](/quizzes/post/observability-stack-quiz)

## [Observability Stack: Monitoring, Logging & Tracing](/quizzes/post/observability-stack-quiz)

-   [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)
-   [Observability](/quizzes/categories/observability)
-   [DevOps](/quizzes/categories/devops)
-   [Quizzes](/quizzes/categories/quizzes)

Welcome to the Observability Stack Quiz! This quiz will test your knowledge of monitoring, logging, and tracing concepts in modern software systems. Each question is designed to challenge your underst

[#Observability](/quizzes/tags/observability)[#Observability fundamentals](/quizzes/tags/observability-fundamentals)[#Monitoring](/quizzes/tags/monitoring)+11 tags

[read more](/quizzes/post/observability-stack-quiz)

[![GraphQL Fundamentals: Queries, Mutations & Schema Design](/_astro/hero.D7HMB0_s_1Ij4Vw.webp)](/quizzes/post/graphql-fundamentals-quiz)

## [GraphQL Fundamentals: Queries, Mutations & Schema Design](/quizzes/post/graphql-fundamentals-quiz)

-   [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)
-   [GraphQL](/quizzes/categories/graphql)
-   [API Development](/quizzes/categories/api-development)
-   [Quizzes](/quizzes/categories/quizzes)

Welcome to the GraphQL Basics Quiz! Learning GraphQL well matters for building efficient, flexible APIs that let clients request exactly what they need. This quiz will test your understanding of core

[#Graphql](/quizzes/tags/graphql)[#Graphql fundamentals](/quizzes/tags/graphql-fundamentals)[#Api development](/quizzes/tags/api-development)+11 tags

[read more](/quizzes/post/graphql-fundamentals-quiz)

6 related posts
