Back to Freecodecamp

JavaScript and Accessibility Quiz

curriculum/challenges/english/blocks/quiz-js-a11y/68376949899fcbad3c9cac23.md

latest4.1 KB
Original Source

--description--

To pass the quiz, you must correctly answer at least 9 of the 10 questions below.

--quizzes--

--quiz--

--question--

--text--

Which attribute is used for accessibility purposes to indicate if a control is expanded or collapsed?

--distractors--

aria-controlled


aria-controls


aria-expands

--answer--

aria-expanded

--question--

--text--

Which two attributes can be used in combination with aria-expanded to establish a programmatic connection between the controlling element and the element it controls?

--distractors--

aria-labelledBy and aria-owns


aria-controls and aria-label


aria-live and aria-owns

--answer--

aria-controls and aria-owns

--question--

--text--

Which of the following attributes creates a live region on your page which can be used to notify screen reader users of dynamic content changes in the live region as they occur?

--distractors--

aria-live-regions


aria-lives


aria-live-region

--answer--

aria-live

--question--

--text--

Which of the following div elements will be disabled only to people using assistive technologies, such as screen readers?

--distractors--

html
<div role="button" tabindex="-1" aria-disables="true">Edit</div>

html
<div role="button" tabindex="-1" aria-disabling="true">Edit</div>

html
<div role="button" tabindex="-1" aria-disable="true">Edit</div>

--answer--

html
<div role="button" tabindex="-1" aria-disabled="true">Edit</div>

--question--

--text--

Which of the following is a valid use of the aria-expanded attribute?

--distractors--

html
<button aria-expanded="expand">Menu</button>

html
<button aria-expanded="allow">Menu</button>

html
<button aria-expanded="set">Menu</button>

--answer--

html
<button aria-expanded="true">Menu</button>

--question--

--text--

Which attribute is used to create a programmatic relationship between a controlling element and the element it affects on the page?

--distractors--

aria-set


aria-region


aria-expanded

--answer--

aria-controls

--question--

--text--

Which of the following is NOT a common use case for live regions?

--distractors--

Messages that are displayed after an action has been taken (such as an error message or confirmation).


Content that updates periodically (such as a ticker, marquee, or countdown timer).


General status messages (such as updates about a process).

--answer--

Messages that are displayed before an action has been taken (such as a confirmation dialog).

--question--

--text--

Which of the following examples is the correct way to indicate which tab is currently selected?

--distractors--

html
<div role="tablist">
  <button role="tab" aria-selecting="true">Tab 1</button>
  <button role="tab" aria-selecting="false">Tab 2</button>
  <button role="tab" aria-selecting="false">Tab 3</button>
</div>

html
<div role="tablist">
  <button role="tab" aria-select="true">Tab 1</button>
  <button role="tab" aria-select="false">Tab 2</button>
  <button role="tab" aria-select="false">Tab 3</button>
</div>

html
<div role="tablist">
  <button role="tab" aria-selects="true">Tab 1</button>
  <button role="tab" aria-selects="false">Tab 2</button>
  <button role="tab" aria-selects="false">Tab 3</button>
</div>

--answer--

html
<div role="tablist">
  <button role="tab" aria-selected="true">Tab 1</button>
  <button role="tab" aria-selected="false">Tab 2</button>
  <button role="tab" aria-selected="false">Tab 3</button>
</div>

--question--

--text--

Which of the following is NOT a valid value for the aria-live attribute?

--distractors--

off


polite


assertive

--answer--

on

--question--

--text--

Which of the following aria-live attribute values means that the update is very important and has the highest priority?

--distractors--

now


immediate


urgent

--answer--

assertive