Ruim een week geleden ontvingen we van Rian Rietveld, host van de workshop ‘Who’s afraid of ARIA?’, een bericht met daarin enkele adviezen op het gebied van toegankelijkheid, zodat we onze WordCamp-website nog verder zouden kunnen verbeteren. Ontzettend gaaf natuurlijk!

Door een drukke Nijmeegse Vierdaagseweek, er moest gefeest en gelopen worden, was het er nog niet  van gekomen om alle adviezen te bestuderen en verwerken, maar nadat Rian haar quick scan gisteren online publiceerde hebben we besloten om er meteen werk van te maken.

Kleurgebruik

Wie het accessibility team van WordPress volgt heeft het waarschijnlijk al 100x voorbij zien komen: “Denk aan dat contrast!”. Voor mensen met een visuele beperking is het echt van belang dat de contrastratio tussen voor- en achtergrond groot genoeg is. Dat deden we bijna overal goed, alleen het wit op oranje… daar gingen we de fout in. De oplettende bezoeker heeft vast al gezien dat we het oranje daarom een beetje donkerder hebben gemaakt, zodat we nu een contrastratio halen van 3.04. Net genoeg voor de grote lettertypen om WCAG AA compatible te zijn.

Wil je de contrastratio’s op je eigen site checken? De WebAIM.org contrast checker is een handige tool om dat snel te doen.

Streepje!

Vroeger waren links allemaal blauw en onderstreept. Daardoor wist iedereen dat het een link was. Tegenwoordig kunnen links alle kleuren hebben (in ons geval #ca3c08) en hoeven ze niet meer onderstreept te zijn, dachten we. Helaas bleken we het daar mis te hebben en adviseerde Rian ons om tóch dat streepje er onder te zetten. Want wat als iemand nou helemaal geen kleur ziet?

Dat hebben we dus meteen maar even opgelost, kijk maar naar dit loze linkje!

Terug naar de basis

Helaas kunnen we niet alle adviezen van Rian snel opvolgen. Als basis van onze WordCamp-website hebben we namelijk het thema Twenty Thirteen gekozen, één van de 12 opties waar we als WordCamp uit kunnen kiezen. En zo’n thema komt met een aantal beperkingen, helaas.

Zo hebben we een beetje moeten valsspelen om de ‘Bestel je ticket’-knop rechts bovenin te krijgen. Technisch gezien is dit een widgetarea die we met CSS flink hebben verplaatst. Gelukkig kan je je tickets ook bestellen via het hoofdmenu, of door op het volgende Bestel je ticket-linkje te klikken.

De widget met ‘Ontvang het laatste nieuws’ is helaas een standaard Jetpack-widget met een vast ingebakken H3 als heading. Daar kunnen we dus niets aan veranderen. Maar je kan je er natuurlijk wel mooi aanmelden om updates te ontvangen!

Ook de headingstructuur zit grotendeels ingebakken in het thema. In de header hebben we om het thema heen gewerkt, maar dat zie je pas als je scherm in staat is om een breedte van -9999px weer te geven. Zouden we de site-titel en sitebeschrijving verbergen, een optie in het thema, dan is ook ons prachtige logo met de data verdwenen. Dus ja, hier hebben we inderdaad een niet-zo-toegankelijke oplossing gekozen om de site er mooi uit te laten zien. Sorry.

Ondersteund door WordPress

De footer met ‘Ondersteund door WordPress’ is wel iets waar we trots op zijn, maar hoefde volgens Rian geen H3 te zijn. Deze hebben we daarom aangepast naar een paragraaf. Zo kunnen we je toch vertellen dat de site gebouwd is met WordPress, maar zonder de headingstructuur in de war te schoppen!

Lege hoofd-dingen

Rian vond op onze website een aantal headings zonder inhoud. Dat kan natuurlijk niet. Daarom hebben we die ‘hoofden’ direct inhoud gegeven. En dat ziet er meteen een stuk slimmer uit, nietwaar?

Ohja, we hadden ook nog een gevalletje ‘meerdere dezelfde id’s’. Het duurde even voordat we hadden gevonden waar Rian dit had gezien. We wisten immers zeker dat elke pagina maar één keer het id aanmelden had. Totdat we terug kwamen op onze homepage en ons realiseerden dat daar de volledige posts onder elkaar worden getoond. In de toekomst gaan we die linkjes dus zeker unieker maken, maar helaas kunnen we dit nu niet meer oplossen doordat we dan diverse links op, bijvoorbeeld, social media zouden breken. Maar we weten het voor volgende keer! Heus!

Om link van te worden!

Linken met here, hier, deze, die pagina, en meer van dat soort lege termen is vreselijk irritant voor bezoekers van je website die niet direct de context van de link kunnen zien, bijvoorbeeld als ze een screenreader gebruiken. Dat hadden we dus bewust niet gedaan. Maar dat het gebruiken van de link zelf als linktekst ook ‘not done’ was, daar waren we ons niet van bewust. Natuurlijk hebben we dat meteen aangepast!

Conclusie

Als eerste blijven we benadrukken dat het echt gaaf, en een beetje confronterend, is om een website review te krijgen van internationaal bekende accessibility-expert Rian Rietveld. We zijn er achter gekomen dat een aantal problemen gekoppeld zijn aan onze thema-keuze, en we raden andere WordCamps daarom aan om CampSite 2017 te kiezen als basis. Deze lijkt veel minder ingebakken problemen te hebben, en daar is de WordCamp Europe website bijvoorbeeld op gebouwd.

De overige problemen hebben we, naar onze eigen mening, best aardig op weten te lossen. Zie je nog meer ‘quick fixes’, voel je dan vrij om een mail te sturen naar mail@wordcampnijmegen.org met daarin je accessibility feedback.

En mocht je nog geen ticket hebben voor WordCamp Nijmegen, wacht dan niet langer maar ga direct naar onze ticket-verkooppagina! Tijdens haar workshop zal namelijk Rian nog veel meer goede tips en trucs delen om je website nog toegankelijker te maken.