Esimerkki HTML-rakenteesta:

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-1" id="button-1">
        Osion 1 otsikko
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Osion 1 sisältö tulee tähän.</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-2" id="button-2">
        Osion 2 otsikko
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Osion 2 sisältö tulee tähän.</p>
    </div>
  </div>
</div>

2. ARIA-attribuutit dynaamiselle sisällölle

ARIA-roolit ja -tilat ovat ratkaisevan tärkeitä ilmoitettaessa avustaville teknologioille harmonikan toiminnasta.

• `role="button"`: Interaktiivisessa elementissä (painikkeessa), joka vaihtaa sisältöä.
• `aria-expanded`: Asetetaan arvoon `true`, kun sisältöpaneeli on näkyvissä, ja arvoon `false`, kun se on piilotettu. Tämä viestii tilan suoraan ruudunlukijoille.
• `aria-controls`: Painikkeessa, viitaten sen hallitseman sisältöpaneelin `id`-tunnukseen. Tämä luo ohjelmallisen yhteyden.
• `aria-labelledby`: Sisältöpaneelissa, viitaten sitä hallitsevan painikkeen `id`-tunnukseen. Tämä luo kaksisuuntaisen yhteyden.
• `role="region"`: Sisältöpaneelissa. Tämä osoittaa, että sisältö on havaittava osa sivua.
• `aria-hidden`: Vaikka `aria-expanded` on ensisijainen näkyvyystilojen hallintaan, `aria-hidden="true"` voidaan käyttää sisältöpaneeleissa, jotka eivät ole sillä hetkellä näkyvissä, estääkseen ruudunlukijoita ilmoittamasta niitä. Varmistamalla, että sisältö on joko piilotettu oikein CSS:llä (`display: none;`) tai poistettu saavutettavuuspuusta, on kuitenkin vankempi ratkaisu.

Huomautus `aria-hidden` vs. `display: none`: `display: none;` -tyylin käyttäminen CSS:ssä poistaa elementin tehokkaasti saavutettavuuspuusta. Jos näytät/piilotat sisältöä dynaamisesti JavaScriptillä ilman `display: none;`, `aria-hidden` -attribuutin merkitys kasvaa. Yleisesti ottaen `display: none;` on kuitenkin suositeltava tapa piilottaa sisältöpaneelit.

3. Hallittavuus näppäimistöllä

Varmista, että käyttäjät voivat olla vuorovaikutuksessa harmonikan kanssa käyttämällä tavallisia näppäimistökomentoja.

• Sarkainnavigointi: Harmonikan otsikoiden on oltava kohdistettavissa ja niiden on esiinnyttävä sivun luonnollisessa sarkainjärjestyksessä.
• Aktivointi: `Enter`- tai `Välilyönti`-näppäimen painamisen kohdistetun harmonikkaotsikon päällä tulisi vaihtaa sen sisältöpaneelin näkyvyyttä.
• Nuolinäppäimet (valinnainen mutta suositeltava): Parannetun kokemuksen saamiseksi harkitse nuolinäppäinnavigoinnin toteuttamista:
  • `Nuoli alas`: Siirrä fokus seuraavaan harmonikkaotsikkoon.
  • `Nuoli ylös`: Siirrä fokus edelliseen harmonikkaotsikkoon.
  • `Home`: Siirrä fokus ensimmäiseen harmonikkaotsikkoon.
  • `End`: Siirrä fokus viimeiseen harmonikkaotsikkoon.
  • `Nuoli oikealle` (tai `Enter`/`Välilyönti`): Laajenna/sulje nykyinen harmonikka-alkio.
  • `Nuoli vasemmalle` (tai `Enter`/`Välilyönti`): Sulje nykyinen harmonikka-alkio ja siirrä fokus takaisin otsikkoon.

4. Visuaaliset fokuksen ilmaisimet

Kun harmonikkaotsikko saa näppäimistöfokuksen, sillä on oltava selkeä visuaalinen ilmaisin. Selaimen oletusarvoiset fokuksen ääriviivat ovat usein riittäviä, mutta varmista, että niitä ei poisteta CSS:llä (esim. `outline: none;`) ilman, että tarjotaan vaihtoehtoista, erittäin näkyvää fokustyyliä.

Esimerkki CSS fokukselle:

.accordion-button:focus {
  outline: 3px solid blue; /* Tai väri, joka täyttää kontrastivaatimukset */
  outline-offset: 2px;
}

5. Sisällön näkyvyys ja esitystapa

