Home-theater-designers
Web-suunnittelijat, jotka ovat uusia HTML:n käytössä, voivat törmätä joukon tuntemattomia määritteitä. Nämä attribuutit näkyvät kaikkialla verkossa, ja niiden etuliitteenä on sana ARIA, mutta niiden tarkoitus voi olla mysteeri uusille käyttäjille.
ARIA-attribuutit ovat tärkeitä verkkosivustojesi esteettömyyden kannalta. Ne kuvaavat sekä tietyn elementin sisältöä että tapaa, jolla elementti liittyy sivuun tai muihin sitä ympäröiviin elementteihin.
PÄIVÄN VIDEON TEKEMINEN JATKA SISÄLLÖLLÄ VIERÄTÄ
Näiden erittäin tärkeiden määritteiden lisääminen sivustoosi auttaa varmistamaan, että kaikki vierailijat saavat saman kokemuksen heidän käyttämänsä tekniikan mukaan.
Mitä ovat ARIA-attribuutit?
ARIA on lyhenne sanoista Accessible Rich Internet Applications. Nykyaikaisessa HTML:ssä, erityisesti JavaScript-sovelluksissa, ei aina ole syntaksin perusteella heti selvää, mikä rooli yksittäisillä elementeillä on.
Roolien erottamisen vaikeus voi olla ongelma, kun käyttäjät tarkastelevat sivustoa esteettömyystyökaluilla, kuten näytönlukuohjelmilla. Asianmukaisen semanttisen HTML:n puuttuessa loppukäyttäjäsi ei välttämättä pysty navigoimaan sivustolla esteettömyystyökaluja käyttäessään.
Vaikka ensisijainen tapa ratkaista tämä ongelma on Käytä oikeita semanttisia elementtejä HTML5:ssä , tämä ei aina ole käytännöllistä tai mahdollista. Tässä HTML-elementtien ARIA-attribuutit astuvat sisään. Nämä attribuutit auttavat määrittelemään elementin roolin ja attribuutit tavalla, jota esteettömyystyökalut pystyvät käsittelemään.
Miksi ARIA-attribuutit ovat tärkeitä?
Lyhyesti sanottuna ARIA-attribuutit antavat vammaisille käyttäjille mahdollisuuden käyttää verkkosivustoasi. Nämä roolit ja attribuutit määrittävät lisätietoa sivustosi eri elementeistä, jotka eivät muuten olisi helposti saatavilla.
Voit määrittää laajan valikoiman ARIA-attribuutteja. Sinun tulee käyttää niitä missä tahansa, jossa tarvitaan lisäkontekstia, jotta asiakirjasta tulee mielekäs ei-visuaalisella tavalla.
Harkitse esimerkiksi sivustoa, jonka päänavigointi koostuu a Voit käyttää ARIA-attribuutteja auttamaan käyttäjiä navigoinnissa. Rooli- ja aria-label-attribuuttien lisääminen Vaikka useimmissa tapauksissa sinun pitäisi käyttää oikeita elementtejä, tämä ei välttämättä ole aina mahdollista tekemäsi rajoitusten puitteissa. Jos sivustosi vaatii esimerkiksi edistymispalkin käyttöä, mutta haluat mallin, jota vakiopalkki ei salli. Tässä skenaariossa voit luoda mukautetun joukon elementtejä näyttämään edistymispalkin. Näytönlukijalle nämä elementit näyttävät kuitenkin sekavalta sotkulta; se ei pysty tarjoamaan hyödyllistä tietoa sivustosi vierailijoille. Asettamalla kääreen rooliksi edistymispalkki , ja lisäämällä aria-valuenow , aria-valumiin , ja aria-valuemax määritteet kääreeseen, voit silti ilmoittaa edistymisestä. Nykyaikana esteettömien verkkosivustojen rakentaminen on tärkeämpää kuin koskaan. On useita React-komponenttikirjastoja, jotka on rakennettu esteettömyyttä ajatellen . Sen lisäksi, että esteetön verkkosivusto voi auttaa haun sijoittumisessa useissa suurissa hakukoneissa, se varmistaa, että et leikkaa mahdollisia käyttäjiä pois käyttäjäkunnastasi. Sopivien ARIA-attribuuttien lisääminen sivustoosi auttaa varmistamaan, että esität tiedot kaikille käyttäjille. Lopputuloksena on sivusto, joka toivottaa tervetulleeksi kaikki yleisöt ja tarjoaa mahdollisimman lähelle samaa kokemusta kaikille. Sivustollasi on paljon erilaisia attribuutteja, joita sinun tulisi hyödyntää. Yleensä nämä ominaisuudet jakautuvat kahteen eri luokkaan. Ensimmäinen on widget-attribuutit, jotka yleensä kuvaavat mukautettua interaktiivista elementtiä. Toinen luokka, joka sinun on oltava tietoinen, on suhdeattribuutit. Nämä ovat attribuutteja, jotka välittävät tietoa aputekniikoille siitä, kuinka tietty elementti liittyy muuhun sivustoon tai muihin elementteihin. Kun harkitaan, mitkä ARIA-attribuutit sinun tulisi sisällyttää, yksinkertainen vastaus on mahdollisimman monta. Jos käyttämäsi elementti ei kuvaa roolia, jonka elementti täyttää, sinun tulee käyttää roolimääritettä. Jos sinulla on kenttä, jossa on tunniste, siinä pitäisi olla aria-merkitty attribuutti. Niin kauan kuin käyttämäsi attribuutit ovat järkeviä, vain lisäät sivustosi käytettävyyttä lisäämällä ne. Widget-attribuutit on paljon suurempi luokka. Se sisältää suurimman osan ARIA-määritteistä, jotka sinun on lisättävä vakiosivustolle. Aiemmassa mukautetun edistymispalkin esimerkissä aria-valuenow, aria-valuemin ja aria-valuemax ovat kaikki widget-attribuutteja. Ne kuvaavat elementin tilaa tai mahdollisia tiloja, joissa ne ovat. On olemassa monia erilaisia attribuutteja, joita voit käyttää elementin tilan kuvaamiseen. Yksi yleisimmistä on aria-merkki . Tämä attribuutti lisää tunnisteen elementtiin, jolle asetat sen ja joka näkyy vain avustaville tekniikoille. Toinen yleinen ARIA-attribuuttien pari, joka kuuluu tähän luokkaan, ovat aria-piilotettu ja aria-vammainen . Ne voivat kertoa elementin nykyisestä tilasta ja siitä, pitäisikö näytönlukuohjelman lukea se käyttäjälle. Tästä on hyötyä useille eri laitteille, joissa on omat näytönlukuohjelmat. Toisin kuin widget-attribuutit, suhdeattribuutit antavat aputekniikoille viitteitä elementin suhteesta ja käytöstä muihin sitä ympäröiviin elementteihin. Yleisin näistä on roolimäärite. Rooli määrittää, mitä tarkoitusta elementti palvelee sivustossa. Jos asetat rooli omistaa navigointi , se tunnistetaan välittömästi navigointikääreeksi. Jotkut suhdeattribuutit määrittelevät, kuinka elementti liittyy muihin sitä ympäröiviin elementteihin. The aria-merkitty attribuutti esimerkiksi näyttää, mikä elementti toimii tämän elementin nimikkeenä. Tästä voi olla hyötyä käytettäessä asetteluja, jotka ovat visuaalisesti järkeviä, mutta joiden jälkeen asiakirjakulussa on tarrat tiettyjä lomakeohjausobjekteja varten. Vaikka suhdemääritteitä on vähemmän kuin widget-attribuutteja, näillä määritteillä on usein suurempi merkitys. Ne voivat usein kuvata asiakirjan kulkua ja hallintaa sekä antaa lisätietoja tavasta, jolla käyttäjä voi navigoida sivustollasi. Nämä määritteet ovat erityisen tärkeitä, kun suunnittelet lomakkeita ja navigointikohteita sivustossasi. ARIA-attribuutit palvelevat yksinkertaista ja tarpeellista tarkoitusta verkkosivustollasi. Niiden tarkoituksena on varmistaa, että sivusto on kaikkien käyttäjien käytettävissä esteettömyysohjelmiston käytöstä riippumatta. Vammaisille käyttäjille näiden määritteiden käyttäminen sivustossasi voi tehdä sivustosta käyttökelpoisen. Suositeltava tapa työskennellä avustavan tekniikan kanssa on käyttää asianmukaisia semanttisia elementtejä. Kun tämä ei kuitenkaan ole mahdollista, ARIA-attribuutit mahdollistavat työskentelyn vapaasti ilman, että käyttäjäsi menettävät sisältöä. elementti kääritty a
<div class="nav">
<ul>
<li>Home</li>
<li>Shop</li>
<li>About</li>
</ul>
</div> -elementin avulla näytönlukija ja aputekniikat voivat tietää, missä valikosi on.
<div class="nav">
<ul role="navigation" aria-label="Main">
<li>Home</li>
<li>Shop</li>
<li>About</li>
</ul>
</div> Mitä ARIA-attribuutteja minun pitäisi käyttää?
Widgetin attribuutit
Suhteen ominaisuudet
miten saada kuvat yksityisiksi facebookissa
Miksi on niin tärkeää sisällyttää ARIA-attribuutit HTML-koodiisi