Een kijkje in ARIA-webstandaarden en toegankelijkheid van HTML-apps
Een echt open en inclusief web heeft technologieën nodig waarmee gehandicapte gebruikers die op ondersteunende technologieën vertrouwen, kunnen genieten van dynamische webinhoud en moderne web-apps. W3C's webrichtlijnen voor toegankelijkheid beogen het web te vullen met Accessible Rich Internet Applications (ARIA) die gebruikers met een handicap efficiënt kunnen gebruiken.
ARIA is een van de vele toegankelijkheidsnormen en richtlijnen die zijn gepubliceerd door de Web Accessibility Intitiative (WAI). Het biedt een extra markup die eenvoudig kan worden ingevoegd in HTML-documenten. WAI-ARIA is een cross-platform oplossing voor meerdere apparaten gericht op het Open Web Platform, dus denk niet alleen aan websites, maar ook aan games, digitaal entertainment, gezondheidszorg, mobiele apparaten en andere soorten apps.
In deze post zullen we bekijken hoe u toegankelijkheid van uw HTML-documenten kunt toevoegen met behulp van WAI-ARIA-standaarden.
Het ARIA-raamwerk
De syntaxis van HTML staat ontwikkelaars niet altijd toe om elementen correct te beschrijven, hun rollen te identificeren en de onderlinge relaties te specificeren. Hoewel dat zelden een probleem is voor bezoekers die volledig in het bezit zijn van hun zintuigen, kan het gebruikers van ondersteunende technologie verhinderen om te begrijpen wat er op het scherm gebeurt en hun opties te verkennen..
Dit is het punt waarop ARIA ons helpt, omdat het mogelijk maakt om het doel van verschillende elementen te definiëren met behulp van historische rollen, en beschrijf hun aard met aria-prefixed attributen. Aria-prefixed-kenmerken hebben twee typen: eigenschappen die functies beschrijven die minder snel zullen veranderen gedurende de levenscyclus van de pagina, en staten die informatie bieden over dingen die vaak veranderen als gevolg van gebruikersinteractie.
Landmark Rollen
Landmark-rollen zijn de meest bekende vormen van ARIA's rollenmodel (andere zijn de abstracte rollen, de widget-rollen en de rollen van de documentstructuur). Met landmarkrollen kunnen ontwikkelaars groot identificeren waarneembare regio's op de webpagina waarop gebruikers van hulptechnologie snel toegang willen.
Er zijn acht typen ARIA landmarkrollen en deze moeten worden toegevoegd als attributen aan de gerelateerde HTML-tags.
role =”banier”
De bannerrol is vooral bedoeld voor inhoud die betrekking heeft op de hele site, niet alleen op afzonderlijke pagina's. Het wordt meestal toegevoegd als een kenmerk aan de hoofdkop van de site voor het logo en andere belangrijke informatie voor de hele site. Het is belangrijk dat u de bannerrol slechts eenmaal gebruikt in HTML-documenten of -apps.
role =”hoofd”
De belangrijkste oriëntatiepuntrol is gerelateerd aan de hoofdinhoud van het document. Het kan niet meer dan één keer op een HTML-pagina worden gebruikt. Het volgt meestal de De navigatierol is bedoeld om te worden gebruikt om een gebied aan te geven dat navigatie-elementen bevat, zoals links en lijsten op een site. De complementaire oriëntatiepuntrol beschrijft aanvullende inhoud die gerelateerd is aan de hoofdinhoud van de site. Het moet op het vergelijkbare niveau in de DOM-hiërarchie worden geplaatst als De rol contentinfo informeert user agents over de aanwezigheid van een regio waar verschillende soorten metadata, zoals copyrightinformatie, wettelijke en privacyverklaringen kunnen worden gevonden. Het wordt meestal gebruikt voor de voettekst van een site. De vormmarkeringsrol geeft een formulier aan dat wacht op gebruikersinvoer. Voor zoekformulieren die u zou moeten gebruiken De zoekfunctie spreekt voor zich, het is bedoeld om ondersteunende technologieën te helpen bij het identificeren van de zoekfunctionaliteit van een website. U kunt de rol van toepassingsoriëntatie gebruiken voor een regio die u als een webapp wilt declareren in plaats van een webdocument. Het wordt niet aanbevolen om het op te nemen in traditionele websites, omdat het verwijst naar ondersteunende technologieën om over te schakelen van de normale browsemodus naar de bladermodus van de app. Gebruik deze belangrijke rol alleen met de grootste zorg. Terwijl rollen u in staat stellen om de betekenis van HTML-tags te definiëren, bieden statussen en eigenschappen de gebruiker extra informatie over hoe u ermee kunt omgaan. Beide toestanden en eigenschappen zijn gemarkeerd met aria-prefixed attributen met de syntaxis aria-*. De meest bekende ARIA-kenmerken zijn waarschijnlijk de aria-vereiste eigenschap en de aria-gecontroleerde staat. Aria vereist is een eigendom omdat het een permanent kenmerk is van een invoerelement (dat wil zeggen dat de gebruiker het moet invullen), terwijl aria-gecontroleerd is staat omdat een selectievakje vaak de waarde ervan wijzigt vanwege gebruikersinteractie. Staten en eigenschappen nemen soms tokenwaarden aan (een beperkte set van vooraf gedefinieerde waarden), de aria-live-eigenschap kan bijvoorbeeld 3 verschillende waarden hebben: uit, beleefd, zelfbewust. De syntaxis in dit voorbeeld ziet er als volgt uit: In andere gevallen worden de waarden van aria-prefixed attributes weergegeven door strings, getallen, integers, ID-referenties of waar onwaar waarden. Gebruik relatieattributen om relaties tussen verschillende elementen op uw site aan te duiden, die niet op een andere manier uit de documentstructuur kunnen worden bepaald. Bijvoorbeeld de Nadat u een ARIA-landmarkrol hebt ingesteld voor een waarneembaar gebied op uw HTML-pagina, kan dit veel helpen bij ondersteunende technologieën als u de ARIA-vooraf ingestelde statussen en eigenschappen van onderliggende elementen wijzigt in overeenstemming met de gebeurtenissen op het scherm. Dit kan van cruciaal belang zijn wanneer gebruikers moeten communiceren met de site, bijvoorbeeld door een formulier in te vullen of een zoekopdracht uit te voeren. De algemene vuistregel voor toegankelijkheidsontwerp is dat de huidige status van de gebruikersinterface altijd waarneembaar moet zijn door ondersteunende technologieën. Als de gebruiker bijvoorbeeld een optie in een formulier kiest, moet deze ook geselecteerd worden voor hulptechnologieën. Dit kan eenvoudig worden bereikt door de aria-geselecteerde staat te gebruiken met de volgende syntaxis: W3C's WAI-ARIA Authoring Practices-richtlijn kan u vele andere geweldige ideeën geven over hoe u de visuele en toegankelijke interfaces van uw site op de juiste manier kunt harmoniseren. Het gebruik van ARIA-rollen en -attributen kan soms overbodig zijn. Wanneer u semantische tags van HTML5 gebruikt zoals Het is bijvoorbeeld niet nodig om het te gebruiken het formulier landmark rol om het te definiëren Dus als je het al hebt toegevoegd verborgen HTML-attribuut aan een formulierinvoer, het is onnodig om het toe te voegen aria-verborgen staat, omdat de browser dit standaard bevat.. De laatste is toegevoegd aan de W3C specificaties met als doel het in kaart brengen van de hoofd ARIA-kenmerkende rol voor een semantisch HTML-element. role =”navigatie”
role =”complementair”
role = "main". Gerelateerde berichten, populaire artikelen, laatste opmerkingen zijn typische voorbeelden van autonome aanvullende inhoud.role =”contentinfo”
role =”het formulier”
role = "zoeken" in plaats daarvan.role =”zoeken”
role =”toepassing”
Staten en eigenschappen
De syntaxis van Aria-prefixed attributen
Hoe gebruik te maken van ARIA-staten en -eigenschappen
1. Bouw relaties op tussen elementen met relatie-eigenschappen
aria-labelledby eigenschap identificeert het element dat het huidige element labelt.aria-labelledby - onder vele andere dingen - kan koppen binden aan ARIA landmarkregio's op de volgende manier:Dit is een titel
Belangrijkste inhoud… 2. Synchroniseer staten en eigenschappen met de levenscyclus van het element
3. Match de visuele en de toegankelijke interfaces
.Gebruik ARIA niet te veel
of , moderne webbrowsers voegen standaard de juiste ARIA-semantiek toe. In dit geval heeft het geen zin om de ARIA landmarkrollen afzonderlijk in te stellen. element. In plaats van de syntaxis is het perfect genoeg om alleen te gebruiken . Het is ook overbodig om de native attributen van HTML samen met het juiste ARIA-attribuut te gebruiken.
