M

MLOG

Suomi

Kattava opas saavutettavien ja käyttäjäystävällisten pudotusvalikoiden ja mega-valikoiden luomiseen.

Valikoiden navigointi: Saavutettavien pudotusvalikoiden ja mega-valikoiden luominen globaalille yleisölle

Verkkosivuston navigointi on käyttökokemuksen perusta. Hyvin jäsennellyt valikot antavat kävijöille mahdollisuuden löytää tarvitsemansa tiedot nopeasti ja tehokkaasti, mikä lisää sitoutumista ja konversioita. Pudotusvalikot ja mega-valikot ovat suosittuja valintoja laajan sisällön omaaville verkkosivustoille, mutta niiden monimutkaisuus voi aiheuttaa saavutettavuushaasteita, jos niitä ei toteuteta huolellisesti. Tämä opas käy läpi parhaat käytännöt saavutettavien pudotusvalikoiden ja mega-valikoiden luomiseksi, jotka palvelevat monipuolista globaalia yleisöä kyvyistä tai laitteista riippumatta.

Saavutettavan navigoinnin merkityksen ymmärtäminen

Saavutettavuus ei ole vain vaatimustenmukaisuus; se on inklusiivisen suunnittelun perusperiaate. Varmistamalla, että verkkosivustosi on saavutettava, avaatte sen laajemmalle yleisölle, mukaan lukien vammaisille henkilöille, avustavia teknologioita käyttäville ja eri laitteilla ja verkkoyhteyksillä sivustoa käyttäville. Saavutettava navigointi hyödyttää kaikkia, parantaen yleistä käytettävyyttä ja hakukoneoptimointia (SEO).

Harkitse näitä skenaarioita saavutettavaa navigointia suunnitellessasi:

Keskeiset saavutettavuusperiaatteet pudotusvalikoille ja mega-valikoille

Useat keskeiset periaatteet tukevat saavutettavaa valikkosuunnittelua:

1. Semanttinen HTML-rakenne

Käytä semanttisia HTML-elementtejä, kuten <nav>, <ul> ja <li>, luodaksesi selkeän ja loogisen rakenteen valikollesi. Tämä tarjoaa avustaville teknologioille arvokasta tietoa valikon tarkoituksesta ja järjestyksestä.

Esimerkki:

<nav aria-label="Päävalikko">
  <ul>
    <li><a href="#">Etusivu</a></li>
    <li>
      <a href="#">Tuotteet</a>
      <ul>
        <li><a href="#">Tuotekategoria 1</a></li>
        <li><a href="#">Tuotekategoria 2</a></li>
      </ul>
    </li>
    <li><a href="#">Meistä</a></li>
    <li><a href="#">Ota yhteyttä</a></li>
  </ul>
</nav>

2. ARIA-attribuutit

ARIA (Accessible Rich Internet Applications) -attribuutit parantavat dynaamisen sisällön ja interaktiivisten elementtien saavutettavuutta. Käytä ARIA-attribuutteja tarjotaksesi lisätietoa avustaville teknologioille valikoiden tilasta ja käyttäytymisestä.

Yleiset ARIA-attribuutit valikoille:

Esimerkki:

<button aria-haspopup="true" aria-expanded="false" aria-label="Avaa navigointivalikko">Valikko</button>
<nav aria-label="Päävalikko" role="navigation">
  <ul role="menu">
    <li role="menuitem"><a href="#">Etusivu</a></li>
    <li role="menuitem" aria-haspopup="true" aria-expanded="false">
      <a href="#">Tuotteet</a>
      <ul role="menu">
        <li role="menuitem"><a href="#">Tuotekategoria 1</a></li>
        <li role="menuitem"><a href="#">Tuotekategoria 2</a></li>
      </ul>
    </li>
    <li role="menuitem"><a href="#">Meistä</a></li>
    <li role="menuitem"><a href="#">Ota yhteyttä</a></li>
  </ul>
</nav>

3. Näppäimistön navigointi

Varmista, että kaikkiin valikkoelementteihin pääsee käsiksi ja ne voidaan aktivoida näppäimistöllä. Käyttäjien tulisi voida navigoida valikossa sarkainnäppäimellä, nuolinäppäimillä ja enter-näppäimellä.

Näppäimistön navigoinnin parhaat käytännöt:

4. Kohdistuksen hallinta

Asianmukainen kohdistuksen hallinta on ratkaisevan tärkeää näppäimistökäyttäjille. Kun alivalikko avautuu, kohdistuksen tulisi siirtyä automaattisesti alivalikon ensimmäiseen elementtiin. Kun alivalikko sulkeutuu, kohdistuksen tulisi palata ylävalikon elementtiin.

5. Värikontrasti

Varmista riittävä värikontrasti valikon tekstin ja taustan välillä. Tämä on erityisen tärkeää heikkonäköisille käyttäjille. Noudata WCAG (Web Content Accessibility Guidelines) 2.1 AA -standardeja värikontrastisuhteiden osalta.

6. Responsiivinen suunnittelu

Valikoiden on oltava responsiivisia ja mukaututtava eri näyttökokoihin. Harkitse "hamburger-valikon" tai muiden mobiiliystävällisten navigointimallien käyttöä pienemmillä näytöillä. Testaa valikkojasi eri laitteilla ja näytön tarkkuuksilla.

7. Selkeät ja ytimekkäät nimikkeet

Käytä selkeitä ja ytimekkäitä nimikkeitä kaikissa valikkoelementeissä. Vältä jargonia tai monitulkintaista kieltä, joka voi olla hämmentävää käyttäjille. Harkitse käännöksiä monikieliselle yleisölle.

