diff --git a/src/data/accessibility-quiz.ts b/src/data/accessibility-quiz.ts index e38b24db2..24e1859cb 100644 --- a/src/data/accessibility-quiz.ts +++ b/src/data/accessibility-quiz.ts @@ -1,4 +1,47 @@ const accessibilityQuiz = [ + { + Question: "What is the purpose of the 'aria-label' attribute in ARIA?", + Answer: + "To provide a text label for an element when the visible label is not present", + Distractor1: "To change the background color of an element", + Distractor2: "To add audio effects to an element", + Distractor3: "To hide an element from screen readers", + Explanation: + "The 'aria-label' attribute is used to provide an accessible label for an element when the visible label is not sufficient.", + Link: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label" + }, + { + Question: "What is the purpose of the 'aria-live' attribute in ARIA?", + Answer: + "To specify when and how updates to content should be announced by screen readers", + Distractor1: "To control the volume of audio elements on a webpage", + Distractor2: "To change the font size of text", + Distractor3: "To add video captions to multimedia content", + Explanation: + "The 'aria-live' attribute is used to control how and when updates to dynamic content are announced to screen reader users.", + Link: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" + }, + { + Question: "What is the purpose of 'role' attributes in ARIA?", + Answer: + "To define the function or purpose of an element for assistive technologies", + Distractor1: "To specify the text color of an element", + Distractor2: "To create hyperlinks on a webpage", + Distractor3: "To apply CSS styles to an element", + Explanation: + "ARIA 'role' attributes help convey the semantic meaning and behavior of elements to assistive technologies.", + Link: "https://www.freecodecamp.org/news/web-accessibility-common-aria-mistakes-to-avoid/" + }, + { + Question: "What is the purpose of the 'tabindex' attribute in HTML?", + Answer: "To control the order in which elements receive focus", + Distractor1: "To add styling to elements", + Distractor2: "To hide elements from screen readers", + Distractor3: "To create hyperlinks", + Explanation: + "The 'tabindex' attribute specifies the order in which elements should be focused when navigating with the keyboard.", + Link: "https://www.freecodecamp.org/news/html-roving-tabindex-attribute-explained-with-examples/" + }, { Question: "What does WCAG stand for in the context of web accessibility?", Answer: "Web Content Accessibility Guidelines",