12 Uitstekende Toegankelijke Websitevoorbeelden Die De Lat Hoger Leggen

Hier bij DreamHost geloven we dat iedereen elke website op het internet moet kunnen gebruiken, ongeacht beperkingen of handicaps. Hoewel we om webtoegankelijkheid geven, begrijpen we ook dat het ontwerpen van een website die zowel toegankelijk als visueel aantrekkelijk is, uitdagend kan zijn.

Het goede nieuws is dat je toegankelijke websites kunt ontwerpen zonder visuele impact op te offeren. Sterker nog, sommige van de meest indrukwekkende websites zijn specifiek ontworpen om toegankelijker te zijn voor mensen met een beperking — en we kunnen er allemaal wel iets van leren.

In deze post beginnen we met je te laten zien hoe sterke webtoegankelijkheid eruitziet en bespreken we enkele webtoegankelijkheidsnormen die zijn ontworpen om toegang tot websites te democratiseren. Vervolgens laten we je 12 van de beste voorbeelden van webtoegankelijkheid op het internet zien, inclusief enkele populaire websites die zich hebben ingezet voor toegankelijkheid, en bekijken wat we daarvan kunnen leren.

Laten we beginnen!

Hoe Geweldige Webtoegankelijkheid Eruit Ziet

Volgens The World Bank hebben ongeveer een miljard mensen, of 15% van de wereldbevolking, een vorm van een handicap. Dit kan het volgende omvatten:

• Visuele Beperkingen: Sommige gebruikers hebben een visuele handicap die hun vermogen om duidelijk te zien of kleurcontrastverhoudingen waar te nemen beperkt. Een scala aan mensen kan in deze categorie vallen, inclusief blinden of kleurenblinden. Voor gebruikers met visuele beperkingen kun je audio-omschrijvingen gebruiken of toegankelijke kleurencombinaties (bijvoorbeeld vermijd het gebruik van donkere tekst op donkere achtergrondkleuren).
• Gehoorbeperkingen: Gebruikers met gehoorbeperkingen kunnen doven en slechthorenden omvatten. Ondertiteling voor audiocontent kan deze gebruikers een toegankelijkere ervaring bieden.
• Lichamelijke Beperkingen: Sommige mensen hebben mobiliteitsbeperkingen die hun behendigheid en vermogen om precieze bewegingen te maken kunnen beïnvloeden, wat het gebruik van een muis moeilijk kan maken. Mensen met lichamelijke beperkingen kunnen gebruikers van ondersteunende technologie zijn. Zorg ervoor dat je site correct is gecodeerd voor ondersteunende apparaten om toegankelijke inhoud te bieden voor gebruikers met lichamelijke beperkingen.
• Cognitieve Beperkingen: Sommige gebruikers kunnen cognitieve stoornissen hebben zoals dyslexie, dementie of een auditieve verwerkingsstoornis. Je kunt overwegen een specifiek lettertype te gebruiken, zoals Dyslexie. Zorg er ook voor dat er voor elk audiocontent een transcript beschikbaar is voor mensen met auditieve verwerkingsstoornissen.

Het is belangrijk om al deze verschillende mogelijkheden in gedachten te houden bij het maken van je website om te zorgen dat er geen barrières zijn voor gebruikers met een beperking. Om webontwerpers hierbij te helpen, heeft W3C een set van Web Content Accessibility Guidelines (WCAG) ontwikkeld.

Een solide webtoegankelijkheid betekent dat je je houdt aan deze richtlijnen en zorgvuldig de vier richtlijnen van toegankelijk ontwerp volgt. Deze richtlijnen stellen dat alle websites:

1. Waarneembaar
2. Bedienbaar
3. Begrijpelijk
4. Robuust

Zorgen dat je website “bedienbaar” is, kan betekenen dat je navigatie die vriendelijk is voor het toetsenbord implementeert voor mensen die geen muis kunnen gebruiken. “Waarneembaar” zou kunnen betekenen dat je gebruik maakt van kleuren met hoog contrast voor mensen met visuele beperkingen.

