Comment faire accessibilité et éco-conception @Démo publique

Fiche: Boite de sélection multiple

Description

Une boite de sélection multiple, hiérachisée avec une décoration en phase avec la charte du site. Accessible ?

Oui mais cela n'est pas une boite de sélection technique, c'est en fait un ensemble de case à cocher (ou de radio boutons si choix unique) avec des fieldsets et leurs légendes.

Il y a bien entendu un réhabillage complet avec les CSS et quelques fonctions javaScript.

Ce module peut aussi bien être utilisé pour une récherche que pour la gestion de filtres.

Structure

[section] --> choix
	[hn] --> titre de l'ensemble
	[h(n+1)] --> titre de la boite de sélection
	[div] --> menu déroulant
		[fieldset]
			[legend]
				[fieldset]
					[legend]
					[div]
						[input checkbox]
						[span] --> vue graphique de la case à cocher
						[label]
					[...]
		[fieldset]
			[legend]
			[div]
				[input checkbox]
				[span] --> vue graphique de la case à cocher
				[label]
			[...]
		[div] --> boutons d'action dans le déroulant
[section] --> résumé des choix
	[hn]
	[div] --> 1 par catégorie à résumer
		[dl] --> liste détail
			[dt] --> titre catégorie
			[dd] --> élément sélectionné
				[button] --> pour enlever de la liste
			[...]

Implémentation

Choix de vos entrées et de vos desserts

Sélectionnez un ou plusieurs éléments
entrées
entrées froides
entrées chaudes
desserts
Votre sélection
Entrées froides :
aucune
Entrées chaudes :
aucune
Desserts :
aucune

Code

HTML

<section class="selectbox">
    <h<?php echo($niveauTitre); ?> class="titre"><?php echo ucfirst8($label["choix de vos entrées et de vos desserts"]); ?></h<?php echo($niveauTitre); ?>>
    <h<?php echo($niveauTitre+1); ?> onClick="deroule('selectBox1','h<?php echo($niveauTitre+1); ?>.déroulant')" onkeypress="if(clickPress(event) === true) deroule('selectBox1','h<?php echo($niveauTitre+1); ?>.déroulant')" tabindex="0" class="déroulant repos"><?php echo ucfirst8($label["sélectionnez un ou plusieurs éléments"]); ?></h<?php echo($niveauTitre+1); ?>>
    <div id="selectBox1" class="deroulant plié">
        <?php
            for ($n1=1;$n1<=count($SEL_titre);$n1++) {
                echo "<fieldset id=\"fl".$SEL_id[$n1][0][0][0]."\" class=\"select n1\">";
                echo "<legend>".$SEL_titre[$n1][0][0][0]."</legend>";
                for ($p=1;$p<count($SEL_titre[$n1][0][0]);$p++) {
                    echo "<div class=\"ligne\">";
                    echo "<input type=\"checkbox\" id=\"".$SEL_id[$n1][0][0][$p]."\" onChange=\"maj('".$SEL_id[$n1][0][0][$p]."',".$n1.",1,'validés',0)\" value=\"".ucfirst8($SEL_titre[$n1][0][0][$p])."\">";
                    echo "<span aria-hidden=\"true\" class=\"validé\" onClick=\"majInit('".$SEL_id[$n1][0][0][$p]."',".$n1.",1,'validés',0)\"></span>";
                    echo "<label for=\"".$SEL_id[$n1][0][0][$p]."\" tabindex=\"0\" onkeydown=\"majInit2(event.key,'".$SEL_id[$n1][0][0][$p]."',".$n1.",1,'validés',0)\">".ucfirst8($SEL_titre[$n1][0][0][$p])."</label>";
                    echo "</div>";
                }
                for ($n2=1;$n2<count($SEL_titre[$n1]);$n2++) {
                    echo "<fieldset id=\"fl".$SEL_id[$n1][$n2][0][0]."\" class=\"select n2\">";
                    echo "<legend>".$SEL_titre[$n1][$n2][0][0]."</legend>";
                    for ($p=1;$p<count($SEL_titre[$n1][$n2][0]);$p++) {
                        echo "<div class=\"ligne\">";
                        echo "<input type=\"checkbox\" id=\"".$SEL_id[$n1][$n2][0][$p]."\" class=\"bt0\" data-chk0=\"".$SEL_id[$n1][$n2][0][$p]."\" onChange=\"maj('".$SEL_id[$n1][$n2][0][$p]."',".$n1.",".$n2.",'validés',0)\" value=\"".ucfirst8($SEL_titre[$n1][$n2][0][$p])."\">";
                        echo "<span aria-hidden=\"true\" class=\"validé bt\" data-chk=\"".$SEL_id[$n1][$n2][0][$p]."\" onClick=\"majInit('".$SEL_id[$n1][$n2][0][$p]."',".$n1.",".$n2.",'validés',0)\"></span>";
                        echo "<label for=\"".$SEL_id[$n1][$n2][0][$p]."\" tabindex=0 class=\"bt2\" data-chk2=\"".$SEL_id[$n1][$n2][0][$p]."\" onkeydown=\"majInit2(event.key,'".$SEL_id[$n1][$n2][0][$p]."',".$n1.",".$n2.",'validés',0)\">".ucfirst8($SEL_titre[$n1][$n2][0][$p])."</label>";
                        echo "</div>";
                    }
                    echo "</fieldset>";
                }
                echo "</fieldset>";
            }
        ?>
        <div class="actions">
            <button class="reinit" data-cible="validés" data-source="selectBox1"><?php echo ucfirst8($label["reinit"]); ?></button>
            <!-- <button class="selecteur" data-cible="validés" data-source="selectBox1">Sélectionner</button> -->
        </div>
    </div>
