Question 1

What is Web Accessibility (A11y)?

Accepted Answer

Web accessibility (often abbreviated as A11y) means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. Specifically, people can perceive, understand, navigate, and interact with the Web, and they can contribute to the Web.

Question 2

What is WCAG?

Accepted Answer

WCAG stands for Web Content Accessibility Guidelines. It is a set of guidelines for making web content more accessible, primarily for people with disabilities, but also for all user agents, including highly limited devices, such as mobile phones.

Question 3

What are the four principles of WCAG (POUR)?

Accepted Answer

POUR stands for: 1. Perceivable (users must be able to perceive the info), 2. Operable (users must be able to operate the interface), 3. Understandable (info and operation must be understandable), 4. Robust (content must be robust enough to be interpreted by a wide variety of user agents).

Question 4

Explain WCAG Conformance Levels (A, AA, AAA).

Accepted Answer

Level A is the minimum level of accessibility (basic features). Level AA is the mid-range and the most commonly used standard for most websites (e.g., for legal compliance). Level AAA is the highest and most stringent level of accessibility, often required for specialized sites catering specifically to people with disabilities.

Question 5

What is Section 508?

Accepted Answer

Section 508 is a US federal law that requires federal agencies to make their electronic and information technology accessible to people with disabilities. It is often aligned with WCAG 2.0/2.1 AA standards.

Question 6

What is the European Accessibility Act (EAA)?

Accepted Answer

The EAA is a European directive that sets common accessibility requirements for certain key products and services in the EU market, including websites and mobile apps of private companies like banks and e-commerce.

Question 7

Difference between WCAG 2.1 and 2.2?

Accepted Answer

WCAG 2.2 builds on 2.1 by adding new success criteria, primarily focused on users with cognitive or learning disabilities, users with low vision on mobile devices, and users with disabilities on touch devices (e.g., focus appearance, dragging movements).

Question 8

What is the 'Alt text' requirement for images?

Accepted Answer

Every non-decorative image must have a concise alt attribute that describes its content or function. Decorative images should have an empty alt attribute (alt="") so they are ignored by screen readers.

Question 9

What is an 'Accessibility Tree'?

Accepted Answer

The accessibility tree is a specialized version of the DOM tree that browsers create for assistive technologies. It filters out non-essential info and formats the rest in a way that screen readers can understand (Name, Role, State, Value).

Question 10

Explain 'Color Contrast' requirements.

Accepted Answer

For WCAG AA, normal text should have a contrast ratio of at least 4.5:1 against its background. Large text (18pt or 14pt bold) should have at least 3:1. AAA requires 7:1 for normal text.

Question 11

What is 'Meaningful Sequence'?

Accepted Answer

It ensures that the reading order (the order in which content is presented in the DOM) matches the logical meaning of the content, which is critical for screen reader users and users with cognitive disabilities.

Question 12

What is 'Focus Order'?

Accepted Answer

If a webpage can be navigated sequentially, the focusable components must receive focus in an order that preserves meaning and operability. Usually, this means following the DOM order.

Question 13

Explain 'Text Alternatives' success criterion.

Accepted Answer

Requires that all non-text content (images, videos, audio) has a text alternative that serves the equivalent purpose.

Question 14

What is 'Skip to Content' link?

Accepted Answer

A link at the very beginning of the page (often hidden until focused) that allows keyboard users to bypass repetitive navigation and go straight to the main content area.

Question 15

What is 'Bypass Blocks'?

Accepted Answer

The WCAG requirement (2.4.1) that provides a mechanism to bypass blocks of content that are repeated on multiple Web pages (like navbars).

Question 16

Explain 'Info and Relationships'.

Accepted Answer

Criterion 1.3.1 requires that information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text (e.g., using proper

-

tags, for tables, for inputs).

Question 17

What is 'Sensory Characteristics'?

Accepted Answer

