Lohista ja aseta: interaktiivsete elementide ligipääsetavuse meisterlikkus

Lohista ja aseta liidesed on võimsad tööriistad intuitiivsete ja kaasahaaravate kasutajakogemuste loomiseks. Siiski võivad need tekitada olulisi ligipääsetavuse väljakutseid puuetega kasutajatele, eriti neile, kes sõltuvad klaviatuuriga navigeerimisest või ekraanilugejatest. See juhend pakub põhjalikku ülevaadet, kuidas kujundada ja rakendada ligipääsetavaid lohista ja aseta interaktsioone, tagades, et kõik kasutajad saaksid sellest dünaamilisest funktsioonist kasu.

Ligipääsetavuse väljakutsete mõistmine

Traditsioonilised lohista ja aseta lahendused tuginevad sageli tugevalt hiire interaktsioonidele, muutes need olemuslikult ligipääsmatuks kasutajatele, kes ei saa hiirt kasutada. Levinumad ligipääsetavuse takistused on järgmised:

• Klaviatuuritoe puudumine: Kasutajad, kes sõltuvad klaviatuuriga navigeerimisest, ei pruugi olla võimelised lohista ja aseta toiminguid algatama, teostama ega lõpule viima.
• Ekraanilugeja ühildamatus: Ekraanilugejad ei pruugi korrektselt teavitada lohistatavate elementide olekust või sihtaladest, jättes kasutajad interaktsioonivõimalustest teadmatusse.
• Ebapiisavad visuaalsed vihjed: Visuaalsed vihjed, mis osutavad lohistatavatele elementidele ja sihtaladele, ei pruugi olla piisavad vaegnägijatele või kognitiivsete puuetega kasutajatele.
• Kognitiivne koormus: Lohista ja aseta toimingute mõistmiseks ja sooritamiseks vajalik vaimne pingutus võib olla kognitiivsete häiretega kasutajatele liiga suur.

ARIA atribuudid: võti ligipääsetava lohista ja aseta funktsiooni juurde

Ligipääsetavate Rikaste Internetirakenduste (ARIA) atribuudid mängivad olulist rolli lohista ja aseta interaktsioonide ligipääsetavaks muutmisel. Need atribuudid pakuvad semantilist teavet abistavatele tehnoloogiatele, võimaldades neil täpselt edastada interaktiivsete elementide olekut ja eesmärki.

Olulised ARIA atribuudid

• aria-grabbed: Näitab, kas elementi parajasti lohistatakse. Võimalikud väärtused on true või false. Määrake true, kui element on haaratud, ja false, kui see pole. Näide: <li aria-grabbed="false">Lohistatav element</li>
• aria-dropeffect: Määrab, millist tüüpi lohista ja aseta toimingut saab sihtalal teostada. Võimalikud väärtused on:
  • none: Sihtala ei võta lohistatud elementi vastu.
  • copy: Lohistatud elemendi koopia lisatakse sihtalale.
  • move: Lohistatud element teisaldatakse sihtalale.
  • link: Sihtalale luuakse link lohistatud elemendile.
  • execute: Lohistatud element käivitab sihtalale asetamisel toimingu.
  Näide: <div aria-dropeffect="move">Sihtala</div>
• aria-live: Kasutatakse muudatustest kasutajale teatamiseks. Levinumad väärtused on polite, assertive ja off. Kaaluge selle kasutamist sihtaladel, et teavitada, kui element on asetatud.

Näidisrakendus (JavaScript)

See lihtsustatud näide demonstreerib, kuidas kasutada ARIA atribuute ja JavaScripti, et luua lihtne ligipääsetav lohista ja aseta interaktsioon.

            
// Lohistatav element
const draggable = document.getElementById('draggable');
draggable.setAttribute('aria-grabbed', 'false');

draggable.addEventListener('mousedown', () => {
  draggable.setAttribute('aria-grabbed', 'true');
  // Lisa visuaalne märge, et seda lohistatakse
});

draggable.addEventListener('mouseup', () => {
  draggable.setAttribute('aria-grabbed', 'false');
  // Eemalda visuaalne märge
});

// Sihtala
const dropzone = document.getElementById('dropzone');
dropzone.setAttribute('aria-dropeffect', 'move');

dropzone.addEventListener('mouseup', () => {
  if (draggable.getAttribute('aria-grabbed') === 'true') {
    dropzone.appendChild(draggable);
    draggable.setAttribute('aria-grabbed', 'false');
    // Teavita ekraanilugejat
    dropzone.setAttribute('aria-live', 'polite');
    dropzone.textContent = 'Element asetatud!';
    setTimeout(() => {dropzone.setAttribute('aria-live', 'off'); dropzone.textContent = 'Sihtala';}, 2000);

  }
});

            

              
                Copy
              
            
          