Klaar om te zien hoe deze principes er in de praktijk uitzien? Hieronder hebben we 12 voorbeelden van websites die toegankelijk ontwerp goed toepassen.

12 Geweldige Voorbeelden Van Webtoegankelijkheid Om Je Te Inspireren

Hier vind je enkele van onze favoriete voorbeelden van webtoegankelijkheid. Deze 12 websites zijn voorbeelden van toegankelijk webdesign op zijn best.

1. Scope

Scope is een liefdadigheidsinstelling voor gelijkheid bij handicaps gevestigd in Engeland en Wales, toegewijd aan het creëren van een eerlijkere, gelijkere samenleving. Als voorvechter van gelijkheid bij handicaps zou je verwachten dat de website van deze organisatie zo toegankelijk mogelijk is — en dat is hij ook.

Niet alleen voldoet het volledig aan de WCAG 2.0 en WCAG 2.1 richtlijnen, maar de site is zelfs aanpasbaar voor individuele gebruikers. Gebruikers kunnen bijvoorbeeld de kleuren van de site veranderen, de tekstgrootte vergroten, of zelfs tekstnarratie inschakelen om de inhoud hardop voor te laten lezen.

Als je naar de linkerbovenhoek van de startpagina kijkt, zie je een tabblad Toegankelijkheid. Klik hierop en je wordt naar de toegankelijkheidspagina gebracht, die instructies bevat over hoe je de ervaring aan jouw behoeften kunt aanpassen, links naar ondersteunende technologieën, en een lijst van bekende toegankelijkheidsproblemen waaraan wordt gewerkt.

Scope gebruikt korte zinnen en grote, schone lettertypen op de hele site voor maximale leesbaarheid. Daarnaast is de site volledig compatibel met schermleessoftware.

Ondanks dat het al een fantastisch voorbeeld van website-toegankelijkheid is, blijft het team van Scope verbeteringen aanbrengen. Elke vier maanden testen ze de website op toegankelijkheid en voeren ze updates uit waar nodig.

2. Harvard Universiteit

Harvards onderwijs is niet de enige sterke kant. De wereldberoemde universiteitswebsite valt ook op door zijn toegankelijkheid, met een arsenaal aan leeshulpmiddelen, meertalige videosubtitels, en zorgvuldig gekozen kleurenschema’s die tegemoetkomen aan de behoeften van kleurenblinde bezoekers.

Harvards navigatiemenu scoort ook punten voor toegankelijkheid. Het is eenvoudig maar effectief, met grote, makkelijk te lezen tekst in een kleur met hoog contrast. Het is ook duidelijk en makkelijk te vinden.

3. Paralympic.org

Paralympic.org is de officiële website van het Internationaal Paralympisch Comité (IPC). Het IPC is een krachtige pleitbezorger van sociale inclusie, en zijn website is daar een bewijs van.

Het heeft een toetsenbordvriendelijke tab-navigatie en een directe “scroll-naar-boven” pijlknop om het gemakkelijk te maken om over de pagina te bewegen. Afbeeldingen en video’s zijn groot en duidelijk zichtbaar, en er is veel witruimte om visuele elementen te laten opvallen.

Als je naar de startpagina gaat, zie je rechtsboven op het scherm een tekstgrootte-aanpasser. Deze is duidelijk zichtbaar en stelt gebruikers met visuele beperkingen in staat om snel de grootte van de tekst aan te passen aan hun behoeften.

4. Walmart

Een van de vereisten van de WCAG voor toegankelijke websites is dat ze “focus zichtbaar” moeten zijn, wat betekent dat het deel van de site dat in gebruik is, wordt benadrukt. De website van Walmart is een goed voorbeeld hiervan. Het heeft een heleboel interactieve elementen zoals knoppen, links en invulvelden — maar bezoekers kunnen zich slechts op één tegelijk concentreren, en degene waarmee ze interactie hebben, wordt duidelijk benadrukt voor maximale zichtbaarheid.

