Meniu navigacija: prieinamų išskleidžiamųjų ir didžiųjų meniu kūrimas pasaulinei auditorijai

Svetainės navigacija yra naudotojo patirties kertinis akmuo. Gerai sukonstruoti meniu leidžia lankytojams greitai ir efektyviai rasti jiems reikalingą informaciją, o tai lemia didesnį įsitraukimą ir konversijas. Išskleidžiamieji ir didieji meniu yra populiarūs pasirinkimai svetainėms su dideliu turiniu, tačiau jų sudėtingumas gali sukelti prieinamumo problemų, jei jie nebus įgyvendinti atsargiai. Šiame vadove nagrinėjama geriausia praktika, kaip sukurti prieinamus išskleidžiamuosius ir didžiuosius meniu, kurie tinka įvairiai pasaulinei auditorijai, nepriklausomai nuo galimybių ar įrenginio.

Prieinamos navigacijos svarbos supratimas

Prieinamumas yra ne tik atitikties reikalavimas; tai yra pagrindinis įtraukaus dizaino principas. Užtikrinę, kad jūsų svetainė yra prieinama, atveriate ją platesnei auditorijai, įskaitant žmones su negalia, tuos, kurie naudojasi pagalbinėmis technologijomis, ir asmenis, kurie pasiekia jūsų svetainę skirtinguose įrenginiuose ir tinklo greičiuose. Prieinama navigacija naudinga visiems, gerina bendrą naudojimą ir paieškos sistemos optimizavimą (SEO).

Kuriant prieinamą navigaciją, apsvarstykite šiuos scenarijus:

• Ekrano skaitytuvų naudotojai: Asmenys su regos sutrikimais naršo internete naudodamiesi ekrano skaitytuvais. Tinkamai sukonstruoti ir paženklinti meniu yra labai svarbūs, kad šie naudotojai suprastų svetainės organizavimą ir rastų norimą turinį.
• Klaviatūros naudotojai: Daugelis naudotojų, įskaitant tuos, kurių motorikos sutrikimai, naršo svetaines naudodamiesi klaviatūra. Meniu turi būti naršomi naudojant tabuliavimo klavišą ir kitus klaviatūros spartuosius klavišus.
• Mobiliųjų įrenginių naudotojai: Išskleidžiamieji ir didieji meniu gali būti ypač sudėtingi mažuose ekranuose. Reaguojantis dizainas ir kruopštus prisilietimo sąveikos svarstymas yra būtini.
• Naudotojai su kognityviniais sutrikimais: Aiškus, nuoseklus ir nuspėjamas naršymas yra gyvybiškai svarbus naudotojams su kognityviniais sutrikimais, kad jie suprastų svetainės struktūrą ir išvengtų painiavos.
• Naudotojai su mažu pralaidumu: Sudėtingi meniu su dideliais vaizdais ar pernelyg didele animacija gali būti lėtai įkeliami, o tai erzina naudotojus vietovėse, kuriose prastas interneto ryšys.

Pagrindiniai prieinamumo principai, skirti išskleidžiamiesiems ir didiesiems meniu

Keletas pagrindinių principų grindžia prieinamą meniu dizainą:

1. Semantinė HTML struktūra

Naudokite semantinius HTML elementus, tokius kaip <nav>, <ul> ir <li>, kad sukurtumėte aiškią ir logišką meniu struktūrą. Tai suteikia pagalbinėms technologijoms vertingos informacijos apie meniu paskirtį ir organizavimą.

Pavyzdys:

<nav aria-label="Pagrindinis meniu">
  <ul>
    <li><a href="#">Pagrindinis</a></li>
    <li>
      <a href="#">Produktai</a>
      <ul>
        <li><a href="#">Produktų kategorija 1</a></li>
        <li><a href="#">Produktų kategorija 2</a></li>
      </ul>
    </li>
    <li><a href="#">Apie mus</a></li>
    <li><a href="#">Kontaktai</a></li>
  </ul>
</nav>

2. ARIA atributai

