React Accessibility Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

What ARIA property is important to specify the expanded or collapsed state of a component?

Select your answer

Question 2/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

Question 3/15

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

Select your answer

Question 4/15

What is the role of a 
live region
in React?

Select your answer

Question 5/15

What are React fragments primarily used for?

Select your answer

Question 6/15

What value should 
tabIndex
have to make an element focusable but not part of tab sequence?

Select your answer

Question 7/15

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

Select your answer

Question 8/15

Which value of role is best used for an element that starts audio when activated?

Select your answer

Question 9/15

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

Select your answer

Question 10/15

Which React attribute helps in providing alternative text for an image?

Select your answer

Question 11/15

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

Select your answer

Question 12/15

What attribute should be used to give a react component a description that screen readers can pick up?

Select your answer

Question 13/15

For text that serves as a visually hidden label but is announced by screen readers, which CSS class is typically used? 
// Example CSS
.screen-reader-only {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
}

Select your answer

Question 14/15

What property is used to describe the current value of a progress bar in React?

Select your answer

Question 15/15

Why should you avoid using autoPlay for media in React?

Select your answer

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15
😊 Your answer was correct 🙁 Your answer was incorrect
What ARIA property is important to specify the expanded or collapsed state of a component?

Available answers

The 
aria-expanded
attribute indicates whether a section of content is expanded or collapsed.
Question 2/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

aria-labelledby
references a visible element that labels another component.
Question 3/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

Use of semantic tags like 
<h1>
, 
<h2>
is crucial for assistive technologies to interpret structure.
Question 4/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

Live regions notify screen readers about changes in content that are dynamically updated without user interaction.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
What are React fragments primarily used for?

Available answers

React fragments let you group a list of children without adding unnecessary nodes to the DOM. This is done using 
<>...</>
.
Question 6/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

A 
tabIndex
of -1 makes the element focusable via scripts, but it’s skipped in the tab order.
Question 7/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

The 
aria-label
attribute should provide a text equivalent of the button’s purpose.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which value of role is best used for an element that starts audio when activated?

Available answers

The 
role='button'
is appropriate since the behavior aligns with button activation.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
For tables, which attribute provides row and column headers effectively?

Available answers

The 
scope
attribute helps define whether a heading is for a row, column, or group of rows/columns in a table.
Question 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which React attribute helps in providing alternative text for an image?

Available answers

The 
alt
attribute is used to provide alternative text for images, which is crucial for accessibility.
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which attribute is important for labeling a form element in React?

Available answers

The 
aria-labelledby
attribute links a form element to a text label, improving accessibility.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
What attribute should be used to give a react component a description that screen readers can pick up?

Available answers

The 
aria-describedby
gives a component a description that can be read by screen readers.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
For text that serves as a visually hidden label but is announced by screen readers, which CSS class is typically used? 
// Example CSS
.screen-reader-only {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
}

Available answers

Using the 
screen-reader-only
CSS class ensures text is not visible but read by screen readers.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
What property is used to describe the current value of a progress bar in React?

Available answers

The 
aria-valuenow
property is used to specify the current value for widgets like progress bars.
Question 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
Why should you avoid using autoPlay for media in React?

Available answers

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