A11Y - RayanSp/vervoerregio-amsterdam GitHub Wiki
A11Y project testen
Inhoud
-
Gebruik duidelijke taal en vermijd stijlfiguren, idiomen en ingewikkelde metaforen.
-
Zorg ervoor dat de inhoud van het button, a, en labelelement uniek en beschrijvend is.
-
Gebruik links uitgelijnde tekst voor talen van links naar rechts ( LTR ) en rechts uitgelijnde tekst voor talen van rechts naar links ( RTL ).
Globale code
-
Valideer uw HTML.
-
Gebruik een langattribuut voor het html element.
-
Geef een unieke waarde op title voor elke pagina of weergave.
-
Zorg ervoor dat de viewport-zoom niet is uitgeschakeld.
-
Gebruik oriëntatiepunt elementen om belangrijke inhoudsregio's aan te duiden.
-
Zorg voor een lineaire content stroom.
-
Vermijd het gebruik van het autofocus kenmerk.
-
Sta verlenging van sessie time-outs toe.
-
Tooltips voor attributen verwijderen title.
Toetsenbord
-
Zorg ervoor dat er een zichtbare focusstijl is voor interactieve elementen waarnaar wordt genavigeerd via toetsenbord invoer.
-
Controleer of de focusvolgorde van het toetsenbord overeenkomt met de visuele lay-out.
-
Verwijder onzichtbare focusseerbare elementen.
Afbeeldingen
-
Zorg ervoor dat alle img elementen een attribuut hebben alt.
-
Zorg ervoor dat decoratieve afbeeldingen null alt(lege) attribuutwaarden gebruiken.
-
Bied een tekstalternatief voor complexe afbeeldingen zoals diagrammen, grafieken en kaarten.
-
Voor afbeeldingen die tekst bevatten, zorg ervoor dat de alt-beschrijving de tekst van de afbeelding bevat.
Koppen
-
Gebruik kopelementen om inhoud te introduceren.
-
Gebruik slechts één h1 element per pagina of weergave.
-
Kopelementen moeten in een logische volgorde worden geschreven.
-
Sla kopniveaus niet over.
Lijsten
- Gebruik lijstelementen ( ol, ul, en dl elementen) voor lijstinhoud.
Controles
-
Gebruik het a element voor links.
-
Zorg ervoor dat links herkenbaar zijn als links.
-
Zorg ervoor dat de controles statussen hebben :focus.
-
Gebruik het button element voor knoppen.
-
Zorg voor een skip-link en zorg ervoor dat deze zichtbaar is wanneer de focus ligt.
-
Identificeer links die in een nieuw tabblad of venster worden geopend.
Tafels
-
Gebruik het table element om tabel gegevens te beschrijven.
-
Gebruik het th element voor tabelkoppen (met de juiste scope attributen).
-
Gebruik het caption element om een titel voor de tabel op te geven.
Forms
-
Alle invoer in een formulier is gekoppeld aan een overeenkomstig label element.
-
Gebruik fieldset en legend elementen waar nodig.
-
Ingangen gebruiken autocomplete waar nodig.
-
Zorg ervoor dat formulier invoerfouten na indiening in de lijst boven het formulier worden weergegeven.
-
Koppel invoer foutmeldingen aan de invoer waarmee deze correspondeert.
-
Zorg ervoor dat fout-, waarschuwings- en succes statussen niet visueel worden gecommuniceerd door alleen maar kleur.
Media
-
Zorg ervoor dat media niet automatisch worden afgespeeld.
-
Zorg ervoor dat mediabedieningen de juiste opmaak gebruiken.
-
Controleer of alle media kunnen worden gepauzeerd.
Video
-
Bevestig de aanwezigheid van bijschriften.
-
Verwijder epileptische triggers.
Audio
- Bevestig dat transcripties beschikbaar zijn.
Appearance
-
Controleer uw inhoud in gespecialiseerde browser modi.
-
Vergroot de tekstgrootte naar 200%.
-
Controleer nogmaals of de inhoud goed op elkaar aansluit.
-
Zorg ervoor dat kleur niet de enige manier is waarop informatie wordt overgebracht.
-
Zorg ervoor dat instructies niet alleen visueel of alleen audio zijn.
-
Gebruik een eenvoudige, duidelijke en consistente lay-out.
Animation
-
Zorg ervoor dat animaties subtiel zijn en niet te veel flitsen.
-
Zorg voor een mechanisme om achtergrondvideo te pauzeren.
-
Zorg ervoor dat alle animaties voldoen aan de prefers-reduced-motionmediaquery.
Color contrast
-
Controleer het contrast voor alle tekst van normaal formaat.
-
Controleer het contrast voor alle grote tekst.
-
Controleer het contrast voor alle pictogrammen.
-
Controleer het contrast van de randen van invoerelementen (tekstinvoer, keuzerondjes, selectievakjes, enz.).
-
Controleer tekst die afbeeldingen of video overlapt.
-
Controleer aangepaste ::selectionkleuren.
Mobile and touch
-
Controleer of de site in elke richting kan worden gedraaid.
-
Horizontaal scrollen verwijderen.
-
Zorg ervoor dat knop- en link pictogrammen gemakkelijk kunnen worden geactiveerd.
-
Zorg voor voldoende ruimte tussen interactieve items om een scroll gebied te creëren.