Share
Idealiter moet toegankelijkheid worden beschouwd als onderdeel van elk webproject om de beschikbaarheid voor een zo breed mogelijk publiek te vergroten. In de echte wereld kan het echter gemakkelijk over het hoofd worden gezien. In dit artikel zullen we kijken naar eenvoudige manieren om de toegankelijkheid van uw site te verbeteren zonder drastische of tijdrovende wijzigingen aan te brengen.
"Helaas is de kracht en het aanpassingsvermogen van het web niet altijd volledig benut"
Het World Wide Web is een ongelooflijke bron en heeft nieuwe interessante mogelijkheden geopend. Veel meer mensen hebben nu toegang tot informatie en entertainment die voorheen niet beschikbaar waren via traditionele media. Het World Wide Web is vooral belangrijk voor mensen met een handicap, omdat de enorme hoeveelheid opgeslagen digitale informatie kan worden gemanipuleerd om aan verschillende vereisten te voldoen. Helaas wordt de kracht en het aanpassingsvermogen van het web niet altijd volledig benut en kunnen personen met een handicap moeite hebben om door websites te navigeren en een negatieve ervaring met internet in het algemeen hebben.
Er zijn tal van redenen waarom u zou moeten streven naar een betere toegankelijkheid van uw site, een daarvan is dat het in veel landen de wet is. In het VK valt webtoegankelijkheid onder de Disability Discrimination Act en als uw website niet voldoet, kunnen juridische stappen tegen u worden ondernomen. Juridische kwesties terzijde, echter waarom zou u uw site niet voor een zo breed mogelijk publiek willen openen door het voor iedereen toegankelijk te maken?
Het Web Accessibility Initiative (WAI) is door het W3C opgezet om toegankelijkheid op het web te bevorderen. De WAI probeert mensen voor te lichten over hoe mensen met een handicap internet gebruiken en heeft richtlijnen opgesteld voor webontwerpers en ontwikkelaars om te volgen. U zult merken dat veel van de richtlijnen gemakkelijk te volgen en te implementeren zijn. Hieronder bespreken we enkele eenvoudige methoden die u zullen helpen om aan deze richtlijnen te voldoen en de toegankelijkheid van uw site te verbeteren.
Naar schatting lijden ongeveer tien miljoen mannen aan enige vorm van kleurenblindheid in de Verenigde Staten. De meest voorkomende typen zijn Protanopia en Deuteranopia; en degenen die hier last van hebben, hebben moeite om onderscheid te maken tussen rode, groene en vergelijkbare kleuren. Met zo'n hoge prevalentie van deze aandoening, is het echt de moeite waard om te overwegen bij het ontwerpen en coderen van uw website.
Voor het grootste deel zijn er geen radicale maatregelen die moeten worden genomen bij het ontwerpen met kleurenblindheid in het achterhoofd - zoals het geval is met de meerderheid van de suggesties in dit artikel. Een goed ontworpen website zal over het algemeen geen grote problemen veroorzaken voor kleurenblinde gebruikers. Het is echter de moeite waard om extra aandacht te schenken aan het ontwerpen van interactieve of call-to-action-elementen. Bijvoorbeeld; een eenvoudige tekstlink, rood opgemaakt zonder andere decoratie, is mogelijk niet zichtbaar als deze zich binnen een blok met grijze of zwarte tekst bevindt. Niemand suggereert dat u zich moet houden aan de standaard linkstyling, maar het is handig om meer dan één type decoratie te gebruiken, zoals een onderstreep of achtergrondkleur.
Een handig hulpmiddel voor ontwerpers is te vinden op colorfilter.wickline.org, dat verschillende filters biedt die lijken op hoe verschillende soorten kleurenblinde gebruikers een website zouden zien. Typ gewoon de URL van een website in en selecteer het filter dat u wilt gebruiken - het kost wat tijd om te laden, maar u zult geduld moeten hebben.
Het is ook de moeite waard om rekening te houden met het contrastniveau tussen de voor- en achtergrondelementen van uw website. Een hoog niveau van contrast zal iedereen ten goede komen, niet alleen voor mensen met een visuele beperking. De Web Accessibility Guidelines suggereren een minimale contrastverhouding van 4,5: 1 en een ideale ratio van 7: 1 voor standaardtekst van het hoofdgedeelte. Vanzelfsprekend is de veiligste optie altijd zwarte tekst op een witte achtergrond of omgekeerd.
U kunt de contrastverhouding van meerdere elementen op een site controleren met behulp van de Color Contrast Analyzer Firefox-extensie van Juicy Studio. Het analyseert elk element op de pagina en biedt een rapport over het al dan niet in overeenstemming zijn met de richtlijnen van de WAI.
Degenen die schermlezers gebruiken, hebben vaak de mogelijkheid om door een webpagina te navigeren door de links door te bladeren om iets interessants te vinden. In het geval van tekstlinks hoort de gebruiker het woord eenvoudig geïsoleerd, ongeacht de inhoud ervan. Het is daarom uiterst nutteloos als het enige dat de gebruiker hoort 'klik hier' of 'meer' is: dit soort links bieden geen informatie over waar ze de gebruiker naar verwijzen of waarnaar ze verwijzen..
Een veel betere optie is om een meer beschrijvende link te bieden. Een link die de gebruiker naar het volledige artikel op een blog brengt, kan 'lees meer over S.E.O' of 'klik hier voor het volledige artikel op S.E.O'..
Een van de basisprincipes van het Web Accessibility Initiative is om inhoud op het web beschikbaar te maken voor iedereen, ongeacht welke handicap ze ook hebben. Er zijn een aantal technieken, zoals de technieken die in dit artikel worden besproken, die zullen helpen het doel van het WAI te bereiken. Er zullen echter altijd een aantal soorten content zijn die voor sommige gebruikers niet toegankelijk kunnen worden gemaakt, zoals audio voor dove mensen. In dit scenario moet u waar mogelijk altijd alternatieve inhoud aanbieden.
Richtlijnen voor toegankelijkheid van Web Content 1.1:
Geef tekstalternatieven voor alle niet-tekstuele inhoud, zodat deze kan worden gewijzigd in andere vormen die mensen nodig hebben, zoals grote letters, braille, symbolen of eenvoudiger taal.
Als u bijvoorbeeld een video van een interview op uw site hebt, kunt u overwegen een transcriptie van het gesprek op te nemen zodat gebruikers deze kunnen downloaden of lezen op de site. Een andere methode is om ondertiteling toe te voegen aan de video - een methode waarmee YouTube experimenteert met het gebruik van spraakherkenningssoftware.
Een nog completere aanpak is om een link naar een tekstversie van uw website aan te bieden. Deze methode maakt uw site ook veel toegankelijker voor mensen met trage internetverbindingen, zoals mensen die nog steeds een inbelverbinding gebruiken of browsen naar een mobiel apparaat.
De tabbladindex bepaalt in feite de volgorde van elementen die een gebruiker zal doorlopen bij gebruik van de 'Tab'-toets. In de meeste gevallen, als een paginaontwerp een logische volgorde volgt en een sterke hiërarchie vaststelt met behulp van kopjes, subkopjes, enzovoort, hoeft u zich daar niet al te veel zorgen over te maken. Het is echter met het gebruik van vormen dat deze functie echt waardevol is.
Formulieren kunnen veel kleine elementen bevatten, zoals selectievakjes en keuzerondjes die een precieze beweging en klikken van de muis kunnen vereisen. Iemand met een motorische beperking heeft misschien niet de controle die nodig is om dergelijke precieze acties uit te voeren. Met een correcte tabindex kan een gebruiker door elk formulierelement bladeren en ermee communiceren door eenvoudig op het toetsenbord te drukken. Een tabbladindex komt ook ten goede aan degenen die geen toegang hebben tot een muis en alleen op de gebruiker van een toetsenbord vertrouwen om door een website te navigeren.
We weten allemaal over alt-tekst. Het is die tekst die we aan afbeeldingen moeten toevoegen om onze site te valideren. Iedereen gebruikt ze toch? Eigenlijk zijn er tal van websites die dat niet doen en degenen die ze vaak verkeerd gebruiken. Er is zelfs veel discussie over het correcte gebruik van het alt-attribuut.
Het alt-kenmerk heeft drie hoofddoelen:
"De waarheid is dat alternatieve tekst voor afbeeldingen afhankelijk is van de context waarin deze wordt geplaatst"
In essentie is alt-tekst het tekstequivalent van een afbeelding of andere mediabron en wordt deze gebruikt wanneer de afbeelding om verschillende redenen niet toegankelijk is. Dus welke informatie gebruiken we precies voor het alt-attribuut? Sommige mensen plaatsen gedetailleerde beschrijvingen van de afbeelding terwijl anderen deze inladen met zoekwoorden in een poging om hun zoekranglijst te helpen. De waarheid is dat alternatieve tekst voor afbeeldingen afhankelijk is van de context waarin deze wordt geplaatst.
Het is bijvoorbeeld gebruikelijk dat een relevante afbeelding een blogpost vergezelt, zoals een typemachine voor een artikel over freelance schrijven. Het artikel zelf verwijst niet naar het beeld en daarom is het behoorlijk overbodig. Sommige mensen geven het alt-attribuut de waarde van 'typemachine' of 'afbeelding van een typemachine' of misschien geven ze de waarde van de titel van het artikel. Al deze methoden zijn echter fout. Laten we eens kijken waarom.
Ten eerste moeten we ons voorstellen dat we het beeld niet kunnen zien. Dus als de waarde van het alt-attribuut 'typemachine' was, dan zagen we de titel van de blogpost, het woord 'typemachine' op zichzelf en de hoofdtekst van het artikel - dit heeft geen zin als het als tekst wordt bekeken en het zou nog meer verwarrend als je een schermlezer en willekeurig 'typemachine' gebruikte.
Over het algemeen is het het beste dat u geen uitdrukkingen zoals 'een afbeelding van' of 'een afbeelding van' gebruikt bij het verschaffen van alt-attribuutwaarden. Het alt-attribuut zal alleen degenen ten goede komen die het beeld om verschillende redenen niet kunnen zien, dus als deze gebruikers worden verteld dat er een afbeelding is, biedt dit geen echte waarde, behalve het opruimen van verwarring veroorzaakt door de bovenstaande methode.
Ten slotte zou het geven van het alt-attribuut de waarde van de titel van de blogpost er alleen toe leiden dat de titel twee keer als tekst wordt weergegeven of tweemaal wordt herhaald bij het gebruik van schermlezers. Alt-tekst mag geen informatie herhalen die al als tekst is verstrekt, het is gewoon onnodig en mogelijk verwarrend.
De beste optie in dit scenario is simpelweg om een lege alt-attribuutwaarde op te geven. Een blanco waarde zorgt ervoor dat er geen mogelijk verwarrende of irrelevante informatie wordt gecommuniceerd en er is geen nadeel aan het begrip van het artikel, omdat het beeld hiertoe niet essentieel is. Sommigen beweren dat omdat het beeld puur esthetisch is, het dan niet inhoudelijk is en daarom niet thuishoort in de HTML en moet worden weergegeven met behulp van CSS, maar er zijn verschillende opvattingen hierover.
Zoals u kunt zien, kan het verstrekken van correcte alt-attribuutwaarden lastig zijn en erg afhankelijk van de situatie. Het beste advies is om elk scenario afzonderlijk te beoordelen, te beslissen of de afbeelding nodig is voor begrip en gebruik uw gezond verstand.
Net als tabbladindices zijn toegangssleutels een waardevolle functie voor gebruikers die afhankelijk zijn van een toetsenbord om door een website te navigeren. Helaas zijn toegangssleutels een van de minst gebruikte HTML-elementen, vooral omdat veel mensen zich er niet bewust van zijn en degenen die ervoor kiezen om ze niet te implementeren ondanks het feit dat het extreem eenvoudig is.
Toegangstoetsen zijn in feite sneltoetsen waarmee een gebruiker op het toetsenbord snel naar bepaalde delen van een website kan navigeren. Toegangstoetsen kunnen worden gebruikt door een functietoets ingedrukt te houden (meestal Alt op Windows of Ctrl op Macs) en op een specifieke letter of cijfertoets te drukken die overeenkomt met een gedeelte van de site.
Zoals ik eerder al zei, zijn Access Keys ongelooflijk eenvoudig te implementeren. Het gaat om een eenvoudig stuk HTML-code toegevoegd aan de navigatie-ankertags van uw site -
Huis
Eenvoudig.
Een probleem met Access Keys is dat er geen universele set toegewezen toetsen is waarvan gebruikers kunnen verwachten dat ze worden gebruikt en gecombineerd met geen echte standaard voor het informeren van gebruikers over de resultaten die feitelijk zijn gebruikt, omdat Access Keys behoorlijk ineffectief is.
De Britse overheid heeft echter een aantal aanbevolen toegangssleutels om toe te wijzen, deze zijn als volgt:
Zoals u kunt zien, zijn veel van de bovenstaande methoden zeer eenvoudig te implementeren en vereisen ze slechts een basiskennis van HTML. Het toegankelijker maken van uw website hoeft niet tijdrovend te zijn, enorme aanpassingen te vereisen of schadelijk te zijn voor de aantrekkelijkheid van een website.
Ik vind het belangrijk dat zowel ontwerpers als ontwikkelaars goed geïnformeerd zijn over toegankelijkheid en dit beschouwen in de verschillende stadia van het bouwen van een website. Hoe eerder in het ontwerpproces aandacht en gedachte worden besteed aan toegankelijkheid, hoe gemakkelijker het is om deze methoden te integreren en betere resultaten te behalen.
Het is ook belangrijk om te onthouden dat de meeste van de hierboven beschreven methoden niet alleen personen met een handicap helpen, maar ten goede komen aan alle gebruikers van uw website. Sommige tips kunnen zelfs uw ranglijst met zoekmachines verbeteren.
We hebben slechts enkele tips besproken die uw website toegankelijker maken, maar als u echt toegewijd bent, wilt u misschien weten hoe u zich kunt schikken naar de volledige lijst met toegankelijkheidsrichtlijnen voor webinhoud..
Accentsconagua