Content should not rely solely on sensory characteristics like shape, color, size, or sound to convey instructions (e.g., don't say 'Click the big red button' to find the submit).

Question 18

What is 'Use of Color' (1.4.1)?

Accepted Answer

Color should not be the *only* visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element (e.g., use an icon or text alongside red for error states).

Question 19

Explain 'Audio Control'.

Accepted Answer

If any audio on a Web page plays automatically for more than 3 seconds, a mechanism must be available to pause or stop the audio, or to control the volume independently from the system.

Question 20

What is 'Captions (Prerecorded)'?

Accepted Answer

Captions are provided for all prerecorded audio content in synchronized media (like videos), except when the media is a media alternative for text.

Question 21

What is 'Audio Description (Prerecorded)'?

Accepted Answer

An additional narration track for people who are blind or low-vision, describing important visual details that aren't conveyed in the main dialogue (e.g., character movements, facial expressions).

Question 22

Explain 'Keyboard' (2.1.1).

Accepted Answer

All functionality of the content must be operable through a keyboard interface without requiring specific timings for individual keystrokes.

Question 23

What is 'No Keyboard Trap'?

Accepted Answer

If focus can be moved to a component of the page using a keyboard interface, then focus must also be able to be moved away from that component using only a keyboard interface.

Question 24

Explain 'Timing Adjustable'.

Accepted Answer

For any time limit set by the content (like session timeouts), the user must be able to turn off, adjust, or extend the limit before it expires.

Question 25

What is 'Pause, Stop, Hide'?

Accepted Answer

For moving, blinking, scrolling, or auto-updating information (like carousels or stock tickers), the user must be given a mechanism to pause, stop, or hide it.

Question 26

Explain 'Three Flashes or Below Threshold'.

Accepted Answer

Web pages do not contain anything that flashes more than three times in any one-second period, as this can trigger seizures in people with photosensitive epilepsy.

Question 27

What is 'Page Titled'?

Accepted Answer

Web pages must have titles that describe topic or purpose. This is the first thing a screen reader announces when a page loads.

Question 28

What is 'Link Purpose (In Context)'?

Accepted Answer

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context (avoid generic 'click here').

Question 29

Explain 'Multiple Ways'.

Accepted Answer

More than one way is available to locate a Web page within a set of Web pages, except where the Web Page is the result of, or a step in, a process (e.g., search + site map + nav menu).

Question 30

What is 'Headings and Labels' (2.4.6)?

Accepted Answer

Headings (

Web Accessibility (A11y) Master

Difficulty Filters

Tools & Options

What is Web Accessibility (A11y)?

What is WCAG?

What are the four principles of WCAG (POUR)?

Explain WCAG Conformance Levels (A, AA, AAA).

What is Section 508?

What is the European Accessibility Act (EAA)?

Difference between WCAG 2.1 and 2.2?

What is the 'Alt text' requirement for images?

What is an 'Accessibility Tree'?

Explain 'Color Contrast' requirements.

What is 'Meaningful Sequence'?

What is 'Focus Order'?

Explain 'Text Alternatives' success criterion.

What is 'Skip to Content' link?

What is 'Bypass Blocks'?

Explain 'Info and Relationships'.

What is 'Sensory Characteristics'?

What is 'Use of Color' (1.4.1)?

Explain 'Audio Control'.

What is 'Captions (Prerecorded)'?

What is 'Audio Description (Prerecorded)'?

Explain 'Keyboard' (2.1.1).

What is 'No Keyboard Trap'?

Explain 'Timing Adjustable'.

What is 'Pause, Stop, Hide'?

Explain 'Three Flashes or Below Threshold'.

What is 'Page Titled'?

What is 'Link Purpose (In Context)'?

Explain 'Multiple Ways'.

What is 'Headings and Labels' (2.4.6)?

Explain 'Focus Visible'.

What is 'Language of Page'?

Explain 'Language of Parts'.

What is 'On Focus' (3.2.1)?

Explain 'On Input' (3.2.2).

What is 'Consistent Navigation'?

Explain 'Error Identification'.

What is 'Error Suggestion'?

Explain 'Parsing' (4.1.1).

What is 'Name, Role, Value'?

Why is Semantic HTML important for A11y?

What is the '<main>' tag?

What is the '<nav>' tag?

What is the '<header>' tag?

What is the '<footer>' tag?

Difference between '<article>' and '<section>'?

What is the '<aside>' tag?

How to use Heading levels (H1-H6) correctly?

What is the '<button>' vs '<a>' debate in A11y?

What is the '<label>' tag?

What is '<fieldset>' and '<legend>'?

What is the '<caption>' tag?

What is '<th>'?

What is '<address>' tag?

What is '<figure>' and '<figcaption>'?

What is '<cite>' and '<q>'?

Explain the importance of 'id' and 'for' correlation.

What is the '<time>' tag?

What is the '<ul>', '<ol>', and '<li>' hierarchy?

What is '<mark>' tag?

What is the '<dfn>' tag?

What is the '<abbr>' tag?

Explain the 'hidden' attribute vs 'display: none'.

What is the '<details>' and '<summary>' tag?

What is the '<dialog>' tag?

Why should you avoid 'tabindex > 0'?

What is 'aria-label' vs 'aria-labelledby'?

What is 'aria-describedby'?

How to hide text from screen readers but not visually?

How to hide text visually but keep it for screen readers?

What is the '<progress>' vs '<meter>' tag?

What is '<dl>', '<dt>', and '<dd>'?

How to use 'scope' in tables?

What is 'aria-hidden' utility?

Explain 'placeholder' vs 'label' for forms.

What is 'autocomplete' attribute importance?

What is 'inputmode' attribute?