CSS - Accessibility

Instructors: Jess, Carmen, and Eda

Accessibility

Before this session, please:

• Read Best Practices for Accessibility and CSS: What Are Some Tools to Check for Good Color Contrast on Sites? and take notes
• Read Best Practices for Accessibility and CSS: What Are Best Practices for Hiding Content So It Doesn’t Become Inaccessible? and take notes
• Complete as many steps from Build a Quiz Webpage as possible before class, complete solo in the next few days if you need more time
• Complete Build a Tribute Page solo over the next few days. Tribute pages have a great deal of space to show off your interests and creativity!
• Read CSS Accessibility Review and take notes
• Complete CSS Accessibility Quiz solo to test your knowledge of accessibility in CSS

During this session, we’ll:

• Review notes
• Review notes
• We’ll cover key topics from Build a Quiz Webpage
• We’ll talk through Build a Tribute Page to help encourage learners to approach this lab creatively!
• Review notes

After this session, please:

• Read Understanding How to Work with Floats and Positioning in CSS: What Are Common Use Cases for Using Floats, and How Do They Work? and take notes
• Read Understanding How to Work with Floats and Positioning in CSS: What Is Relative Positioning, and How Does This Differ from the Default Static Positioning? and take notes
• Read Understanding How to Work with Floats and Positioning in CSS: What Is Absolute Positioning, and How Does It Work? and take notes
• Read Understanding How to Work with Floats and Positioning in CSS: What Is Fixed and Sticky Positioning, and How Does It Differ from Absolute Positioning? and take notes
• Read Understanding How to Work with Floats and Positioning in CSS: What Is the Z-Index Property, and How Does It Work to Control the Stacking of Positioned Elements? and take notes
• Try and complete as many steps from Build a Cat Painting as possible before class, you may need to complete solo over the next few days
• Complete Build a House Painting solo over the next few days.
• Read CSS Positioning Review and take notes
• Complete CSS Positioning Quiz solo to test your knowledge of positioning in CSS

Instructor notes

Best Practices for Accessibility and CSS: What Are Some Tools to Check for Good Color Contrast on Sites?

There are two helpful tools that allow us to check good color contrasts are:

• WebAIM’s Contrast Checker, which provides immediate feedback when we add foreground and background colors for whether they meet the Web Content Accessibility Guidelines (WCAG) standards.
• TPGi Colour Contrast Analyzer, which is a desktop application that has features that let us analyze entire web pages and more complex designs, and simulate color vision deficiencies.

Best Practices for Accessibility and CSS: What Are Best Practices for Hiding Content So It Doesn’t Become Inaccessible?

When we’re hiding content on a webpage, we should make sure that we don’t compromise accessibility. There are some best practices that we can follow:

• Using display: none;. In this case, the content will be removed from both the visual presentation and the accessibility tree.
• Using visibility: hidden;. In this case, the content will only be visually hidden, but it stays in the document. However, it’s also removed from the accessibility tree. We should use this only when we want to hide content from everyone.
• Using the “screen-reader only” technique. It’s a common technique to hide content visually but let it remain accessible to screen reader users. In this case, we usually define a CSS class like .sr-only:

 1.sr-only {
 2  position: absolute;
 3  width: 1px;
 4  height: 1px;
 5  padding: 0;
 6  margin: -1px;
 7  overflow: hidden;
 8  clip: rect(0, 0, 0, 0);
 9  white-space: nowrap;
10  border: 0;
11}

1<p class="sr-only">Hidden text</p>
2<p>Visible text</p>

• Using the hidden attribute for hiding the content’s visibility. In this case, the content will be both visually hidden and removed from the accessibility tree.

1<p hidden>This content is hidden</p>
2<p>This content is visible</p>

Build a Quiz Webpage

We’ll take a look at this exercise that goes through some accessibility concepts!

Build a Tribute Page

This exercise goes over some HTML and CSS concepts that we’ve learned so far.

CSS Accessibility Review

In this unit, we’ve explored:

• Color contrast tools
• Accessibility tree
• max() function
• Best practices with CSS and accessibility
• Hiding content with HTML attributes
• Accessibility issue of the placeholder attribute