M

MLOG

Lietuvių

Išsamus medžio vaizdo prieinamumo vadovas, apimantis ARIA vaidmenis, naršymą klaviatūra, geriausias praktikas ir suderinamumą tarp naršyklių geresnei naudotojo patirčiai.

Medžio vaizdas: hierarchinių duomenų naršymo prieinamumas

Medžio vaizdai yra esminiai naudotojo sąsajos (UI) komponentai, skirti hierarchiniams duomenims rodyti. Jie leidžia naudotojams intuityviai naršyti sudėtingas struktūras, tokias kaip failų sistemos, organizacinės schemos ar svetainių meniu. Tačiau prastai įgyvendintas medžio vaizdas gali sukelti didelių prieinamumo kliūčių, ypač naudotojams su negalia, kurie pasikliauja pagalbinėmis technologijomis, tokiomis kaip ekrano skaitytuvai ir naršymas klaviatūra. Šiame straipsnyje pateikiamas išsamus vadovas, kaip kurti ir įgyvendinti prieinamus medžio vaizdus, užtikrinant teigiamą naudotojo patirtį visiems.

Medžio vaizdo struktūros supratimas

Medžio vaizdas pateikia duomenis hierarchiniu, išskleidžiamu / suskleidžiamu formatu. Kiekvienas medis mazgas gali turėti antrinių mazgų, taip sukuriant šakas ir pošakius. Aukščiausias mazgas vadinamas šakniniu mazgu. Prieš gilinantis į prieinamumo aspektus, labai svarbu suprasti pagrindinę struktūrą.

Štai įprastų medžio vaizdo elementų apžvalga:

ARIA vaidmenų ir atributų svarba

Prieinamos turtingos interneto programos (ARIA) yra atributų rinkinys, kuris prideda semantinę prasmę HTML elementams, padarydamas juos suprantamus pagalbinėms technologijoms. Kuriant medžio vaizdus, ARIA vaidmenys ir atributai yra labai svarbūs perduodant medžio struktūrą ir elgseną ekrano skaitytuvams.

Esminiai ARIA vaidmenys:

Pagrindiniai ARIA atributai:

ARIA įgyvendinimo pavyzdys:

Štai pagrindinis pavyzdys, kaip struktūrizuoti medžio vaizdą su ARIA atributais:

<ul role="tree" aria-label="Failų sistema"> <li role="treeitem" aria-expanded="true" aria-selected="false" tabindex="0"> <span>Pagrindinis aplankas</span> <ul role="group"> <li role="treeitem" aria-expanded="false" aria-selected="false" tabindex="-1"> <span>Aplankas 1</span> <ul role="group"> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Failas 1.txt</span></li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Failas 2.txt</span></li> </ul> </li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Aplankas 2</span></li> </ul> </li> </ul>

Naršymas klaviatūra

Naršymas klaviatūra yra itin svarbus naudotojams, kurie negali naudotis pele. Gerai suprojektuotas medžio vaizdas turėtų būti visiškai naršomas naudojant tik klaviatūrą. Štai standartinės klaviatūros sąveikos:

JavaScript įgyvendinimas naršymui klaviatūra:

Jums reikės JavaScript, kad apdorotumėte klaviatūros įvykius ir atitinkamai atnaujintumėte fokusą. Štai supaprastintas pavyzdys:

const tree = document.querySelector('[role="tree"]'); const treeitems = document.querySelectorAll('[role="treeitem"]'); tree.addEventListener('keydown', (event) => { const focusedElement = document.activeElement; let nextElement; switch (event.key) { case 'ArrowUp': event.preventDefault(); // Neleidžia slinkti puslapio // Logika, skirta rasti ankstesnį medžio elementą (reikia pereiti per DOM) // ... nextElement = findPreviousTreeitem(focusedElement); break; case 'ArrowDown': event.preventDefault(); // Logika, skirta rasti kitą medžio elementą // ... nextElement = findNextTreeitem(focusedElement); break; case 'ArrowLeft': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'true') { // Suskleisti mazgą focusedElement.setAttribute('aria-expanded', 'false'); } else { // Perkelti fokusą į tėvinį elementą nextElement = findParentTreeitem(focusedElement); } break; case 'ArrowRight': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'false') { // Išskleisti mazgą focusedElement.setAttribute('aria-expanded', 'true'); } else { // Perkelti fokusą į pirmąjį vaiką nextElement = findFirstChildTreeitem(focusedElement); } break; case 'Home': event.preventDefault(); nextElement = treeitems[0]; break; case 'End': event.preventDefault(); nextElement = treeitems[treeitems.length - 1]; break; case ' ': // Tarpas case 'Enter': event.preventDefault(); // Logika, skirta pasirinkti fokusuotą mazgą selectNode(focusedElement); break; default: // Tvarkyti simbolių įvedimą, norint naršyti į mazgus, prasidedančius tuo simboliu break; } if (nextElement) { focusedElement.setAttribute('tabindex', '-1'); nextElement.setAttribute('tabindex', '0'); nextElement.focus(); } });

Svarbūs aspektai įgyvendinant naršymą klaviatūra:

Vizualinis dizainas ir prieinamumas

Vizualinis dizainas atlieka lemiamą vaidmenį medžio vaizdų naudojamumui ir prieinamumui. Štai keletas gairių:

Ekrano skaitytuvų aspektai

Ekrano skaitytuvų naudotojai pasikliauja ARIA atributais ir naršymu klaviatūra, kad suprastų ir sąveikautų su medžio vaizdais. Štai keletas pagrindinių aspektų, susijusių su ekrano skaitytuvų prieinamumu:

Suderinamumas tarp naršyklių

Prieinamumas turėtų būti nuoseklus skirtingose naršyklėse ir operacinėse sistemose. Kruopščiai išbandykite savo medžio vaizdą su:

Naudokite naršyklės kūrėjo įrankius, kad patikrintumėte ARIA atributus ir klaviatūros elgseną. Atkreipkite dėmesį į bet kokius neatitikimus ar atvaizdavimo problemas.

Testavimas ir patvirtinimas

Reguliarus testavimas yra būtinas norint užtikrinti jūsų medžio vaizdo prieinamumą. Štai keletas testavimo metodų:

Geriausios prieinamų medžio vaizdų praktikos

Štai keletas geriausių praktikų, kurių reikia laikytis kuriant ir įgyvendinant prieinamus medžio vaizdus:

Pažangesni aspektai

Išvada

Prieinamų medžio vaizdų kūrimas reikalauja kruopštaus planavimo ir įgyvendinimo. Laikydamiesi šiame straipsnyje pateiktų gairių, galite užtikrinti, kad jūsų medžio vaizdai būtų naudojami ir prieinami visiems naudotojams, įskaitant tuos, kurie turi negalią. Atminkite, kad prieinamumas yra ne tik techninis reikalavimas; tai pagrindinis įtraukiojo dizaino principas.

Suteikdami prioritetą prieinamumui, galite sukurti geresnę naudotojo patirtį visiems, nepaisant jų gebėjimų. Svarbu reguliariai testuoti ir tikrinti savo kodą. Sekite naujausius prieinamumo standartus ir geriausias praktikas, kad sukurtumėte tikrai įtraukias naudotojo sąsajas.