Checklist voor webtoegankelijkheid

Toegankelijkheid is de praktijk om ervoor te zorgen dat websites even toegankelijk zijn voor mensen met een handicap, zodat ze gelijke toegang hebben tot de goederen en diensten die deze sites bieden. Het is een integraal onderdeel van professioneel webdesign en ontwikkeling.


Contents

Waarom zou je erom geven? Toegankelijkheid?

Er zijn veel redenen waarom ontwikkelaars, ontwerpers en hun werkgevers / klanten ervoor moeten zorgen dat toegankelijkheid een vroeg en integraal onderdeel is van het proces van webontwikkeling.

  • In veel gebieden, zoals de VS, de EU, het VK, Israël en Japan, is het wettelijk verplicht om mensen niet te discrimineren vanwege hun handicap. Vorig jaar in de Verenigde Staten, 2.235 nieuwe ADA Website-rechtszaken werden aangespannen bij de federale rechtbank. Dat is er één per uur.
  • Toegankelijke sites zijn doorgaans beter gecodeerd, robuuster en scoren goed in zoekmachines.
  • Toegankelijke sites zijn dat vaak beter bruikbaar voor niet-gehandicapte bezoekers, wat leidt tot meer tevredenheid en bekering.
  • Ontoegankelijke sites zijn slecht voor het bedrijfsleven. In 2019, een Britse enquête ontdekten dat meer dan 4 miljoen mensen een winkelwebsite hebben verlaten vanwege de toegankelijkheidsbarrières die ze hebben gevonden. Dat verloren bedrijf, het ‘Click-Away Pound’, bedroeg £ 17,1 miljard. Dat is miljard. Alleen al in het VK.
  • Het is een slechte zaak om potentiële klanten vrijwillig af te wijzen.

De gemeenschappelijke normen en problemen

Gelukkig heeft de W3C (de instantie die veel van de standaarden produceert waar het web op vertrouwt) een standaard voor het toegankelijk maken van websites. Het heet Richtlijnen voor toegankelijkheid van webcontent (WCAG). Er zijn drie conformiteitsniveaus (A, AA, AAA), waarbij ‘A’ het laagste toegankelijkheidsniveau is. Ik raad je aan om te streven naar niveau AA.

Helaas is WCAG een lang, droog en zeer technisch boek, dus laten we eens kijken wat je relatief gemakkelijk kunt doen en de grootste waar voor je geld krijgen. Dit is geen checklist voor alles wat u moet weten; het is een checklist van de meest voorkomende fouten en de fouten die mensen met een handicap zeggen, zijn hun belangrijkste blokkers, met praktische suggesties om de problemen op te lossen. Alle externe links openen in een nieuw tabblad.

In de Click-Away Pound-enquête werd aan respondenten met een handicap gevraagd wat de belangrijkste blokkades voor hen waren bij het voltooien van aankopen. Dit zijn de belangrijkste belemmeringen (meerdere antwoorden waren toegestaan):

  1. Overvolle pagina’s met te veel inhoud – 66%
  2. reCAPTCHA-tests – 59%
  3. Slechte leesbaarheid (contrast, tekstlay-out) 56%
  4. De afleiding van bewegende beelden en afbeeldingen – 53%
  5. Slechte linkinformatie – 59% (77% voor gebruikers van schermlezers)
  6. Formulier invullen 56%

Hoe de toegankelijkheid van websites te verbeteren

Houd er ten eerste rekening mee dat geen van de top 5 technische problemen zijn: het zijn ontwerp- of copywriting-fouten.

1) Te veel inhoud

Kortom: verdeel tekst in secties met koppen en lijsten met opsommingstekens. Gebruik eenvoudige taal.

