Menüü navigeerimine: ligipääsetavate rippmenüüde ja mega-menüüde loomine globaalsele publikule

Veebisaidi navigeerimine on kasutajakogemuse nurgakivi. Hästi struktureeritud menüüd võimaldavad külastajatel kiiresti ja tõhusalt vajalikku teavet leida, suurendades kaasatust ja konversioone. Ripp- ja mega-menüüd on populaarsed valikud ulatusliku sisuga veebisaitide jaoks, kuid nende keerukus võib hoolikalt rakendamata jättes tekitada ligipääsetavusprobleeme. See juhend uurib parimaid tavasid ligipääsetavate ripp- ja mega-menüüde loomiseks, mis teenindavad mitmekesist globaalset publikut, olenemata nende võimetest või seadmetest.

Ligipääsetava navigeerimise tähtsuse mõistmine

Ligipääsetavus ei ole lihtsalt nõuete täitmine; see on kaasava disaini põhiprintsiip. Tagades oma veebisaidi ligipääsetavuse, avate selle laiemale publikule, sealhulgas puuetega inimestele, abitehnoloogiat kasutavatele inimestele ja üksikisikutele, kes pääsevad teie saidile erinevatest seadmetest ja võrgu kiirustest.

Ligipääsetav navigeerimine toob kasu kõigile, parandades üldist kasutatavust ja otsingumootori optimeerimist (SEO).

Ligipääsetava navigeerimise kavandamisel kaaluge järgmisi stsenaariume:

• Ekraanilugeja kasutajad: Nägemispuudega inimesed tuginevad veebis navigeerimiseks ekraanilugejatele. Nende kasutajate jaoks, et saidi struktuuri mõista ja soovitud sisu leida, on oluline korralikult struktureeritud ja märgistatud menüüd.
• Klaviatuuri kasutajad: Paljud kasutajad, sealhulgas liikumispuudega inimesed, navigeerivad veebisaitidel klaviatuuri abil. Menüüd peavad olema navigeeritavad tab-klahvi ja muude klaviatuuri otseteedega.
• Mobiilikasutajad: Ripp- ja mega-menüüd võivad olla eriti keerulised väikestel ekraanidel. Reageeriv disain ja puutetundlike interaktsioonide hoolikas kaalumine on olulised.
• Kognitiivsete puuetega kasutajad: Selge, järjepidev ja ettenähtav navigeerimine on oluline kognitiivsete puuetega kasutajate jaoks, et saidi struktuuri mõista ja vältida segadust.
• Madala ribalaiusega kasutajad: Keerulised menüüd suurte piltide või liigsete animatsioonidega võivad aeglaselt laadida, põhjustades pettumust kehva internetiühendusega piirkondades.

Põhilised ligipääsetavuse põhimõtted ripp- ja mega-menüüde jaoks

Ligipääsetava menüü disaini aluseks on mitmed põhiprintsiibid:

1. Semantiline HTML-i struktuur

Kasutage semantilisi HTML-elemente nagu <nav>, <ul> ja <li>, et luua oma menüü jaoks selge ja loogiline struktuur. See annab abitehnoloogiatele väärtuslikku teavet menüü otstarbe ja korralduse kohta.

Näide:

<nav aria-label="Main Menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Products</a>
      <ul>
        <li><a href="#">Product Category 1</a></li>
        <li><a href="#">Product Category 2</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

2. ARIA atribuudid

ARIA (Accessible Rich Internet Applications) atribuudid suurendavad dünaamilise sisu ja interaktiivsete elementide ligipääsetavust. Kasutage ARIA atribuute, et anda abitehnoloogiatele lisateavet oma menüüde oleku ja käitumise kohta.

Levinumad ARIA atribuudid menüüde jaoks:

• aria-haspopup="true": Näitab, et elemendil on hüpikmenüü või alammenüü.
• aria-expanded="true|false": Näitab, kas menüü või alammenüü on praegu avatud või suletud. See peab olema dünaamiliselt värskendatud JavaScriptiga.
• aria-label või aria-labelledby: Annab menüüle kirjeldava märgise, eriti kui visuaalne märgistus pole piisav.
• role="menu", role="menubar", role="menuitem", role="menuitemradio", role="menuitemcheckbox": Määratleb elemendi rolli menüü struktuuris.

Näide:

<button aria-haspopup="true" aria-expanded="false" aria-label="Open Navigation Menu">Menu</button>
<nav aria-label="Main Menu" role="navigation">
  <ul role="menu">
    <li role="menuitem"><a href="#">Home</a></li>
    <li role="menuitem" aria-haspopup="true" aria-expanded="false">
      <a href="#">Products</a>
      <ul role="menu">
        <li role="menuitem"><a href="#">Product Category 1</a></li>
        <li role="menuitem"><a href="#">Product Category 2</a></li>
      </ul>
    </li>
    <li role="menuitem"><a href="#">About Us</a></li>
    <li role="menuitem"><a href="#">Contact</a></li>
  </ul>
