-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
89 lines (63 loc) · 3.5 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
---
title: Utilisation des requêtes média pour l'accessibilité
slug: Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility
---
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/Requêtes_média/")}}
**Les requêtes média (_media queries_)** peuvent être utilisées afin d'améliorer l'accessibilité d'un site web.
## Réduction de mouvement - `prefers-reduced-motion`
Le clignotement ou les animations rapides peuvent poser problème, notamment pour les personnes souffrant de troubles tels que le troubles de déficit de l'attention ou d'epilepsie, de migraines, etc.
Cette méthode peut également améliorer l'expérience des utilisateurs en économisant l'énergie nécessaire à l'affichage de la page (avec une amélioration sensible pour les appareils avec une batterie faible ou qui ne sont pas particulièrement récents).
### Syntaxe
- `no-preference`
- : Cette valeur indique que l'utilisateur n'a pas indiqué de préférence particulière dans le système.
- `reduce`
- : Cette valeur indique que l'utilisateur a signalé au système qu'il préférait une interface minimisant la quantité de mouvement ou d'animation. Idéalement, tous les mouvements qui ne sont pas essentiles doivent être retirés.
### Exemple
Cet exemple illustre comment éviter les animations inutiles en activant une préférence pour réduire les mouvements à l'écran.
#### HTML
```html
<div class="animation">animated box</div>
```
#### CSS
```css
.animation {
-webkit-animation: vibrate 0.3s linear infinite both;
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}
```
#### Résultat
{{EmbedLiveSample("Exemple")}}
## Mode de contraste élevé{{Non-standard_inline}}
La caractéristique média **`-ms-high-contrast`** est [spécifique à Microsoft](/fr/docs/Web/CSS/Microsoft_extensions) mais permet d'indiquer si l'application est affichée avec un mode de contraste élevé et, si c'est le cas, quelle variation de couleur est utilisée.
Cela ne bénéficie pas seulement aux utilisateurs souffrant de troubles de la vision mais aussi aux personnes qui consultent le document avec une lumière ambiante importante (ex. sur un écran faiblement éclairé et en plein soleil).
### Syntaxe
La caractéristique média **`-ms-high-contrast`** peut être définie avec l'une des valeurs suivantes.
### Valeurs
- `active`
- : Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé, quelle que soit la variation de couleurs.
- `black-on-white`
- : Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante noir sur blanc.
- `white-on-black`
- : Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante blanc sur noir.
### Exemple
Les déclarations suivantes s'appliqueront respectivement aux applications qui sont affichées avec un mode de contraste élevé, quelle que soit la variation de couleur (1), avec une dominante noir sur blanc (2), avec une dominante blanc sur noir (3).
```css
@media screen and (-ms-high-contrast: active) {
/* Toutes les règles appliquées en contraste élevé */
}
@media screen and (-ms-high-contrast: black-on-white) {
div {
background-image: url("image-bw.png");
}
}
@media screen and (-ms-high-contrast: white-on-black) {
div {
background-image: url("image-wb.png");
}
}
```