Het is ook eenvoudig om tussen verschillende interactieve elementen te navigeren, van het navigatiemenu naar verschillende knoppen, de zoekbalk, links naar je accountpagina en winkelwagentje en meer, of je nu een muis of toetsenbordnavigatie gebruikt.

5. KidsWish

KidsWish is een organisatie die therapie, ondersteunende diensten en een jaarlijks kerstfeest biedt voor kinderen die achtergesteld zijn of een beperking hebben. Het richt zich op veel mensen met verschillende beperkingen, dus logischerwijs hebben hun ontwikkelaars een website gebouwd die zo toegankelijk mogelijk was.

En raad eens? Ze hebben het perfect gedaan. De website van KidsWish is prachtig ontworpen, met een logische structuur, toetsenbordvriendelijke navigatie, kleuren met hoog contrast, en grote tekst. Bovendien is het gemakkelijk te doorzoeken met opvallende, klikbare elementen.

Het ontwerp is ook zeer kindvriendelijk. Het heeft een helder en gedurfd kleurenschema en tal van leuke grafische elementen.

6. Nomensa

Nomensa is een strategisch bureau voor gebruikerservaring (UX) gevestigd in Londen. Ze leggen zo’n nadruk op toegankelijk ontwerp, dat ze een toegankelijkheidstest voor het web aanbieden die hun huidige en toekomstige klanten kunnen doen om te zien hoe hun sites voldoen aan internationale normen.

Het bureau biedt vervolgens ontwerpdiensten aan om klanten te helpen eventuele problemen op te lossen die door de toegankelijkheidstesttool zijn ontdekt.

Bekijk dit: een van de medeoprichters van het bedrijf is medevoorzitter van het World Wide Web Consortium (W3C) en heeft meegeholpen aan het schrijven van de WCAG-richtlijnen die de beste praktijken voor webtoegankelijkheid sturen. Het is geen wonder dat Nomensa toegankelijkheidsoplossingen zo serieus neemt!

7. Ovo Energy

Ovo Energy is een in het VK gevestigd energiebedrijf. De website bevat informatie over tarieven en bundels en omvat een hoofdloginportaal voor klanten om hun accounts te beheren.

Het bedrijf heeft fantastisch werk verricht door de site toegankelijk te maken voor iedereen met behulp van grote, leesbare tekst en een duidelijke interface. Het omvat ook navigatie via het toetsenbord om gemakkelijk door de site te navigeren.

De ontwerpers hebben zich extra ingespannen om ervoor te zorgen dat de site toegankelijk is voor visueel- en gehoorbeperkte gebruikers. Er zijn SignVideo-diensten voor gebruikers van de Britse Gebarentaal, en het kleurcontrast voldoet aan de WCAG-richtlijnen.

Klanten kunnen ook facturen aanvragen in braille en grotere formaten. Daarnaast is de site compatibel met ondersteunende technologie.

8. Bleacher Report

Sportnieuwssite Bleacher Report doet iets anders dat uiterst nuttig is voor gebruikers die hun site bezoeken met schermlezers of toetsenbordbedieningen. De eerste focuspunten zijn de kennisgeving van cookies, het Privacybeleid en de Gebruiksvoorwaarden, en als je op de externe link hiervoor klikt, openen ze in een nieuw venster.

Voor gebruikers zonder beperkingen lijkt dit misschien geen grote zaak, maar dit geeft alle bezoekers van de site van Bleacher Report toegang tot belangrijke juridische informatie. Op de meeste sites staan de juridische meldingen en cookies waarschuwingen onderaan de pagina, wat betekent dat bezoekers die toetsenbordbedieningen of schermlezers gebruiken, deze pas op het einde van hun bezoek bereiken, na het doorbladeren van de rest van de site. Dit is een kleine verandering met een grote impact voor mensen met beperkingen.