Klaviatuuri ligipääsetavus: alternatiivse sisestusmeetodi pakkumine

Klaviatuuri ligipääsetavuse tagamine on ülioluline kasutajatele, kes ei saa hiirt kasutada. See hõlmab klaviatuuri ekvivalentide pakkumist kõigile lohista ja aseta toimingutele.

Rakendusstrateegiad

• Tabulatsioonijärjestus: Veenduge, et kõik lohistatavad elemendid ja sihtalad oleksid tabulatsioonijärjestuses. Kasutage fookuse järjekorra haldamiseks atribuuti tabindex.
• Klahvikombinatsioonid: Määratlege klaviatuuri otseteed lohista ja aseta toimingute algatamiseks, liigutamiseks ja lõpetamiseks. Levinumad klahvikombinatsioonid on:
  • Tühikuklahv: Elemendi valimiseks või haaramiseks.
  • Noolenupud: Valitud elemendi liigutamiseks.
  • Enter-klahv: Elemendi asetamiseks hetkel fookuses olevale sihtalale.
• Visuaalsed fookuse indikaatorid: Pakkuge selgeid ja nähtavaid fookuse indikaatoreid kõigile interaktiivsetele elementidele, et aidata kasutajatel oma asukohta jälgida.

Näide: klaviatuuriga ligipääsetav loendi ümberjärjestamine

Kujutage ette stsenaariumi, kus kasutajad peavad loendis olevaid elemente ümber järjestama. Klaviatuuriga ligipääsetav lahendus võib hõlmata järgmisi samme:

1. Kasutaja liigub tabulatsiooniklahviga loendi elemendile.
2. Kasutaja vajutab elemendi valimiseks tühikuklahvi.
3. Kasutaja vajutab nooleklahve Üles või Alla, et liigutada elementi loendis.
4. Kasutaja vajutab Enter-klahvi, et asetada element uude asukohta.

Ekraanilugeja ühilduvus: helilise tagasiside pakkumine

Ekraanilugejad tuginevad semantilisele teabele, et edastada interaktiivsete elementide olekut ja eesmärki nägemispuudega kasutajatele. Ekraanilugeja ühilduvuse tagamiseks on oluline:

• Kasutage ARIA atribuute õigesti: Nagu eespool kirjeldatud, pakuvad ARIA atribuudid vajalikku semantilist teavet, et ekraanilugejad saaksid lohista ja aseta interaktsioonist aru.
• Pakkuge kirjeldavaid silte: Kasutage atribuute aria-label või aria-labelledby, et pakkuda kirjeldavaid silte lohistatavatele elementidele ja sihtaladele.
• Teavitage olekumuutustest: Kasutage aria-live piirkondi, et teavitada lohista ja aseta interaktsiooni oleku muutustest, näiteks kui element on haaratud, liigutatud või asetatud.
• Pakkuge alternatiivteksti: Kõigi visuaalsete vihjete jaoks pakkuge samaväärset alternatiivteksti, mida ekraanilugejad saavad ette lugeda.

Näide: ekraanilugeja teavitus

Kui kasutaja haarab lohistatavast elemendist, võib ekraanilugeja teatada: "Lohistatav element, hetkel haaratud, liigutamiseks vajutage nooleklahve, asetamiseks vajutage Enter." Kui kasutaja asetab elemendi, võib ekraanilugeja teatada: "Element asetatud sihtalale."

Alternatiivsed lahendused: kui lohista ja aseta pole parim valik

Kuigi lohista ja aseta võib olla võimas interaktsioonitehnika, ei ole see alati kõige ligipääsetavam või sobivam lahendus. Mõnel juhul võivad alternatiivsed lahendused olla sobivamad:

• Loendi ümberjärjestamine nuppudega: Pakkuge nuppe elementide loendis üles või alla liigutamiseks. See lähenemine on olemuslikult klaviatuuriga ligipääsetav ja kergesti mõistetav.
• Vali ja liiguta toimingud: Lubage kasutajatel valida element ja seejärel valida sihtkoht rippmenüüst või loendist.
• Sorditavad tabelid: Andmetabelite puhul pakkuge sorditavaid veerge, mis võimaldavad kasutajatel andmeid erinevate kriteeriumide alusel ümber paigutada.
• Järkjärguline avalikustamine: Selle asemel, et lisateabe kuvamiseks lohistada ja asetada, kasutage järkjärgulise avalikustamise tehnikaid, näiteks laiendatavaid sektsioone või modaalaknaid.

Testimine ja valideerimine

Põhjalik testimine on hädavajalik, et tagada teie lohista ja aseta lahenduse tõeline ligipääsetavus. See hõlmab:

