HTML Accessibility

Question 1

What does WCAG stand for?

Answer 1

Web Content Accessibility Guidelines

WCAG is a set of guidelines for making web content more accessible to people with disabilities.

Question 2

What are the four principles of WCAG?

Answer 2

POUR: Perceivable, Operable, Understandable, Robust

These principles guide the creation of accessible web content.

Question 3

Define screen readers.

Answer 3

Software programs that read the content of a computer screen out loud

Used by people who are blind or visually impaired to access the web.

Question 4

What are large text or braille keyboards used for?

Answer 4

Accessing the web by people with visual impairments

These tools aid in web navigation for users with vision challenges.

Question 5

What is the function of screen magnifiers?

Answer 5

Software programs that enlarge the content of a computer screen

Used by people with low vision to access the web.

Question 6

What are alternative pointing devices?

Answer 6

Devices like joysticks, trackballs, and touchpads used by people with mobility impairments

These devices help users navigate the web.

Question 7

What does voice recognition allow users to do?

Answer 7

Control a computer using their voice

This technology is especially useful for people with mobility impairments.

Question 8

Name four common accessibility tools.

Answer 8

• Google Lighthouse
• Wave
• IBM Equal Accessibility Checker
• axe DevTools

These tools are used to audit the accessibility of a website.

Question 9

Why is proper heading level structure important?

Answer 9

It creates a logical structure for content, aiding assistive technology users

Helps users understand the content of a website.

Question 10

What elements should be used in tables for accessibility?

Answer 10

• th element for header cells
• td element for data cells
• caption element for table title

These elements help assistive technologies understand the structure of the table.

Question 11

What is the importance of having an associated label for inputs?

Answer 11

Helps people using assistive technologies understand the purpose of the input

The label element should be used for this association.

Question 12

What is the purpose of the alt attribute?

Answer 12

Provides a text alternative for images

This aids users with assistive technologies in understanding image content.

Question 13

What should descriptive link text do?

Answer 13

Help users understand the purpose of the link

This is essential for users relying on assistive technologies.

Question 14

What should be provided for audio and video content to make it accessible?

Answer 14

• Captions
• Transcripts
• Audio descriptions

These adaptations assist users with hearing and visual impairments.

Question 15

What is the tabindex attribute used for?

Answer 15

To make elements focusable and define the navigation order using the keyboard

Values should be 0 or -1; values greater than 0 should be avoided.

Question 16

What does the accesskey attribute define?

Answer 16

A keyboard shortcut for an element

This helps users with mobility impairments navigate the website more easily.

Question 17

What does WAI-ARIA stand for?

Answer 17

Web Accessibility Initiative - Accessible Rich Internet Applications

It enhances HTML elements with attributes for better accessibility.

Question 18

What are aria roles used for?

Answer 18

To define the purpose of HTML elements for assistive technologies

Examples include role=’tab’, role=’menu’, and role=’alert’.

Question 19

List the six main categories of ARIA roles.

Answer 19

• Document structure roles
• Widget roles
• Landmark roles
• Live region roles
• Window roles
• Abstract roles

These categories help users navigate and understand content.

Question 20

What is the purpose of the aria-label attribute?

Answer 20

To give an element a programmatic name for accessibility

Useful when the visual label is not text.

Question 21

What does the aria-hidden attribute do?

Answer 21

Hides an element from assistive technologies

This is used for decorative images that do not convey meaningful content.

Question 22

What does the aria-expanded attribute indicate?

Answer 22

The state of a toggle feature to screen reader users

It helps users understand whether a menu or section is expanded or collapsed.

Question 23

What is the function of the aria-live attribute?

Answer 23

Indicates that changes to an element’s content should be announced immediately to screen reader users

This is useful for dynamic content updates.

Question 24

What are common ARIA states?

Answer 24

• aria-haspopup
• aria-checked
• aria-disabled
• aria-selected

These attributes indicate the state of an element for assistive technologies.

Question 25

What does the aria-haspopup attribute indicate?

Answer 25

That an interactive element will trigger a pop-up element when activated ## Footnote It must be used with specific roles like menu or dialog.

Question 26

What does the aria-checked attribute signify?

Answer 26

Whether an element is in the checked state ## Footnote Commonly used for custom checkboxes and radio buttons.

Question 27

What does the aria-disabled attribute indicate?

Answer 27

That an element is disabled only to assistive technologies ## Footnote This informs users that the element cannot be interacted with.

Question 28

What does the aria-selected attribute indicate?

Answer 28

That an element is selected ## Footnote This is applicable for custom controls like tabs or listboxes.

Question 29

What is the purpose of the aria-controls attribute?

Answer 29

Associates an element with another element it controls ## Footnote This helps clarify relationships between elements for assistive technologies.

Question 30

What does the aria-describedby attribute do?

Answer 30

Provides additional information about an element by linking it to another element ## Footnote This is useful for giving context to inputs or error messages.