ARIA (Accessible Rich Internet Applications) atributai pagerina dinaminio turinio ir interaktyvių elementų prieinamumą. Naudokite ARIA atributus, kad suteiktumėte papildomos informacijos pagalbinėms technologijoms apie meniu būseną ir elgesį.

Įprasti ARIA atributai meniu:

• aria-haspopup="true": Nurodo, kad elementas turi iššokantįjį meniu arba submeniu.
• aria-expanded="true|false": Nurodo, ar meniu arba submeniu šiuo metu yra išplėstas arba sutrauktas. Tai turi būti dinamiškai atnaujinama naudojant JavaScript.
• aria-label arba aria-labelledby: Pateikia aprašomąją meniu etiketę, ypač jei vizualinės etiketės nepakanka.
• role="menu", role="menubar", role="menuitem", role="menuitemradio", role="menuitemcheckbox": Apibrėžia elemento vaidmenį meniu struktūroje.

Pavyzdys:

<button aria-haspopup="true" aria-expanded="false" aria-label="Atidaryti navigacijos meniu">Meniu</button>
<nav aria-label="Pagrindinis meniu" role="navigation">
  <ul role="menu">
    <li role="menuitem"><a href="#">Pagrindinis</a></li>
    <li role="menuitem" aria-haspopup="true" aria-expanded="false">
      <a href="#">Produktai</a>
      <ul role="menu">
        <li role="menuitem"><a href="#">Produktų kategorija 1</a></li>
        <li role="menuitem"><a href="#">Produktų kategorija 2</a></li>
      </ul>
    </li>
    <<li role="menuitem">a href="#">Apie mus</a></li>
    <li role="menuitem"><a href="#">Kontaktai</a></li>
  </ul>
</nav>

3. Naršymas klaviatūra

Užtikrinkite, kad visus meniu elementus būtų galima pasiekti ir suaktyvinti naudojant klaviatūrą. Naudotojai turėtų galėti naršyti po meniu naudodami tabuliavimo klavišą, rodyklių klavišus ir įvedimo klavišą.

Geriausia naršymo klaviatūra praktika:

• Tabuliavimo tvarka: Tabuliavimo tvarka turėtų atitikti logišką vizualinę meniu elementų tvarką.
• Fokusavimo indikacija: Pateikite aiškų ir matomą fokusavimo indikatorių (pvz., CSS kontūrą), kad parodytumėte, kuris meniu elementas šiuo metu yra pasirinktas.
• Naršymas rodyklių klavišais: Naudokite rodyklių klavišus, kad naršytumėte submeniu.
• Įvedimo klavišo suaktyvinimas: Įvedimo klavišas turėtų suaktyvinti šiuo metu sufokusuotą meniu elementą.
• Pabėgimo klavišo uždarymas: Pabėgimo klavišas turėtų uždaryti atidarytą submeniu.

4. Fokusavimo valdymas

Tinkamas fokusavimo valdymas yra labai svarbus klaviatūros naudotojams. Kai atidaromas submeniu, fokusas turėtų būti automatiškai perkeltas į pirmąjį submeniu elementą. Kai submeniu uždaromas, fokusas turėtų grįžti į pagrindinį meniu elementą.

5. Spalvų kontrastas

Užtikrinkite pakankamą spalvų kontrastą tarp meniu teksto ir fono. Tai ypač svarbu naudotojams, turintiems silpną regėjimą. Laikykitės WCAG (Web Content Accessibility Guidelines) 2.1 AA standartų dėl spalvų kontrasto santykių.

6. Reaguojantis dizainas

Meniu turi būti reaguojantys ir prisitaikyti prie skirtingų ekrano dydžių. Mažesniuose ekranuose apsvarstykite galimybę naudoti „hamburgerio“ meniu arba kitus mobiliesiems įrenginiams pritaikytus naršymo modelius. Išbandykite savo meniu įvairiuose įrenginiuose ir ekrano raiškose.

7. Aiškios ir glaustos etiketės

Naudokite aiškias ir glaustas etiketes visiems meniu elementams. Venkite žargono ar dviprasmiškos kalbos, kuri gali būti paini naudotojams. Apsvarstykite vertimus daugiakalbei auditorijai.

