You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/en/articles/zoom/index.njk
+7-6Lines changed: 7 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -3,6 +3,7 @@ title: "Handling Zoom, enlarging text size"
3
3
abstract: "Text size enlargement is used by many users (elderly people, people with visual impairments and people that should wear glasses and don’t…)"
4
4
titleBeforeTag: true
5
5
date: "2018-01-11"
6
+
updateDate: "2025-11-28"
6
7
tags:
7
8
- component
8
9
css:
@@ -11,13 +12,14 @@ css:
11
12
12
13
<h2>Introduction</h2>
13
14
<p>
14
-
Text size enlargement is used by many users (elderly people, people with visual impairments and people that should wear glasses and don’t…). One of the accessibility requirementsis being able to enlarge the text up to 200% without loss of information. At this zoom level, the presentation may be altered, but the text must remain readable (no text must be truncated or superposed).
15
+
Text size enlargement is used by many users (elderly people, people with visual impairments and people that should wear glasses and don’t…). There are two accessibility requirements, one is being able to enlarge the text up to 200% without loss of information and the second one is using the global browser's zooming at 200%, all this without overlapping, loss of content or functionalities. At this zoom level, the presentation may be altered, but the text must remain readable (no text must be truncated or superposed).
15
16
</p>
16
17
17
18
<h2>Default zoom level</h2>
18
19
<p>
19
20
All current browsers offer the possibility to zoom the page. This option enlarges the entire page (text, images, the spacing between the different areas of the page…).
20
-
Although this option is appropriate for occasional users, the drawback is that it adds horizontal scrollbars that make reading difficult.
21
+
Although this option is appropriate for occasional users, the drawback is that it adds horizontal scrollbars that make reading difficult for some users.
22
+
At Orange, we have decided to use as the only test method for the WCAG 1.4.4 Resize Text criterion, the text zoom only at 200%.
21
23
</p>
22
24
23
25
<h3>Identifying the problem</h3>
@@ -26,7 +28,7 @@ css:
26
28
The Orange Smartphone accessories shop brings the latest audio, connected speakers and the best wireless headsets (Bluetooth), original protective cases, choice of batteries and connecting cables to customize your mobile. We selected cases for iPhone, Samsung Galaxy,.. to bring you quality products at the best price. Explore the full range of accessories for smartphones and tablets. Buy yours here.
27
29
</div>
28
30
<br>
29
-
<p>The following example simulates the browser default zoom. The entire page is enlarged, two scrollbars appear (horizontal and vertical). The text is difficult to read.</p>
31
+
<p>The following example simulates the browser default zoom. The entire page is enlarged, two scrollbars appear (horizontal and vertical). The text is difficult to read without interactions.</p>
30
32
31
33
<divclass="zoom">
32
34
<div>
@@ -41,8 +43,7 @@ css:
41
43
42
44
<h2>Zoom text only</h2>
43
45
<p>
44
-
Fortunately, some browsers allow enlarging only the text size. This is the case for Firefox (available from the View menu > Zoom > Zoom text only).
45
-
</p>
46
+
Fortunately, some browsers allow enlarging only the text size. This is the case for Firefox (available from the View menu > Zoom > Zoom text only).</p>
46
47
<imgalt="screenshot of the text zoom option in Firefox"src="../../web/images/zoom-firefox.png">
47
48
<br><br>
48
49
<p>When this option is enabled with a 200% zoom (in Firefox press <kbd>Ctrl +</kbd> four times), your page may not be displayed correctly. It is often because non-relative length units (<code>px</code>, <code>pt</code>) are used.</p>
@@ -71,4 +72,4 @@ Or more easily, keeping the pixels, but specifying a minimum height:<br>
71
72
72
73
<h2>Conclusion</h2>
73
74
74
-
<p>It is essential to test your pages with the zoom set to 200% and “Zoom Text Only” option enabled. This is the only way to check if your pages are readable. Although corrections can be minor, they can totally change the way information is perceived by some users.</p>
75
+
<p>It is essential to test your pages with the zoom set to 200% and “Zoom Text Only” option enabled. This is what we recommend at Orange, and it's the only way to ensure your pages remain readable regardless of screen size. While these developments are often simply best practices in responsive web design, or even minor corrections, they can drastically improve how information is perceived by some users.</p>
Copy file name to clipboardExpand all lines: src/fr/articles/zoom/index.njk
+12-9Lines changed: 12 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -3,6 +3,7 @@ title: "Gestion de l’agrandissement des caractères"
3
3
abstract: "Gestion du zoom, agrandissement de la taille du texte"
4
4
titleBeforeTag: true
5
5
date: "2018-01-11"
6
+
updateDate: "2025-11-28"
6
7
tags:
7
8
- component
8
9
css:
@@ -11,13 +12,14 @@ css:
11
12
12
13
<h2>Préambule</h2>
13
14
<p>
14
-
L’agrandissement de la taille des caractères est utilisé par beaucoup d’utilisateurs (les personnes senior, les personnes malvoyantes, les personnes qui devraient porter une paire de lunettes mais qui n’en portent pas…). Les recommandations d’accessibilité préconisent la possibilité d’agrandir la taille du texte et seulement du texte par deux (200%) sans perte d’information. À ce niveau de zoom, la présentation peut être altérée, mais le texte doit rester lisible (pas de texte tronqué ni superposé).
15
+
L’agrandissement de la taille des caractères est utilisé par beaucoup d’utilisateurs (les personnes seniors, les personnes malvoyantes, les personnes qui devraient porter une paire de lunettes mais qui n’en portent pas…). Les recommandations d’accessibilité préconisent la possibilité d’agrandir la taille du texte et seulement du texte par deux (200%) ou l'utilisation du zoom global de la page à 200%, tout cela sans chevauchement ou perte de contenu ou de fonctionnalités. À ce niveau de zoom, la présentation peut être altérée, mais le texte doit rester lisible (pas de texte tronqué ni superposé).
15
16
</p>
16
17
17
18
<h2>Zoom par défaut du navigateur</h2>
18
19
<p>
19
20
Tous les navigateurs récents offrent désormais la possibilité de zoomer la page. Cette option permet d’agrandir la totalité de la page (les textes, les images, l’espacement entre les différentes zones de la page…).
20
-
Cette option, bien que satisfaisante pour les utilisateurs occasionnels, a l’inconvénient de faire apparaître une barre de défilement horizontal qui rend la lecture de la page difficile.
21
+
Cette option, bien que satisfaisante pour les utilisateurs occasionnels, a l’inconvénient de faire apparaitre une barre de défilement horizontal qui rend la lecture de la page difficile pour certains.
22
+
Chez Orange, nous avons décidé d'utiliser comme seule méthode de test pour le critère WCAG 1.4.4 Resize Text, le <strong>zoom du texte seulement à 200%</strong>.
21
23
</p>
22
24
23
25
<h3>Mise en évidence du problème</h3>
@@ -26,28 +28,29 @@ css:
26
28
La boutique accessoires pour Smartphone d’Orange regroupe les dernières nouveautés audio, enceintes connectées et les meilleurs casques sans fil (bluetooth), des coques de protection originales, un choix de batteries et câbles de connexion pour personnaliser votre mobile. Nous avons sélectionné des coques pour iPhone, Samsung Galaxy,.. pour vous apporter des produits de qualité au meilleur prix.La boutique accessoires pour Smartphone d’Orange regroupe les dernières nouveautés audio, enceintes connectées et les meilleurs casques sans fil (bluetooth), des coques de protection originales, un choix de batteries et câbles de connexion pour personnaliser votre mobile. Nous avons sélectionné des coques pour iPhone, Samsung Galaxy,.. pour vous apporter des produits de qualité au meilleur prix.
27
29
</div>
28
30
<br>
29
-
<p>Ce premier exemple simule le zoom par défaut du navigateur. La totalité de la page s’agrandit, deux barres de défilement apparaissent (horizontal et vertical). Le texte est difficile à lire.</p>
31
+
<p>Ce premier exemple simule le zoom par défaut du navigateur. La totalité de la page s’agrandit, deux barres de défilement apparaissent (horizontal et vertical). Le texte est difficile à lire dans sa totalité sans manipulations.</p>
30
32
31
33
<divclass="zoom">
32
34
<div>
33
35
La boutique accessoires pour Smartphone d’Orange regroupe les dernières nouveautés audio, enceintes connectées et les meilleurs casques sans fil (bluetooth), des coques de protection originales, un choix de batteries et câbles de connexion pour personnaliser votre mobile. Nous avons sélectionné des coques pour iPhone, Samsung Galaxy,.. pour vous apporter des produits de qualité au meilleur prix.La boutique accessoires pour Smartphone d’Orange regroupe les dernières nouveautés audio, enceintes connectées et les meilleurs casques sans fil (bluetooth), des coques de protection originales, un choix de batteries et câbles de connexion pour personnaliser votre mobile. Nous avons sélectionné des coques pour iPhone, Samsung Galaxy,.. pour vous apporter des produits de qualité au meilleur prix.
34
36
</div>
35
37
</div>
36
38
<br>
37
-
<p>Dans ce deuxième exemple, on simule uniquement l’agrandissement de la taille du texte. Ici, la largeur de la page reste inchangée, cela entraîne uniquement l’apparition d’un ascenseur vertical. La lecture du texte est beaucoup plus simple.</p>
39
+
<p>Dans ce deuxième exemple, on simule uniquement l’agrandissement de la taille du texte. Ici, la largeur de la page reste inchangée, cela entraine uniquement l’apparition d’un ascenseur vertical. La lecture du texte est beaucoup plus simple.</p>
38
40
<divclass="zoom">
39
41
La boutique accessoires pour Smartphone d’Orange regroupe les dernières nouveautés audio, enceintes connectées et les meilleurs casques sans fil (bluetooth), des coques de protection originales, un choix de batteries et câbles de connexion pour personnaliser votre mobile. Nous avons sélectionné des coques pour iPhone, Samsung Galaxy,.. pour vous apporter des produits de qualité au meilleur prix.La boutique accessoires pour Smartphone d’Orange regroupe les dernières nouveautés audio, enceintes connectées et les meilleurs casques sans fil (bluetooth), des coques de protection originales, un choix de batteries et câbles de connexion pour personnaliser votre mobile. Nous avons sélectionné des coques pour iPhone, Samsung Galaxy,.. pour vous apporter des produits de qualité au meilleur prix.
40
42
</div>
43
+
<br>
41
44
42
45
<h2>Zoom de la taille du texte uniquement</h2>
43
-
<p>
44
-
Heureusement certains navigateurs permettent d’agrandir uniquement la taille du texte. C’est le cas de Firefox par exemple (option disponible dans le menu Affichage > Zoom > Zoom texte seulement).
45
-
</p>
46
+
<p>Heureusement certains navigateurs permettent d’agrandir uniquement la taille du texte. C’est le cas de Firefox par exemple (option disponible dans le menu Affichage > Zoom > Zoom texte seulement).</p>
46
47
<p><imgalt="capture d’écran de l’option Zoom texte seulement dans Firefox"src="../../web/images/zoom-firefox.png"></p>
47
48
48
49
<p>Lorsque cette option est activée, il se peut que votre page ne s’affiche pas correctement avec un zoom à 200% (dans Firefox faire quatre fois <kbd>Ctrl+</kbd>). Bien souvent, il s’agit d’un problème lié à l’utilisation d’unités non-relatives telles que les pixels ou les points (<code>px</code>, <code>pt</code>).</p>
49
50
<h2>Les unités relatives</h2>
50
-
<p> L’utilisation d’unités relatives pour le texte telles que les <code>%</code>, les <code>em</code>, ou les <code>rem</code>, mais également dans le dimensionnement des zones de l’écran (taille des <code>div</code>) permet de résoudre les problèmes. En effet, si le texte peut être zoomé alors les <ilang="en">containers</i> doivent aussi suivre l’augmentation de la taille pour ne pas tronquer ou faire se chevaucher le texte.</p>
51
+
<p>L’utilisation d’unités relatives pour le texte telles que les <code>%</code>, les <code>em</code>, ou les <code>rem</code>, mais également dans le dimensionnement des zones de l’écran (taille des <code>div</code>) permet de résoudre les problèmes. En effet, si le texte peut être zoomé alors les <ilang="en">containers</i> doivent aussi suivre l’augmentation de la taille pour ne pas tronquer ou faire se chevaucher le texte.</p>
52
+
53
+
<p>Le zoom texte seulement permet de résoudre plus de situations problématiques pour certains utilisateurs que la vérification avec le zoom global navigateur et permet donc une plus grande robustesse du code front.</p>
51
54
52
55
<h3>Exemple non-valide</h3>
53
56
@@ -70,4 +73,4 @@ par une hauteur variable en fonction de la taille des caractères :<br>
70
73
71
74
<h2>Conclusion</h2>
72
75
73
-
<p>Il est indispensable de tester vos pages avec le zoom à 200% et l’option « Zoom texte seulement » activée. C’est la seule façon de vérifier si vos pages restent lisibles. Bien qu’il s’agisse de corrections mineures à apporter, celles-ci peuvent changer totalement la façon dont l’information sera perçue par certains utilisateurs.</p>
76
+
<p>Il est indispensable de tester vos pages avec le zoom à 200% et l’option « Zoom texte seulement » activée. C'est ce que nous préconisons chez Orange et c'est la seule façon de vérifier si vos pages restent bien lisibles quelle que soit la taille de l'écran. Bien que ces développements ne sont souvent que de bonnes pratiques de responsive web design (conception adaptative web) voire des corrections mineures à apporter, celles-ci peuvent améliorer drastiquement la façon dont l’information sera perçue par certains utilisateurs.</p>
0 commit comments