• Klaviatuuriga testimine: Veenduge, et kõiki lohista ja aseta toiminguid saab teostada ainult klaviatuuri abil.
• Ekraanilugejaga testimine: Kasutage ekraanilugejat liideses navigeerimiseks ja veenduge, et kogu asjakohane teave edastatakse korrektselt.
• Automatiseeritud ligipääsetavuse testimine: Kasutage automatiseeritud ligipääsetavuse testimise tööriistu võimalike ligipääsetavuse probleemide tuvastamiseks.
• Kasutajatestimine: Viige läbi kasutajateste puuetega inimestega, et koguda tagasisidet ja tuvastada parendusvaldkondi.

Ligipääsetava lohista ja aseta funktsiooni parimad tavad

Siin on mõned parimad tavad, mida meeles pidada ligipääsetavate lohista ja aseta interaktsioonide kavandamisel ja rakendamisel:

• Eelistage klaviatuuri ligipääsetavust: Pakkuge alati hiirepõhisele lohista ja aseta funktsioonile klaviatuuriga ligipääsetav alternatiiv.
• Kasutage ARIA atribuute semantiliselt: Kasutage ARIA atribuute korrektselt, et pakkuda semantilist teavet abistavatele tehnoloogiatele.
• Pakkuge selgeid visuaalseid vihjeid: Kasutage selgeid ja nähtavaid visuaalseid vihjeid lohistatavate elementide ja sihtalade tähistamiseks.
• Teavitage olekumuutustest: Kasutage aria-live piirkondi, et teavitada lohista ja aseta interaktsiooni oleku muutustest.
• Kaaluge alternatiivseid lahendusi: Hinnake, kas lohista ja aseta on teie konkreetse kasutusjuhtumi jaoks kõige sobivam interaktsioonitehnika.
• Testige põhjalikult: Viige läbi põhjalikke teste puuetega kasutajatega, et tagada teie lahenduse tõeline ligipääsetavus.
• Pakkuge juhiseid: Pakkuge selgeid ja lühikesi juhiseid lohista ja aseta funktsiooni kasutamiseks, sealhulgas klaviatuuriga navigeerimise juhiseid.
• Fookuse haldamine: Hallake fookust korrektselt lohista ja aseta toimingute ajal, et tagada kasutajate orienteerumine liideses. Näiteks veenduge, et pärast lohistamise ja asetamise lõpuleviimist naaseb fookus loogilisse kohta, näiteks järgmisele elemendile loendis, või jääb sihtalale, kui kasutaja tõenäoliselt asetatud elemendiga suhtleb.
• Võta tagasi / Tee uuesti funktsionaalsus: Rakendage tagasivõtmise/uuestitegemise mehhanism, eriti kriitiliste toimingute jaoks. See võimaldab kasutajatel lohistamise ja asetamise ajal tehtud vigu kergesti parandada, pakkudes turvavõrku ja vähendades frustratsiooni.

Globaalsed kaalutlused

Ligipääsetavus on globaalne mure. Lohista ja aseta liideste kujundamisel arvestage järgmiste globaalsete teguritega:

• Keeletugi: Veenduge, et kõik tekstid ja sildid on korrektselt tõlgitud mitmesse keelde.
• Kultuurilised tavad: Olge teadlik kultuurilistest tavadest, mis võivad mõjutada seda, kuidas kasutajad liidesega suhtlevad. Näiteks võib suunalisus (vasakult paremale vs. paremalt vasakule) mõjutada lohistamisallikate ja -sihtmärkide visuaalset paigutust.
• Abistava tehnoloogia kättesaadavus: Pidage meeles, et abistavate tehnoloogiate kättesaadavus ja kasutus võib eri piirkondades erineda.
• Õigusaktidele vastavus: Olge teadlik ligipääsetavuse eeskirjadest erinevates riikides, nagu näiteks WCAG (Veebisisu Ligipääsetavuse Juhised), EN 301 549 (Euroopa standard IKT-toodete ja -teenuste ligipääsetavusnõuetele) ja Section 508 (USA ligipääsetavuse seadus).

Kokkuvõte

Järgides neid juhiseid, saate luua lohista ja aseta interaktsioone, mis on ligipääsetavad kõigile kasutajatele, olenemata nende võimetest. Pidage meeles, et ligipääsetavus ei ole ainult tehniline nõue; see on kaasava disaini põhiprintsiip. Eelistades ligipääsetavust, saate luua kaasavama ja kasutajasõbralikuma veebi kõigi jaoks.

See juhend on lähtepunkt ligipääsetava lohista ja aseta funktsiooni mõistmiseks ja rakendamiseks. Õppige ja kohandage oma tavasid pidevalt, kuna ligipääsetavuse standardid ja tehnoloogiad arenevad.