Mik azok az Aria attribútumok a HTML-ben, és miért fontosak?

Azok a webtervezők, akik még nem ismerik a HTML-t, ismeretlen tulajdonságokkal találkozhatnak. Az ARIA szó előtagjaként ezek az attribútumok az egész weben megjelennek, de céljuk rejtély lehet az új felhasználók számára.

Az ARIA attribútumok fontos célt szolgálnak a webhelyek hozzáférhetőségében. Leírják az adott elem tartalmát és azt a módot, ahogyan egy elem kapcsolódik egy oldalhoz vagy a körülötte lévő többi elemhez.

Ha ezeket a rendkívül fontos attribútumokat hozzáadja webhelyéhez, akkor minden látogató ugyanazt az élményt kapja, függetlenül az általa használt technológiától.

Mik azok az ARIA attribútumok?

Az ARIA az Accessible Rich Internet Applications rövidítése. A modern HTML-ben, különösen a JavaScript-ben gazdag alkalmazásokban, a szintaxis alapján nem mindig egyértelmű, hogy az egyes elemek milyen szerepet töltenek be.

A szerepek megkülönböztetésének nehézsége problémát jelenthet, ha a felhasználók kisegítő eszközök, például képernyőolvasók segítségével tekintik meg a webhelyet. A megfelelő szemantikus HTML hiányában előfordulhat, hogy a végfelhasználó nem tud navigálni a webhelyen, amikor kisegítő eszközöket használ.

Míg a probléma megoldásának előnyben részesített módja az, hogy használja a megfelelő szemantikai elemeket a HTML5-ben, ez nem mindig praktikus vagy lehetséges. Itt lépnek be az ARIA attribútumok a HTML elemeken. Ezek az attribútumok segítenek meghatározni az elem szerepét és attribútumait oly módon, hogy azt a kisegítő eszközök képesek legyenek feldolgozni.

Miért fontosak az ARIA attribútumok?

Röviden, az ARIA attribútumok lehetővé teszik a fogyatékkal élő felhasználók számára, hogy használják webhelyét. Ezek a szerepkörök és attribútumok további információkat határoznak meg a webhely különböző elemeiről, amelyek egyébként nem lennének könnyen elérhetők.

Az ARIA-attribútumok széles választéka hozzárendelhető. Használja azokat mindenhol, ahol további kontextusra van szükség ahhoz, hogy a dokumentum nem vizuális módon értelmezhető legyen.

Vegyünk például egy webhelyet, amelynek fő navigációs eleme a elembe csomagolva a elem, nem pedig a elem:

<divosztály="nav">
<ul>
<li>itthonli>
<li>Üzletli>
<li>Ról rőlli>
ul>
div>

ARIA-attribútumokkal segítheti a felhasználókat a navigációban. A szerep és ária-címke attribútumok hozzáadása a elem lehetővé teszi a képernyőolvasó és a kisegítő technológiák számára, hogy tudják, hol található a menü.

<divosztály="nav">
<ulszerep="navigáció"ária-címke="Fő">
<li>itthonli>
<li>Üzletli>
<li>Ról rőlli>
ul>
div>

Míg a legtöbb esetben a megfelelő elemeket kell használnia, ez nem mindig lehetséges a tevékenység korlátai között. Ha például webhelye megköveteli a folyamatjelző sáv használatát, de olyan kialakítást szeretne, amelyet a szabványos sáv nem engedélyez.

Ebben a forgatókönyvben egyéni elemkészletet hozhat létre a folyamatjelző sáv megjelenítéséhez. A képernyőolvasó számára azonban ezek az elemek összevissza káosznak tűnnek; nem tud hasznos információkat szolgáltatni webhelye látogatóinak.

A burkoló szerepének beállításával fejlődésmutató, és hozzáadjuk aria-valuenow, ária-valuemin, és aria-valuemax attribútumokat a burkolóhoz, továbbra is jelezheti az előrehaladást.

A modern korban az akadálymentes weboldalak készítése fontosabb, mint valaha. Vannak Számos React komponenskönyvtár, amely az akadálymentesítést szem előtt tartva készült.

Egy hozzáférhető webhely nemcsak a keresési rangsorolást segítheti több nagy keresőmotornál, hanem azt is biztosítja, hogy ne szakítsa el a felhasználók potenciális csoportját felhasználói bázisából.