</section>
<section class="choix">
    <h<?php echo($niveauTitre+1); ?>><?php echo ucfirst8($label["votre sélection"]); ?></h<?php  echo($niveauTitre+1); ?>>
    <div id="validés11" class="sélecteur"><dl><dt><?php echo ucfirst8($label["entrées froides"]);?> :</dt><dd class="neutre"><?php echo $label["aucune"]; ?></dd></dl></div>
    <div id="validés12" class="sélecteur"><dl><dt><?php echo ucfirst8($label["entrées chaudes"]);?> :</dt><dd class="neutre"><?php echo $label["aucune"]; ?></dd></dl></div>
    <div id="validés21" class="sélecteur"><dl><dt><?php echo ucfirst8($label["desserts"]);?> :</dt><dd class="neutre"><?php echo $label["aucune"]; ?></dd></dl></div>
</section>
<div class="actions">
    <button class="reinit" data-cible="validés" data-source="selectBox1">Ré-initialiser</button>
    <!-- <button class="selecteur" data-cible="validés" data-source="selectBox1">Sélectionner</button> -->
</div>
<div id="alertes" role="alert" aria-live="polite" class="cache"></div>
<script>
    var listex = document.querySelectorAll("main");
    for (var l = 0; l < listex.length; ++l) { 
        listex[l].addEventListener('keydown', function() { if(clickPressFen(event) === true) masque('selectBox1')});
    }   
    var liste3 = document.querySelectorAll(".reinit");
    for (var l = 0; l < liste3.length; ++l) { 
        liste3[l].addEventListener('click', function() { if(clickPressB(event) === true) init(this.dataset.source, this.dataset.cible)});
        liste3[l].addEventListener('keypress', function() { if(clickPressB(event) === true) init(this.dataset.source, this.dataset.cible)});
    }
    var liste4 = document.querySelectorAll(".selecteur");
    for (var l = 0; l < liste4.length; ++l) { 
        liste4[l].addEventListener('click', function() { if(clickPressB(event) === true) valideur(this.dataset.source, this.dataset.cible)});
        liste4[l].addEventListener('keypress', function() { if(clickPressB(event) === true) valideur(this.dataset.source, this.dataset.cible)});
    }

    function pous2(quoi) {
        console.log("pous2:"+quoi);
        if (document.querySelector("#"+quoi).checked) document.querySelector("#"+quoi).checked = false;
        else document.querySelector("#"+quoi).checked = true
    }
    function pous2b(quoi) {
        console.log("pous2b:"+quoi);
        if (document.querySelector("#"+quoi).checked) document.querySelector("#"+quoi).checked = false;
        else document.querySelector("#"+quoi).checked = true
    }
