Resources Accessibility Stay organized with collections Save and categorize content based on your preferences. Learn Accessibility Return to pathway What tools are commonly used to help people with disabilities to use the web? Choose as many answers as you see fit. Braille output devices Screen readers Docking stations Operating system settings What is an effective way to enact change on the web? Choose as many answers as you see fit. Complain on social media. File a lawsuit. Contact a company's developers directly. What is the highest level of WCAG standards? AAA Level A Level POUR What are examples of operable? Choose as many answers as you see fit. All videos have controls. Users have enough time to complete a form. All active elements have keyboard and touchscreen support. Simple language is used. Which of the following is the best practice for building an accessible button? <div id="saveChanges" aria-role="button" aria-pressed="false" tabindex="0">Go to shop</div> <a id="saveChanges" aria-label="Some awesome article title">Go to shop</a> <button id="saveChanges" type="button">Go to shop</button> Your site is a multi-language online textbook, where multiple languages are shown on one page. What's the best way to tell assistive technology the language of the copy? Set a primary lang for the <html>, and additional languages on elements that contain content in a different language. Don't worry about it, the AT can automatically read each language. Include all languages in the <html> element. For example <html lang="en,lt,pl,pt"> Which example of :focus CSS style is the most accessible on a white background? outline: 0.5rem solid yellow; background-color:black; outline: none; text-decoration:none; background:none; text-decoration: dotted underline 2px blue; What's the purpose of a skip link? Help a keyboard user skip over redundant or unuseful groups of links. Help a keyboard user skip over uninteresting content. What is the best way to change an element's style with JavaScript? Use JavaScript to toggle an element's class, and add the style to your CSS style sheet. Use JavaScript to apply dynamic style directly within an HTML element. Can all JavaScript actions support keyboard users? Yes, all actions automatically support keyboard users. Yes, but you may have to do some extra work. No, you can only support keyboard users with semantic HTML. How can you make complex images accessible? Choose as many answers as you see fit. Include an explanation later in the article. Add longform alt text with a full description. Add the aria-describedby attribute to the image. Use a link for longer explanations. Color alone isn't a sufficient identifier for documentation. What else will help readers identify UI elements? Pattern Text Icon All of the answers are correct What can we build which reflects the operating system settings for motion? @prefers-reduced-motion JavaScript toggles For readable copy, I should always use high-contrast between my copy and background. False True What fonts are the best for accessibility? Accessible typefaces. System fonts like Arial and Verdana. It doesn't matter. Which of the following is the most accessible form input? <label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label> Email address: <input type="email" required> <label>Email address: <input type="email" required></label> <label>Email address: <input type="email" required autocomplete="email"></label> Do accessible components always stay accessible for users? No, you must test your components first. Yes, you can use these components without additional work. What kind of testing should you do to ensure that your site is accessible? Choose as many answers as you see fit. Automated testing Manual testing User testing Assistive technology testing Evaluation testing. What errors are caught in automated testing? Choose as many answers as you see fit. Inclusive language Missing alt text Color contrast issues Descriptive form labels ARIA errors What elements need to meet WCAG color contrast standards? Icons Headings Body text All of the above What's the best screen reader to use for testing accessibility? There isn't one JAWS VoiceOver Orca What is the purpose of testing with assistive technology? To test for flaws in your website or app. To experience the same thing as people who use assistive technology. Submit answers error_outline An error occurred when grading the quiz. Please try again. Previous arrow_back Conclusion and next steps Next Glossary arrow_forward
