Loading lesson path

CSS•CSS Foundations

CSS Accessibility Styling

Concept visual

CSS Accessibility Styling

Pointer walk

two pointers

left=0

right=6

Start at both ends

Overview

A website should be designed to ensure good accessibility for all users, including those with disabilities. CSS accessibility styling is about using good styling technics to improve the visual clarity, navigation, and overall user experience.

CSS Accessibility Styling Technics

Here are some tips and technics on how to improve the accessibility of your web site:

Provide High Color Contrast Always use a good color contrast between the text and the background for readability. This is especially important for users with visual impairments or color blindness.

Good Color Contrast body {
background-color: #ffffff;
color: #000000;
}
Bad Color Contrast body {
background-color: #eeeeee;
color: #cccccc;
}

Provide Good Font, Font Size and Line Height Always provide a font that is easily readable. In addition, use a proper font size and line height. Use relative units (like rem ) for font-size, to allow the user to scale the text size in the browser settings.

Good Font Example body {
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
Bad Font Example body {
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
font-variant: small-caps;
line-height: 90%;
}

Have Visible Focus Indicators

Always use the

:focus pseudo-class to ensure that interactive elements (like links, buttons, input fields) have a clear visual focus style.

Using

Formula

:focus will ensure that keyboard users and screen - readers understand which element is currently active.

Example a:focus, button:focus, input:focus {

outline: 2px solid orange;
}

Avoid Hiding Focus Never remove the default focus outlines, without replacing them with another visible focus style. Bad Example button:focus {

outline: none;
}

Good Example button:focus {

outline: 2px solid orange;
}

Formula

5. Use CSS + Semantic HTML

Use CSS for visual styling, and structure content with semantic HTML elements

Formula

(instead of non - semantic elements, like

<div> for everything).

Example nav {
background-color: #333333;
color: white;
}
aside {
background-color: #333333;
color: white;
}

Respect User Preferences

The CSS

Formula

prefers - reduced - motion

@media feature lets you check if a user has asked to reduce motion, such as animations or transitions. Some users have motion sensitivity and prefer websites with less animation. You can use this media query to turn off, or tone down animations and transitions for the users who has activated this setting on their computer:

Example

@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}

You will learn more about media queries in a later chapter.

Summary

Provide high color contrast

Provide easily readable fonts

Keep focus outlines visible

Use semantic HTML elements

Respect user preferences

CSS Performance Optimization

CSS Website Layout

Loading lesson path

Learn/CSS/CSS Foundations

CSS•CSS Foundations

CSS Accessibility Styling

Concept visual

CSS Accessibility Styling

Pointer walk

two pointers

left=0

right=6

Start at both ends

Overview

CSS Accessibility Styling Technics

Here are some tips and technics on how to improve the accessibility of your web site:

Provide High Color Contrast Always use a good color contrast between the text and the background for readability. This is especially important for users with visual impairments or color blindness.

Good Color Contrast body {
background-color: #ffffff;
color: #000000;
}
Bad Color Contrast body {
background-color: #eeeeee;
color: #cccccc;
}

Provide Good Font, Font Size and Line Height Always provide a font that is easily readable. In addition, use a proper font size and line height. Use relative units (like rem ) for font-size, to allow the user to scale the text size in the browser settings.

Good Font Example body {
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
Bad Font Example body {
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
font-variant: small-caps;
line-height: 90%;
}

Have Visible Focus Indicators

Always use the

:focus pseudo-class to ensure that interactive elements (like links, buttons, input fields) have a clear visual focus style.

Using

Formula

:focus will ensure that keyboard users and screen - readers understand which element is currently active.

Example a:focus, button:focus, input:focus {

outline: 2px solid orange;
}

Avoid Hiding Focus Never remove the default focus outlines, without replacing them with another visible focus style. Bad Example button:focus {

outline: none;
}

Good Example button:focus {

outline: 2px solid orange;
}

Formula

5. Use CSS + Semantic HTML

Use CSS for visual styling, and structure content with semantic HTML elements

Formula

(instead of non - semantic elements, like

<div> for everything).

Example nav {
background-color: #333333;
color: white;
}
aside {
background-color: #333333;
color: white;
}

Respect User Preferences

The CSS

Formula

prefers - reduced - motion

Example

@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}