Stilizarea CSS pentru accesibilitate
O accesibilitate bună înseamnă că un site web funcționează pentru toți utilizatorii, inclusiv pentru persoanele cu dizabilități.
Prin tehnici de stilizare atente, CSS poate îmbunătăți claritatea vizuală, navigarea și experiența generală a utilizatorului.
Tehnici de stilizare CSS pentru accesibilitate
Tehnicile de mai jos te vor ajuta să îți faci site-ul web mai accesibil.
1. Oferiți un contrast de culoare ridicat
Textul trebuie să iasă în evidență față de fundal pentru a fi lizibil, așa că păstrează un contrast puternic între ele. Utilizatorii cu deficiențe de vedere sau daltonism depind cel mai mult de acest lucru.
Contrast de culoare bun
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Good Color Contrast</title>
<style>
body {
background-color: #ffffff;
color: #000000;
}
</style>
</head>
<body>
<h1>Good Color Contrast</h1>
<p>This text has good color contrast. The background is white and the text is black, making it easy to read for all users.</p>
</body>
</html>
Contrast de culoare slab
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bad Color Contrast</title>
<style>
body {
background-color: #eeeeee;
color: #cccccc;
}
</style>
</head>
<body>
<h1>Bad Color Contrast</h1>
<p>This text has bad color contrast. The background is light gray and the text is a slightly darker gray, making it very hard to read.</p>
</body>
</html>
2. Oferiți un font, o dimensiune a fontului și o înălțime a liniei bune
Alege un font ușor de citit, cu o dimensiune și o înălțime a liniei potrivite. Setează font-size în unități relative (precum rem), pentru ca utilizatorii să poată scala textul din setările browserului.
Exemplu de font bun
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Good Font Example</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Good Font Example</h1>
<p>This text uses a clean, readable font (Arial), a relative font size (1rem), and a comfortable line height (1.6). This makes it easy to read on all devices.</p>
</body>
</html>
Exemplu de font slab
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bad Font Example</title>
<style>
body {
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
font-variant: small-caps;
line-height: 90%;
}
</style>
</head>
<body>
<h1>Bad Font Example</h1>
<p>This text uses a serif font with a small fixed pixel size, italic style, small-caps variant, and a tight line height. This combination makes the text harder to read, especially for users with visual impairments.</p>
</body>
</html>
3. Aveți indicatori de focus vizibili
Elementele interactive (precum linkurile, butoanele, câmpurile de introducere) ar trebui să afișeze întotdeauna un stil vizual clar când au focus, iar pentru asta există pseudo-clasa :focus.
Cu acest stil, utilizatorii de tastatură și cititoarele de ecran pot înțelege care element este activ în prezent.
Exemplu
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visible Focus Indicators</title>
<style>
a:focus, button:focus, input:focus {
outline: 2px solid orange;
}
</style>
</head>
<body>
<h1>Visible Focus Indicators</h1>
<p>Click on the elements below, or use the Tab key to navigate between them. Each element will show an orange outline when focused.</p>
<p><a href="#">A Link</a></p>
<p><button>A Button</button></p>
<p><input type="text" placeholder="An Input Field"></p>
</body>
</html>
4. Evitați ascunderea focusului
Conturul implicit de focus ar trebui eliminat doar dacă îi ia locul un alt stil de focus vizibil.
Exemplu slab
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bad Focus Example</title>
<style>
button:focus {
outline: none;
}
</style>
</head>
<body>
<h1>Bad Focus Example</h1>
<p>The button below has no visible focus indicator. Try using the Tab key to focus it - you cannot tell which element is active.</p>
<p><button>Button 1</button></p>
<p><button>Button 2</button></p>
</body>
</html>
Exemplu bun
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Good Focus Example</title>
<style>
button:focus {
outline: 2px solid orange;
}
</style>
</head>
<body>
<h1>Good Focus Example</h1>
<p>The button below has a visible orange focus indicator. Try using the Tab key to focus it - you can clearly see which element is active.</p>
<p><button>Button 1</button></p>
<p><button>Button 2</button></p>
</body>
</html>
5. Utilizați CSS + HTML semantic
Lasă stilizarea vizuală în seama CSS și dă conținutului structură prin elemente HTML semantice, în loc să folosești peste tot elemente non-semantice precum <div>.
Exemplu
nav {
background-color: #333333;
color: white;
}
aside {
background-color: #333333;
color: white;
}
6. Respectați preferințele utilizatorului
Sensibilitatea la mișcare îi face pe unii utilizatori să prefere site-urile web cu mai puține animații. Pentru a verifica dacă cineva a cerut reducerea mișcării, de exemplu a animațiilor sau a tranzițiilor, CSS oferă caracteristica media prefers-reduced-motion.
Când această setare este activă pe calculatorul lui, acest media query îți permite să dezactivezi sau să reduci animațiile și tranzițiile.
Exemplu
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prefers Reduced Motion</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: coral;
animation: slide 2s infinite alternate;
}
@keyframes slide {
from { margin-left: 0; }
to { margin-left: 300px; }
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<h1>Prefers Reduced Motion</h1>
<p>The box below is animated. If your system is set to prefer reduced motion, the animation will be disabled.</p>
<div class="box"></div>
</body>
</html>
Rezumat
- Păstrează un contrast de culoare ridicat
- Alege fonturi ușor de citit
- Lasă conturile de focus vizibile
- Structurează paginile cu elemente HTML semantice
- Respectă preferințele utilizatorilor