• Oletustila: Päätä, tuleeko harmonikkaosioiden olla oletusarvoisesti kasaan painettuja vai laajennettuja. UKK-osioille tai tiheälle tiedolle on usein parasta aloittaa kasaan painettuna. Navigointia tai ominaisuusyhteenvetoja varten yhden osion laajentaminen oletuksena voi olla hyödyllistä.
• Visuaaliset vihjeet: Käytä selkeitä visuaalisia vihjeitä osoittamaan, onko osio laajennettu vai kasaan painettu. Tämä voi olla kuvake (esim. '+' tai '-' -merkki, ylös/alas-nuoli), joka muuttaa ulkonäköään. Varmista, että nämä kuvakkeet ovat myös saavutettavia (esim. `aria-label`-attribuutin avulla, jos niissä ei ole tekstiä).
• Kontrastisuhteet: Varmista, että harmonikan sisällä oleva tekstisisältö ja vaihtopainikkeet täyttävät WCAG:n kontrastisuhdevaatimukset (4.5:1 normaalille tekstille, 3:1 suurelle tekstille). Tämä on elintärkeää heikkonäköisille käyttäjille.
• Ei sisällön menetystä: Kun osio laajenee, varmista, että sen sisältö ei ylitä säiliötään tai peitä muuta kriittistä sisältöä.

6. Fokuksen hallinta vaihdettaessa

Tämä on edistyneempi näkökohta, mutta ratkaisevan tärkeä saumattoman kokemuksen kannalta.

• Laajentaminen: Kun käyttäjä laajentaa osion, harkitse fokuksen siirtämistä ensimmäiseen interaktiiviseen elementtiin äskettäin paljastetussa sisällössä. Tämä on erityisen tärkeää, jos laajennettu sisältö sisältää lomakekenttiä tai linkkejä.
• Kasaan painaminen: Kun käyttäjä painaa osion kasaan, fokuksen tulisi palata harmonikkaotsikkoon, jota vaihdettiin. Tämä estää käyttäjiä joutumasta navigoimaan takaisin aiemmin suljettujen osioiden läpi.

Fokuksen hallinnan toteuttaminen edellyttää tyypillisesti JavaScriptiä fokuksen kaappaamiseksi ja asettamiseksi ohjelmallisesti.

Saavutettavien harmonikkojen toteuttaminen JavaScriptillä

Vaikka semanttinen HTML ja ARIA ovat ensimmäiset askeleet, JavaScriptiä tarvitaan usein dynaamisen vaihtamisen ja mahdollisesti fokuksen hallinnan hoitamiseen. Tässä on käsitteellinen JavaScript-lähestymistapa:

// Käsitteellinen JavaScript harmonikkatoiminnallisuudelle

document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    const controlsId = button.getAttribute('aria-controls');
    const content = document.getElementById(controlsId);

    if (content) {
      const isExpanded = button.getAttribute('aria-expanded') === 'true';
      
      // Vaihda aria-expanded-tilaa
      button.setAttribute('aria-expanded', !isExpanded);

      // Vaihda sisällön näkyvyyttä (käyttäen CSS:ää saavutettavuuden vuoksi)
      content.style.display = isExpanded ? 'none' : 'block'; // Tai käytä luokan vaihtoa

      // Valinnainen: Fokuksen hallinta laajennettaessa
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Valinnainen: Näppäimistönavigointi (nuolinäppäimet jne.) toteutettaisiin myös tässä.
  // Esimerkiksi 'keydown'-tapahtumien käsittely.
});

// Alkuasetus: Piilota sisältö oletuksena ja aseta aria-expanded arvoon 'false'
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // Piilota sisältö aluksi
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

Tärkeitä huomioita JavaScriptistä:

• CSS piilottamiseen: On parasta käyttää CSS:ää (esim. `display: none;` tai luokkaa, joka asettaa `height: 0; overflow: hidden;` sulavampia siirtymiä varten) sisällön piilottamiseen. Tämä varmistaa, että sisältö poistetaan saavutettavuuspuusta, kun se ei ole näkyvissä.
• Hallittu heikentyminen: Varmista, että vaikka JavaScript ei latautuisi tai suorittuisi, harmonikan sisältö pysyy saavutettavana (vaikkakaan ehkä ei kokoontaitettavana). Semanttisen HTML:n tulisi silti tarjota jonkinlainen rakenne.
• Kehykset ja kirjastot: Jos käytät JavaScript-kehyksiä (React, Vue, Angular) tai käyttöliittymäkirjastoja, tarkista niiden saavutettavuusdokumentaatio. Monet tarjoavat saavutettavia harmonikkakomponentteja valmiina tai tietyillä attribuuteilla.

Saavutettavuuden testaaminen

Perusteellinen testaus on elintärkeää varmistaaksesi, että harmonikka-widgetisi ovat todella saavutettavia.