Ha hozzáadja a megfelelő ARIA-attribútumokat webhelyéhez, akkor az információkat minden felhasználó számára bemutatja. A végeredmény egy olyan oldal lesz, amely minden közönséget szívesen lát, és mindenki számára a lehető legközelebbi élményt nyújtja.

Melyik ARIA-attribútumokat használjam?

Rengeteg különféle attribútum van, amelyeket érdemes kihasználnia webhelyén. Általában ezek a tulajdonságok két különböző kategóriába sorolhatók. Az első a widget attribútumok, amelyek általában egy egyéni interaktív elemet írnak le.

A másik kategória, amellyel tisztában kell lennie, a kapcsolati attribútumok. Ezek olyan attribútumok, amelyek információt továbbítanak a kisegítő technológiáknak arról, hogy egy adott elem hogyan viszonyul a webhely többi részéhez vagy más elemekhez.

Ha meg kell fontolnia, hogy mely ARIA-attribútumokat vegye fel, az egyszerű válasz a lehető legtöbb. Bárhol, ahol a használt elem nem írja le azt a szerepet, amelyet az elem betölt, használja a role attribútumot.

Ha van egy mezője címkével, akkor a mezőben szerepelnie kell a ária-címkézett tulajdonság. Mindaddig, amíg a használt attribútumoknak van értelme, hozzáadásával csak könnyebben teszi elérhetővé webhelyét.

A widget attribútumok a sokkal nagyobb kategória. Ez tartalmazza az ARIA attribútumok többségét, amelyeket hozzá kell adnia egy szabványos webhelyhez. A testreszabott folyamatjelző korábbi példájában az aria-valuenow, aria-valuemin és aria-valuemax mind widget-attribútumok. Leírják az elem állapotát vagy lehetséges állapotait.

Rengeteg különböző attribútum létezik, amelyek segítségével leírhatja egy elem állapotát. Az egyik leggyakoribb az ária-címke. Ez az attribútum egy címkét alkalmaz az elemre, amelyre elhelyezi, és amely csak a kisegítő technológiák számára látható.

Egy másik gyakori ARIA-attribútumpár, amely ebbe a kategóriába tartozik: ária-rejtett és ária-fogyatékos. Ezek közölhetik egy elem aktuális állapotát, és azt, hogy a képernyőolvasónak fel kell-e olvasnia a felhasználónak. Ez számos, saját képernyőolvasóval rendelkező eszköz esetén hasznos.

Kapcsolati tulajdonságok

Ellentétben a widget attribútumokkal, a kapcsolatattribútumok a kisegítő technológiáknak adnak jelzéseket egy elem kapcsolatáról és használatáról a körülötte lévő többi elemhez. Ezek közül a leggyakoribb a szerep attribútum. A szerepkör határozza meg, hogy egy elem milyen célt szolgál a webhelyen belül.

Ha beállítja a szerep tulajdonít neki navigáció, azonnal navigációs burkolóként azonosítja.

Egyes kapcsolatattribútumok meghatározzák, hogy egy elem hogyan viszonyul a körülötte lévő többi elemhez. A ária-címkézett Az attribútum például megmutatja, hogy melyik elem működik ennek az elemnek a címkéjeként. Ez akkor lehet hasznos, ha olyan elrendezéseket használ, amelyek vizuálisan értelmesek, de a dokumentumfolyamatban utánuk vannak címkék az egyes űrlapvezérlőkhöz.

Bár kevesebb kapcsolatattribútum van, mint a widget-attribútum, ezek az attribútumok gyakran nagyobb jelentőséggel bírnak. Gyakran leírhatják egy dokumentum folyamatát és vezérlését, és további részleteket adhatnak meg arról, hogy a felhasználó hogyan navigálhat a webhelyen.

Ezek az attribútumok különösen fontosak, amikor űrlapokat és navigációs elemeket tervez a webhelyen.

Miért olyan fontos az ARIA-attribútumok szerepeltetése a HTML-ben?

Az ARIA attribútumok egyszerű és szükséges célt szolgálnak a webhelyén. Arra szolgálnak, hogy az oldal minden felhasználó számára elérhető legyen, függetlenül a kisegítő szoftver használatától. A fogyatékkal élő felhasználók számára ezek az attribútumok a webhelyen használhatóvá tehetik a webhelyet.

A kisegítő technológiával való munkavégzés előnyben részesített módszere a megfelelő szemantikai elemek használata. Ha azonban ez nem lehetséges, az ARIA-attribútumok lehetővé teszik a szabad munkát anélkül, hogy a felhasználók veszítenének a tartalomból.