Home
Tutorials
Frontend Fundamentals

HTML
CSS
JavaScript
Web Accessibility
Advanced JavaScript Tutorials

HTML5 APIs
ES 6/7+
Web Components
TypeScript
CSS Frameworks

Bootstrap
Tailwind CSS
Sass
LESS
Frontend Frameworks

React
Angular
Vue.js
Lit
Full Stack JavaScript

Node.js
Next.js
NestJS
Express.js
Frontend Testing

Jest
Karma
Cypress
Playwright
Frontend Architecture

Webpack
Module Federation
Design Systems
Single-SPA
Frontend DevOps

AWS Lambda
Apache Kafka
DynamoDB
GraphQL
Frontend Tools and Security

Redux
Git
Authentication
UI Libraries
Learning Path
Interview Questions
GitHub
Search site

Web Accessibility Tutorial: Complete Accessibility Course for Beginners to Advanced | PHPKINGDOM

Basics
4
Semantic HTML
5
Keyboard
5
ARIA
5
Images and Media
4
Forms
5
Visual Design
4
Components
6
Testing
5
WCAG
5
Reference
6
Interview
2
- Accessibility Interview Questions
- Accessibility Quiz

Home
Web Accessibility Tutorials
Web Accessibility Quiz

Web Accessibility Quiz (50 Questions)

Answer all questions, track your progress live, and see your final Web Accessibility quiz score at the end.

Progress 0 / 50 answered

Q1. What is Web Accessibility?

Making websites faster only Making websites usable by everyone Adding animations Improving database speed

Q2. What does WCAG stand for?

Web Content Accessibility Guidelines Website Code Accessibility Guide Web Color and Graphics World Content Access Guide

Q3. What are the four WCAG principles?

HTML, CSS, JS, API Fast, Secure, Mobile, SEO Perceivable, Operable, Understandable, Robust Design, Build, Test, Deploy

Q4. Which WCAG principle means users must be able to perceive content?

Operable Robust Perceivable Understandable

Q5. Which WCAG principle focuses on keyboard and navigation support?

Operable Readable Visual Responsive

Q6. Which HTML element defines the main content area?

Q7. Which element should be used for navigation regions?

Q8. Which element is best for a clickable action?

Q9. Which element is best for navigating to another page?

Q10. Why are headings important for accessibility?

They add colors They help screen reader navigation They improve images only They replace links

Q11. What should informative images include?

Empty src Descriptive alt text Only title attribute No attributes

Q12. When should alt="" be used?

For decorative images For product images For charts For logos always

Q13. What is keyboard accessibility?

Using keyboard shortcuts only Making all functionality usable without a mouse Disabling mouse events Using only tab index

Q14. Which key usually moves focus forward?

Enter Tab Escape Shift

Q15. Which key combination moves focus backward?

Ctrl + Tab Shift + Tab Alt + Tab Enter + Tab

Q16. What is a visible focus indicator?

A loading icon A visual style showing the focused element A popup message A browser alert

Q17. Which CSS pseudo-class is recommended for keyboard focus styling?

:hover :active :focus-visible :visited

Q18. What does tabindex="0" do?

Removes focus forever Adds an element to natural tab order Hides the element Disables keyboard access

Q19. What does tabindex="-1" allow?

Programmatic focus only First focus order Automatic submit Screen reader hiding

Q20. Why should positive tabindex values usually be avoided?

They improve SEO too much They create confusing custom tab order They remove CSS They disable links

Q21. What is a skip link?

A hidden image A link that jumps past repeated content A broken link A download link

Q22. What is ARIA?

A CSS framework Accessible Rich Internet Applications Automatic Responsive Interface App A browser engine

Q23. What is the first rule of ARIA?

Use ARIA everywhere Use native HTML when possible Avoid semantic HTML Use role on every element

Q24. Which ARIA attribute provides an accessible name directly?

aria-hidden aria-label aria-live aria-current

Q25. Which ARIA attribute references another element as a label?

aria-labelledby aria-expanded aria-selected aria-invalid

Q26. Which ARIA attribute indicates expanded or collapsed state?

aria-live aria-expanded aria-hidden aria-describedby

