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

Description

Structure

[div]
[p] Intro
[fieldset]
	[legend]
	[div]
		[div]
			[input - checkbox]
			[span]
			[label]

			[...]

Implémentation

Code

<div class="selectbox simple">
    <p>Sélectionnez un ou plusieurs éléments</p>
    <fieldset class="selectbox select n1" id="flf0">
        <legend tabindex="0" onclick="deroule2('selectBox2')" onkeypress="if(clickPress(event) === true) deroule2('selectBox2')">Intruments</legend>
        <div id="selectBox2" class="deroulant plié">
            <div class="ligne">
                <input type="checkbox" id="i0" class="bt0" data-chk0="i0">
                <span aria-hidden="true" class="validé bt" data-chk="i0"></span>
                <label for="i0" tabindex="0" class="bt2" data-chk2="i0">Guitare basse</label>
            </div>
            <div class="ligne">
                <input type="checkbox" id="i1" class="bt0" data-chk0="i1">
                <span aria-hidden="true" class="validé bt" data-chk="i1"><span>
                <label for="i1" tabindex="0" class="bt2" data-chk2="i1">Batterie</label>
            </div>
            <div class="ligne">
                <input type="checkbox" id="i2" class="bt0" data-chk0="i2">
                <span aria-hidden="true" class="validé bt" data-chk="i2"><span>
                <label for="i2" tabindex="0" class="bt2" data-chk2="i2">Flûte</label>
            </div>
            <div class="ligne">
                <input type="checkbox" id="i3" class="bt0" data-chk0="i3">
                <span aria-hidden="true" class="validé bt" data-chk="i3"></span>
                <label for="i3" tabindex="0" class="bt2" data-chk2="i3">Guitare</label>
            </div>
            <div class="ligne">
                <input type="checkbox" id="i4" class="bt0" data-chk0="i4">
                <span aria-hidden="true" class="validé bt" data-chk="i4"></span>
                <label for="i4" tabindex="0" class="bt2" data-chk2="i4">Piano</label>
            </div>
            <div class="ligne">
                <input type="checkbox" id="i5" class="bt0" data-chk0="i5">
                <span aria-hidden="true" class="validé bt" data-chk="i5"><span>
                <label for="i5" tabindex="0" class="bt2" data-chk2="i5">Saxophone alto</label></div>
            <div class="ligne">
                <input type="checkbox" id="i6" class="bt0" data-chk0="i6">
                <span aria-hidden="true" class="validé bt" data-chk="i6"><span>
                <label for="i6" tabindex="0" class="bt2" data-chk2="i6">Saxophone tenor</label>
            </div>
        </div>
    </fieldset>
</div>

legend {
    font-size: 110%;
    color: var(--typo);
    font-weight: 600;
    padding-left: 6px;
    padding-right: 6px;
}
label {
    width: max-content !important;
    padding-bottom: 0px;
    font-size: 100%;
    font-weight: 500;
    padding-right: var(--padding);
    min-width: var(--labelLong);
    padding-top: 0;
    vertical-align: top;
}
.validé label {
    padding-bottom: 0;
}
.validé label:focus {
    outline: 2px solid var(--couleurBase);
    outline-offset: 2px;
}
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 solid var(--couleurBase);
    outline-offset: 3px;
}
#selectBox1 {
    margin-top: 0px !important;
}
input[type="checkbox"] + .validé {
    background-image: url('../pic/SelectKO.svg');
    height: 11px;
    display: inline-block;
    width: 26px;
    background-repeat: no-repeat;
}
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;
}
.selectbox input[type="checkbox"]:checked + .validé {
    background-image: url('../pic/SelectOK.svg') !important;
}
fieldset .ligne {
    display: block;
    padding-top: 4px;
    padding-bottom: 4px;
}

<script>
    var listex = document.querySelectorAll("main");
    for (var l = 0; l < listex.length; ++l) { 
        listex[l].addEventListener('keydown', function() { if(clickPressFen(event) === true) masque('selectBox2')});
    }    

    var liste = document.querySelectorAll(".bt0");
    for (var l = 0; l < liste.length; ++l) { 
        liste[l].addEventListener('click', function() { if(clickPressB(event) === true) pous2(this.dataset.chk0) });
        liste[l].addEventListener('keypress', function() { if(clickPressB(event) === true) pous2(this.dataset.chk0) });
    }
    var liste = document.querySelectorAll(".bt2");
    for (var l = 0; l < liste.length; ++l) { 
        liste[l].addEventListener('click', function() { if(clickPressB(event) === true) pous2(this.dataset.chk2) });
        liste[l].addEventListener('keypress', function() { if(clickPressB(event) === true) pous2(this.dataset.chk2) });
    }
    function pous2(quoi) {
        if (document.querySelector("#"+quoi).checked) document.querySelector("#"+quoi).checked = false;
        else document.querySelector("#"+quoi).checked = true
    }
</script>