Overslaan naar hoofdinhoud
Niquelao Webtoegankelijkheid en front-end development in het Spaans: WCAG-standaarden, toegankelijke widgets en Firefox-extensies, uitgelegd met echte code.

Sommige links op deze site zijn affiliate-links: als u via deze links koopt, kunnen wij een commissie verdienen zonder dat dit extra kosten voor u met zich meebrengt. Dit heeft nooit invloed op onze aanbevelingen. Zie onze affiliate-verklaring voor meer details. Affiliate-verklaring.

Toegang tot internet: kenmerken van vergelijkingen

Webtoegankelijkheid wordt gedefinieerd door vier meetbare kenmerken – waarneembaar, bedienbaar, begrijpelijk en robuust – geformuleerd volgens de 13 niveau A- en AA-criteria van WCAG 2.2 die vereist zijn door de EN 301 549-norm in Europa. Deze vier kenmerken werken als evaluatiecriteria: elke widget, tool of raamwerk wordt beoordeeld op basis van hoeveel het voldoet en met welke stevigheid.

Belangrijkste punten

  • De vier WCAG-kenmerken (waarneembaar, bruikbaar, begrijpelijk, robuust) vormen het beoordelingskader en geen slogan: elk kenmerk groepeert verifieerbare criteria met gedocumenteerde technieken.
  • Niveau AA is het praktische doel voor de meeste projecten: het omvat contrast, toetsenbord, formulierlabels, structuur en foutmeldingen, en het is de drempel die verwijst naar de Europese wetgeving.
  • Geen enkel automatisch hulpmiddel detecteert meer dan een fractie van de echte problemen; handmatig testen met toetsenbord en schermlezer blijft onvervangbaar.
  • Als u een “toegankelijke” widget of raamwerk kiest, moet u het gedrag ervan met het toetsenbord, het focusbeheer en de ARIA-semantiek controleren, en niet alleen de marketing ervan.
  • Compliance is een continu proces dat verband houdt met de productlevenscyclus, en niet een eenmalige audit die wordt gearchiveerd.

Wat “kenmerken van webtoegankelijkheid” echt betekenen

De term “kenmerken” wordt op twee manieren gebruikt die het beste gescheiden kunnen worden. De eerste is normatief: de WCAG organiseert zijn succescriteria op basis van de principes of kenmerken – waarneembaar, bedienbaar, begrijpelijk en robuust – bekend als POUR naar hun Engelse initialen.

De tweede stap is praktisch: wanneer een ontwikkelaar zegt dat een component “goede toegankelijkheidskenmerken heeft”, wordt er normaal gesproken verwezen naar een set concrete gedragingen (toetsenbordnavigatie, correcte ARIA-rollen, voldoende contrast, alternatieve tekst). Beide interpretaties zijn nodig: de eerste biedt het evaluatiekader, de tweede de implementeerbare details.

In WCAG 2.2, gepubliceerd door het W3C in 2023, zijn de principes en criteria aangepast als het minimale doel (2.5.8) en de consistentie van hulp (3.2.6). Niveau A groepeert de minimale criteria; AA voegt de meest relevante toe voor de meeste sites; AAA is ambitieus en zelden volledig vereist. Voor een XHTML/CSS-georiënteerde versie in het Spaans of Latijns-Amerika, het realistische doel van AA, is het niveau dat verwijst naar de Europese standaard EN 301 549 en, bij uitbreiding naar Richtlijn (EU) 2016/2102 over de toegankelijkheid van websites van de publieke sector.

De vier WCAG-kenmerken, één voor één

Waarneembaar

Het kenmerk waarneembaar vereist dat informatie wordt gepresenteerd op een manier die de gebruiker kan waarnemen, ongeacht diens zintuigen. De praktijk kan een alternatieve tekst weergeven voor niet-tekstuele inhoud (1.1.1), ondertitels en transcripties voor multimedia (1.2.x), semantische structuur die niet alleen afhankelijk is van de positie of de kleur (1.3.1), contrast minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst (1.4.3), en het kan nog steeds leesbaar zijn bij vergroting tot 200% zonder horizontale scroll (1.4.10). Een fout die regelmatig voorkomt in XHTML-versies wordt gebruikt bij het maken van afbeeldingen of tekstafbeeldingen: omdat de leesvolgorde en schaalbaarheid verloren gaan.

