CSS: Accessibility

Question 1

What is WebAIM’s Color Contrast Checker?

Answer 1

This online tool allows you to input the foreground and background colors of your design and instantly see if they meet the Web Content Accessibility Guidelines (WCAG) standards.

Question 2

What is TPGi Color Contrast Analyzer?

Answer 2

This is a free color contrast checker that allows you to check if your websites and apps meet the Web Content Accessibility Guidelines (WCAG) standards. This tool also comes with a Color Blindness Simulator feature which allows you to see what your website or app looks like for people with color vision issues.

Question 3

What is the Accessibility Tree?

Answer 3

Accessibility tree is a structure used by assistive technologies, such as screen readers, to interpret and interact with the content on a webpage.

Question 4

What is the “max()” Function?

Answer 4

The max() function returns the largest of a set of comma-separated values.

Question 5

What is “display: none;” and how does it impact accessibility in CSS?

Answer 5

Using display: none; means that screen readers and other assistive technologies won’t be able to access this content, as it is not included in the accessibility tree. Therefore, it is important to use this method only when you want to completely remove content from both visual presentation and accessibility.

Question 6

What is “visibility: hidden” and how does it impact accessibility in CSS?

Answer 6

This property and value hides the content visually but keeps it in the document flow, meaning it still occupies space on the page. These elements will also no longer be read by screen readers because they will have been removed from the accessibility tree.

Question 7

What is the “.sr-only” CSS class? For example:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

Answer 7

This is a common technique used to visually hide content while keeping it accessible to screen readers.

Question 8

What is the “scroll-behavior: smooth” Property?

Answer 8

This property and value enables a smooth scrolling behavior.

Question 9

What is the “prefers-reduced-motion” feature? For example:
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}

Answer 9

This is a media feature that can be used to detect the user’s animation preference.

Question 10

What is the “aria-hidden” Attribute?

Answer 10

Used to hide an element from people using assistive technology such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.

Question 11

What is the “hidden” Attribute?

Answer 11

This attribute is supported by most modern browsers and hides content both visually and from the accessibility tree. It can be easily toggled with JavaScript.