Learn Accessibility

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.

What tools are commonly used to help people with disabilities to use the web?

What is an effective way to enact change on the web?

What is the highest level of WCAG standards?

What are examples of operable?

Which of the following is the best practice for building an accessible 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?

Which example of :focus CSS style is the most accessible on a white background?

What's the purpose of a skip link?

What is the best way to change an element's style with JavaScript?

Can all JavaScript actions support keyboard users?

How can you make complex images accessible?

Color alone isn't a sufficient identifier for documentation. What else will help readers identify UI elements?

What can we build which reflects the operating system settings for motion?

For readable copy, I should always use high-contrast between my copy and background.

What fonts are the best for accessibility?

Which of the following is the most accessible form input?

Do accessible components always stay accessible for users?

What kind of testing should you do to ensure that your site is accessible?

What errors are caught in automated testing?

What elements need to meet WCAG color contrast standards?

What's the best screen reader to use for testing accessibility?

What is the purpose of testing with assistive technology?

Which example of `:focus` CSS style is the most accessible on a white background?