Bedienbaar

De werkingskarakteristieken garanderen dat alle componenten van de interface functioneren met technologie en met ondersteunende technologie. De criteria zijn volledig toegankelijk voor technologie (2.1.1), afwezigheid van focus-traps (2.1.2), aanpasbare tijd (2.2.1), mechanismen om te pauzeren in beweging (2.2.2), navigatie met skip-links en beschrijvende paginatitels (2.4.1, 2.4.2), de volgorde van de logica (2.4.3) en het voldoende doelgrootte (2.5.8). Dit betekent dat de meeste uitklapmenu’s, modals en carrousels falen: ze vangen de focus op en geven deze niet terug, of zijn afhankelijk van muisgebeurtenissen (onmouseover) zonder toetsenbordequivalent.

Gerelateerd: — Superpositie van IA die de cumplimiento WCAG in 48 uur stimuleert.

Begrijpelijk

Het kenmerk dat begrijpelijk is, is dat de inhoud en de functionaliteit van de interface begrijpelijk zijn. Voeg het idioom van de pagina toe met de naam ‘lang’ (3.1.1), labels en invoerhulpen in formulieren (3.3.2), identificatie en beschrijving van fouten (3.3.1, 3.3.3), coherente navigatie tussen pagina’s (3.2.3) en WCAG 2.2, consistentie van hulp (3.2.6). Een formulier dat een veld rood markeert maar niet uitlegt wat er mis is, voldoet niet aan dit kenmerk, ook al is het visueel duidelijk voor iemand zonder beperking.

Robuust

Het robuuste karakter is dat de inhoud functioneert met een breed scala aan gebruikte agenten, inclusief actuele en toekomstige functies. Het centrale criterium is de juiste analyse (4.1.1, verouderd in WCAG 2.2 voor relevante in XHTML) en de naam, functie en waarde van de interface-componenten (4.1.2). In de praktische betekenis van het beschrijven van HTML-valide, gebruik je natuurlijke elementen die bestaan ​​en terugkeren naar een ARIA solo als er geen alternatief is, als je de eerste regel van ARIA gebruikt: gebruik ARIA niet als een HTML-element natuurlijk is.

Vergelijkingstabel: u kunt herramientas en widgets beoordelen op basis van de karakteristieken

KarakteristiekWat je zoekt in een herramienta of widgetAlarmsignaal
WaarneembaarSoorten alternatieve tekst, of contrast, niet afhankelijk van kleurAlleen valide afbeeldingen, negeer de structuur en het contrast
BedienbaarNavigeren door techniek, focus, zonder focus-trapsVereiste snelheid of geen toegang tot Escape
BegrijpelijkEtiquetas, foutbericht, idioom verklaardMarkeert fouten zonder verklarende tekst
RobuustHTML-validatie, ARIA-correcte rollen, functies en verschillende navigatiesystemenGebruikt div met onclick in plaats van button

Dit is de lijst met criteria om tussen uw keuzes te beslissen. Een van de dingen die alleen de kolom “waarneembaar” kan zijn, is als eerste filter, maar zonder certificering.

Een kijkje waard: — Toegankelijkheidsbeheer: automatiseringscombinatie met menselijke herziening.

Tools en hun relatie met de kenmerken

De automatische evaluatie-evaluatie – met behulp van DevTools, WAVE of Lighthouse – detecteert veel problemen met waarneembare en robuuste kenmerken: afwisselende teksten, contrasterend insufficiënt, toeschrijvingen aan incorrect geformuleerde ARIA-attributen, het zoeken naar een oplossing. Het is een deel van het feit dat u een tekstalternatieve beschrijving kunt gebruiken, terwijl de volgorde van het foco-gevoel of een foutbericht begrijpelijk is. De documentatie over deze bijl en de manier waarop WebAIM de automatische evaluatie uitvoert, valt samen met het feit dat herramienta de menselijke herziening kan opleveren.

