-
Notifications
You must be signed in to change notification settings - Fork 18
/
index.html
97 lines (77 loc) · 5.33 KB
/
index.html
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
90
91
92
93
94
95
96
97
<!doctype html>
<html lang="fr">
<head>
<!-- * This file is part of a11y-guidelines | Our vision of mobile & web accessibility guidelines and best practices, with valid/invalid examples.
* Copyright (C) 2016 Orange SA
* See the Creative Commons Legal Code Attribution-ShareAlike 3.0 Unported License for more details (LICENSE file). -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exemple, faire parler le lecteur d'écran - recommandations accessibilité web Orange</title>
<!-- Copyright © 2014 Monotype Imaging Inc. All rights reserved -->
<link rel="stylesheet" href="../../../boosted/css/orangeHelvetica.css">
<!-- Copyright © 2016 Orange SA. All rights reserved -->
<link rel="stylesheet" href="../../../boosted/css/orangeIcons.css">
<link rel="stylesheet" href="../../../boosted/css/boosted.css">
<!-- Style pour la mise en forme des exemples de code -->
<link rel="stylesheet" href="../../../css/dark.min.css">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/jquery.validate.min.js"></script>
<script src="../main-script.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="../main-style.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main role="main" class="container">
<h1>Faire parler le lecteur d'écran à l'aide d'ARIA</h1>
<h2>Préambule</h2>
<p>Dans certains cas, il peut être intéressant de vouloir faire parler le lecteur d'écran, pour confirmer une action utilisateur par exemple. Dans cet exemple, nous allons voir comment ceci peut être réalisé simplement à l'aide de l'attribut <code>aria-live</code>.</p>
<h2>Principe de fonctionnement</h2>
<p>L'attribut <code>aria-live</code> positionné sur un élément permet d'indiquer au lecteur d'écran que cet élément doit être vocalisé automatiquement lorsque son contenu est modifié.
Les valeurs possibles sont :
<ul>
<li><code>aria-live="off"</code> : valeur par défaut, l'utilisateur n'est pas averti lorsque l'élément est mis à jour.</li>
<li><code>aria-live="polite"</code> : le lecteur d'écran vocalise de manière polie lorsque l'élément est mis à jour. C'est-à-dire que si le lecteur d'écran était déjà en train de lire du texte, celui-ci n'est pas interrompu.</li>
<li><code>aria-live="assertive"</code> : le lecteur d'écran est interrompu dans sa lecture et averti l'utilisateur de la mise à jour le plus tôt possible.</li>
</ul>
</p>
<h2>Et en Javascript ?</h2>
<p>Cette première solution permet dans bien des cas de rendre son application accessible. Il existe tout de même quelques cas où il serait pratique de pouvoir faire parler le lecteur d'écran directement à l'aide d'une fonction Javascript (exemple : <code>speak('Article supprimé du panier')</code>). Malheureusement ceci n'est pas disponible nativement.<p>
<p>Heureusement, on peut rapidement réaliser une petite fonction Javascript qui utilisera un élément <code>aria-live</code> sous le capot pour réaliser cette fonctionnalité.</p>
<p>A l'appel de la fonction <code>speak</code>, on ajoute une <code>div</code> à la fin de la page. On lui affecte un attribut <code>aria-live</code> et on insère le message à vocaliser dans la <code>div</code>. Pour ne pas que ce message soit visible dans la page, on peut ajouter également une classe de masquage accessible sur cette <code>div</code>, ainsi celle-ci sera vocalisée mais ne sera pas visible à l'écran.</p>
<h2>Détail du code</h2>
<pre><code>
/* srSpeak(text, priority)
text : le message à vocaliser
priority (facultatif) : "polite" (par défaut) ou "assertive" */
function srSpeak(text, priority) {
var el = document.createElement("div");
var id = "speak-" + Date.now();
el.setAttribute("id", id);
el.setAttribute("aria-live", priority || "polite");
el.classList.add("sr-only");
document.body.appendChild(el);
window.setTimeout(function () {
document.getElementById(id).innerHTML = text;
}, 100);
window.setTimeout(function () {
document.body.removeChild(document.getElementById(id));
}, 1000);
}
</code></pre>
<p>Rappel, pour que les messages vocalisés ne soient pas visibles à l'écran vous devez avoir <a href="../masquage/index.html">une classe de masquage accessible</a> (<code>sr-only</code>) dans vos CSS.</p>
<h2>Exemple</h2>
<p>Vous pouvez tester cette fonction grâce au formulaire ci-dessous (à tester avec un lecteur d'écran, sinon on entend rien).</p>
<div class="form-group">
<label for="message">Message à vocaliser</label>
<input type="text" id="message" class="form-control">
</div>
<button id="btnSpeak" class="btn btn-secondary">Test</button>
<p> </p>
</main>
<script src="../../../boosted/js/boosted.min.js"></script>
<script type="text/javascript" src="../../js/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>