</nav>

3. Klaviatuuri navigeerimine

Veenduge, et kõigile menüüelementidele saab juurde pääseda ja neid saab aktiveerida klaviatuuri abil. Kasutajad peaksid saama menüüs navigeerida tab-klahvi, nooleklahvide ja sisestusklahvi abil.

Klaviatuuri navigeerimise parimad tavad:

• Tab järjestus: Tab järjestus peaks järgima menüüelementide loogilist visuaalset järjekorda.
• Fookuse näitaja: Pakkuge selge ja nähtav fookuse näitaja (nt CSS-i kontuur), et näidata, milline menüüelement on praegu valitud.
• Nooleklahvi navigeerimine: Alammenüüdes navigeerimiseks kasutage nooleklahve.
• Sisestusklahvi aktiveerimine: Sisestusklahv peaks aktiveerima praegu fookuses oleva menüüelemendi.
• Esc klahvi sulgemine: Esc klahv peaks sulgema avatud alammenüü.

4. Fookuse haldamine

Õige fookuse haldamine on klaviatuurikasutajate jaoks ülioluline. Kui alammenüü avaneb, peaks fookus automaatselt liikuma alammenüü esimesele üksusele. Kui alammenüü sulgub, peaks fookus tagasi vanemmenüü üksusele liikuma.

5. Värvikontrast

Tagage piisav värvikontrast menüüteksti ja tausta vahel. See on eriti oluline nõrganägemisega kasutajate jaoks. Järgige värvikontrasti suhete osas WCAG (Web Content Accessibility Guidelines) 2.1 AA standardeid.

6. Reageeriv disain

Menüüd peavad olema reageerivad ja kohanema erinevate ekraanisuurustega. Kaaluge väiksematel ekraanidel „hamburgeri“ menüü või muude mobiilisõbralike navigeerimismallide kasutamist. Testige oma menüüsid erinevatel seadmetel ja ekraani eraldusvõimetel.

7. Selged ja lühikesed pealdised

Kasutage kõigi menüüelementide jaoks selgeid ja lühikesi pealdiseid. Vältige žargooni või ebaselget keelt, mis võib kasutajatele segadust tekitada. Kaaluge tõlkeid mitmekeelse publiku jaoks.

8. Ärge kasutage ainult hiirekursori järgi reageerivaid olekuid

Alammenüüde paljastamiseks ainult hiirekursori järgi reageerivatele olekutele lootmine on klaviatuurikasutajatele ja puuteekraaniga seadmete kasutajatele ligipääsmatu. Veenduge, et menüüsid saab avada ja sulgeda klaviatuuriga ja puutežestidega.

Ligipääsetavate rippmenüüde rakendamine

Rippmenüüd on tavaline viis navigeerimise korraldamiseks, eriti kui tegeletakse mõõduka arvuga menüüelementidega. Siin on, kuidas rakendada ligipääsetavaid rippmenüüsid:

1. HTML-i struktuur: Kasutage hierarhia loomiseks <li> elementide sees pesastatud <ul> struktuuri.
2. ARIA atribuudid: Lisage rippmenüü käivitavale vanemmenüüüksusele aria-haspopup="true". Kasutage aria-expanded="true", kui rippmenüü on avatud, ja aria-expanded="false", kui see on suletud.
3. Klaviatuuri navigeerimine: Veenduge, et kasutajad saaksid tab- ja nooleklahvide abil rippmenüü üksustes navigeerida.
4. Fookuse haldamine: Kui rippmenüü avaneb, seadke fookus rippmenüü esimesele üksusele. Kui see sulgub, tagastage fookus vanemmenüü üksusele.
5. CSS-i stiilimine: Kasutage CSS-i, et rippmenüü sisu visuaalselt peita ja kuvada, säilitades samal ajal selle ligipääsetavuse ekraanilugejatele.

Näide JavaScripti rippmenüü funktsionaalsuse jaoks:

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');
  });
});

Ligipääsetavate mega-menüüde rakendamine

Mega-menüüd on suuremad, mitme veeruga menüüd, mis võivad kuvada märkimisväärse hulga sisu, sealhulgas pilte, teksti ja linke. Kuigi need võivad olla visuaalselt atraktiivsed ja informatiivsed, pakuvad need ka suuremaid ligipääsetavusprobleeme.