• Automaattiset työkalut: Käytä selainlaajennuksia (kuten Axe, WAVE) tai verkkotarkistimia yleisten saavutettavuusongelmien tunnistamiseen.
• Näppäimistötestaus: Navigoi ja käytä harmonikkaa käyttäen vain näppäimistöä (Sarkain, Shift+Sarkain, Enter, Välilyönti, Nuolinäppäimet). Varmista, että kaikki interaktiiviset elementit ovat saavutettavissa ja käytettävissä.
• Ruudunlukijatestaus: Testaa suosituilla ruudunlukijoilla (NVDA, JAWS, VoiceOver). Kuuntele, miten harmonikan rakenne ja tilanmuutokset ilmoitetaan. Onko se ymmärrettävää? Välittyykö `aria-expanded`-tila oikein?
• Käyttäjätestaus: Jos mahdollista, ota vammaisia käyttäjiä mukaan testausprosessiin. Heidän palautteensa on korvaamatonta todellisten käytettävyysongelmien tunnistamisessa.
• Selain- ja laitetestaus: Testaa eri selaimilla ja laitteilla, sillä renderöinti ja JavaScript-käyttäytyminen voivat vaihdella.

Globaalit näkökulmat ja lokalisointi

Kun suunnittelet globaalille yleisölle, ota huomioon nämä tekijät:

• Kieli: Varmista, että kaikki teksti, mukaan lukien painikkeiden otsikot ja sisältö, on selkeää, ytimekästä ja helposti käännettävissä. Vältä idiomeja tai kulttuurisidonnaisia viittauksia.
• Sisällön pituus: Sisällön laajentuminen voi vaikuttaa merkittävästi sivun asetteluun. Ota huomioon, että käännetty sisältö voi olla pidempää tai lyhyempää kuin alkuperäinen. Testaa, miten harmonikkasi käsittelee vaihtelevia sisällön pituuksia.
• Kulttuuriset käyttöliittymäkonventiot: Vaikka harmonikkojen ydintoiminnallisuus on universaali, hienovaraiset suunnitteluelementit saatetaan mieltää eri tavoin eri kulttuureissa. Pysy vakiintuneissa malleissa ja selkeissä toimintokehotteissa.
• Suorituskyky: Käyttäjille alueilla, joilla on hitaammat internetyhteydet, varmista, että JavaScript on optimoitu ja että harmonikkojen sisällä oleva sisältö ei vaikuta liikaa sivun alkuperäiseen latausaikaan.

Esimerkkejä saavutettavista harmonikoista

Monet hyvämaineiset organisaatiot esittelevät saavutettavia harmonikkamalleja:

• GOV.UK Design System: Usein mainittu sitoutumisestaan saavutettavuuteen, GOV.UK tarjoaa hyvin dokumentoituja komponentteja, mukaan lukien harmonikkoja, jotka noudattavat WCAG-ohjeita.
• MDN Web Docs: Mozilla Developer Network tarjoaa yksityiskohtaisia oppaita ja esimerkkejä saavutettavien widgetien, mukaan lukien harmonikkojen, luomisesta, selkeillä selityksillä ARIA-käytöstä.
• Suurten teknologiayritysten suunnittelujärjestelmät: Yritykset kuten Google (Material Design), Microsoft (Fluent UI) ja Apple tarjoavat suunnittelujärjestelmäkomponentteja, jotka usein priorisoivat saavutettavuutta. Näihin viittaaminen voi tarjota vankkoja toteutusmalleja.

Yhteenveto

Harmonikka-widgetit ovat tehokkaita työkaluja sisällön järjestämiseen ja käyttäjäkokemuksen parantamiseen. Niiden dynaaminen luonne vaatii kuitenkin tunnontarkkaa lähestymistapaa saavutettavuuteen. Noudattamalla WCAG-ohjeita, hyödyntämällä semanttista HTML:ää, toteuttamalla ARIA:n oikein, varmistamalla vankan näppäimistönavigoinnin ja suorittamalla perusteellisen testauksen voit luoda harmonikkakomponentteja, jotka ovat käyttökelpoisia ja nautinnollisia kaikille, ympäri maailmaa. Saavutettavuuden priorisointi alusta alkaen ei ainoastaan takaa vaatimustenmukaisuutta, vaan johtaa myös inklusiivisempaan ja käyttäjäystävällisempään tuotteeseen kaikille.

Muista, että saavutettava suunnittelu ei ole jälkikäteen lisättävä asia; se on olennainen osa hyvää suunnittelua. Hallitsemalla saavutettavien harmonikka-widgetien toteutuksen edistät oikeudenmukaisempaa ja käytettävämpää verkkoa kaikille käyttäjille.