Q27. Which ARIA attribute marks a form field as invalid?

aria-invalid aria-error aria-wrong aria-required

Q28. Which ARIA attribute connects help text or error text to a field?

aria-controls aria-describedby aria-hidden aria-modal

Q29. What does aria-live do?

Animates elements Announces dynamic updates to screen readers Loads scripts faster Creates live video

Q30. Which aria-live value should be used for normal status updates?

assertive polite hidden urgent

Q31. What is the minimum WCAG AA contrast ratio for normal text?

2:1 3:1 4.5:1 10:1

Q32. What should not be used alone to communicate important information?

Text Color Labels Headings

Q33. Which media query respects user motion preferences?

prefers-color-scheme prefers-reduced-motion max-width screen-reader

Q34. Why are form labels important?

They only change color They identify inputs for users and assistive technologies They replace validation They disable autocomplete

Q35. Why should placeholder text not replace labels?

It is too large It disappears and is not reliable as a label It improves accessibility It blocks submit buttons

Q36. Which elements group related radio buttons or checkboxes?

fieldset and legend table and tr div and span header and footer

Q37. Which attribute enables native required field validation?

aria-label required validate mandatory

Q38. What should accessible error messages do?

Only show red color Explain the problem and how to fix it Disappear instantly Use vague text

Q39. What should happen when an accessible modal opens?

Focus should move inside the modal Page should reload Focus should disappear Keyboard should be disabled

Q40. What should happen when a modal closes?

Focus should return to the triggering element Focus should move to body only Page should refresh Tab order should reset

Q41. Which role identifies a dialog to assistive technologies?

role="button" role="dialog" role="list" role="banner"

Q42. Which native element is best for a simple dropdown form control?

Q43. Which roles are commonly used for accessible tabs?

tablist, tab, tabpanel menu, menuitem, menuitemcheckbox dialog, alert, status row, cell, grid

Q44. What are captions used for?

Styling images Displaying spoken audio and important sounds in video Creating headings Improving page speed

Q45. What should audio-only content include?

Transcript Only alt text Only title No text alternative

Q46. What is manual accessibility testing?

Testing only with bots Testing real interactions like keyboard and screen reader use Testing only databases Testing only CSS syntax

Q47. Which tool is commonly used for automated accessibility testing?

axe DevTools Photoshop MySQL Git Bash only

Q48. Which browser tool can audit accessibility?

Lighthouse LocalStorage Cookies panel only Network throttling only

Q49. What do screen readers convert content into?

Only images Speech or Braille output CSS styles Database rows

Q50. Which approach gives the best accessibility testing coverage?

Automated tools only Manual testing only Automated tools plus manual keyboard and screen reader testing Visual design review only

Your Result

PHPKINGDOM

Practical frontend and full-stack tutorials, learning paths, and interview prep — built to help you learn in a clear order and ship real projects.

Browse tutorials Learning paths

Explore

All Tutorials
Learning Paths
Frontend Fundamentals
Frontend Frameworks
Full Stack JavaScript

Practice

Interview Questions
Coding Questions
Blind 75
Quizzes
Search

About

Author
Contact
Attributions
Privacy Policy
Terms and Conditions

Contact

Questions about courses or learning paths?

Contact page hello@phpkingdom.com

Tutorials

Same tracks as the mega menu — jump straight into a topic.

View all tutorials

Frontend Fundamentals

HTML
CSS
JavaScript
Web Accessibility

Advanced JavaScript Tutorials

HTML5 APIs
ES 6/7+
Web Components
TypeScript

CSS Frameworks

Bootstrap
Tailwind CSS
Sass
LESS

Frontend Frameworks

React
Angular
Vue.js
Lit

Full Stack JavaScript

Node.js
Next.js
NestJS
Express.js

Frontend Testing

Jest
Karma
Cypress
Playwright

Frontend Architecture

Webpack
Module Federation
Design Systems
Single-SPA

Frontend DevOps

AWS Lambda
Apache Kafka
DynamoDB
GraphQL

Frontend Tools and Security

Redux
Git
Authentication
UI Libraries

Built for learners, students, and working developers.