Let's identify good and bad CSS practices for accessibility.
In the last section of this chapter, we will finish integrating our project!
Take Advantage of CSS for Accessibility
Because HTML, its semantics, and ARIA attributes improve users’ experience, people often think that CSS does not impact accessibility.
That is not entirely true.
Fixed Units vs. Relative Units
In CSS, one of the biggest concerns is measurement units.
When you write CSS code, you will regularly declare the size of a title or a paragraph. It's a standard "workflow" (below a CSS declaration).
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
} However, it is better to use relative units (em or rem) than fixed values (px).
html {
font-size: 100%; /* 16px par défaut */
}
body {
font-size: 0.75em; /* 12px */
}
h1 {
font-size: 2em; /* 24px */
}The em content increases in size if the user uses a larger default font size, which is convenient for people who need larger fonts.
Indicate State Using Pseudo-Classes
You learned about pseudo-classes in the chapter on navigation menus. These allow you to indicate an item’s state, such as when it’s in focus or hovered over.
So remember to use the pseudo-classes :hover, :visited, :focus, and :active as much as possible, especially for your links.
a {
color: #ff0000;
}
a:hover, a:visited, a:focus {
color: #a60000;
text-decoration: none;
}
a:active {
color: #000000;
background-color: #a60000;
}Define the Line Height
The CSS line-height property allows you to define the height of a line of text. In other words, the higher the value, the larger the space between your lines.
Although the designer most often selects this property’s value, know that the minimum of this value must be 1.5.
p {
line-height: 1.5;
}People usually find it difficult to read text that is too compact, so it’s important to space your lines appropriately.
Hide Elements Appropriately
A little earlier in this course, you saw that if you want to have elements that can be read by assistive technologies but be hidden visually, you must know certain rules.
Do not use display: none or visibility: hidden rules, as it will hide the content from all of your users, whether they use assistive technologies or not.
The code below allows you to visually hide the content on the screen while visually leaving it perceptible to people using these technologies.
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}Improve the Accessibility of Your Links and Buttons
A known integration technique aims to define your links as HTML blocks.
Here is the HTML code:
<nav>
<ul class="main-nav">
<li class="nav-item">
<a class="nav-item-link" href="/index.html">accueil</a>
</li>
<li class="nav-item">
<a class="nav-item-link" href="/products.html">nos produits</a>
</li>
<li class="nav-item">
<a class="nav-item-link" href="/about.html">à propos</a>
</li>
</ul>
</nav>Here is the CSS code:
.main-nav {
display: flex;
justify-content: space-around;
width: 500px;
}
.nav-item {
list-style-type: none;
}
.nav-item-link {
background-color: #333;
color: #FFF;
display: block;
padding: 8px 12px;
text-decoration: none;
}
.nav-item-link:hover {
background-color: #555;
}In the example above, we created a navigation menu and used CSS to define the menu items as blocks. These menu items now take the entire width of their container (this is the peculiarity of block type elements), and we can apply vertical padding to it.
Don't Display Elements Using CSS
Some properties allow you to display text on the site using CSS (like the previous section on showing/hiding) without making the content perceptible to assistive technology users.
The content property is the main culprit!
p {
content: "Here is the text";
}In the example above, the text will be displayed on the screen and readable visually, but won't appear in the HTML. In other words, assistive technologies have no way of knowing that this text exists.
And What About CSS Frameworks?
CSS frameworks are often a reasonable choice when you don’t have much time to spend on the CSS of a site. These frameworks enable:
Improvement of a site's responsiveness (very often, they are mobile-first).
Management of the inter-compatibility between the major browsers.
Acceleration of a project's development through the use of reusable elements (or components).
Although Flexbox and Grid are becoming more common, many projects still use CSS frameworks, such as Bootstrap. Thankfully, more and more frameworks and tools take accessibility into account (remember the Plyr video library discussed in a previous chapter). The latest versions of the Bootstrap framework (3.* and especially 4.*) have integrated accessibility into many elements. Several components have ARIA attributes to help you.
Tonight in Gotham: Make CSS Code Accessible
Now let’s revisit the project's code, specifically the CSS file.
At the top of the file, you'll see the general rules applied to the project (the font size and weight).
h1 {
font-size: 4em;
font-weight: 600;
}
h2 {
font-size: 3em;
font-weight: 500;
}
h3 {
font-size: 1.5em;
font-weight: 700;
}
p {
font-size: 1em;
font-weight: 400;
}Note that em is used as a unit of measurement for more flexibility in managing font size (if, for example, the user needs to make the font larger).
There's also the .sr-only class:
.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;
}This class makes it possible to visually hide text while keeping it readable to assistive technologies.
The pseudo-classes :hover and :focus are used to indicate the status of navigation elements:
.header-navigation-item:hover,
.header-navigation-item:focus {
font-weight: 700;
}In addition, the a tags in the navigation menu use the display: block; property. This property allows them to expand their clickable area to the size of the container they are in.
Let’s Recap!
As in the case of HTML, CSS best practices have a direct impact on accessibility.
It’s important to learn how to properly hide your content. Poor use of CSS can hide the content from all of your users.
Favor relative units over fixed. They allow you to maintain the consistency of your design if the font size is increased, and make the site more responsive.
Now that we have covered CSS and know a few tricks, let's look at tools that will allow you to go even further.
