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.