8. Venkite naudoti tik užvedimo būsenas

Pasikliauti tik užvedimo būsenomis, kad atskleistumėte submeniu, yra neprieinama klaviatūros naudotojams ir naudotojams jutikliniuose įrenginiuose. Užtikrinkite, kad meniu būtų galima išplėsti ir sutraukti naudojant klaviatūros sąveikas ir prisilietimo gestus.

Prieinamų išskleidžiamųjų meniu įgyvendinimas

Išskleidžiamieji meniu yra įprastas būdas organizuoti navigaciją, ypač kai dirbama su vidutiniu meniu elementų skaičiumi. Štai kaip įgyvendinti prieinamus išskleidžiamuosius meniu:

1. HTML struktūra: Naudokite įdėtą <ul> struktūrą elementuose <li>, kad sukurtumėte išskleidžiamąją hierarchiją.
2. ARIA atributai: Pridėkite aria-haspopup="true" prie pagrindinio meniu elemento, kuris suaktyvina išskleidžiamąjį meniu. Naudokite aria-expanded="true", kai išskleidžiamasis meniu yra atidarytas, ir aria-expanded="false", kai jis uždarytas.
3. Naršymas klaviatūra: Užtikrinkite, kad naudotojai galėtų naršyti po išskleidžiamuosius elementus naudodami tabuliavimo ir rodyklių klavišus.
4. Fokusavimo valdymas: Kai atidaromas išskleidžiamasis meniu, sufokusuokite pirmąjį elementą išskleidžiamajame meniu. Kai jis uždaromas, grąžinkite fokusą į pagrindinį meniu elementą.
5. CSS stilius: Naudokite CSS, kad vizualiai paslėptumėte ir parodytumėte išskleidžiamąjį turinį, išlaikydami jo prieinamumą ekrano skaitytuvams.

JavaScript pavyzdys išskleidžiamojo meniu funkcionalumui:

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

Prieinamų didžiųjų meniu įgyvendinimas

Didieji meniu yra didesni, daugiastulpiai meniu, kuriuose gali būti rodomas didelis turinio kiekis, įskaitant vaizdus, tekstą ir nuorodas. Nors jie gali būti vizualiai patrauklūs ir informatyvūs, jie taip pat kelia didesnių prieinamumo iššūkių.

1. HTML struktūra: Organizuokite turinį didžiajame meniu naudodami semantinius HTML elementus, tokius kaip antraštės, sąrašai ir pastraipos.
2. ARIA atributai: Naudokite ARIA atributus, kad apibrėžtumėte skirtingų sekcijų vaidmenis didžiajame meniu ir nurodytumėte ryšį tarp suaktyvinimo elemento ir didžiojo meniu turinio.
3. Naršymas klaviatūra: Įgyvendinkite aiškią ir logišką naršymo klaviatūra sistemą, užtikrindami, kad naudotojai galėtų lengvai naršyti po visas didžiojo meniu sekcijas.
4. Fokusavimo valdymas: Atkreipkite ypatingą dėmesį į fokusavimo valdymą, užtikrindami, kad fokusas visada būtų logiškoje ir nuspėjamoje vietoje.
5. Reaguojantis dizainas: Dideliems meniu dažnai reikia didelių koregavimų, kad jie gerai veiktų mažesniuose ekranuose. Apsvarstykite galimybę naudoti viso ekrano perdangą ar kitus mobiliesiems įrenginiams pritaikytus dizaino modelius.
6. Venkite per didelio turinio: Nors dideli meniu yra skirti rodyti daug informacijos, venkite perkrauti juos per dideliu turiniu, kuris gali būti pribloškiantis naudotojams.

Pavyzdys: didelis meniu tarptautinei elektroninės prekybos parduotuvei:

Įsivaizduokite internetinį mažmenininką, parduodantį produktus visame pasaulyje. Jų didelis meniu gali turėti:

