M

MLOG

Eesti

Põhjalik juhend puukujulise vaate ligipääsetavuse kohta, hõlmates ARIA rolle, klaviatuurinavigatsiooni, parimaid tavasid ja brauseriülest ühilduvust parema kasutuskogemuse tagamiseks.

Puukujuline vaade: hierarhiliste andmete navigeerimise ligipääsetavus

Puukujulised vaated on olulised kasutajaliidese komponendid hierarhiliste andmete kuvamiseks. Need võimaldavad kasutajatel navigeerida keerulistes struktuurides, nagu failisüsteemid, organisatsiooni skeemid või veebilehe menüüd, intuitiivsel viisil. Halvasti teostatud puukujuline vaade võib aga luua olulisi ligipääsetavuse takistusi, eriti puuetega kasutajatele, kes toetuvad abistavatele tehnoloogiatele nagu ekraanilugejad ja klaviatuurinavigatsioon. See artikkel pakub põhjalikku juhendit ligipääsetavate puukujuliste vaadete disainimiseks ja rakendamiseks, tagades positiivse kasutuskogemuse kõigile.

Puukujulise vaate struktuuri mõistmine

Puukujuline vaade esitab andmeid hierarhilises, laiendatavas/ahendatavas vormingus. Igal puu sõlmel võivad olla alamsõlmed, luues harusid ja alamharusid. Kõige ülemist sõlme nimetatakse juursõlmeks. Põhistruktuuri mõistmine on kriitilise tähtsusega enne ligipääsetavuse kaalutlustesse süvenemist.

Siin on ülevaade tavalistest puukujulise vaate elementidest:

ARIA rollide ja atribuutide tähtsus

Accessible Rich Internet Applications (ARIA) on atribuutide komplekt, mis lisab HTML-elementidele semantilise tähenduse, muutes need abistavatele tehnoloogiatele mõistetavaks. Puukujuliste vaadete ehitamisel on ARIA rollid ja atribuudid üliolulised puu struktuuri ja käitumise edastamiseks ekraanilugejatele.

Olulised ARIA rollid:

Peamised ARIA atribuudid:

ARIA rakendamise näide:

Siin on põhiline näide, kuidas struktureerida puukujulist vaadet ARIA atribuutidega:

<ul role="tree" aria-label="Failisüsteem"> <li role="treeitem" aria-expanded="true" aria-selected="false" tabindex="0"> <span>Juurkaust</span> <ul role="group"> <li role="treeitem" aria-expanded="false" aria-selected="false" tabindex="-1"> <span>Kaust 1</span> <ul role="group"> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Fail 1.txt</span></li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Fail 2.txt</span></li> </ul> </li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Kaust 2</span></li> </ul> </li> </ul>

Klaviatuurinavigatsioon

Klaviatuurinavigatsioon on ülimalt oluline kasutajatele, kes ei saa hiirt kasutada. Hästi disainitud puukujuline vaade peaks olema täielikult navigeeritav ainult klaviatuuri abil. Siin on standardsed klaviatuuri interaktsioonid:

Klaviatuurinavigatsiooni JavaScripti implementatsioon:

Klaviatuurisündmuste käsitlemiseks ja fookuse vastavaks uuendamiseks on vaja JavaScripti. Siin on lihtsustatud näide:

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(); // Väldib lehe kerimist // Loogika eelmise puu elemendi leidmiseks (nõuab DOM-i läbimist) // ... nextElement = findPreviousTreeitem(focusedElement); break; case 'ArrowDown': event.preventDefault(); // Loogika järgmise puu elemendi leidmiseks // ... nextElement = findNextTreeitem(focusedElement); break; case 'ArrowLeft': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'true') { // Ahendab sõlme focusedElement.setAttribute('aria-expanded', 'false'); } else { // Liigutab fookuse emassõlmele nextElement = findParentTreeitem(focusedElement); } break; case 'ArrowRight': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'false') { // Laiendab sõlme focusedElement.setAttribute('aria-expanded', 'true'); } else { // Liigutab fookuse esimesele alamsõlmele nextElement = findFirstChildTreeitem(focusedElement); } break; case 'Home': event.preventDefault(); nextElement = treeitems[0]; break; case 'End': event.preventDefault(); nextElement = treeitems[treeitems.length - 1]; break; case ' ': // Tühikuklahv case 'Enter': event.preventDefault(); // Loogika fookuses oleva sõlme valimiseks selectNode(focusedElement); break; default: // Käsitle tähemärkide tippimist navigeerimiseks sõlmedele, mis algavad selle tähemärgiga break; } if (nextElement) { focusedElement.setAttribute('tabindex', '-1'); nextElement.setAttribute('tabindex', '0'); nextElement.focus(); } });

Olulised kaalutlused klaviatuurinavigatsiooni implementeerimisel:

Visuaalne disain ja ligipääsetavus

Visuaalne disain mängib puukujuliste vaadete kasutatavuses ja ligipääsetavuses olulist rolli. Siin on mõned juhised:

Ekraanilugeja kaalutlused

Ekraanilugejate kasutajad toetuvad ARIA atribuutidele ja klaviatuurinavigatsioonile, et mõista ja suhelda puukujuliste vaadetega. Siin on mõned peamised kaalutlused ekraanilugejate ligipääsetavuse osas:

Brauseriülene ühilduvus

Ligipääsetavus peaks olema järjepidev erinevates brauserites ja operatsioonisüsteemides. Testige oma puukujulist vaadet põhjalikult järgmistes keskkondades:

Kasutage brauseri arendaja tööriistu, et kontrollida ARIA atribuute ja klaviatuuri käitumist. Pöörake tähelepanu kõikidele vastuoludele või renderdamisprobleemidele.

Testimine ja valideerimine

Regulaarne testimine on teie puukujulise vaate ligipääsetavuse tagamiseks hädavajalik. Siin on mõned testimismeetodid:

Ligipääsetavate puukujuliste vaadete parimad tavad

Siin on mõned parimad tavad, mida järgida ligipääsetavate puukujuliste vaadete disainimisel ja rakendamisel:

Täpsemad kaalutlused

Kokkuvõte

Ligipääsetavate puukujuliste vaadete loomine nõuab hoolikat planeerimist ja rakendamist. Järgides selles artiklis toodud juhiseid, saate tagada, et teie puukujulised vaated on kasutatavad ja ligipääsetavad kõigile kasutajatele, sealhulgas puuetega inimestele. Pidage meeles, et ligipääsetavus ei ole ainult tehniline nõue; see on kaasava disaini aluspõhimõte.

Ligipääsetavust eelistades saate luua parema kasutuskogemuse kõigile, olenemata nende võimetest. Oma koodi regulaarne testimine ja valideerimine on oluline. Hoidke end kursis uusimate ligipääsetavuse standardite ja parimate tavadega, et luua tõeliselt kaasavaid kasutajaliideseid.