10 hulpmiddelen voor het verbeteren van de toegankelijkheid van websites
Het lijdt geen twijfel dat u begrijpt dat uw website voor zoveel mogelijk gebruikers toegankelijk moet zijn. Maar het lezen van alle richtlijnen en normen kan een beetje overweldigend zijn. Je kunt de nieuwste W3C-aanbevelingen hier vinden, maar moet je elk woord kennen en elke richtlijn volgen?
Vandaag gaan we proberen het allemaal een beetje gemakkelijker te maken met een aantal tools en bronnen om u te helpen de toegankelijkheid van de website te verbeteren (en misschien zelfs enkele controles om te overwegen dat die niet op uw radar stonden!).
Of u nu wilt zorgen voor voldoende visueel contrast, een site die toegankelijk is voor schermlezers of zelfs toegankelijke e-mails wilt maken, wij staan voor u klaar!
1. Kleur veilig
Met Color Safe kunt u toegankelijke kleurenpaletten controleren (en zelfs maken) op basis van WCAG-richtlijnen voor tekst- en achtergrondkleurcontrast. De tool en standaarden gebruiken een op verhoudingen gebaseerde formule om kleurencombinaties te bepalen die door iedereen kunnen worden gelezen.
WCAG-richtlijnen bevelen een contrastverhouding aan van 4, 5 voor kleine (hoofd) tekst en 3 voor grote tekst (alles boven 24 punten).
Voer gewoon uw kleuren in - op basis van HEX-code - lettertype keuze en grootte en genereer een palet. U krijgt een directe verhouding om te controleren en kunt andere vergelijkbare kleuren zien. Kijk door om te zien of iets soortgelijks een betere optie is op basis van uw lettertype en grootte.
2. Geen koffie
NoCoffee is een Google Chrome-browserextensie waarmee u uw ontwerp kunt visualiseren op dezelfde manier als iemand met een visuele beperking het zou kunnen zien. (Niets benadrukt het belang van toegankelijkheid als het op deze manier te zien.)
Het kan het volgende controleren en weergeven:
- Lage scherpte met kleine tekst- of klikdoelen
- Problemen met weinig contrast met tekst- en achtergrondelementen
- Kleurenblind
- Visuele sneeuw, verblinding, nevenbeelden en staar
- Nystagmus, dat is een snelle onvrijwillige beweging van de ogen
- Belemmerd gezichtsveld
3. Contrastcontrole
Met Contrast Checker kunt u achtergrond- en voorgrondkleuren op het scherm invoeren en onmiddellijk worden gecontroleerd aan de hand van verschillende visuele standaarden met een onmiddellijke, kleurgecodeerde pass / fail.
Leuke functies van de tool zijn onder meer de mogelijkheid om te schakelen tussen opties voor kleur en grijstinten, voorbeelden van uw cheques te delen en kleuren uit afbeeldingen te halen. U kunt ook een PDF-voorbeeld opslaan. Het is een gemakkelijke tool met tal van functies die iedereen snel kan gebruiken.
Het biedt ook de kleurverhouding, zoals uiteengezet in de WCAG-richtlijnen.
4. Tota11y
Tota11y is een JavaScript-bestand dat een kleine knop in de benedenhoek van documenten plaatst. Het breidt uit met een werkbalk die meerdere plug-ins bevat voor verschillende toegankelijkheidscontroles.
- Koppen en schendingen van de kopvolgorde
- Contrast (of gebrek daaraan)
- Linktekst die ontbreekt of verwarrend is
- Labels die ontbreken bij invoer
- Afbeeldingen zonder alt-tekst
- Labels zijn ARIA-oriëntatiepunten
- Schermlezer 'toverstaf' zodat u de site kunt 'lezen' zoals een schermlezer dat zou doen
5. GOLF
WAVE, of evaluatietool voor webtoegankelijkheid, is een robuuste verzameling cheques op één plek.
De tool gebruikt een visuele overlay van pictogrammen die betrekking hebben op informatie in de zijbalk om details over alles te bieden, van kleurcontrast tot overbodige titels tot links naar HTML en structurele elementen.
De gratis checker geeft je bijna alles wat je moet weten over een enkele pagina, maar WAVE bevat ook betaalde tools op ondernemingsniveau voor eigenaren van meerdere sites of gebruikers die meer dan één pagina tegelijk willen. Het bevat ook Chrome- en Firefox-browserextensies die intranet, met een wachtwoord beveiligde, dynamisch gegenereerde of gevoelige webpagina's in een privéomgeving kunnen controleren.
6. 508 Checker
De 508 Checker test URL's om te bepalen of een website voldoet aan de richtlijnen voor Amerikaanse 508-naleving, die wettelijk verplicht is voor elke organisatie die federale financiering ontvangt.
Hoewel deze tool gratis is, moet u zich registreren om de volledige resultaten van de scan te zien.
De site bevat ook andere hulpmiddelen en bronnen, waaronder een quiz om organisaties te helpen nagaan of ze onderhevig zijn aan 508-naleving en specifieke bronnen voor hoger onderwijs, non-profitorganisaties en overheidsinstanties.
7. HTML_CodeSniffer
HTML_CodeSniffer is een client-side script dat de broncode controleert en zoekt naar schendingen van gedefinieerde standaarden. Het controleert zowel Web Content Accessibility Guidelines 2.0 als US Section 508.
Plak de code rechtstreeks in de website voor een controle of gebruik de bookmarklet.
Het is gemakkelijk te gebruiken en u kunt kiezen welk type informatie wordt weergegeven - fouten, waarschuwingen of kennisgevingen en een rapport bekijken met eventuele zorgen van de controle.
8. Toegankelijke e-mail
Toegankelijke e-mail is een online checker en HTML-editor waarmee u de code van een e-mailnieuwsbrief kunt verbeteren voordat u deze verzendt. (U kunt ook eerdere / verzonden campagnes bekijken.)
Met zoveel digitale communicatie en leadgeneratie afkomstig van e-mail, zou het niet een van de vergeten website-elementen moeten zijn in termen van toegankelijkheid, maar dat is het vaak wel. Dezelfde regels voor toegankelijkheid op internet zijn ook van toepassing op e-mailverzendingen.
De tool is gratis te gebruiken en ontworpen om de toegankelijkheid en bruikbaarheid van e-mailmarketing te bevorderen.
9. Amara
Amara is een tool voor het maken van ondertitels en ondertitels voor video.
Door een manier te bieden om verbinding te maken zonder geluid of in een andere taal, kunnen uw ontwerpelementen voor meer mensen worden geopend, vooral als video een belangrijk onderdeel van het ontwerp is.
Deze tool bevat gratis en zakelijke opties die het gemakkelijk maken om de taal op het scherm te zetten in een leesbaar formaat dat werkt op websites en videostreamingplatforms zoals YouTube.
10. MobiReady
MobiReady biedt een mobiele toegankelijkheidstest in een visueel formaat en met een rapport met resultaten, zodat u kunt zien waar uw website mogelijk tekort schiet op de kleinste apparaten.
U kunt uw site vergelijken met de Alexa 1000, een ranglijst van de beste websites ter wereld; krijg gedetailleerde technische resultaten met aanbevelingen en bekijk weergaven van uw website op verschillende schermen, waaronder high-, mid- en low-tier apparaten.
Een van de beste onderdelen van deze test is dat deze op tientallen gebieden wordt gescoord en dat er suggesties voor verbetering zijn bij eventuele 'mislukkingen'.
Gevolgtrekking
Als het gaat om toegankelijkheid van websites, is het belangrijk om rekening te houden met bruikbaarheid en leesbaarheid voor alle soorten gebruikers. Denk na over kleur, grootte en plaatsing van elementen, bijschriften en ondertitels, geschikte HTML en structuur en zelfs e-mail zodat u de best mogelijke ervaring biedt aan zoveel mogelijk mensen.
Het is ook belangrijk om te controleren op regionale of nationale nalevingsregels die van toepassing kunnen zijn op uw projecten, zoals de hierboven genoemde 508-nalevingsnormen.
En als je twijfelt, is het beter om je te vergissen aan de kant van toegankelijkheid. Het is prima om een kleur uit een palet aan te passen of een lettergrootte te vergroten, zodat meer mensen gemakkelijk kunnen begrijpen wat er op het scherm staat.
