Pagrindinis » Kodavimas » Pažvelkite į ARIA žiniatinklio standartus ir HTML programų prieinamumą

    Pažvelkite į ARIA žiniatinklio standartus ir HTML programų prieinamumą

    Iš tiesų atvira ir įtrauki žiniatinklio reikia technologijų, leidžiančių neįgaliems vartotojams pasitelkti pagalbines technologijas mėgautis dinamišku interneto turiniu ir moderniomis žiniatinklio programomis. „W3C“ prieinamumo žiniatinklio standartų tikslas yra užpildyti žiniatinklį su prieinamomis turtinėmis interneto programomis (ARIA), kurias neįgalūs vartotojai gali efektyviai naudoti.

    ARIA yra viena iš daugelio prieinamumo standartų ir gairių, kurias paskelbė interneto prieinamumo iniciatyva (WAI). Jis suteikia papildomą žymėjimą, kurį galima lengvai įterpti į HTML dokumentus. „WAI-ARIA“ yra tarpvalstybinis kompleksinio įrenginio sprendimas, nukreiptas į atvirą interneto platformą, todėl ne tik pagalvokite apie svetaines, bet ir apie žaidimus, skaitmenines pramogas, sveikatos priežiūros paslaugas, mobiliuosius ir kitokias programas.

    Šiame pranešime apžvelgsime, kaip galite pridėti prieigą prie savo HTML dokumentų naudodami WAI-ARIA standartus.

    ARIA sistema

    HTML sintaksė ne visada leidžia kūrėjams tinkamai apibūdinti elementus, nustatyti jų vaidmenis ir nurodyti jų tarpusavio ryšius. Nors tai retai yra problema lankytojams, turintiems visą savo pojūčius, ji gali trukdyti pagalbinių technologijų naudotojams suprasti, kas vyksta ekrane ir ištirti jų galimybes.

    Tai yra taškas, kur ARIA ateina mūsų pagalba, nes ji leidžia apibrėžti įvairių elementų tikslą orientyrai, ir apibūdinkite jų pobūdį aria-prefixed attributes. „Aria“ pridedami atributai turi du tipus: savybės kurios apibūdina funkcijas, kurios, kaip tikėtina, keisis per visą puslapio gyvavimo ciklą, ir narių kuri teikia informaciją apie daiktus, kurie dažnai gali pasikeisti dėl vartotojo sąveikos.

    Orientyrai su orientyrais

    Orientyrai yra labiausiai žinomos „ARIA“ vaidmenų modelio formos (kitos yra abstrakčios funkcijos, „Widget“ vaidmenys ir dokumentų struktūros vaidmenys). Orientyrų funkcijos leidžia kūrėjams nustatyti didelius regionai tinklalapyje, kuriame pagalbiniai technologijų naudotojai gali norėti greitai pasiekti.

    Yra 8 ARIA orientyrų vaidmenų tipai ir jie turi būti pridėti kaip susijusių HTML žymių atributai.

    vaidmenį =”reklama”

    Banerio vaidmuo yra skirtas naudoti daugiausia turiniui, kuris yra susijęs su visa svetaine, o ne tik į atskirus puslapius. Paprastai jis pridedamas kaip pagrindinė logotipo antraštė ir kita svarbi visos svetainės informacija. Svarbu, kad bet kokį HTML dokumentą ar programą galite naudoti tik vieną kartą.

    vaidmenį =”pagrindinis”

    Pagrindinis orientyras yra susijęs su pagrindiniu dokumento turiniu. Jis negali būti naudojamas daugiau nei vieną kartą bet kuriame HTML puslapyje. Jis paprastai seka

    sintaksė, arba HTML5, tuo labiau semantinis
    . Pastarasis buvo pridėtas prie W3C specifikacijų, siekiant nustatyti pagrindinis ARIA orientyras atlieka semantinio HTML elemento vaidmenį.

    vaidmenį =”navigacija”

    Navigacijos vaidmuo skirtas naudoti vietai, kurioje yra navigacinių elementų, tokių kaip nuorodos ir sąrašai svetainėje.

    vaidmenį =”papildo”

    Papildomas orientyrų vaidmuo apibūdina papildomą turinį, susijusį su pagrindiniu svetainės turiniu. Jis turi būti įdėtas į panašų lygį DOM hierarchijoje kaip role = "main". Susiję įrašai, populiarūs straipsniai, naujausi komentarai yra tipiniai autonominio papildomo turinio pavyzdžiai.

    vaidmenį =”contentinfo”

    „Contentinfo“ vaidmuo informuoja naudotojų agentus apie regiono buvimą, kuriame galima rasti įvairių rūšių metaduomenis, pvz., Autorių teisių informaciją, teisinius ir privatumo pareiškimus. Jis paprastai naudojamas svetainės poraštėms.

    vaidmenį =”forma”

    Formos orientyrų vaidmuo rodo formą, laukiančią vartotojo įvesties. Ieškokite paieškos formų role = "search" vietoj to.

    vaidmenį =”Paieška”

    Paieškos funkcija yra gana savaime suprantama, ji skirta padėti pagalbinėms technologijoms nustatyti svetainės paieškos funkcijas.

    vaidmenį =”taikymo”

    Galite naudoti programos orientyrų vaidmenį regione, kurį norite paskelbti kaip žiniatinklio programą, o ne žiniatinklio dokumentą. Nerekomenduojama jį įtraukti į tradicines svetaines, nes tai padeda pagalbinėms technologijoms pereiti nuo įprastinio naršymo režimo į programų naršymo režimą. Šį orientyrą turėtumėte naudoti tik labai atsargiai.

    IMAGE: „Sky.com“ prieinamumo ištekliai

    Valstybės ir ypatybės

    Nors vaidmenys leidžia apibrėžti HTML žymų reikšmę, būsenos ir savybės suteikia vartotojui papildomos informacijos apie tai, kaip bendrauti su jais. Tiek valstybės, tiek savybės pažymėtos aria-prefixed attributes su sintakse arija- *.

    Labiausiai žinomi ARIA atributai tikriausiai yra arija reikalaujama nuosavybė ir arija patikrinta būsena. Aria reikalingas yra nuosavybė nes jis yra nuolatinis įvesties elemento bruožas (t. y. vartotojas turi jį užpildyti), o aria-check yra a būsena dėl to, kad dėl vartotojo sąveikos langelis dažnai gali pakeisti jo vertę.

    „Aria“ prefiksuotų atributų sintaksė

    Valstybės ir savybės kartais pasižymi simbolinėmis reikšmėmis (ribotas iš anksto nustatytų verčių skaičius), pavyzdžiui, aria-live nuosavybė gali turėti 3 skirtingas vertes: išjungtas, mandagus, įsitikinęs. Sintaksė šiame pavyzdyje atrodo taip:

    .

    Kitais atvejais aria-prefiksuotų atributų reikšmes reprezentuoja stygos, numerius, sveikieji skaičiai, ID nuorodos arba tiesa / klaidinga vertės.

    Kaip naudotis ARIA valstybėmis ir ypatybėmis

    1. Sukurkite ryšius tarp elementų su ryšių atributais

    Naudokite ryšių atributus, kad nurodytumėte ryšius tarp skirtingų jūsų svetainės elementų, kurių negalima nustatyti kitaip iš dokumento struktūros. Pavyzdžiui, aria-labelledby ypatybė identifikuoja elementą, kuris žymi dabartinį elementą.

    aria-labelledby - tarp daugelio kitų dalykų - gali susieti antraštes į ARIA orientyrų regionus taip:

    Tai yra antraštė

    Pagrindinis turinys…

    2. Sinchronizuokite valstybes ir ypatybes su elemento gyvavimo ciklu

    Nustatę ARIA orientacinį vaidmenį suvokiamoje srityje HTML puslapyje, jis gali daug padėti pagalbinėms technologijoms, jei pakeisite ARIA prefiksuotas būsenas ir vaikų elementų savybes pagal ekrane vykstančius įvykius. Tai gali būti labai svarbu, kai naudotojai turi bendrauti su svetaine, pavyzdžiui, užpildyti formą arba paleisti paieškos užklausą.

    3. Suderinkite vaizdines ir prieinamas sąsajas

    Bendra prieinamumo projektavimo taisyklė yra ta, kad dabartinė vartotojo sąsajos būsena visada turi būti suvokiama pagalbinėmis technologijomis. Pvz., Jei vartotojas pasirenka pasirinktą formą, jis taip pat turi būti pasirinktas pagalbinėms technologijoms. Tai galima lengvai pasiekti naudojant arijos pasirinktą būseną su tokia sintakse: .

    W3C WAI-ARIA autorizavimo praktikos gairės gali suteikti jums daug kitų puikių idėjų, kaip tinkamai suderinti savo svetainės vaizdines ir prieinamas sąsajas.

    Nenaudokite ARIA

    ARIA vaidmenų ir atributų naudojimas kartais gali būti nereikalingas. Kai naudojate semantines HTML5 žymes, pvz arba

    , modernios žiniatinklio naršyklės pagal nutylėjimą prideda atitinkamą ARIA semantiką. Šiuo atveju nėra prasmės atskirai nustatyti ARIA orientyrų vaidmenis.

    Pavyzdžiui, nereikia naudoti forma svarbiausias vaidmuo apibrėžiant

    elementas. Vietoj
    sintaksė yra visiškai pakankama naudoti tik
    . Be to, nereikia naudoti HTML vietinių atributų kartu su atitinkamu ARIA atributu.

    Taigi, jei jau pridėjote paslėpta HTML atributas į formos įvestį, nereikia pridėti arija paslėpta naršyklėje jis yra numatytasis.

    © Savtec
    Naudinga informacija ir interneto svetainių kūrimo patarimai. Programavimas, interneto dizainas, CSS, HTML, JAVASCRIPT. Konfigūruokite ir iš naujo įdiekite „Windows“. Svetainių ir programų kūrimas nuo nulio.