Varmista, että accordionit ovat näppäimistöllä käytettävissä

Yleinen tapa rakentaa accordion Webflow’ssa on käyttää trigger-elementtiä, joka on suora sisaruselementti sisältöelementille. Interaktio asetetaan trigger-elementtiin niin, että sisaruselementti näkyy, kun sitä klikataan.

Saavutettavuuden varmistamiseksi tulee myös lisätä ARIA-attribuutit, jotka vaihtuvat, kun accordion avataan tai suljetaan. Näin ruudunlukijat ja muut apuvälineet voivat ilmoittaa accordionin tilan oikein käyttäjälle.

Suositeltu rakenne ja luokat:

• accordion-item – koko accordion-elementti
• accordion-trigger – klikattava osa, joka avaa/sulkee sisällön
• accordion-content – sisältö, joka näkyy tai piilotetaan

Mukautetut attribuutit accordionille

Voit lisätä mukautettuja attribuutteja Webflow Universityn ohjeiden mukaan: Custom Attributes

Suositellut attribuutit:

accordion-item

• role="region"

accordion-trigger

• role="button"
• aria-expanded="false"
• aria-controls="{id-of-accordion-content}"
• tabindex="0" (tarvitaan vain, jos trigger ei ole jo linkki tai painike)

accordion-content

• aria-hidden="true"

Näiden attribuuttien avulla ruudunlukijat ja muut apuvälineet voivat tulkita accordionin tilan oikein ja parantaa saavutettavuutta.

Mukautettu koodi accordionille

Lisää alla oleva koodi Before </body> -osioon sivun tai projektin asetuksissa.

Huom: Skripti käyttää luokkia:

• accordion-trigger → trigger-elementti
• accordion-content → sisältöelementti

Jos käytät eri luokkia, päivitä myös skriptissä luokkien nimet vastaamaan omiasi.

<script>
$(document).ready(function () {
    var accordionToggleButton = $('.accordion-trigger');
    accordionToggleButton.on('keydown', function (e) {
        // Activate on spacebar and enter
        if (e.type === "keydown" && (e.which !== 13 && e.which !== 32)) {
            return;
        }
        e.preventDefault();

        // Simulate a mouseclick to trigger Webflow's IX2/Interactions
        var evt = document.createEvent("MouseEvents");
        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        $(this).get(0).dispatchEvent(evt);
    });

    accordionToggleButton.on('click touchend', function (e) {
        $(this).toggleAttrVal('aria-expanded', "false", "true"); //toggle trigger attribute
        $(this).parent().find('.accordion-content').toggleAttrVal('aria-hidden', "true", "false"); //toggle content attribute
    });

    // jquery toggle just the attribute value
    $.fn.toggleAttrVal = function (attr, val1, val2) {
        var test = $(this).attr(attr);
        if (test === val1) {
            $(this).attr(attr, val2);
            return this;
        }
        if (test === val2) {
            $(this).attr(attr, val1);
            return this;
        }
        // default to val1 if neither
        $(this).attr(attr, val1);
        return this;
    };
});
</script>