Ajustements CSS pour l'accessibilité à la navigation au clavier

stylessoyezcreateurs.css.html

@@ -19,6 +19,11 @@
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
+* a:focus-visible {
+	outline: 3px dashed rgba(80,80,80,0.68);
+	outline-offset: 4px;
+	background: transparent;
+}
 .offscreen {
     position: absolute;
     left: -10000px;
@@ -745,12 +750,12 @@ a#logo { display: block; clear: right; margin-left: 80px; }
 #cita_bandeau #citations { margin: 0 10px; }
 #cita_bandeau #citations dl { margin: 0; }
 
-#escapelinks { margin-left:2.625em; }
+#escapelinks { margin-left:2.625em; background: #FFF; padding: 0.5em 0; }
 #escapelinks ul { display: inline; padding:0; margin:0; }
-#escapelinks li { display: inline; padding: 0 .8em; background: #GET{c_header_bk}; list-style: none; list-style-image: none; }
-#escapelinks a { color:#GET{c_header}; display: inline-block; }
-#escapelinks a:link, #escapelinks a:visited { color:#[(#GET{c_header}|couleur_inverserluminosite{20})]; }
-#escapelinks a:hover, #escapelinks a:focus, #escapelinks a:active { color:#GET{c_header}; }
+#escapelinks li { display: inline; padding: 0 .5em; list-style: none; list-style-image: none; }
+#escapelinks a { color:#000; display: inline-block; padding: 0 1em; }
+#escapelinks a:link, #escapelinks a:visited { color:inherit; }
+#escapelinks a:hover, #escapelinks a:focus, #escapelinks a:active { color: #00F; text-decoration: underline ;}
 
 /*************** STRUCTURE - CONTENT */
 #content[(#CONFIG{soyezcreateurs_layout/positioncartouchetitre,contenu}|=={haut}|oui), .cartouche] { background-color: #GET{c_container_bk};[(#CONFIG{soyezcreateurs_couleurs/transparencecontent,1}|!={1}|oui)background-color: rgba([(#GET{c_container_bk}|sc_rgb)], #CONFIG{soyezcreateurs_couleurs/transparencecontent,1});] color: #GET{c_container}; }
@@ -962,7 +967,7 @@ a#logo { display: block; clear: right; margin-left: 80px; }
 #footer #bandeaucontact p { text-align: center; font-size: 1.2em; }
 .menu_lien_participer { text-align: right; margin-bottom: [(#CONFIG{soyezcreateurs_couleurs/pagemargebasse,3em});] }
 .menu_lien_participer a { background-color: #GET{c_datemajsite_bk}; color: #GET{c_datemajsite}; padding: 0.7em 2.5em; border-radius: 0 0 50% 50%; display: inline-block; opacity: 0.1; }
-.menu_lien_participer a:hover { opacity: 1; }
+.menu_lien_participer a:hover, .menu_lien_participer a:focus { opacity: 1; }
 
 /* Nuage de mot clé dans le footer */
 #nuage { padding: 2em .5em; text-align: center; line-height: 1em;}