Homepage » Coding » Nézd meg az ARIA webes szabványait és HTML-alkalmazásokhoz való hozzáférhetőségét

    Nézd meg az ARIA webes szabványait és HTML-alkalmazásokhoz való hozzáférhetőségét

    A valóban nyitott és befogadó webes technológiák olyan technológiákat igényelnek, amelyek lehetővé teszik a fogyatékkal élő felhasználók számára a segítő technológiákra támaszkodó dinamikus webtartalmat és modern webes alkalmazásokat. A W3C hozzáférhetőségi szabványai célja, hogy feltöltsék a hozzáférhető gazdag internetes alkalmazásokkal (ARIA) rendelkező webet, amelyet a fogyatékkal élő felhasználók hatékonyan használhatnak.

    Az ARIA a Web Accessibility Intitiative (WAI) által közzétett számos akadálymentesítési szabvány és irányelv. További jelölést biztosít, amely könnyen beilleszthető a HTML dokumentumokba. A WAI-ARIA egy olyan platformközi megoldás, amely a nyílt webes platformra irányul, így nem csak a webhelyekről, hanem a játékokról, a digitális szórakoztatásról, az egészségügyről, a mobilról és más alkalmazásokról is gondolkodhat.

    Ebben a bejegyzésben megvizsgáljuk, hogyan lehet hozzáadni a HTML dokumentumokhoz való hozzáférést a WAI-ARIA szabványok segítségével.

    Az ARIA keretrendszer

    A HTML-szintaxis nem mindig teszi lehetővé a fejlesztők számára, hogy megfelelően elemezzék az elemeket, azonosítsák szerepüket és meghatározzák a közöttük lévő kapcsolatokat. Bár ez ritkán jelent problémát azoknak a látogatóknak, akik az érzékeiket teljes mértékben birtokolják, akadályozhatja a segítő technológiai felhasználókat abban, hogy megértsék, mi történik a képernyőn, és feltárja a lehetőségeket.

    Ez az a pont, ahol az ARIA segítséget nyújt, mivel lehetővé teszi a különböző elemek céljának meghatározását fontos szerepek, és írja le a természetüket aria-prefixált attribútumok. Az Aria-előtaggal rendelkező attribútumoknak két típusa van: tulajdonságok amelyek olyan jellemzőket írnak le, amelyek kevésbé valószínűek, hogy az oldal életciklusa alatt változik, és Államok amelyek a felhasználók interakciója miatt gyakran változó információkat szolgáltatnak.

    Iránypont szerepek

    Iránypont szerepek az ARIA szerepmodelljének legismertebb formái (mások az absztrakt szerepek, a Widget-szerepek és a dokumentumstruktúrák szerepei). A tájékozódási szerepek lehetővé teszik a fejlesztők számára a nagyok azonosítását észlelhető régiók a weblapon, ahol a segítő technológiák használói gyorsan elérhetik.

    8 típusú ARIA iránypont szerepe van, és hozzá kell adni őket a kapcsolódó HTML címkék attribútumaihoz.

    role =”transzparens”

    A banner szerepét elsősorban a teljes webhelyhez kapcsolódó tartalomra szánják, nem csak az egyes oldalakra. Általában hozzáadódik attribútumként a webhely fő fejlécéhez a logó és más fontos, webhelyre kiterjedő információk számára. Fontos, hogy a banner szerepét csak egyszer használhassa bármely HTML dokumentumban vagy alkalmazásban.

    role =”fő-”

    A fő iránypont szerepe a dokumentum fő tartalmához kapcsolódik. Nem használható egyszerre több HTML-oldalon. Általában az

    szintaxis, vagy a HTML5-ben annál inkább szemantikus
    . Az utóbbit a W3C specifikációhoz adtuk, a térkép feltérképezése céljából fő- ARIA mérföldkő szerepe egy szemantikus HTML elemnek.

    role =”navigáció”

    A navigációs szerepkör arra szolgál, hogy jelezze egy olyan területet, amely navigációs elemeket tartalmaz, mint például a webhelyen található hivatkozások és listák.

    role =”kiegészítő”

    A kiegészítő tájékozódási szerepkör a tartalom fő tartalmához kapcsolódó további tartalmat ír le. A DOM hierarchiában hasonló szintre kell helyezni, mint a role = "fő". Kapcsolódó hozzászólások, népszerű cikkek, legfrissebb megjegyzések az autonóm kiegészítő tartalom tipikus példái.

    role =”contentinfo”

    A contentinfo szerep tájékoztatja a felhasználói ügynököket arról, hogy létezik-e olyan régió, ahol különböző típusú metaadatok, például szerzői jogi információk, jogi és adatvédelmi nyilatkozatok találhatók. Ezt általában egy webhely láblécéhez használják.

    role =”forma”

    Az űrlap tájékozódási szerepe a felhasználói bemenetre váró űrlapot jelzi. A keresési űrlapok esetében használja role = "keresés" helyette.

    role =”keresés”

    A keresési szerep eléggé magyarázó, segíti a segítő technológiákat, hogy azonosítsa a webhely keresési funkcióit.

    role =”Alkalmazás”

    Az alkalmazás tájékozódási szerepét egy olyan régió esetében használhatja, amelyet webes alkalmazásként kíván webes alkalmazásként bejelenteni. Nem ajánlott, hogy a hagyományos webhelyekbe helyezze azt, mivel segíti a segítő technológiákat a normál böngészési módról az alkalmazás böngészési módra váltására. Ezt a tájékozódási szerepet csak óvatosan használja.

    KÉP: Sky.com akadálymentesítési források

    Államok és Tulajdonságok

    Míg a szerepek lehetővé teszik, hogy meghatározza a HTML-címkék jelentését, az állapotok és a tulajdonságok a felhasználó számára további információkat nyújtanak arról, hogyan kell velük együttműködni. Mind az állapotok, mind a tulajdonságok megjelennek aria-prefixált attribútumok a szintaxissal ária-*.

    A legismertebb ARIA attribútumok valószínűleg az aria-szükséges tulajdonság és az aria-ellenőrzött állapot. Aria szükséges a ingatlan mert egy bemeneti elem állandó jellemzője (vagyis a felhasználónak ki kell töltenie), míg az aria-ellenőrzött a állapot mert egy jelölőnégyzet gyakran megváltoztathatja annak értékét a felhasználói interakció miatt.

    Az Aria-előtaggal ellátott attribútumok szintaxisa

    Az államok és a tulajdonságok néha token értékeket (korlátozott számú előre meghatározott értéket) vesznek fel, például az aria-élő tulajdonságnak 3 különböző értéke lehet: ki, udvarias, határozott. A példában szereplő szintaxis így néz ki:

    .

    Más esetekben az aria-prefixált attribútumok értékeit képviseli húrok, szám, egészek, ID hivatkozások vagy igaz hamis értékeket.

    Az ARIA államok és tulajdonságok használata

    1. Kapcsolat létrehozása az elemek között a kapcsolat attribútumokkal

    Használja a kapcsolat attribútumokat, hogy jelezze a webhely különböző elemei közötti kapcsolatokat, amelyeket a dokumentumszerkezet más módon nem határozhat meg. Például a aria-labelledby tulajdonság azonosítja az elemet, amely az aktuális elemet címkézi.

    aria-labelledby - sok más dolog között - kötheti a fejezeteket az ARIA tájékozódási régióira a következő módon:

    Ez egy fejléc

    Központi téma…

    2. Szinkronizálja az államokat és a tulajdonságokat az elem életciklusával

    Miután beállította az ARIA iránypont szerepét egy érzékelhető területre a HTML oldalon, sokat segíthet a segítő technológiákban, ha megváltoztatja a gyermekelemek ARIA előtagállapotát és tulajdonságait a képernyőn zajló eseményeknek megfelelően. Ez kulcsfontosságú lehet abban az esetben, ha a felhasználóknak együtt kell működniük a webhelypel, például kitölteni egy űrlapot vagy futtatni kell a keresési lekérdezést.

    3. Egyeztesse a vizuális és a hozzáférhető interfészeket

    A hozzáférhetőség kialakításának általános szabálya, hogy a felhasználói felület jelenlegi állapotát mindig a segítő technológiáknak kell érzékelniük. Például, ha a felhasználó egy űrlapot választ ki, a támogató technológiák számára is ki kell választania. Ez könnyen megvalósítható az aria által kiválasztott állapot felhasználásával a következő szintaxissal: .

    A W3C WAI-ARIA Authoring Practices útmutatója sok más nagyszerű ötletet adhat arról, hogyan lehet megfelelően összehangolni webhelye vizuális és hozzáférhető felületét.

    Ne használja túl az ARIA-t

    Az ARIA szerepek és attribútumok használata néha felesleges lehet. Amikor HTML5 szemantikus címkéket használ, például vagy

    , A modern webböngészők alapértelmezés szerint hozzáadják a megfelelő ARIA szemantikát. Ebben az esetben nincs értelme külön-külön beállítani az ARIA iránypont szerepét.

    Például nincs szükség a forma meghatározó szerepe a

    elem. Ahelyett, hogy
    a szintaxis tökéletesen elegendő ahhoz, hogy az igazságot használja
    . Szükségtelen a HTML natív tulajdonságainak használata a megfelelő ARIA attribútummal együtt.

    Tehát ha már hozzáadta a rejtett HTML-attribútum egy formanyomtatványhoz, nincs szükség hozzáadni a aria rejtett állapotban, mivel a böngésző alapértelmezés szerint tartalmazza.

    © Savtec
    Hasznos információk és webfejlesztési tippek. Programozás, webdesign, CSS, HTML, JAVASCRIPT. Konfigurálja és telepítse újra a WINDOWS szoftvert. Webhelyek és alkalmazások létrehozása a semmiből.