</script>

CSS

fieldset.select {
    border: 0px;
    font-weight: 600;
    margin-top: calc(-1*var(--margin));
    padding: 0px;
    background-color: var(--fondBoite);
    margin-bottom: 0px;
}
fieldset.select.n2 {
    margin-top: calc(-1*var(--margin));
    margin-bottom: var(--margin);
}
article.selectBox,
section.selectBox {
    height: 110px;
}
article.selectBox.simple,
section.selectBox.simple {
    height: 350px;
}
div.selectbox {
    width: max-content;
    background-color: var(--fond);
    z-index: 222222222;
    position: relative;
    min-width: 310px;
}
.selectbox label {
    width: max-content;
    font-weight: 400;
    padding-top: calc(0.2*var(--padding)) !important;
}
.selectbox label:focus {
    outline: 2px dotted var(--couleurBase);
}
.selectbox h3,
.selectbox h4,
.selectbox h5 {
    border: 1px solid var(--couleurBase);
    font-size: 105% !important;
    font-weight: 600;
    margin-bottom: var(--padding);
    padding-left: var(--padding);
}
.selectbox h3.titre,
.selectbox h4.titre,
.selectbox h5.titre {
    border: 0px;
    font-weight: 800;
    margin-bottom: var(--padding);
}
h3.déroulant,
h4.déroulant,
h5.déroulant {
    cursor: pointer;
    height: 30px;
    padding-top: 9px;
    width: 320px;
    margin-bottom: 0px;
    padding-right: calc(5*var(--padding));
    background-repeat: no-repeat;
    background-position-x: 326px;
    background-size: 28px;
    background-position-y: center;
    font-size: 105% !important;
}
h3.déroulant, 
h4.déroulant, 
h5.déroulant {
    background-size: 20px;
    margin-left: 0px;
    background-position-x: 110%;
    background-position-y: 1px;
    border-radius: var(--radius);
        max-width: var(--deroulantLongHaut) !important;
        width: var(--deroulantLongHaut) !important;
       padding-left: var(--padding) !important;
    white-space: pre;
    background-color: var(--fondBoite);
}
h3.déroulant.repos, 
h4.déroulant.repos,
h5.déroulant.repos {
    background-image: url('../pic/selection.svg');
    background-origin: content-box;

}
h3.déroulant.déroulé,
h4.déroulant.déroulé,
h5.déroulant.déroulé {
    background-image: url('../pic/non-selection.svg');
    background-origin: content-box;
}
div.deroulant {
    width: 500px;
    position: initial;
    background-color: var(--fond);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
div.deroulant.plié {
    display: none !important;
}
div.deroulant.déplié {
    max-height: 250px;
    overflow: auto;
    display: block;
    border: 1px solid var(--couleurBase);
    border-radius: var(--radius);
    margin-top: 3px;
    width: 280px !important;
    z-index: 222222;
    position: absolute;
}
.selectbox input[type="checkbox"],
.selectbox input[type="checkbox"]:checked {
    width: 20px;
    margin-left: 4px;
}
.selectbox input[type="checkbox"]:focus {
    outline: 2px dotted var(--couleurBase);
    outline-offset: 5px;
}
#selectBox1 {
    margin-top: 0px !important;
    border-radius: var(--radius) !important;
    width: var(--deroulantLong) !important;
    margin-left: 3px;
    background-color: var(--fondBoite);
}

