nl.hideout-lastation.com
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 hulptechnologieën vertrouwen, kunnen genieten van dynamische webinhoud en moderne web-apps. De toegankelijkheidswebnormen van W3C zijn erop gericht om het web te vullen met Accessible Rich Internet Applications (ARIA) die gebruikers met een handicap op efficiënte wijze 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 platformonafhankelijke 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 belemmeren om te begrijpen wat er op het scherm gebeurt en hun opties te verkennen.
Dit is het punt waarop ARIA ons helpt, omdat het het doel van verschillende elementen met behulp van landmarkrollen definieert en hun aard beschrijft met aria-prefixen . Aria-prefixed attributen hebben twee typen: eigenschappen die kenmerken 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.
Oriëntatiepuntenrollen
Oriëntatiepuntrollen zijn de bekendste vormen van ARIA's rollenmodel (andere zijn de abstracte rollen, de widget-rollen en de rollen van de documentstructuur). Met oriëntatiepuntrollen kunnen ontwikkelaars grote waarneembare regio's op de webpagina identificeren die hulptechnologiegebruikers mogelijk snel willen openen.
Er zijn acht typen ARIA-landmarkrollen en deze moeten worden toegevoegd als attributen voor de gerelateerde HTML-tags.
role =”banner”
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 =”main”
De belangrijkste oriëntatiepuntrol is gerelateerd aan de hoofdinhoud van het document. Het kan niet meer dan eens op een HTML-pagina worden gebruikt. Het volgt meestal de
role =”navigation”
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.
role =”complementair”
De complementaire oriëntatiepuntrol beschrijft aanvullende inhoud die gerelateerd is aan de hoofdinhoud van de site. Het moet op hetzelfde niveau in de DOM-hiërarchie worden geplaatst als role="main" . Gerelateerde berichten, populaire artikelen en laatste opmerkingen zijn typische voorbeelden van autonome aanvullende inhoud.
role =”contentinfo”
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.
role =”vorm”
De vormmarkeringsrol geeft een formulier aan dat wacht op gebruikersinvoer. Voor zoekformulieren moet u in plaats daarvan role="search" gebruiken.
role =”zoeken”
De zoekfunctie spreekt voor zich, het is bedoeld om ondersteunende technologieën te helpen bij het identificeren van de zoekfunctionaliteit van een website.
role =”application”
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 modus voor het browsen van apps. Gebruik deze belangrijke rol alleen met de grootste zorg.
Staten en eigenschappen Terwijl rollen u in staat stellen de betekenis van HTML-tags te definiëren, bieden statussen en eigenschappen de gebruiker extra informatie over hoe u ermee kunt omgaan. Beide statussen 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 eigenschap, omdat het een permanent kenmerk is van een invoerelement (dat wil zeggen dat de gebruiker het moet invullen), terwijl aria-gecontroleerd een staat is, omdat een checkbox vaak de waarde ervan kan veranderen als gevolg van gebruikersinteractie.
De syntaxis van Aria-prefixed attributen
Staten en eigenschappen nemen soms tokenwaarden (een beperkte set vooraf gedefinieerde waarden), de aria-live-eigenschap kan bijvoorbeeld 3 verschillende waarden hebben: uit, beleefd, assertief . De syntaxis in dit voorbeeld ziet er als volgt uit:
In andere gevallen worden de waarden van aria-prefixed-attributen weergegeven door tekenreeksen, getallen, gehele getallen, ID-verwijzingen of true / false- waarden.
Hoe gebruik te maken van ARIA-staten en -eigenschappen
1. Bouw relaties op tussen elementen met relatie-eigenschappen
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. De eigenschap aria-labelledby identificeert bijvoorbeeld het element dat het huidige element aria-labelledby .
aria-labelledby - naast vele andere dingen - kan koppen binden aan ARIA-landmarkregio's op de volgende manier:
Dit is een rubriek
Belangrijkste inhoud...
2. Synchroniseer staten en eigenschappen met de levenscyclus van het element
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.
3. Match de visuele en toegankelijke interfaces
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.
Gebruik ARIA niet te veel
Het gebruik van ARIA-rollen en -attributen kan soms overbodig zijn. Wanneer u semantische tags van HTML5 gebruikt zoals of
Het is bijvoorbeeld niet nodig om de vormmarkeringsrol te gebruiken om 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.Dus als u het verborgen HTML-kenmerk al hebt toegevoegd aan een formulierinvoer, hoeft u de aria-verborgen status niet toe te voegen, omdat de browser deze standaard bevat.
15 nuttige slappe tips die u moet weten
De eenvoud en veelzijdigheid van Slack maakten het snel tot een van de krachtigste productiviteitstools van onze tijd, waarop veel teams vertrouwen in hun dagelijkse communicatie . Ondanks de ongecompliceerde gebruikersinterface kunnen we nog steeds enkele van de nuttige en zelfs eigenzinnige instellingen missen, tenminste als we niet naar de juiste plaatsen kijken
Eenvoudige en prachtige Android Wear-wijzerplaten
Met de release van de eerste Android Wear-horloges zijn veel ontwikkelaars begonnen met het uitbrengen van apps die werken met de wearable. Naast apps die verschillende sets functionaliteit aan het apparaat bieden, hebben ontwikkelaars horloge-gezichten vrijgegeven waarmee gebruikers het uiterlijk van hun wearable kunnen aanpassen