9. BBC iPlayer

BBC iPlayer is de online streamingdienst van de BBC. Gebruikers kijken programma’s online op zijn website. Het is ook een ander fantastisch voorbeeld van webtoegankelijkheid waar we allemaal van kunnen leren.

Eerst is de website zowel heel makkelijk te navigeren als compatibel met ondersteunende technologie. Je kunt rond de pagina bewegen door op de Tab knop te klikken. Navigeren over het iPlayer-logo brengt een optie voor Toegankelijkheid hulp naar voren, die linkt naar een bronnenpagina met veel nuttige informatie voor gebruikers met beperkingen.

De inhoud is logisch ingedeeld en alle knoppen gebruiken een duidelijk visueel ontwerp met kleuren van hoog contrast. Er zijn ook met toetsenbord en muis toegankelijke tooltips die extra informatie voor gebruikers bieden en beschrijvende alt-tekst voor alle afbeeldingen.

De video-inhoud is ook toegankelijk. Alle programma’s op BBC iPlayer hebben ondertiteling. Er zijn ook categorieën met audiobeschrijving en ondertekende inhoud.

10. Metropolitane Vervoersautoriteit

Naast een responsieve site die gemakkelijk te gebruiken is op apparaten met schermen van alle formaten, heeft de Metropolitan Transportation Authority van New York City ook een ingebouwde zoekervaring die gebruikers helpt sneller en gemakkelijker de informatie te vinden die ze zoeken. Hoe? De zoekfunctie levert nog steeds resultaten op, zelfs als gebruikers woorden verkeerd spellen of invoer in verkeerde formaten geven.

Bijvoorbeeld, als een gebruiker een adres of buurt invoert in de MTA’s reisplanner met een typfout, zal de zoekbalk toch adressen voorstellen op basis van wat zij denkt dat de gebruiker zocht.

11. NSW Overheid

De website van de regering van New South Wales is het overheidscentrum voor het gebied New South Wales in Australië. De website is ontworpen om gebruiksvriendelijk te zijn voor bewoners van alle achtergronden en vaardigheden.

De website beschikt over tabnavigatie, waardoor het eenvoudig is om pagina’s te navigeren met een toetsenbord of schermlezer. Dankzij grote lettertypen en contrasterende kleuren, is het ook zeer leesbaar en scoort het punten voor compatibiliteit met hulpapparatuur.

12. GOV.UK

GOV.UK is het centrale knooppunt voor alle webpagina’s van de Britse overheid. De site biedt informatie over alles van hulp en uitkeringen voor gehandicapten tot ondersteuning bij visa en immigratie.

De Britse overheid heeft geweldig werk geleverd om haar website toegankelijk te maken voor iedereen die deze nodig heeft. De website beschikt over toetsenbordnavigatie en ARIA-attributen, zodat je pagina’s gemakkelijk kunt vinden. Bovendien is het ontworpen om een vergroting van 300% te ondersteunen voor visueel beperkte lezers.

Maak Een Toegankelijkheidsverklaring

Zorgen dat jouw website zo toegankelijk mogelijk is, is zowel een morele als een professionele verplichting. Het lijkt misschien een uitdaging, maar we beloven je — het is het waard. De bovenstaande voorbeelden zullen je begeleiden bij het creëren van een inclusieve website die toegankelijk zal zijn voor alle gebruikers.

Klaar om je toegankelijke website te bouwen? Laat ons de technische kant voor je regelen, zodat je meer tijd en energie kunt besteden aan wat belangrijk is: het ontwerp. Meld je aan voor ons Shared Unlimited Hosting Plan en krijg onbeperkte, veilige hosting voor al je websites.

Opmerking: We doen uitgebreid onderzoek naar taalgebruik inclusief voor mensen met een beperking voor onze artikelen. Vergeet niet je bronnen te gebruiken bij het creëren van toegankelijke inhoud, en bij twijfel, vraag altijd.