Het is bekend dat naarmate het aantal keuzes toeneemt, ook de inspanning vereist om informatie te verzamelen en goede beslissingen nemen. Hetzelfde geldt voor te veel inhoud: het wordt al snel overweldigend. Inhoud herleiden tot de essentie is een tijdrovend vak; zoals Mark Twain (naar verluidt) schreef: “Ik had geen tijd om een ​​korte brief te schrijven, dus schreef ik in plaats daarvan een lange.”

Het recente boek Schrijven is ontwerpen suggereert

Mensen willen lange tekstblokken kunnen doorbladeren, ongeacht het zicht of geluid, dus het is uiterst belangrijk om uw lange schrijfformulieren te structureren met kopteksten, korte alinea’s en andere praktische tips voor het ontwerpen van inhoud.

Zo:

  • Heb er maar één

    op een pagina.

  • Gebruik subrubrieken royaal; het verdeelt een ‘plak’ tekst voor ziende gebruikers, terwijl gebruikers van ondersteunende technologieën zoals schermlezers een sneltoets kunnen gebruiken om tussen koppen te springen of om een ​​mentale kaart van de inhoud uit de kopstructuur te verkrijgen.
  • Sla geen koppen over. Als u bijvoorbeeld een

    , zorg ervoor dat het wordt voorafgegaan door een

    .

  • Gebruik lijsten met opsommingstekens (zoals deze!) Die correct zijn gemarkeerd in HTML als
      ,
    • . Schermlezers kondigen “Lijst van 10 items” aan (en laten de gebruiker erover springen).

    Gebruik gewoon Engels

    Monzo Bank’s Gids “Onze toon” verklaart het belang van duidelijke taal:

    In 2010 voerde de Amerikaanse advocaat Sean Flammer een experiment uit. Hij vroeg 800 kringrechters om zich te scharen achter een traditioneel ‘legalese’ argument, óf een in wat hij ‘gewoon Engels’ noemde.

    De rechters gaven overweldigend de voorkeur aan de gewone Engelse versie (66% tot 34%), en die voorkeur gold ongeacht hun leeftijd of achtergrond.

    Flammer-opmerkingen (PDF) van de gewone Engelse versie:

    Het is bijna een pagina korter, dus het elimineert duidelijk onnodige zinnen en woorden. De zinnen zijn gemiddeld 17,8 woorden, in tegenstelling tot 25,2 woorden.

    Hij concludeert:

    We hebben nu 25 jaar empirisch onderzoek dat tot een onontkoombare conclusie leidt: als je je lezer wilt behagen en overtuigen, schrijf dan in gewoon Engels.

    2) ReCAPTCHA

    Kortom: laat uw gebruikers niet door potentieel onmogelijke hoepels springen om tijd voor de ontwikkelaar te besparen.

    Respondenten hadden het vaak over een oud ReCAPTCHA-versie:

    versies van reCAPTCHA met wiebelende tekst die u opnieuw moet typen

    Ik heb moeite met de afbeeldingen en moet de cijfers of letters typen. In het soort waarbij ik moet klikken op welke afbeeldingen een winkel hebben of wat dan ook, mis ik er altijd een paar of raak ik in de war en verbruik ik energie die ik niet heb …

    De wankele lettersstijl van reCAPTCHA is nu afgeschaft. Het komt veel vaker voor om een ​​nieuwere incarnatie te zien genaamd “No CAPTCHA reCAPTCHA” (ook bekend als de “Ik ben geen robot “Checkbox) die vereist dat de gebruiker een vakje aanvinkt om te bevestigen dat hij geen robot is en die geheime voodoo gebruikt om de gebruiker te scoren. Als ze slagen, is er geen verdere interactie vereist. Als ze echter niet slagen, wordt er nog een uitdaging weergegeven:

    Gedeeltelijke schermafbeelding van een captcha waarin de gebruiker wordt gevraagd op alle vierkanten met sinaasappels te klikken

    Houd er rekening mee dat het type CAPTCHA waarbij een gebruiker op alle vierkanten moet klikken met (bijvoorbeeld) een straatnaambord, niet noodzakelijk internationaal is. Zoals Terence Eden schrijft, CAPTCHA’s bewijzen niet dat je een mens bent, ze bewijzen dat je een Amerikaan bent.

    De meest toegankelijke vorm van reCAPTCHA is reCAPTCHA v3 die geen gebruikersinteractie vereist, maar u moet meer werk doen om bezoeken af ​​te handelen die de test niet doorstaan:

    Het is een pure JavaScript-API die een score retourneert, waardoor u actie kunt ondernemen in de context van uw site: bijvoorbeeld aanvullende verificatie-factoren vereisen, een bericht naar moderatie sturen of bots beperken die mogelijk inhoud schrapen.

    3) Slechte leesbaarheid

    Kortom: zorg ervoor dat tekst voldoende contrast heeft, leesbaar is en niet gerechtvaardigd.

    • Zorg voor voldoende contrast. Een van de meest voorkomende toegangsblokkers op internet is een slecht contrast tussen tekst en achtergrond. De W3C-richtlijnen vereisen een contrastverhouding van minimaal 4,5: 1, behalve voor grootschalige tekst en afbeeldingen van grootschalige tekst die een contrastverhouding van minimaal 3: 1 moeten hebben (logo’s en ‘incidentele’ tekst zijn vrijgesteld). Er zijn veel hulpprogramma’s die contrastverhoudingen voor u kunnen meten; mijn persoonlijke favoriet is de uitstekende van Ada Rose Cannon contrast widget, wat een handige browser bookmarklet is die gebieden met onvoldoende contrast op uw pagina belicht.
    • Hebben geen hoofdletters. Er zijn aanwijzingen dat ze moeilijker te lezen zijn omdat hoofdletters allemaal dezelfde hoogte hebben, dus we kunnen de vorm van gewone woorden niet herkennen. Bovendien zullen sommige schermlezers groepen hoofdletters spellen alsof het afkortingen zijn (zoals BBC, DOJ, enz.). Als je alle hoofdkoppen moet hebben, schrijf ze dan in een normaal geval in je HTML en transformeer ze met CSS text-transform: hoofdletters.
    • Tekst links uitlijnen. (Voor pagina’s in talen van rechts naar links, zoals Arabisch of Hebreeuws, tekst rechts uitlijnen.) Niet rechtvaardigen, omdat dit het moeilijker maakt voor mensen met dyslexie om te lezen. De Stijlgids van British Dyslexia Association suggereert ook

      Gebruik schreefloze lettertypen, zoals Arial en Comic Sans, omdat letters er minder druk uit kunnen zien. Alternatieven zijn Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Afleidende afbeeldingen en afbeeldingen

    Kortom: laat gebruikers elke beweging stoppen; hun besturingssysteeminstellingen respecteren; video niet automatisch afspelen.

    Een respondent op de Click-Away Pound-enquête schreef,

    Sites die ik vroeger met weinig problemen gebruikte, worden nu een probleem, omdat ze nu bewegende advertenties aannemen en constant meer advertenties laden terwijl u winkelt.

    Het meest basale niveau van WCAG vereist: “Voor alle bewegende, knipperende of scrollende informatie die (1) automatisch start, (2) langer dan vijf seconden duurt en (3) parallel met andere inhoud wordt gepresenteerd, is er een mechanisme voor de gebruiker om het te pauzeren, te stoppen of te verbergen, tenzij beweging, knipperen of scrollen deel uitmaakt van een activiteit waar het essentieel is ”.

    Afleiding is een ergernis – vooral voor mensen met ADHD of andere cognitieve stoornissen. Maar beweging en flitsen kunnen ook aanvallen veroorzaken, dus volgens de WCAG-richtlijnen mag de inhoud niet meer dan 3 keer knipperen binnen een periode van 1 seconde.

    Respecteer de keuze van de gebruiker voor animaties

    Bij alle belangrijke besturingssystemen kan de gebruiker een voorkeur uitspreken voor verminderde beweging op het scherm – misschien omdat ze een bewegingsgestuurde vestibulaire spectrumstoornis hebben. Uw website kan detecteren of de gebruiker dit heeft gedaan met de CSS geeft de voorkeur aan verminderde beweging mediaquery.

    Hier staan ​​we alleen een knop toe om te animeren als de gebruiker geen voorkeur heeft uitgesproken:

    @media (geeft de voorkeur aan gereduceerde beweging: geen voorkeur) {
    knop {
    / * `trillen` keyframes worden elders gedefinieerd * /
    animatie: trillen 0,3s lineair oneindig beide;
    }
    }

    Als u een site wilt aanpassen die veel animatieregels heeft, kan het volgende stop alle eerder gedeclareerde CSS-animaties:

    @media (geeft de voorkeur aan gereduceerde beweging: verminderen) {
    *,
    *::voordat,
    *::na {
    animatie-duur: 0.001s! belangrijk;
    overgangsduur: 0,001s! belangrijk;
    }
    }

    Over het respecteren van de besturingssysteemvoorkeuren van de gebruiker, zou u kunnen overwegen het ontwerpen van uw website voor donkere modus.

    5) Slechte linkinformatie

    Kortom: maak links herkenbaar, met unieke linktekst. Waarschuw gebruikers als een link een nieuw tabblad of een bestand opent.

    Een van de hoofdoorzaken van slechte links is vaak een slechte copywriting. Met de meeste schermlezers kan de gebruiker snel een lijst met links op een pagina zien (in de meest gebruikte commerciële schermlezer, JAWS, is de sneltoets Ins + F7; in de gratis NVDA-schermlezer, dezelfde sneltoets geeft een lijst met elementen weer met paginalinks, koppen en oriëntatiepunten).

    Als elke link echter de tekst “Klik hier” of “Lees meer” heeft, en niets anders om ze te onderscheiden, is dit nutteloos. De eenvoudigste manier om dit op te lossen, is door unieke linktekst te schrijven, maar als dat niet mogelijk is, kunt u de linktekst overschrijven voor ondersteunende technologie door een uniek aria-labelattribuut op elke link te gebruiken.

    Hier is een goed voorbeeld van de Joomla website:

    Joomla-website met twee verschillende verhalen, elk met identiek

    De zichtbare linktekst is gewoon “lees meer”, maar Joomla gebruikt aria-label kenmerken om elk uniek te maken voor ondersteunende technologie:

    Lees verder
    
    Lees verder

    Vanwege de aria-label tekst zal worden gebruikt in plaats van de linktekst door ondersteunende technologieën, W3C raadt aan om de tekst die wordt gebruikt in aria-label te starten met de tekst die in de link wordt gebruikt, aangezien “dit een consistente communicatie tussen gebruikers mogelijk maakt”.

    Notitie: Een slecht advies dat ik nog steeds op oude sites zie, is om verklarende tekst toe te voegen aan links met behulp van de titel attribuut:

    Lees meer>

    Doe dit niet. De titel is niet zichtbaar voor de meeste schermlezers (ontwikkelaars vulden het altijd met zoekwoorden voor “SEO” -doeleinden, dus leveranciers van schermlezers hebben het standaard uitgeschakeld), en browsers presenteren titelkenmerken als ‘tooltips’ die alleen beschikbaar zijn voor muisgebruikers die met de muisaanwijzer zweven.

    Links moeten op links lijken

    Standaard onderstrepen browsers links. Het is het beste om dit niet te veranderen, maar als u op de parkeerplaats met de ontwerper hierover ruzie verliest, moet de linktekst een contrastverhouding van 3: 1 hebben ten opzichte van de omringende niet-linktekst en moet deze een niet-gekleurde aanduiding geven ”Dat ze een link zijn wanneer ze zweven of gefocust zijn, bijvoorbeeld:

    a: hover, a: focus {text-decoration: underline;}

    De focusstijl zorgt ervoor dat de link onderstreept wordt wanneer een niet-muisgebruiker erop focust vanaf het toetsenbord, de stylus of de spraakinvoer. Over het algemeen moet, wanneer iets op een pagina een zweefstijl heeft, het ook een focusstijl krijgen.

    De ‘niet-kleuraanduiding’ (in ons geval een onderstreping) zorgt ervoor dat bezoekers met slechtziendheid of kleurenblindheid de verandering zullen zien bij zweven of focussen. (Schermlezers kondigen automatisch “Link” aan vóór linktekst.)

    Vertel mensen of de link een nieuw tabblad / pagina opent

    Het kan voor een bezoeker verwarrend zijn als het activeren van een link een nieuw tabblad of een nieuw venster opent, vooral als slechts enkele links op een pagina dit doen (bijvoorbeeld alleen externe links openen een nieuw tabblad). Als u dit moet doen, moet u de gebruiker waarschuwen in de linktekst of de bovenstaande aria-labelmethode gebruiken.

    Vertel mensen of er een koppeling naar een bestand is

    Als een link naar een bestand is (bijvoorbeeld een pdf of een video), vertel dit dan aan de gebruiker in de linktekst. Verberg het niet aria-label, aangezien dit nuttig kan zijn voor veel ziende gebruikers (sommige mobiele telefoons kunnen bijvoorbeeld geen .docx-bestand openen). Als het een groot bestand is, overweeg dan om de gebruiker te waarschuwen over de geschatte grootte; ze willen misschien geen groot videobestand via 3G downloaden.

    U kunt ook de downloaden attribuut, waardoor de browser het dialoogvenster voor het downloaden van het systeemeigen bestand opent. Alles bij elkaar ziet de code er als volgt uit:

    Jaarverslag (PDF, 240 MB)

    6) Nog een ontwerpfout: het verwijderen van de focusring

    Kortom: zorg ervoor dat een toetsenbordgebruiker altijd kan zien waar hij / zij zich op richt.

    We hebben het genoemd :focus stijlen eerder. Ze zijn een onschatbare visuele indicator voor mensen die om welke reden dan ook geen muis kunnen gebruiken: misschien hebben ze RSI, Parkinson of Multiple Sclerose. Standaard geven browsers een focusring weer op het huidig ​​gefocuste element. Hier is de Home-link op mijn persoonlijke site, gericht in een Chromium-browser:

    Screenshot van de standaard focusring van Chromium rond een link (die ook een afbeelding is)

    Sommige mensen vinden dit echter esthetisch onaangenaam wanneer ze een muis gebruiken en schakelen het uit met CSS, waardoor de site ontoegankelijk blijft voor toetsenbordgebruikers.

    Voer een nieuwe standaard in, een pionier van Firefox, genaamd : focus zichtbaar. Hiermee wordt een focusring op een element toegepast als het is bereikt door een toetsenbord of een niet-muisaanwijsapparaat, maar niets wordt getoond aan muisgebruikers. Omdat het alleen wordt ondersteund in Firefox (op het moment van schrijven), Patrick Lauke suggereert de volgende CSS om mooi met alle browsers te spelen:

    knop: focus {/ * een aantal spannende stijlen voor knopfocus * /}
    button: focus: not (: focus-visible) {
    / * maak alle bovenstaande gerichte knopstijlen ongedaan
    als de knop focus heeft, maar de browser normaal niet
    toon standaard focusstijlen * /
    }
    knop: focus zichtbaar {/ * sommige zelfs * meer * spannende knopfocusstijlen * /}

    7) Formulier invullen

    Kortom: ontwerp formuliervelden die eruitzien als formuliervelden, elk gekoppeld aan een label. Schakel automatisch aanvullen niet uit.

    Gezien het cruciale belang van formulieren voor eCommerce-sites, verbaast het me hoeveel ontoegankelijke formulieren ik zie. Vaak komt dit omdat oude browsers niet veel toestonden om vormelementen te stylen, dus ontwikkelaars vervalsten ze met andere HTML-elementen. Moderne browsers laten dat toe aantrekkelijke selectievakjes, keuzerondjes, custom select componenten en comboboxen, toegankelijke autocomplete controles en meer.

    Automatisch aanvullen is je vriend

    Door browsers toe te staan ​​formulieren automatisch in te vullen, hoeven bezoekers minder te doen, dus zullen ze eerder een formulier invullen en zich aanmelden / uw product kopen. Automatisch aanvullen op browsers: een diepe duik is een geweldig artikel van eBay hierover (en dat zouden ze moeten weten).

    Ook is autocomplete de enige techniek die momenteel voldoende is om AA-naleving te bereiken Succescriterium 1.3.5: Identificeer het doel van de invoer.

    Maak formuliervelden eruit als formuliervelden

    Standaard geven browsers formulierinvoervelden weer als vakken. Stijl deze in ieder geval met marges, opvulling en randen, maar bewaar ze als vakken. Veel ontwerpers volgden het Material Design-patroon van vóór 2017 van Google, waarbij de gebruiker één enkele regel gebruikte om tekst in te voeren:

    Invoer van oud materiaalontwerp, met horizontale lijn in plaats van rechthoekige doos

    Google ontdekte echter dat de regel onder de oude tekstvelden voor sommige gebruikers niet duidelijk was, vaak verward met een scheidingslijn, en veranderde het ontwerp. In een bruikbaarheidstest met 600 deelnemers ontdekten ze dat

    ingesloten tekstvelden met een rechthoekige (doos) vorm presteerden beter dan die met een lijntoeslag … Tegenwoordig verschijnen deze nieuwe tekstvelden in Google-producten, van inlogpagina’s voor accounts tot Google-formulieren.

    Als je overweegt de volledige Material Design UI-bibliotheek van Google te gebruiken, lees dan Stop met het gebruik van Material Design-tekstvelden! door Matsuko Friedland om te zien of het aan uw behoeften voldoet.

    Label alle formuliervelden

    Alle formuliervelden (tekstinvoer, selectievakjes, keuzerondjes, schuifregelaars, enz.) Moeten worden gelabeld. De beste manier om dit te doen is door een HTML te gebruiken ; zoals WCAG zegt, “standaard HTML-besturingselementen voldoen al aan dit succescriterium bij gebruik volgens specificatie”.

    Hier is een demo die ik heb gemaakt van een niet-gelabeld formulierveld versus een gelabeld formulierveld. Ze zien er identiek uit, maar de bovenste heeft geen goed label, terwijl de tweede dat wel heeft. Klik op het tekstlabel van het onderste en u zult zien dat het zich richt op de bijbehorende invoer.

    nep versus echte labelvergelijking

    Dit maakt het focussen van een invoer veel gemakkelijker voor iemand met motorische controlemoeilijkheden – of misschien voor jou, die een klein selectievakje op een klein scherm op een hobbelige trein probeert aan te vinken. Het is ook van vitaal belang voor gebruikers van schermlezers die velden in een formulier doorbladeren (standaard kunnen alleen links en formuliervelden worden scherpgesteld door middel van tabbladen); wanneer ze in een invoerveld komen, zal de schermlezer de inhoud van het bijbehorende label aankondigen.

    De code hiervoor is simpel. Het invoerveld krijgt een unieke ID en het label wordt eraan gekoppeld met de voor attribuut:

    
    

    Etiketten verbergen

    Af en toe wil je misschien geen zichtbaar label. Of de ontwerper niet, en je wilt geen nieuw gevecht op de parkeerplaats. Hoe dan ook, hier is een voorbeeld wanneer een label met de tekst ‘Zoeken’ voorafgaand aan de invoer als overdreven aanvoelt.

    Invoerveld, met daarna de knop 'zoeken'

    We kunnen het invoerveld koppelen aan de tekst “Zoeken”, dat is de inhoud van de verzendknop met aria-labelledby:

    
    

    We hadden kunnen gebruiken aria-label (die we eerder hebben ontmoet toen we het over links hadden):


    Maar het is altijd beter om de voorkeur te geven aan zichtbare tekst op een pagina, omdat die wordt vertaald als de pagina door een vertaaltool wordt geleid, terwijl tekst die “verborgen” is in HTML-attributen dat niet zal zijn. (Hat-tip voor Adrian Roselli voor deze tip, uit zijn prachtige artikel Mijn prioriteit van methoden voor het labelen van een controle.)

    Meest voorkomende fouten op de top miljoen startpagina’s

    We hebben gekeken naar de belangrijkste belemmeringen voor eCommerce-sites zoals gerapporteerd door gebruikers met een vorm van beperking. Laten we nu eens kijken naar een veel bredere reeks sites: de startpagina’s voor de top 1.000.000 websites, automatisch geanalyseerd door WebAIM in augustus 2019. 98% van de geanalyseerde pagina’s bevatte ten minste één fout. De meest voorkomende fouten zijn

    1. Tekst met laag contrast (86,1%)
    2. Alternatieve tekst voor afbeeldingen ontbreekt (67,9%)
    3. Lege links (58,9%)
    4. Ontbrekende formulierinvoerlabels (53,2%)
    5. Ontbrekende documenttaal (30,5%)

    We hebben hierboven te maken gehad met laag contrast, links en formulierinvoer. Laten we nu eens kijken hoe we de andere veel voorkomende fouten kunnen vermijden.

    8) Biedt tekstalternatieven voor alle afbeeldingen, video en audio

    Kortom: alle informatie die via een afbeelding of video wordt meegedeeld, moet een tekstueel equivalent hebben.

    Elke moet een alternatieve tekst hebben (“alt-tekst”) die kan worden gecommuniceerd aan bezoekers met een visuele beperking of mensen met een lage bandbreedte / dure dataplannen die afbeeldingen hebben uitgeschakeld in hun browser. Dit omvat afbeeldingen van tekst.

    Dit zijn de basisregels:

    • Als de afbeelding puur decoratief is, moet deze lege alt-tekst bevatten: alt = "". (Maar puur decoratieve afbeeldingen zouden hoe dan ook waarschijnlijk in CSS moeten zijn.)
    • Als een afbeelding wordt beschreven in hoofdtekst, moet deze lege alt-tekst bevatten (alt = ""), om herhaling te voorkomen. Maar wees voorzichtig als het een is in een
      – zien Hoe kom je erachter? voor meer.
    • Als een afbeelding de enige inhoud van een link is (er kan bijvoorbeeld op het logo van uw organisatie worden geklikt om naar de startpagina te gaan), moet de alternatieve tekst de bestemming van de link beschrijven. Bijvoorbeeld, alt = "startpagina".
    • Gebruik geen pictogramlettertypen; ze kunnen erg slecht zijn voor dyslectische mensen. Als je ze gebruikt, zet ze om naar SVG.

    Video en audio alternatieve tekst

    Vergeet niet dat audiocontent alternatieve tekst nodig heeft voor mensen met gehoorproblemen. Dat betekent transcripties van podcasts en ondertitels op video’s. En nogmaals: speel media niet automatisch af.

    9) Voeg de juiste documenttaal toe

    Kortom: laat ondersteunende technologie de taal weten waarin uw tekst is geschreven.

    30% van de startpagina’s geeft niet aan in welke taal ze zijn geschreven, waardoor ze verwarrend kunnen zijn voor gebruikers van schermlezers. Dit is belangrijk omdat het woord “zes” heel anders wordt uitgesproken als de zin bijvoorbeeld in het Engels of Frans is.

    Dit is eenvoudig op te lossen door een lang attribuut toe te voegen aan uw HTML-element:

    De “en” vertelt een schermlezer (of vertaalsoftware) dat deze pagina in het Engels is. “Es” is Spaans, “fr” is Frans, enzovoort. Voor de meeste talen is het taallabel vrij eenvoudig te bepalen. De W3C heeft een gids voor Een taaltag kiezen.

    Als de pagina inhoud bevat in een andere taal dan de opgegeven hoofdtaal, voegt u een taalkenmerk toe aan een element rond die inhoud. Bijvoorbeeld, op een pagina die Engels is verklaard:

    Als je wilt chatten met a matador, in wat cool cabana
    En ontmoet senoritas door de score, Espana por favor

    10) Help een bezoeker om uw inhoud te verkennen

    Kortom: gebruik HTML-elementen om gebruikers van ondersteunende technologie te helpen uw inhoud te begrijpen en er doorheen te navigeren.

    Wanneer een ziende bezoeker naar uw pagina komt, kunnen ze deze gemakkelijk visueel scannen om te begrijpen waar de navigatie is en waar de hoofdinhoud begint. Een gebruiker van een schermlezer kan dit niet. HTML5 geeft ons echter een aantal nieuwe tags om deze gebieden te markeren, en ondersteunende technologieën hebben snelkoppelingen die kunnen overslaan naar (of overslaan) oriëntatiepunten zoals koptekst, voettekst, navigatie en dergelijke.

    Hier is een video van zes minuten die ik heb gemaakt met Léonie Watson, een webontwikkelaar en gebruiker van schermlezers, over hoe ze haar schermlezer gebruikt om deze semantiek te onderzoeken om door mijn persoonlijke site te navigeren:

    • Wikkel uw belangrijkste inhoud, dat wil zeggen dingen die geen koptekst, primaire navigatie of voettekst zijn, in een
      element. In bijna alle gevallen zou er maar één moeten zijn
      per pagina. Alle browsers (IE9 +) stellen je in staat om het te stylen, en ondersteunende technologieën weten wat ze ermee moeten doen.
    • Wikkel je header (merklogo, strapline, de kop van de pagina) in een
      element.
    • Wikkel uw voettekst (legale zaken, contactgegevens, copyrightvermelding, enz.) In een
    • Markeer uw primaire navigatie met
        verpakt in een element. Dit kan in de
        als dat past bij het visuele ontwerp van de pagina.
      • Advertenties en niet-essentiële inhoud moeten worden verpakt in een
      • Als je meer dan één product / video / nieuwsitem / blogbericht op een pagina hebt, wikkel ze dan allemaal in een
        element.

      In zijn overzicht van gebruikers van schermlezers, WebAIM ontdekte dat 26% van de gebruikers van schermlezers deze oriëntatiepunten vaak of altijd gebruikt bij het navigeren op een pagina.

      Bovendien, het inpakken van afzonderlijke stukjes inhoud in

      helpt Apple’s WatchOS om content optimaal weer te geven. Zie mijn artikel De praktische waarde van semantische HTML voor meer hierover.

      11) Gebruik HTML op de juiste manier

      In het kort: begrijp de semantiek en het standaardgedrag van HTML-elementen; gebruik het juiste element voor uw inhoud.

      Een gemeenschappelijk thema in dit artikel is het gebruik van de juiste HTML-elementen. Met behulp van een etiket heeft een ingebouwd browsergedrag dat het bijbehorende invoerveld focust; gebruik makend van

      heeft de voorkeur

      omdat het gebruikers van schermlezers rechtstreeks naar de belangrijke inhoud laat springen terwijl ze volledig onopvallend zijn voor degenen die geen schermlezer gebruiken.

      Een ander voorbeeld is het gebruik van een

      Like this post? Please share to your friends:
Adblock
detector
map