{"department":null,"description":null,"descriptionStatus":null,"descriptionUpdatedAt":null,"id":"e9b227e2-1039-4d08-ac71-53a608412f7f","label":"Accessibility","shortDescription":null,"slug":"accessibility","updatedAt":"2026-05-06T14:50:11.473Z","quizzes":[{"difficulty":"beginner","id":"AkmNBetDML","questionCount":15,"questions":[{"index":0,"options":["To add decorative borders to images","To improve SEO rankings","To make the page load faster","To describe the image for screen reader users"],"question":"What is the primary purpose of alt text for images on a web page?","difficulty":"beginner","explanation":"Alt text provides a text alternative that describes the image content for users who cannot see it, including screen reader users.","correctIndex":3},{"index":1,"options":["2","4","3","6"],"question":"How many core principles does WCAG (Web Content Accessibility Guidelines) have?","difficulty":"beginner","explanation":"WCAG is organized around four principles: Perceivable, Operable, Understandable, and Robust (POUR).","correctIndex":1},{"index":2,"options":["7:1","10:1","3:1","4.5:1"],"question":"What is the minimum contrast ratio for normal-sized text according to WCAG 2.1 Level AA?","difficulty":"beginner","explanation":"WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text to ensure readability for users with low vision.","correctIndex":3},{"index":3,"options":["It helps screen readers understand the structure and meaning of content","It improves the visual design of the page","It reduces server costs","It makes the website load faster"],"question":"Why is semantic HTML important for accessibility?","difficulty":"beginner","explanation":"Semantic HTML uses elements like

, and

that convey meaning to assistive technologies, helping users navigate and understand content structure.","correctIndex":0},{"index":4,"options":["Space","Enter","Tab","Shift"],"question":"Which keyboard key is most commonly used to navigate between interactive elements on a web page?","difficulty":"beginner","explanation":"The Tab key moves focus between interactive elements like links, buttons, and form fields, which is essential for keyboard navigation.","correctIndex":2},{"index":5,"options":["Advanced Responsive Internet Architecture","Accessible Rendering of Internet Assets","Assisted Reading Interface Applications","Accessible Rich Internet Applications"],"question":"What does ARIA stand for?","difficulty":"beginner","explanation":"ARIA stands for Accessible Rich Internet Applications and provides attributes to enhance accessibility of dynamic web content.","correctIndex":3},{"index":6,"options":["Software that converts on-screen text and elements to speech or braille","A program that scans documents for errors","A tool that reads code aloud to developers","A browser extension that blocks pop-ups"],"question":"What is a screen reader?","difficulty":"beginner","explanation":"Screen readers are assistive technology that interpret and vocalize on-screen content, enabling blind and low-vision users to navigate digital interfaces.","correctIndex":0},{"index":7,"options":["To make the form look more professional","To prevent form submissions from being hacked","To help screen reader users understand what information to enter","To reduce the amount of code needed"],"question":"Why should every form input have an associated label?","difficulty":"beginner","explanation":"Labels programmatically associated with form inputs tell screen reader users the purpose of each field, making forms usable for people with disabilities.","correctIndex":2},{"index":8,"options":["Avoid using headings for accessibility","Use any order that looks visually appealing","Only use h1 and h6 headings","Use heading levels in sequential order without skipping levels"],"question":"What is the correct approach for heading hierarchy on a web page?","difficulty":"beginner","explanation":"Headings should follow a logical, sequential order (h1, then h2, then h3, etc.) without skipping levels, to help screen reader users understand content structure.","correctIndex":3},{"index":9,"options":["To hide the navigation menu from sighted users","To delete the navigation menu entirely","To skip to the bottom of the page","To allow keyboard users to bypass repetitive navigation and go directly to main content"],"question":"What is the purpose of a skip navigation link?","difficulty":"beginner","explanation":"Skip links let keyboard and screen reader users jump past repetitive navigation blocks directly to the main content, saving time and effort.","correctIndex":3},{"index":10,"options":["Using single letters as link text","Using the full URL as the link text","Using descriptive text that makes sense out of context","Using 'click here' for all links"],"question":"Which of the following is the best practice for writing link text?","difficulty":"beginner","explanation":"Descriptive link text like 'Read our accessibility policy' tells users where the link goes, unlike vague text like 'click here' which is meaningless out of context.","correctIndex":2},{"index":11,"options":["A visual marker showing which element currently has keyboard focus","A tooltip that appears on hover","A loading spinner for slow pages","A background color for all clickable elements"],"question":"What is a focus indicator?","difficulty":"beginner","explanation":"A focus indicator is a visual outline or highlight that shows which element is currently selected by keyboard navigation, essential for keyboard users.","correctIndex":0},{"index":12,"options":["Background music","Captions and transcripts","High-definition video quality","Larger video player controls"],"question":"What makes video content accessible to deaf and hard of hearing users?","difficulty":"beginner","explanation":"Captions display spoken dialogue and sound effects as text, while transcripts provide a text version of audio content, both essential for deaf and hard of hearing users.","correctIndex":1},{"index":13,"options":["The alphabetical order of element IDs","The order of elements in the HTML source code","The order elements were last modified","The visual layout from left to right"],"question":"What determines the default tab order of elements on a web page?","difficulty":"beginner","explanation":"By default, the tab order follows the DOM order—the sequence in which elements appear in the HTML source—which is why logical source order matters.","correctIndex":1},{"index":14,"options":["To set the font family for the page","To automatically translate the page into other languages","To specify the programming language used to build the site","To indicate the primary language of the page content for screen readers"],"question":"What is the purpose of the 'lang' attribute on the HTML element?","difficulty":"beginner","explanation":"The lang attribute tells screen readers which language to use for pronunciation, ensuring content is read correctly for users who rely on assistive technology.","correctIndex":3}]},{"difficulty":"intermediate","id":"SlKs7SFHyl","questionCount":15,"questions":[{"index":0,"options":["The `Tab` and `Enter` key events","Both the `Enter` and `Space` key events","Only the `click` event","Only the `Enter` key event"],"question":"When adding `role=\"button\"` to a `

` element, which keyboard events must be handled to meet accessibility standards?","difficulty":"intermediate","explanation":"Native buttons activate on both Enter and Space keys; a div with role='button' must explicitly implement both key events to maintain keyboard parity.","correctIndex":1},{"index":1,"options":["Trigger an aria-live announcement and leave focus where it was","Move focus to an h1 or main content area and announce the route change","Move focus to a skip navigation link","Do nothing, as the screen reader will detect the URL change automatically"],"question":"In a Single Page Application (SPA), what is the best practice for managing focus after a client-side route change?","difficulty":"intermediate","explanation":"SPAs do not trigger a natural page reload, so programmatically moving focus to the main content or heading ensures screen readers announce the new view.","correctIndex":1},{"index":2,"options":["For navigation menus that update dynamically","For decorative content updates","For critical notifications or form validation errors that need immediate attention","For status messages that do not require immediate user action"],"question":"When should you use `aria-live=\"assertive\"` instead of `aria-live=\"polite\"`?","difficulty":"intermediate","explanation":"Assertive interrupts the screen reader immediately, which is necessary for critical errors, whereas polite waits for a pause in speech.","correctIndex":2},{"index":3,"options":["Focus should move to the browser address bar","Focus should remain on the trigger element until the user presses Tab","Focus should move to the modal, but users should be allowed to Tab to background content","Focus should move to the modal, and Tab/Shift+Tab should cycle only within the modal until it closes"],"question":"When a modal dialog opens, how should keyboard focus be managed?","difficulty":"intermediate","explanation":"Modals must trap focus within their boundaries to prevent keyboard users from interacting with obscured background content.","correctIndex":3},{"index":4,"options":["aria-describedby","aria-roledescription","aria-label","aria-labelledby"],"question":"Which ARIA attribute should be used to provide instructions or formatting hints for a form input (e.g., 'MM/DD/YYYY')?","difficulty":"intermediate","explanation":"aria-describedby is used to associate descriptive text, like formatting requirements, with a form control without replacing the input's label.","correctIndex":0},{"index":5,"options":["7:1","4.5:1","21:1","3:1"],"question":"What is the minimum color contrast ratio required for normal-sized text under WCAG 2.1 Level AA?","difficulty":"intermediate","explanation":"WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text to ensure readability for users with low vision.","correctIndex":1},{"index":6,"options":["Leave the inner SVG `alt` attribute empty","Use the `title` attribute exclusively on the button","Use `role=\"img\"` on the button","Use `aria-label` on the button element"],"question":"An icon button has no visible text label. What is the most robust way to make it accessible?","difficulty":"intermediate","explanation":"aria-label provides an accessible name directly on the interactive element, ensuring screen readers announce the button's purpose clearly.","correctIndex":3},{"index":7,"options":["To increase the speed of page transitions for faster browsing","To change the site's color scheme to high contrast","To disable all video playback automatically","To disable or minimize non-essential animations and transitions"],"question":"What is the primary purpose of the `prefers-reduced-motion` media query?","difficulty":"intermediate","explanation":"This media query respects user settings to prevent motion sickness and distractions by reducing or removing animations.","correctIndex":3},{"index":8,"options":["`clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute;`","`opacity: 0; pointer-events: none;`","`display: none;`","`visibility: hidden;`"],"question":"Which CSS pattern is commonly used to visually hide content while keeping it accessible to screen readers?","difficulty":"intermediate","explanation":"This clip pattern removes the element from the visual flow without hiding it from the accessibility tree, unlike display:none or visibility:hidden.","correctIndex":0},{"index":9,"options":["`scope=\"col\"`","`aria-colspan`","`colspan`","`headers`"],"question":"In a data table, which attribute should be used on a `` element to explicitly define that it applies to the column below it?","difficulty":"intermediate","explanation":"The scope attribute explicitly associates a header cell with its corresponding row, column, or group, aiding screen reader navigation.","correctIndex":0},{"index":10,"options":["Wrap them in a `

` with a ``","Wrap them in a `

` with an `aria-label`","Wrap them in a `

` with a heading","Wrap them in a `

` with `aria-group=\"true\"`"],"question":"What is the most semantic way to group related form inputs, such as a 'Shipping Address' and 'Billing Address'?","difficulty":"intermediate","explanation":"Fieldset and legend elements provide semantic grouping and an accessible caption, which is especially helpful for radio buttons and complex forms.","correctIndex":0},{"index":11,"options":["`aria-expanded=\"false\"`","`aria-collapsed=\"true\"`","`aria-hidden=\"true\"`","`aria-state=\"closed\"`"],"question":"Which ARIA attribute and value should be applied to the control button of an accordion panel that is currently collapsed?","difficulty":"intermediate","explanation":"aria-expanded communicates the toggle state of an element; 'false' indicates to screen readers that the associated panel is currently closed.","correctIndex":0},{"index":12,"options":["Do not include an alt attribute at all","Use `alt=\"\"` (empty alt attribute)","Use `alt=\"decorative image\"`","Use `alt=\" \"` (alt attribute with a space)"],"question":"An image is purely decorative and adds no meaningful context to the page. How should it be handled?","difficulty":"intermediate","explanation":"An empty alt attribute hides the image from screen readers, whereas omitting the alt attribute may cause the screen reader to announce the file name.","correctIndex":1},{"index":13,"options":["To provide a shortcut to the site's search functionality","To skip over images that have empty alt attributes","To allow screen readers to skip over complex data tables","To allow keyboard users to bypass repetitive navigation and jump to the main content"],"question":"What is the primary purpose of a skip navigation link?","difficulty":"intermediate","explanation":"Skip links are hidden visually until focused, allowing keyboard users to bypass repetitive header navigation and go straight to the main content area.","correctIndex":3},{"index":14,"options":["The element is hidden from the accessibility API and ignored by screen readers","The element is removed from the DOM entirely","The element's text is replaced with a generic placeholder like 'redacted'","The element is visually hidden from the screen but still interactive"],"question":"What is the effect of applying `aria-hidden=\"true\"` to an element?","difficulty":"intermediate","explanation":"aria-hidden='true' removes the element and its children from the accessibility tree, preventing screen readers from announcing it.","correctIndex":0}]},{"difficulty":"advanced","id":"XZxDmhZglR","questionCount":15,"questions":[{"index":0,"options":["A. Use high-contrast colors","D. Use ARIA roles and properties","B. Provide text alternatives for non-text content","C. Implement clear and consistent navigation"],"question":"Which of the following is the most effective way to ensure that a website is accessible to users with cognitive disabilities?","difficulty":"advanced","explanation":"Clear and consistent navigation helps users with cognitive disabilities understand and navigate the website more easily.","correctIndex":3},{"index":1,"options":["C. To help assistive technologies understand the structure and purpose of web content","D. To enhance the performance of a website","B. To provide additional styling options for developers","A. To improve the visual design of a webpage"],"question":"What is the primary purpose of the ARIA (Accessible Rich Internet Applications) landmark roles?","difficulty":"advanced","explanation":"ARIA landmark roles help assistive technologies identify and navigate key sections of a webpage, such as the header, navigation, and main content areas.","correctIndex":0},{"index":2,"options":["A. It allows users to skip to the footer of the page","C. It is used for SEO purposes to improve search engine rankings","D. It is a decorative element that enhances the visual appeal of the website","B. It helps users with visual impairments navigate directly to the main content"],"question":"When designing for accessibility, what is the significance of the 'skip to content' link?","difficulty":"advanced","explanation":"The 'skip to content' link allows users with visual impairments, who rely on screen readers, to bypass repetitive navigation elements and go directly to the main content.","correctIndex":3},{"index":3,"options":["B. Disable screen reader notifications","C. Use only static content","D. Hide dynamic content from screen readers","A. Use ARIA live regions"],"question":"Which of the following is a best practice for ensuring that dynamic content updates are accessible to screen reader users?","difficulty":"advanced","explanation":"ARIA live regions inform screen readers about dynamic content updates, ensuring that users are aware of changes in real-time.","correctIndex":3},{"index":4,"options":["B. They provide additional styling options","C. They convey the meaning and structure of the content to assistive technologies","A. They improve the visual design of the webpage","D. They enhance the performance of the website"],"question":"What is the primary benefit of using semantic HTML elements for accessibility?","difficulty":"advanced","explanation":"Semantic HTML elements, such as

, and

, convey the meaning and structure of the content, making it easier for assistive technologies to interpret and navigate.","correctIndex":1},{"index":5,"options":["B. Providing clear and descriptive labels for all form fields","C. Hiding error messages from screen readers","D. Using only complex validation messages","A. Using only visual cues to indicate errors"],"question":"Which of the following is a key consideration when designing accessible forms?","difficulty":"advanced","explanation":"Providing clear and descriptive labels for all form fields ensures that users with visual impairments can understand and complete the form accurately.","correctIndex":0},{"index":6,"options":["D. To improve the loading speed of the image","A. To provide a tooltip for the image","C. To enhance the visual appeal of the image","B. To describe the image for screen reader users"],"question":"What is the purpose of the 'alt' attribute in an image tag?","difficulty":"advanced","explanation":"The 'alt' attribute provides a textual description of the image, which is read aloud by screen readers, making the content accessible to users with visual impairments.","correctIndex":3},{"index":7,"options":["B. Using only visual content","D. Hiding video controls","A. Providing closed captions","C. Disabling audio descriptions"],"question":"Which of the following is a best practice for ensuring that videos are accessible to users with hearing impairments?","difficulty":"advanced","explanation":"Providing closed captions allows users with hearing impairments to understand the audio content of the video.","correctIndex":2},{"index":8,"options":["A. It improves the visual design of the webpage","D. It provides additional styling options for developers","C. It enhances the performance of the website","B. It allows keyboard users to navigate through interactive elements in a logical order"],"question":"What is the significance of the 'tabindex' attribute in web accessibility?","difficulty":"advanced","explanation":"The 'tabindex' attribute ensures that keyboard users can navigate through interactive elements in a logical order, making the website more accessible.","correctIndex":3},{"index":9,"options":["A. Using only high-contrast colors","D. Disabling color contrast adjustments","C. Using only text to convey information","B. Providing additional visual cues, such as patterns or icons, alongside color"],"question":"Which of the following is a best practice for ensuring that color is not the only visual means of conveying information?","difficulty":"advanced","explanation":"Providing additional visual cues, such as patterns or icons, ensures that users with color vision deficiencies can still understand the information.","correctIndex":3},{"index":10,"options":["C. To notify assistive technologies of dynamic content updates in real-time","B. To provide additional styling options for developers","A. To enhance the visual design of the webpage","D. To improve the performance of the website"],"question":"What is the primary purpose of the 'aria-live' attribute?","difficulty":"advanced","explanation":"The 'aria-live' attribute informs assistive technologies of dynamic content updates, ensuring that users are aware of changes in real-time.","correctIndex":0},{"index":11,"options":["B. Providing clear and descriptive table headers and captions","A. Using only visual cues to indicate table headers","D. Using only complex table structures","C. Hiding table headers from screen readers"],"question":"Which of the following is a key consideration when designing accessible tables?","difficulty":"advanced","explanation":"Providing clear and descriptive table headers and captions ensures that users with visual impairments can understand and navigate the table content accurately.","correctIndex":0},{"index":12,"options":["A. It improves the visual design of the webpage","D. It enhances the performance of the website","C. It defines the purpose and behavior of an element for assistive technologies","B. It provides additional styling options for developers"],"question":"What is the significance of the 'role' attribute in ARIA?","difficulty":"advanced","explanation":"The 'role' attribute in ARIA defines the purpose and behavior of an element, helping assistive technologies understand and convey the element's function to users.","correctIndex":2},{"index":13,"options":["C. Disabling keyboard navigation","B. Providing keyboard access to all interactive elements","A. Using only mouse-based interactions","D. Using only touch-based interactions"],"question":"Which of the following is a best practice for ensuring that interactive elements are accessible to users with motor impairments?","difficulty":"advanced","explanation":"Providing keyboard access to all interactive elements ensures that users with motor impairments, who may not be able to use a mouse, can still interact with the website.","correctIndex":1},{"index":14,"options":["B. It provides additional styling options for developers","D. It enhances the performance of the website","A. It improves the visual design of the webpage","C. It links an element to a descriptive text, making it more accessible to screen reader users"],"question":"What is the primary benefit of using the 'aria-describedby' attribute?","difficulty":"advanced","explanation":"The 'aria-describedby' attribute links an element to a descriptive text, providing additional context that screen readers can convey to users.","correctIndex":3}]}]}

Accessibility Quiz

Pick your level

Beginner

Intermediate

Advanced