input[type="checkbox"] + .validé {
    background-image: url('../pic/SelectKO.svg');
    height: 11px;
    display: inline-block;
    width: 26px;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 1px solid var(--couleurBase);
    background-color: var(--neutre);
    padding-bottom: 0px;
    background-position-y: 3px !important;
}
input[type="checkbox"]:checked + .validé {
    background-image: url('../pic/SelectOK.svg');
    height: 11px;
    display: inline-block;
    width: 26px;
    background-repeat: no-repeat;
}
.selectbox input[type="checkbox"] + .validé, .selectbox input[type="checkbox"]:checked + .validé {
    height: 23px;
    background-position-y: 1px;
    padding-left: 27px;
    position: relative;
    z-index: 22222;
    background-position-x: 3px;
    margin-right: 6px;
    width: 0px;
}
.selectbox input[type="checkbox"] + .validé {
    background-image: url('../pic/SelectKO.svg') !important;
    margin-top: -3px;
}
.selectbox input[type="checkbox"]:checked + .validé {
    background-image: url('../pic/SelectOK.svg') !important;
    margin-top: -3px;
}
fieldset .ligne {
    display: block;
    padding-top: 4px;
    padding-bottom: 4px;
}

JavaScript

var nouv = new Array();
var valide = new Array();
var quoix = new Array();
for (v=0;v<500;v++) {
    valide[v] = Array()
    nouv[v] = -1;
    quoix[v] = Array();
}
var typox = new Array();
typox[0] = 11;
typox[1] = 12;
typox[2] = 21;

var typo = new Array();
var label = new Array();
if (lang == 0) {
    typo[typox[0]] = "Entrées froides";
    typo[typox[1]] = "Entrées chaudes";
    typo[typox[2]] = "Desserts";
    label["aucune"] = "aucune";
    label["Enlever"] = "Enlever";
    label["de liste"] = "de la liste des";
}
else {
    typo[typox[0]] = "Cold starters";
    typo[typox[1]] = "Hot starters";
    typo[typox[2]] = "Desserts";
    label["aucune"] = "none";
    label["Enlever"] = "Remove";
    label["de liste"] = "from the list of";
}

function init(source,cible) {
    alerte("","alertes",0);
    var liste = document.querySelectorAll("#"+source + " input[type='checkbox']");
    for (var l = 0; l < liste.length; ++l) { liste[l].checked = false;}
    for (t=0;t<typox.length;t++) {
        nouv[typox[t]] = -1;
        contenu = '<dd class="neutre">'+label["aucune"]+'</dd>';
        document.querySelector("#"+cible+typox[t]).innerHTML = base1 + typo[typox[t]] + base2 + contenu + base3;
    }
    alerte("La sélection de vos entrée et desserts a bien été réinitialisée","alertes",1) ;
    masque('selectBox1','déroulant');
}
function valideur(source, cible) {
    masque('selectBox1','déroulant');
}
var base1 = "<dl><dt>";
var base2 = " :</dt>";
var base3 = "</dl>";

