Topics

Lancering van de A11y-tool "Area Flash Checker": controleer direct op 'flitsen' die snel worden overzien en lastig te verifiëren zijn

  • news

Als vierde release in onze reeks webtoegankelijkheidsextensies hebben we de Google Chrome-extensie "Area Flash Checker" (Area Flash Checker) uitgebracht.

De aanpak van "Area-analyse" uit de eerste release, "Area Contrast Checker", waarbij je met slepen een gebied selecteert en wat je ziet direct analyseert, breiden we dit keer uit naar "beweging".
Op basis van WCAG-succescriteria 2.3.1 / 2.3.2 kun je flitsen van bewegende elementen op een pagina controleren terwijl ze bewegen.

Achtergrond van de ontwikkeling: flitsen die snel over het hoofd worden gezien en lastig te verifiëren zijn

Sterk knipperende beelden en rood flikkerende punten kunnen fotogevoelige epileptische aanvallen veroorzaken.
Ook in Japan is algemeen bekend dat na de uitzending van een tv-animatie in 1997 veel kijkers klachten kregen over hun gezondheid.
WCAG definieert criteria over flitsen als het basisniveau: niveau A.

Het komt op websites zelden voor dat flitsen de grens overschrijden die onder deze criteria valt, maar wanneer het gebeurt, heeft het direct gevolgen voor de gezondheid van gebruikers.
Flitsen beperken zich bovendien niet tot video: ze kunnen ook optreden bij CSS-animaties, effecten met Canvas en advertentiebanners.

Tot nu toe werden voor het controleren van flitsen vooral videoanalysetools gebruikt, zoals PEAT.
Deze tools zijn vooral bedoeld om videomateriaal te controleren tijdens de productie.
Om te verifiëren hoe een website zich gedraagt nadat deze is geïmplementeerd, moest je de pagina opnemen, het videobestand converteren, in de tool laden en deze stappen na elke wijziging opnieuw doorlopen.

"Als je een verdachte beweging ziet, wil je die meteen ter plaatse kunnen controleren."

Vanuit precies die praktijkervaring is de ontwikkeling gestart.

Meten van de pagina zoals die beweegt, zonder opnemen

Selecteer met slepen het gebied dat je wilt onderzoeken (of kies de hele weergave) en leg 5 tot 60 seconden vast.
Omdat de tool de weergaveframes rechtstreeks analyseert, kun je algemene flitsen en rode flitsen tellen zoals de gebruiker ze daadwerkelijk ziet.
CSS-animaties, video's, Canvas, GIF's, carrousels en advertentiebanners controleer je allemaal met dezelfde stappen.

※Om het uiteindelijke videobestand zelf te controleren, is een tool die videobestanden analyseert het meest geschikt.
Deze tool is bedoeld als een handige optie om snel te controleren tijdens het maken en beoordelen.

Belangrijkste functies

1. Beoordeling van WCAG-succescriteria 2.3.1 / 2.3.2

"Drie flitsen of minder dan de drempelwaarde" (niveau A) en "Drie flitsen" (niveau AAA) worden per algemene flits en rode flits weergegeven als voldaan of niet voldaan.

  • Algemene flits
    Eén heen-en-weer verandering waarbij de relatieve luminantie eerst met minstens 0,10 toeneemt en daarna weer afneemt (of omgekeerd). Het donkere niveau moet lager zijn dan 0,80 om als één flits te tellen.
  • Rode flits
    Een overgang van en naar verzadigd rood (R/(R+G+B) ≥ 0,8) volgens de definitie vanaf WCAG 2.1, waarbij het kleurverschil in het CIE 1976 UCS-diagram groter is dan 0,2.
  • Oppervlaktedrempel
    21.824 CSS px², wat door WCAG wordt aanbevolen (25% van 341×256 px).

De resultaatkaarten tonen ook het maximale aantal flitsen per seconde, een vergelijking van het overtredende oppervlak met de drempelwaarde, en de tijdsperiodes waarin de grens werd overschreden (de piekseconde).

2. Tijdlijn en flitskaart

De tijdlijn toont de verandering in luminantie, het flitsoppervlak en het overtredende oppervlak in de tijd. Door met de muis over de tijdlijn te bewegen of de pijltjestoetsen te gebruiken, wordt in de framevoorbeeld weergegeven welke delen van het geselecteerde gebied op dat moment oplichtten.

3. Overwegingen voor gebruik op echte pagina's

  • Vraagt om opname op 60 fps en toont de effectieve framesnelheid. Waarschuwt wanneer snelle knipperingen mogelijk worden gemist.
  • Past zich automatisch aan Retina- en high-DPI-schermen en browserzoom aan.
  • Om valse meldingen te voorkomen, worden dunne structuren zoals smalle lijnen en tekstranden standaard uitgesloten van de oppervlakteberekening (uitschakelbaar voor metingen waarbij dit relevant is).
  • Het ontwerp zorgt ervoor dat de meting-overlay niet in de opname terechtkomt.

4. Toegankelijkheid van de tool zelf

Ondersteunt schermlezers en leest de status en resultaten van de meting voor. Ook de bruikbaarheid als toegankelijkheidstool is zorgvuldig ontworpen, zoals bediening van de tijdlijn met het toetsenbord en de mogelijkheid om in elke fase terug te keren met de Escape-toets.

* Er vindt geen gegevensverzameling plaats en er worden geen gegevens naar externe partijen verzonden. Opgenomen frames worden in het browsergeheugen geanalyseerd en direct daarna verwijderd, zodat u de tool ook gerust kunt gebruiken op pagina's die nog niet gepubliceerd zijn of in een interne omgeving.

Download Area Flash Checker hier

Bij Liberogic streven we ernaar toegankelijkheid niet als 'speciale aandacht' te behandelen, maar als een vanzelfsprekende kwaliteitseis.

Flitsen zijn lastig te beoordelen met een automatische analyse van HTML en CSS, waardoor menselijke controle vaak nodig is.
Met de automatische diagnosetool Lente Scan krijgt u een overzicht van de situatie, met de extensie controleert u afzonderlijke punten, en de definitieve conformiteitsbeoordeling wordt uitgevoerd door een specialist via de handmatige diagnose Lente Audit.
Door automatische diagnose, praktische tools en handmatige expertdiagnose te combineren, ondersteunen we een voortdurende verbetering van de toegankelijkheid.

Toegankelijkheid dichterbij en soepeler.
We blijven tools en diensten leveren die vorm geven aan de praktijkervaringen van onze klanten.

Casestudies