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 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. 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 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. 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 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. 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. 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 á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. 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 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. 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. Az ARIA szerepek és attribútumok használata néha felesleges lehet. Amikor HTML5 szemantikus címkéket használ, például Például nincs szükség a forma meghatározó szerepe a 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.. 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ó”
role =”kiegészítő”
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”
role =”forma”
role = "keresés"
helyette.role =”keresés”
role =”Alkalmazás”
Államok és Tulajdonságok
Az Aria-előtaggal ellátott attribútumok szintaxisa
Az ARIA államok és tulajdonságok használata
1. Kapcsolat létrehozása az elemek között a kapcsolat attribútumokkal
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
3. Egyeztesse a vizuális és a hozzáférhető interfészeket
.
Ne használja túl az ARIA-t
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.
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.