function majInit(quoi,categorie,subcat,cible,mode) {
    if (document.querySelector("#"+quoi).checked) document.querySelector("#"+quoi).checked = false;
    else document.querySelector("#"+quoi).checked = true;
    maj(quoi,categorie,subcat,cible,mode);
}
function majInit2(touche,quoi,categorie,subcat,cible,mode) {
     if(touche == "Enter") {
        if (document.querySelector("#"+quoi).checked) document.querySelector("#"+quoi).checked = false;
        else document.querySelector("#"+quoi).checked = true;
        maj(quoi,categorie,subcat,cible,mode);
    }
}
function maj(quoi,categorie,subcat,cible,mode) {
    alerte("","alertes",0);
    var indice = (10*categorie)+subcat;
    valeur = document.querySelector("#"+quoi).value
    if (mode == 1) {
        for (c=0;c<=nouv[indice];c++) {
            if (valeur == valide[indice][c]) {
                valeur = "";
                alerte(valide[indice][c]+" a été retiré de votre liste de choix","alertes",1);
                document.getElementById(quoix[indice][c]).checked = false;
                valide[indice].splice(c, 1);
                quoix[indice].splice(c, 1);
                nouv[indice]--;
                if (nouv[indice]<0) nouv[indice] = -1
                c= 1000
            }
        }
    }
    else {
        for (c=0;c<=nouv[indice];c++) {
            if (valide[indice][c] == valeur) {
                alerte(valide[indice][c]+" a été retiré de votre liste de choix","alertes",1);
                valeur = "";
                valide[indice].splice(c, 1);
                nouv[indice]--;
                if (nouv[indice]<0) nouv[indice] = -1
                c= 1000
            }
        }
    }
    if (valeur != "") {
        nouv[indice]++;
        valide[indice][nouv[indice]] = valeur;
        quoix[indice][nouv[indice]] = quoi;
        alerte(valide[indice][nouv[indice]]+" a été ajouté à votre choix","alertes",1);
    }
    contenu = "";
    for (c=0;c<=nouv[indice];c++) {
        if (valide[indice][c] != "") contenu += "<dd>" + valide[indice][c] + " <button title=\""+label["Enlever"]+" "+valide[indice][c]+" "+label["de liste"]+" "+typo[indice] +"\" onClick=\"maj('"+quoix[indice][c]+"',"+categorie+","+subcat+",'"+cible+"',1)\">x</button></dd>";
    }
    if (contenu == "") contenu = '<dd class="neutre">'+label["aucune"]+'</dd>';
    document.querySelector("#"+cible+indice).classList.add("cache");;
    document.querySelector("#"+cible+indice).innerHTML = base1 + typo[indice] + base2 + contenu + base3;
    document.querySelector("#"+cible+indice).classList.remove("cache");;
}
choixAlerte = 1;
function alerte(quoi,ou,mode) {
    if (choixAlerte == 1) alerteur(quoi,1);
    else {
        if (mode ==1) {
            document.querySelector("#"+ou).innerHTML = quoi;
            document.querySelector("#"+ou).classList.remove("cache");
        }
        else document.querySelector("#"+ou).classList.add("cache");
    }
}
function vérifie(quoi,combien) {
    var compte = 0;
    if (quoi == "ent") {
        nb[0] = 0;
        déshabille(".entrée","selection");
        for(e=0;e<combien;e++) {
            var element = document.querySelector("#"+quoi+e);
            element.setAttribute("checked", false);
        }
        document.querySelector("#lent999").classList.add("selection");
        document.querySelector("#ent999").checked = true;
    }
}
function alerteur(quoi,comment) {
    if (comment < 0) {
        document.querySelector("#alerte").classList.add("cache");
    }
    else {
        if (typeof to2 !== 'undefined') window.clearTimeout(to2);
        var alerte = "#alerte";
        document.querySelector(alerte).style.top = "500px";
        document.querySelector(alerte).setAttribute("style","");
        document.querySelector(alerte).classList.add("cache");
        if (comment == 1) {
            document.querySelector(alerte).classList.remove("ko");
            document.querySelector(alerte).classList.add("ok");
        }
        else {
            document.querySelector(alerte).classList.remove("ok");
            document.querySelector(alerte).classList.add("ko");
        }
        if (lang == 0) document.querySelector(alerte).innerHTML = quoi+"<img class='fermeBouton' src='pic/fermerBlanc.svg' alt='fermer la boite' width='30' onClick='ferme(1)'>";
        else document.querySelector(alerte).innerHTML = quoi+"<img class='fermeBouton' src='pic/fermerBlanc.svg' alt='close the dialog box' width='30' onClick='ferme(1)'>";
        document.querySelector(alerte).classList.remove("cache");
        document.querySelector(alerte).classList.add('disparait')
        to2 = window.setTimeout(function(){ document.querySelector(alerte).classList.add('cache');}, 6400); 
    }
}