1. HTML-i struktuur: Korraldage mega-menüü sisu semantiliste HTML-elementide, nagu pealkirjad, loendid ja lõigud, abil.
2. ARIA atribuudid: Kasutage ARIA atribuute, et määratleda mega-menüü erinevate jaotiste rollid ja näidata suhet käivitava elemendi ja mega-menüü sisu vahel.
3. Klaviatuuri navigeerimine: Rakendage selge ja loogiline klaviatuuri navigeerimissüsteem, tagades, et kasutajad saavad hõlpsalt navigeerida kõigis mega-menüü jaotistes.
4. Fookuse haldamine: Pöörake erilist tähelepanu fookuse haldamisele, tagades, et fookus oleks alati loogilises ja ettenähtavas asukohas.
5. Reageeriv disain: Mega-menüüd nõuavad sageli märkimisväärseid kohandusi, et väikestel ekraanidel hästi toimida. Kaaluge täisekraani ülekatte või muude mobiilisõbralike disainimallide kasutamist.
6. Vältige liigset sisu: Kuigi mega-menüüd on loodud palju teabe kuvamiseks, vältige nende ülekoormamist liiga suure sisu hulgaga, mis võib kasutajatele üle jõu käia.

Näide: rahvusvahelise e-kaubanduse poe mega-menüü:

Kujutage ette veebipõhist jaemüüjat, kes müüb tooteid kogu maailmas. Nende mega-menüü võib sisaldada:

• Kategooriad piirkonna järgi: „Shop Europe“, „Shop Asia“, „Shop North America“, millest igaüks avaneb, et näidata populaarseid tooteid selles piirkonnas.
• Valuuta valikud: Selgelt nähtav jaotis eelistatud valuuta (USD, EUR, JPY jne) valimiseks.
• Keele valik: Lingid veebisaidi tõlgitud versioonidele (inglise, hispaania, prantsuse, hiina jne).
• Abi ja tugi: Otsesed lingid klienditeenindusele, KKK-dele ja rahvusvahelise saatmise teabele.

Testimine ja valideerimine

Teie menüüde ligipääsetavuse tagamiseks on oluline põhjalik testimine. Kasutage automaatseid testimistööriistu ja käsitsi testimise tehnikaid.

Testimistööriistad:

• WAVE (Web Accessibility Evaluation Tool): Brauserilaiendus, mis tuvastab ligipääsetavuse vead ja pakub parandusettepanekuid.
• axe DevTools: Veebisaitide ja veebirakenduste automaatne ligipääsetavuse testimise tööriist.
• Ekraanilugeja testimine: Testige oma menüüsid populaarsete ekraanilugejatega nagu NVDA, JAWS ja VoiceOver.

Käsitsi testimine:

• Klaviatuuri navigeerimise testimine: Navigeerige oma menüüd klaviatuuri abil, et tagada kõigi elementide ligipääsetavus ja õige fookuse haldamine.
• Värvikontrasti testimine: Kasutage värvikontrasti analüsaatorit, et kontrollida, kas värvikontrasti suhted vastavad WCAG juhistele.
• Kasutajate testimine: Kaasake oma testimisprotsessi puuetega inimesi, et saada väärtuslikku tagasisidet oma menüüde kasutatavuse ja ligipääsetavuse kohta.

Parimad tavad globaalse ligipääsetavuse jaoks

Kui kavandate menüüsid globaalse publiku jaoks, kaaluge järgmisi täiendavaid parimaid tavasid:

• Keeletugi: Veenduge, et teie menüüd oleksid tõlgitud mitmesse keelde ja et keele valik oleks hõlpsasti kättesaadav.
• Kuupäeva ja kellaaja vormingud: Kasutage rahvusvahelisi kuupäeva ja kellaaja vorminguid (nt ISO 8601), et vältida segadust.
• Valuuta konversioon: Pakkuge selgeid valuuta konversioonivõimalusi ja kuvage hindu kohalikes valuutades.
• Saateteave: Pakkuge üksikasjalikku saateteavet erinevate piirkondade ja riikide kohta.
• Kultuuriline tundlikkus: Olge oma menüüde kavandamisel teadlik kultuurierinevustest. Vältige piltide või sümbolite kasutamist, mis võivad teatud kultuurides olla solvavad või sobimatud.
• Suunalisus: Toetage nii vasakult paremale (LTR) kui ka paremalt vasakule (RTL) keeli.

Kokkuvõte

Ligipääsetavate ripp- ja mega-menüüde loomine nõuab hoolikat planeerimist ja tähelepanu detailidele. Järgides selles juhendis esitatud põhimõtteid ja parimaid tavasid, saate tagada, et teie veebisait on kõigile navigeeritav ja kasutatav, sõltumata nende võimetest või asukohast. Pidage meeles, et ligipääsetavus on pidev protsess, mitte ühekordne lahendus. Testige ja värskendage oma menüüsid regulaarselt, et tagada nende ligipääsetavus teie veebisaidi arenedes.

Prioritiseerides ligipääsetavust, loote mitte ainult kaasavama kogemuse kõigile kasutajatele, vaid parandate ka oma veebisaidi üldist kasutatavust ja SEO-d, mis lõpuks toob kasu teie ettevõttele ja teie publikule.

Lisateave

• Web Content Accessibility Guidelines (WCAG)
• Accessible Rich Internet Applications (ARIA) 1.1
• MDN Web Docs: Accessibility