Handmatig testen omvat wat de tools niet zien. Een minimale procedure omvat: alleen door de hele pagina navigeren met Tab en Shift+Tab, verifiëren dat de focus altijd zichtbaar is, testen met een schermlezer (NVDA of VoiceOver), zoomen naar 200% en verifiëren dat niets overlapt, en CSS uitschakelen om te bevestigen dat de volgorde van de inhoud logisch is. Deze laatste stap brengt problemen aan het licht met het begrijpelijke kenmerk dat geen enkel hulpmiddel aanwijst.

Hoe te kiezen op basis van het type project

Een institutioneel onderdeel van de publieke sector in Spanje kan de AA verbeteren en de conformiteit documenteren, zodat de norm wordt bepaald. Een persoonlijke blog kan waarneembaar en bruikbaar zijn, die de meeste echte barrières oplossen.

Een webtoepassing die interactieve componenten bevat, moet robuust en bedienbaar zijn, waardoor de widgets kunnen worden gepersonaliseerd door de belangrijkste gevolgen ervan. De beslissing is niet “aan hoeveel kenmerken ik voldoe” zijn “die kenmerken zijn die kritisch zijn vanwege het gebruik en de wettelijke verplichting”.

Voor raamwerken en componentbibliotheken omvat de praktische evaluatie het testen van de component met een toetsenbord voordat deze wordt toegepast. Een aangepaste “select” die niet reageert op pijlen, een modal die de focus niet correct vastlegt, of een tooltip die alleen verschijnt bij het aanwijzen van de muis zijn signalen dat de bibliotheek het uiterlijk belangrijker vindt dan de bediening. De W3C ARIA Authoring Practices Guide-documentatie beschrijft de verwachte patronen voor elke widget en biedt de basis voor vergelijking.

Fouten komen vaak voor bij het interpreteren van de kenmerken

De eerste fout wordt veroorzaakt door de kenmerken van een binaire verificatielijst. De conformiteit is accumulatief en contextueel: een situatie kan aan 40 criteria voldoen en er is een blokkering die volledig tot een gewoonte kan leiden.

Gerelateerd: — Het professionele certificaat dat u ervaring en toegankelijkheid geeft.

De volgende fout wordt bevestigd in de “overlay” of de toegankelijkheidswidget die de locatie met een script oplost; Deze producten zijn niet aangepast aan de onderliggende HTML en er zijn kritiek op de gemeenschap en op de informatie over het organisme van de handicap. Er kunnen fouten optreden als u alleen de inhoud bekijkt, de componenten ervan worden geactualiseerd en de conformiteit is verslechterd. De toegankelijkheid is een geïntegreerd proces in de ontwikkelcyclus, met steeds meer moeite.

Veelgestelde vragen

Wat zijn de vier kenmerken van webtoegankelijkheid volgens de WCAG?

De WCAG organiseert zijn criteria in vier principes: waarneembaar, bruikbaar, begrijpelijk en robuust, bekend als POUR. Elk principe groepeert verifieerbare succescriteria met niveaus A, AA en AAA. Deze structuur wordt gehandhaafd in WCAG 2.2 en vormt de basis voor het evalueren van elke site of component.

Welk WCAG-conformiteitsniveau moet mijn site nastreven?

Voor de meeste sites is het AA-niveau een praktisch doel en de verwijzing naar de Europese wetgeving naar de norm EN 301 549. Het niveau van een klein en AAA-niveau is moeilijk om in zijn geheel te beheren. Als je in de publieke sector in de UE zit, is de AA toegankelijk.

Een kijkje waard: — Widget voor toegang met een gratis plan voor uw bedrijf.

Zijn automatische tools voldoende om aan de toegankelijkheidskenmerken te voldoen?

Nee. De herramientas automatisch detecteert een deel van de problemen, zowel als contrast, tekstalternatief en incorrect geformuleerde ARIA, maar kan niet worden geëvalueerd als een tekstalternatief goed is of als de volgorde van de aandacht wordt verzonden. De herziene handleiding is geschreven en de lector is onweerstaanbaar om een ​​echte conformiteit te krijgen.