8. Älä käytä pelkästään hover-tiloja

Alivalikoiden paljastaminen vain hover-tilojen avulla on saavuttamattomissa näppäimistökäyttäjille ja kosketuslaitteiden käyttäjille. Varmista, että valikot voidaan laajentaa ja supistaa näppäimistövuorovaikutusten ja kosketuseleiden avulla.

Saavutettavien pudotusvalikoiden toteuttaminen

Pudotusvalikot ovat yleinen tapa järjestää navigointia, erityisesti kun käsitellään kohtuullista määrää valikkoelementtejä. Näin toteutat saavutettavat pudotusvalikot:

  1. HTML-rakenne: Käytä sisäkkäistä <ul> -rakennetta <li> -elementtien sisällä luodaksesi pudotusvalikon hierarkian.
  2. ARIA-attribuutit: Lisää aria-haspopup="true" ylävalikkoelementtiin, joka käynnistää pudotusvalikon. Käytä aria-expanded="true", kun pudotusvalikko on auki, ja aria-expanded="false", kun se on suljettu.
  3. Näppäimistön navigointi: Varmista, että käyttäjät voivat navigoida pudotusvalikon elementtien läpi sarkain- ja nuolinäppäimillä.
  4. Kohdistuksen hallinta: Kun pudotusvalikko avautuu, aseta kohdistus pudotusvalikon ensimmäiseen elementtiin. Kun se sulkeutuu, palauta kohdistus ylävalikon elementtiin.
  5. CSS-muotoilu: Käytä CSS:ää piilottaaksesi ja näyttääksesi pudotusvalikon sisällön visuaalisesti, samalla kun säilytät sen saavutettavuuden ruudunlukijoille.

Esimerkki JavaScriptistä pudotusvalikon toiminnoille:

const dropdowns = document.querySelectorAll('.dropdown');

dropdowns.forEach(dropdown => {
  const button = dropdown.querySelector('button[aria-haspopup="true"]');
  const menu = dropdown.querySelector('.dropdown-menu');

  button.addEventListener('click', () => {
    const isExpanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !isExpanded);
    menu.classList.toggle('show');
  });
});

Saavutettavien mega-valikoiden toteuttaminen

Mega-valikot ovat suurempia, monisarakkeisia valikoita, jotka voivat näyttää merkittävän määrän sisältöä, mukaan lukien kuvia, tekstiä ja linkkejä. Vaikka ne voivat olla visuaalisesti miellyttäviä ja informatiivisia, ne aiheuttavat myös merkittävämpiä saavutettavuushaasteita.

  1. HTML-rakenne: Järjestä mega-valikon sisältö käyttämällä semanttisia HTML-elementtejä, kuten otsikoita, listoja ja kappaleita.
  2. ARIA-attribuutit: Käytä ARIA-attribuutteja määrittelemään eri osioiden roolit mega-valikossa ja osoittamaan laukaisevan elementin ja mega-valikon sisällön välinen suhde.
  3. Näppäimistön navigointi: Toteuta selkeä ja looginen näppäimistön navigointijärjestelmä varmistaen, että käyttäjät voivat helposti navigoida mega-valikon kaikkien osioiden läpi.
  4. Kohdistuksen hallinta: Kiinnitä erityistä huomiota kohdistuksen hallintaan varmistaen, että kohdistus on aina loogisessa ja ennustettavassa paikassa.
  5. Responsiivinen suunnittelu: Mega-valikot vaativat usein merkittäviä säätöjä, jotta ne toimivat hyvin pienemmillä näytöillä. Harkitse koko näytön peittoa tai muita mobiiliystävällisiä suunnittelumalleja.
  6. Vältä liiallista sisältöä: Vaikka mega-valikot on suunniteltu näyttämään paljon tietoa, vältä niiden ylikuormittamista liian suurella sisällöllä, mikä voi olla ylivoimaista käyttäjille.

Esimerkki: mega-valikko kansainväliselle verkkokaupalle:

Kuvittele verkkokauppa, joka myy tuotteita maailmanlaajuisesti. Heidän mega-valikkonsa voisi sisältää:

Testaus ja validointi

Perusteellinen testaus on välttämätöntä valikoiden saavutettavuuden varmistamiseksi. Käytä yhdistelmää automaattisia testityökaluja ja manuaalisia testausmenetelmiä.

Testaustyökalut:

Manuaalinen testaus:

Parhaat käytännöt globaaliin saavutettavuuteen

Kun suunnittelet valikoita globaalille yleisölle, harkitse näitä lisäparhaita käytäntöjä:

Yhteenveto

Saavutettavien pudotusvalikoiden ja mega-valikoiden luominen vaatii huolellista suunnittelua ja yksityiskohtien huomioimista. Noudattamalla tässä oppaassa esitettyjä periaatteita ja parhaita käytäntöjä voit varmistaa, että verkkosivustosi on navigoitavissa ja käytettävissä kaikille heidän kyvyistään tai sijainnistaan riippumatta. Muista, että saavutettavuus on jatkuva prosessi, ei kertaluonteinen korjaus. Testaa ja päivitä valikkojasi säännöllisesti varmistaaksesi, että ne pysyvät saavutettavissa verkkosivustosi kehittyessä.

Priorisoimalla saavutettavuutta et luo ainoastaan inklusiivisempaa kokemusta kaikille käyttäjille, vaan parannat myös verkkosivustosi yleistä käytettävyyttä ja SEO:ta, mikä lopulta hyödyttää liiketoimintaasi ja yleisöäsi.

Lisäresursseja