Loading... Login Loading... Register

React Accessibility Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

What are React fragments primarily used for?

Select your answer

Managing component state

Creating semantic HTML elements

Grouping children without introducing extra nodes into the DOM

Styling child components

Question 2/15

Which property is essential for making sure assistive technologies correctly perceive visual structure like a heading in React?

Select your answer

alt text on headings

aria-heading on divs

tabIndex on headings

Question 3/15

If a section of a page provides additional information about its parent element, which ARIA role should it have?

Select your answer

role='note'

role='supplementary'

role='info'

role='extra'

Question 4/15

When creating an icon-only button in React, which attribute should you include to ensure accessibility?

Select your answer

alt

icon-description

aria-label

aria-role

Question 5/15

In React, what role should you use for an element that creates a dialog?

Select your answer

role='alert'

role='box'

role='dialog'

role='window'

Question 6/15

What should you use in React to ensure keyboard navigation is possible for a custom component?

Select your answer

Include tabIndex

Include keyboardType

Use keyboardNav as a prop

Include a customKeyboardNav

Question 7/15

In accessible web design, when is it appropriate to use

role='application'

Select your answer

For form elements

For complex widgets where standard keyboard navigation is altered

For every JavaScript application

For simple static informational pages

Question 8/15

For tables, which attribute provides row and column headers effectively?

Select your answer

scope

role

name

Question 9/15

If you want to label a custom component in React using a visible element, which attribute is best suited for this?

Select your answer

alt

aria-labelledby

aria-label

title

Question 10/15

What is the best ARIA role to use for a button element in React?

Select your answer

role='button'

aria-button='true'

role='link'

aria-role='button'

Question 11/15

What value should

tabIndex

have to make an element focusable but not part of tab sequence?

Select your answer

-1

true

Question 12/15

What is the role of a

live region

in React?

Select your answer

To set the document language

To display widgets

To deactivate screen readers

To provide updates for dynamically updated content

Question 13/15

Which attribute is important for labeling a form element in React?

Select your answer

aria-labelled

aria-description

aria-form-label

aria-labelledby

Question 14/15

Why should you avoid using autoPlay for media in React?

Select your answer

It can cause issues for screen reader users

It is not supported in most browsers

It is only for debugging purposes

It slows down page load

Question 15/15

Why is the use of the

title

attribute alone often insufficient for link text in React?

Select your answer

Users can't see it without hovering

It doesn't apply to older browsers

Screen readers may not announce it consistently

It increases page load time

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

What are React fragments primarily used for?

Available answers

Managing component state

Creating semantic HTML elements

Grouping children without introducing extra nodes into the DOM

Styling child components

React fragments let you group a list of children without adding unnecessary nodes to the DOM. This is done using

<>...</>

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which property is essential for making sure assistive technologies correctly perceive visual structure like a heading in React?

Available answers

alt text on headings

aria-heading on divs

tabIndex on headings

Use of semantic tags like

<h1>

<h2>

is crucial for assistive technologies to interpret structure.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

If a section of a page provides additional information about its parent element, which ARIA role should it have?

Available answers

role='note'

role='supplementary'

role='info'

role='extra'

The

role='note'

is used for content that supplements its parent.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

When creating an icon-only button in React, which attribute should you include to ensure accessibility?

Available answers

alt

icon-description

aria-label

aria-role

The

aria-label

attribute should provide a text equivalent of the button’s purpose.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

In React, what role should you use for an element that creates a dialog?

Available answers

role='alert'

role='box'

role='dialog'

role='window'

The

role='dialog'

is used to designate an element as a dialog, a type of interactive window.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

What should you use in React to ensure keyboard navigation is possible for a custom component?

Available answers

Include tabIndex

Include keyboardType

Use keyboardNav as a prop

Include a customKeyboardNav

Using

tabIndex

ensures that a custom React component can be part of the keyboard navigation flow.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

In accessible web design, when is it appropriate to use <pre><code>role='application'</code></pre>?

Available answers

For form elements

For complex widgets where standard keyboard navigation is altered

For every JavaScript application

For simple static informational pages

role='application'

is meant for complex applications to notify screen readers of different interaction paradigms.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

For tables, which attribute provides row and column headers effectively?

Available answers

scope

role

name

The

scope

attribute helps define whether a heading is for a row, column, or group of rows/columns in a table.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

If you want to label a custom component in React using a visible element, which attribute is best suited for this?

Available answers

alt

aria-labelledby

aria-label

title

aria-labelledby

references a visible element that labels another component.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the best ARIA role to use for a button element in React?

Available answers

role='button'

aria-button='true'

role='link'

aria-role='button'

The correct ARIA role for a button is

role='button'

, which is used to tell assistive technologies to treat an element like a button.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

What value should <pre><code>tabIndex</code></pre> have to make an element focusable but not part of tab sequence?

Available answers

-1

true

tabIndex

of -1 makes the element focusable via scripts, but it’s skipped in the tab order.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the role of a <pre><code>live region</code></pre> in React?

Available answers

To set the document language

To display widgets

To deactivate screen readers

To provide updates for dynamically updated content

Live regions notify screen readers about changes in content that are dynamically updated without user interaction.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which attribute is important for labeling a form element in React?

Available answers

aria-labelled

aria-description

aria-form-label

aria-labelledby

The

aria-labelledby

attribute links a form element to a text label, improving accessibility.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

Why should you avoid using autoPlay for media in React?

Available answers

It can cause issues for screen reader users

It is not supported in most browsers

It is only for debugging purposes

It slows down page load

Using autoPlay can cause issues for screen reader users and others who may find it difficult to locate and pause the media quickly.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

Why is the use of the <pre><code>title</code></pre> attribute alone often insufficient for link text in React?

Available answers

Users can't see it without hovering

It doesn't apply to older browsers

Screen readers may not announce it consistently

It increases page load time

Screen readers may not consistently announce the

title

, and not all users hover to see the tooltip.