• Kategorijos pagal regioną: „Apsipirkite Europoje“, „Apsipirkite Azijoje“, „Apsipirkite Šiaurės Amerikoje“, kiekviena iš jų išsiplečia, kad parodytų populiarius produktus tame regione.
• Valiutos parinktys: Aiškiai matoma sekcija, kurioje galima pasirinkti pageidaujamą valiutą (USD, EUR, JPY ir kt.).
• Kalbos pasirinkimas: Nuorodos į išverstas svetainės versijas (anglų, ispanų, prancūzų, kinų ir kt.).
• Pagalba ir palaikymas: Tiesioginės nuorodos į klientų aptarnavimą, DUK ir informaciją apie tarptautinį pristatymą.

Testavimas ir patvirtinimas

Nuodugnus testavimas yra būtinas norint užtikrinti jūsų meniu prieinamumą. Naudokite automatizuotų testavimo įrankių ir rankinio testavimo metodų derinį.

Testavimo įrankiai:

• WAVE (Web Accessibility Evaluation Tool): Naršyklės plėtinys, kuris identifikuoja prieinamumo klaidas ir pateikia patobulinimų pasiūlymus.
• axe DevTools: Automatizuotas prieinamumo testavimo įrankis, skirtas svetainėms ir žiniatinklio programoms.
• Ekrano skaitytuvo testavimas: Išbandykite savo meniu su populiariais ekrano skaitytuvais, tokiais kaip NVDA, JAWS ir VoiceOver.

Rankinis testavimas:

• Naršymo klaviatūra testavimas: Naršykite po savo meniu naudodami klaviatūrą, kad užtikrintumėte, jog visi elementai yra prieinami ir fokusas valdomas tinkamai.
• Spalvų kontrasto testavimas: Naudokite spalvų kontrasto analizatorių, kad patikrintumėte, ar spalvų kontrasto santykiai atitinka WCAG gaires.
• Naudotojo testavimas: Įtraukite žmones su negalia į savo testavimo procesą, kad gautumėte vertingų atsiliepimų apie savo meniu naudojimą ir prieinamumą.

Geriausia pasaulinio prieinamumo praktika

Kurdami meniu pasaulinei auditorijai, apsvarstykite šią papildomą geriausią praktiką:

• Kalbos palaikymas: Užtikrinkite, kad jūsų meniu būtų išversti į kelias kalbas ir kad kalbos pasirinkimas būtų lengvai pasiekiamas.
• Datos ir laiko formatai: Naudokite tarptautinius datos ir laiko formatus (pvz., ISO 8601), kad išvengtumėte painiavos.
• Valiutos konvertavimas: Pateikite aiškias valiutos konvertavimo parinktis ir rodykite kainas vietinėmis valiutomis.
• Pristatymo informacija: Pateikite išsamią pristatymo informaciją skirtingiems regionams ir šalims.
• Kultūrinis jautrumas: Kurdami meniu, atsižvelkite į kultūrinius skirtumus. Venkite naudoti vaizdus ar simbolius, kurie gali būti įžeidžiantys arba netinkami tam tikrose kultūrose.
• Kryptis: Palaikykite kalbas iš kairės į dešinę (LTR) ir iš dešinės į kairę (RTL).

Išvada

Prieinamų išskleidžiamųjų ir didžiųjų meniu kūrimas reikalauja kruopštaus planavimo ir dėmesio detalėms. Laikydamiesi šiame vadove aprašytų principų ir geriausios praktikos, galite užtikrinti, kad jūsų svetainė būtų naršoma ir naudojama visiems, nepriklausomai nuo jų gebėjimų ar vietos. Atminkite, kad prieinamumas yra nuolatinis procesas, o ne vienkartinis pataisymas. Reguliariai testuokite ir atnaujinkite savo meniu, kad užtikrintumėte, jog jie išliks prieinami, kai jūsų svetainė tobulėja.

Teikdami pirmenybę prieinamumui, ne tik sukuriate įtraukesnę patirtį visiems naudotojams, bet ir pagerinate bendrą savo svetainės naudojimą ir SEO, o tai galiausiai naudinga jūsų verslui ir auditorijai.

Papildomi ištekliai

• Žiniatinklio turinio prieinamumo gairės (WCAG)
• Prieinamos turtingos interneto programos (ARIA) 1.1
• MDN žiniatinklio dokumentai: prieinamumas