Wat is het verschil tussen toegankelijkheid en bruikbaarheid?

Toegankelijkheid zorgt ervoor dat mensen met een beperking inhoud kunnen waarnemen, bedienen, begrijpen en gebruiken; Gebruiksvriendelijkheid streeft ernaar ervoor te zorgen dat de ervaring voor elke gebruiker efficiënt en bevredigend is. Ze overlappen elkaar: een toegankelijke site is meestal bruikbaarder, maar een bruikbare site is niet noodzakelijkerwijs toegankelijk.

Lossen toegankelijkheids-widgets of overlays mijn site automatisch op?

Geen correctie van de HTML-onderbouwing op het gebied van de structuur, foco of semantica. De toegankelijkheidsgemeenschap en verschillende informanten kunnen een valse sensatie van conformiteit veroorzaken. De oplossing is om de code en de componenten te corrigeren, zonder een script te superponeren.

Hoe begin ik met het verbeteren van de toegankelijkheid van een bestaande XHTML/CSS-site?

Werk met meer impact: HTML-valido en semantische, tekstalternatieven in afbeeldingen, voldoende contrast, volledige navigatie door technologie en etiquetas in formules. Voer een automatische controle uit en vul de handleidingen aan. Documenteer de criteria en herhaal het proces in de relevante cambio.

Veelgestelde vragen

Zijn de kenmerken van de toegankelijkheid van het web sinds de WCAG een feit?

De WCAG organiseert zijn criteria in vier principes: waarneembaar, bruikbaar, begrijpelijk en robuust, bekend als POUR. Elk principe groepeert verifieerbare succescriteria met niveaus A, AA en AAA. Deze structuur wordt gehandhaafd in WCAG 2.2 en vormt de basis voor het evalueren van elke site of component.

Wat is de conformiteit van WCAG die mijn situatie heeft opgeleverd?

Voor de burgemeester van de stad is het AA-niveau een praktisch doel en de verwijzing naar de Europese wetgeving naar de norm EN 301 549. Het niveau van een klein en AAA-niveau is moeilijk om in zijn geheel te beheren. Als je in de publieke sector in de UE zit, is de AA toegankelijk.

Is het automatisch herramen om de toegankelijkheidskenmerken te vergroten?

Nee. De herramientas automatisch detecteert een deel van de problemen, zowel als contrast, tekstalternatief en ARIA mal formado, maar kan niet worden geëvalueerd als een tekstalternatief goed is of als de volgorde van de aandacht wordt verzonden. De herziene handleiding is geschreven en de lector is onweerstaanbaar om een ​​echte conformiteit te krijgen.

Wat is het verschil tussen toegankelijkheid en bruikbaarheid van hooi?

Toegankelijkheid zorgt ervoor dat mensen met een beperking inhoud kunnen waarnemen, bedienen, begrijpen en gebruiken; Gebruiksvriendelijkheid streeft ernaar ervoor te zorgen dat de ervaring voor elke gebruiker efficiënt en bevredigend is. Ze overlappen elkaar: een toegankelijke site is meestal bruikbaarder, maar een bruikbare site is niet noodzakelijkerwijs toegankelijk.

Zijn er widgets of overlays die toegankelijk zijn voor automatische plaatsing?

Geen correctie van de HTML-onderbouwing op het gebied van de structuur, foco of semantica. De toegankelijkheidsgemeenschap en verschillende informanten kunnen een valse sensatie van conformiteit veroorzaken. De oplossing is om de code en de componenten te corrigeren, zonder een script te superponeren.

Wilt u meer toegang krijgen tot een bestaand XHTML/CSS-bestand?

Werk met meer impact: HTML-valido en semantische, tekstalternatieven in afbeeldingen, voldoende contrast, volledige navigatie door technologie en etiquetas in formules. Voer een automatische controle uit en vul de handleidingen aan. Documenteer de criteria en herhaal het proces in de relevante cambio.


Gemakkelijk bereikbaar in 5 minuten

Widget voor toegang met een gratis plan voor uw bedrijf