Web Accessibility (WCAG) Checklist: laat uw website voor iedereen werken.

Is uw website 'gesloten de deur', miljoenen klanten geplaatst? Open de Checklist Web Accessibility (WCAG) die iedereen moet weten.
Stel je voor ... je hebt een enorm marketingbudget. Schiet zwaar op de website is prachtig ontworpen. Maar er is een groep mensen die je producten "willen kopen", maar kunnen niet ... niet ... niet omdat hij geen geld heeft, maar omdat je website "voor hem" heeft gebruikt "
Die groep mensen kan visueel worden aangetast met behulp van schermlezers, maar uw website heeft geen uitleg. Of kan de ouderen zijn dat de handen beginnen te trillen, zorgt ervoor dat u op uw kleine knop klikt of zelfs een persoon met tijdelijke armen die de muis niet gemakkelijk kunnen gebruiken ... het zijn alle "klanten" die u uitduwt zonder het te weten.
Dit probleem is geen kleine zaak. En het is geen verre materie meer in een tijdperk dat iedereen praat over de gelijkheid, het hebben van een website waartoe iedereen toegang heeft of webtoegankelijkheid is niet alleen "goede dingen om te doen", maar het is "de standaard die nodig is" om de enorme zakelijke kansen te ontgrendelen. En voorkomend juridisch risico dat in de toekomst kan optreden
Prompt: afbeeldingen op split-screen vergeleken. Een kant is een foto van een klant die gemakkelijk glimlacht. De andere kant is een foto van een klant met oogdefecten. (Er kan een symbool zijn van het witte personeel daarnaast). Ik maak een teleurstelling terwijl ik probeer dezelfde website te gebruiken. Maar zijn computerscherm toont een vervorming die obstakels in toegang heeft
Waarom wordt de prachtige website een "muur" die klanten blokkeert?
Dit probleem komt voort uit "blinde vlekken" die veel bedrijven over het hoofd zien. We hebben de neiging om geobsedeerd te zijn door het ontwerp van het web om in de ogen van de meeste mensen te "mooi" totdat ze vergeten dat de "goede ervaring" van elke persoon niet hetzelfde is. De belangrijkste reden is van:
- Focus op "afbeeldingen" in plaats van "structuur": ontwerpers en marketeers hebben de neiging zich te concentreren op de schoonheid van lay -out, kleur en animatie, maar het verwaarlozen van de juiste HTML -structuur, die de sleutel is tot het helpen van technologie (ondersteunende technologie), zoals schermlezer, kan "begrijpen" en "communicatie" op internet.
- Probleem en misverstanden: veel mensen denken dat webtoegankelijkheid alleen een kwestie is van "kleine gehandicapten", maar in werkelijkheid is het gerelateerd aan veel mensen. Zowel ouderen, mensen met tijdelijke handicaps (zoals gebroken armen), of zelfs mensen in een beperkte situatie (zoals het gebruik van het web in de zon die niet in een kleine contrasterende kleur wordt gezien). Uit de gegevens in 2022 heeft Thailand ongeveer 4,19 miljoen mensen met een handicap, of ongeveer 6% van de totale bevolking. Dit is een markt die u niet over het hoofd kunt zien.
- Ik denk dat het een techniek is die "ingewikkeld en duur": het woord "standaard" of "WCAG" kan eng en vol technische termen klinken. Waardoor de bedrijfseigenaar het gevoel heeft dat het een verre materie is en hoog moet investeren, ondanks het feit dat het daadwerkelijk starten van toegankelijkheid kan beginnen vanuit een klein punt dat zeer weinig budget kan gebruiken
Prompt: eenvoudige infographic afbeeldingen tonen een hersenbeeld met uitrusting binnen, maar er komen wat uitrusting uit met oogvormige pictogrammen, oren en handen, met een korte boodschap "focus op visuals alleen", "gebrek aan bewustzijn", "lijkt ingewikkeld" om de oorzaak van het probleem over te brengen.
Vertrek ... riskant dan je denkt! De impact wanneer uw website "niet verwelkomt"
Inleiding tot webtoegankelijkheid missen niet alleen zakelijke kansen, maar het is het risico van uw merk in veel dimensies.
- Verlies van inkomsten en klant: dit is het meest duidelijke effect. U sluit de mogelijkheid om te verkopen met een grote groep klanten met koopkracht. Of het nu rechtstreeks is voor gehandicapten of hun families en vrienden die ervoor kiezen om merken te ondersteunen die om alle groepen geven
- Juridisch risico: in veel landen over de hele wereld zijn er veel particuliere bedrijven die geen website maken voor gehandicapten. Voor Thailand zelf handelt de promotie en ontwikkeling van de kwaliteit van leven van de gehandicapte 2007 en aanverwante ministeriële voorschriften, die het recht bevordert om toegang te krijgen tot informatie en diensten. Hoewel de huidige 100% van de particuliere sector misschien niet zo intens is als overheidsinstanties, maar dit is de trend van de wereld dat het bedrijf dat ver weg kijkt, moet worden voorbereid.
- Breek de geloofwaardigheid van het merk (Brand Trust): in het tijdperk waarin consumenten ervoor kiezen om het merk te ondersteunen van "waarde" die het merk een website heeft die een groep mensen ontmoedigt die een negatief en vernietigd beeld kan creëren, creëert de compositie vertrouwen op de website. Die je probeert te creëren
- Affeoping op SEO: Google is erg belangrijk voor de gebruikerservaring (UX). De website van Hard Access heeft vaak een hoge bouncepercentage, low -on -pagina, wat een slecht signaal is voor SEO. Bovendien hebben veel elementen van toegankelijkheid, zoals het gebruik van correcte koptags, ALT -tekst en duidelijke structuren, ook een direct goed effect op de rangorde en kernwebvitals .
Prompt: de foto toont 4 effecten in de vorm van 4 kaarten: de eerste kaart heeft een beeld van het wegvliegende geld, de tweede bladeren zijn de hamer, het derde blad is een gebroken merklogo en de vierde bladeren zijn de SEO -grafieken die een rode toon hebben om het risico over te brengen.
Het openen van de Schriften om problemen op te lossen: beginnend met 4 principes van WCAG
Maak je geen zorgen. De webtoegang maken is niet zo moeilijk als u denkt. Het hart bevindt zich in een internationale standaard genaamd Web Content Accessibility Richtlijnen (WCAG) , die is verdeeld in 4 grote principes die gemakkelijk te onthouden zijn "pour". Laten we eens kijken wat elk item is en met welke checklist begint u onmiddellijk?
1. Waarneembaar (perceptie) - waardoor gebruikers inhoud door verschillende zintuigen kunnen herkennen
- [] Alle afbeeldingen moeten een verklaring hebben (alt -tekst): schrijf om uit te leggen wat die foto is. Zodat het schermlezerprogramma kan worden gelezen voor de visueel gehandicapten
- [] Video- en audiobestanden moeten andere opties hebben: zoals bijschriften voor de dove of audiobeschrijving voor blinde mensen en transcript.
- [] De kleur die goed moet worden tegengesproken: tekst en achtergrond moeten voldoende contrastverhouding hebben (ten minste 4,5: 1 voor normale tekst) zodat mensen met vage of blindheid gemakkelijk te lezen zijn.
- [] Communiceer niet met alleen kleuren: zoals het maken van een link naar gewoon rood zonder onderaan kan kleurblindheid veroorzaken, weet niet of het een link is
2. Operble (beschikbaar) - Hiermee kunnen gebruikers verschillende webcomponenten bedienen en gebruiken.
- [] Alle functies moeten worden gebruikt via toetsenbord: gebruikers die de muis niet kunnen gebruiken, moeten op het tabblad kunnen drukken om naar de link, de knop en verschillende vorm te schuiven.
- [] Geen "toetsenbordval": gebruikers moeten het toetsenbord gebruiken om in te stappen en "uit te komen" van verschillende delen van de website, niet vastgelopen in de pop-up.
- [] Geef voldoende gebruikstijd: als er een automatische sessie is, moeten gebruikers opties zijn om tijdig aan te vragen.
- [] Vermijd ernstige knipperende gehalte: het licht dat knippert (meer dan 3 keer per seconde) kan bij sommige mensen aanvallen stimuleren.
3.
- [] Gebruik duidelijke en eenvoudige taal: vermijd technische woordenschat of industriële woordenschat zonder uitleg.
- [] Navigatie en navigatie moeten worden voorspeld: ontwerp het menu en de lay -out om op elke pagina consistent te zijn voor gebruikers om te leren en eenvoudig te gebruiken.
- [] Er is een duidelijke fout: wanneer de gebruiker het verkeerd invult, moet een duidelijk bericht hebben dat "waar is mis" en "hoe te repareren" niet alleen "fout" zeggen
4. Robuust (duurzaam) - waardoor het web met verschillende technologie stabiel kan werken
- [] De standaard HTML -code gebruiken: Clean and Correct Code Structure (zoals het gebruik van tag
,,
,,Verantwoordelijk zijn) zal het programma helpen om het beste werk te lezen
- [] Communiceer de status en wijzigingen in het programma om te helpen lezen: wanneer het product wordt toegevoegd aan de mand, moet er bijvoorbeeld een code zijn die het programma waarschuwt om te helpen lezen en aan te kondigen.
Als u meer wilt bestuderen in -DeTTH -informatie, is de officiële bron van W3C Web Accessibility Initiative (WAI) en de community zoals het A11Y -project een uitstekend startpunt.
Prompt: Mooie infographic, verdeeld in 4 delen volgens giet (waarneembaar, operationeel, ongedaan maken, robuust). Elk onderdeel heeft een hoofdpictogram (zoals handvorm, hersenvorm, tandwielen) en een korte checklist 2-3 eronder.
Voorbeelden van het echte ding: wanneer "online winkels" de omzet van 20% verhogen met toegankelijkheid.
Stel je voor "Baan Bakery", een beroemde online dessertwinkel. In het begin is de website erg mooi. Maar ontving de feedback van de oudere klanten dat de kleine letters moeilijk te lezen waren en de "knop toevoegen aan de mand" was zo licht dat het niet kon worden gezien dat het team besloot te herzien. Grote toegankelijkheid
Wat te doen: ze ontmantelen het web niet. Maar beginnend met de update volgens het AA -niveau WCAG. Ze passen de kleurknop aan om donkerder te zijn. Verhoog de grootte van het lettertype een beetje groter, voeg alt -tekst toe aan elk stukje cent die "Strawberry, Soft Cake, Gevecht met bessensaus" en zorg ervoor dat klanten elke stap kunnen bestellen met alleen het toetsenbord.
Verbazingwekkende resultaten: slechts 3 maanden na de verkoop van "Baan Bakery" steeg met bijna 20%, niet alleen uit ouderen. Maar krijg nog steeds nieuwe klanten die de aandacht van het merk bewonderen dat ze 5 -Star beoordelingen hebben ontvangen met opmerkingen die "bedankt voor het maken van een website voor onze ouders om gemakkelijk te gebruiken." Dit is de kracht van ontwerp voor iedereen. Dat verandert van het ontwerp van UX/UI naar normaal om een "cover" -ervaring te creëren en "verkoop te creëren"
Prompt: afbeeldingen van de productpagina op de website "Bake Bakery" aan de zijkant tonen de lichtgekleurde knoppen en de kleine letters. De na toont de donkere knop die duidelijk tegen de achtergrond contrasteert. De letters zijn gemakkelijker te lezen. Met een kleine grafiek die de verkoopstijging toont
Checklist klaar om te gaan! U begint onmiddellijk met het "upgraden" van uw website.
Lees hier, je wilt het waarschijnlijk doen, toch? Probeer deze afkortingschecklist te gebruiken om uw website te verkennen. En begin met een kleine overwinning (snelle overwinningen):
- Verken de startpagina: alle belangrijke foto's, hebben alt -tekst die betekenen? Probeer het extensietool in de browser te gebruiken om te controleren.
- Test met toetsenbord: probeer de muis neer te zetten. En gebruik alleen het tabblad, het tabblad Shift+, voer de knop en spatiebalk in om op uw website te surfen. U kunt naar het menu gaan, op de knop drukken en het formulier succesvol invullen?
- Tsjechische contrastkleur: online tools gebruiken (het zoeken naar "kleurcontrastcontrole") om de kleur van de tekens en achtergrondkleur van de knop te laten vallen (zoals de knop Aankoop, contactknop).
- Lees uw inhoud opnieuw: is er een terminologie of zin die te ingewikkeld is? Probeer het aan te passen aan een taal die mensen over het algemeen begrijpen.
- Bekijk je video's offscale: begrijp je nog steeds alle inhoud via bijschriften?
Net beginnend bij deze 5 items, wordt het als een geweldige stap beschouwd. En als u een nieuwe website gaat maken die deze verhalen vanaf het begin in een deel van de Website van de Process Developing Organisational Develops, zal helpen veel tijd en kosten te besparen.
Prompt: Checklist -afbeeldingen met een goedkoop vak met pictogrammen voor elk item zoals pictogrammen, ketch -pictogrammen, twee -gekleurde cirkels (in plaats van contrast), boekpictogrammen en play -pictogrammen.
Vragen die mensen de neiging hebben zich af te vragen (en het duidelijke antwoord)
V1: Maak de toegankelijkheid en de website ziet er saai uit niet zo mooi als voorheen?
A: Het is niet waar! Dit is het meest voorkomende misverstand. Toegankelijk ontwerp is een "slim" ontwerp, geen "saai" ontwerp. In staat om een website te maken die zowel mooi als beschikbaar is voor iedereen tegelijkertijd, is het een uitdaging die helpt om zelfs de creativiteit te verbeteren.
V2: Heeft u veel budget nodig? Moet ons kleine bedrijf doen?
A: Je hoeft niet alles 100% perfect te doen. Beginnend met "fruit met laag hart" of iets dat gemakkelijk te repareren is, zoals het toevoegen van ALT-tekst of het aanpassen van de kleurknop. Bijna hoeft bijna niet meer budgetten uit te geven aan de meest waardevolle investeringen, is om "bewustzijn" in uw team te creëren en voor kleine bedrijven is dit de mogelijkheid om een voordeel in de concurrentie te creëren en een loyaal klantenbestand voor uw merk te creëren.
V3: WCAG heeft een niveau A, AA, AAA. Op welk niveau moeten we richten?
A: Voor de meeste zakelijke websites en organisaties AA een gouden standaard die over de hele wereld wordt geaccepteerd. Het creëert een goede balans tijdens dekkingstoegang en mogelijkheden in de praktijk. De naleving van deze norm is ook in overeenstemming met de richtlijnen van vereisten voor website -beursgenoteerde bedrijven of geloofwaardigheid voor webkantoren die de nadruk leggen op transparantie en standaard
V4: Welke tools kunt u controleren?
A: Er zijn veel geweldige automatische hulpmiddelen voor het starten, zoals golf, bijl devtools (browserverlenging) of vuurtoren in Chrome Devtools. Basis toegankelijkheid, maar vergeet niet dat deze tools kunnen helpen slechts 30-40% van het probleem te detecteren. Testen door echt testen is nog steeds het belangrijkste.
Prompt: de afbeelding van een persoon die kruis zit op een comfortabele stoel. Samen met een symbool van vragen en antwoorden zweven om hem heen. Het smileygezicht toont vertrouwen en het verlichten van angst.
Het is tijd om de deur te openen om alle klanten te verwelkomen.
Op dit moment hoop ik dat je dat webtoegankelijkheid niet alleen een kwestie van complexe technieken of een angstaanjagende juridische last ziet, maar het is het "hart" van zaken doen in het nieuwe tijdperk. Is om de weergave te wijzigen door te vragen: "Wat verkopen we?" Om te vragen "hoe kunnen we de beste ervaring geven aan 'iedereen'?"
Investering in toegankelijkheid is een investering die rendement biedt in termen van cijfers (verkoop, conversieratio), merkliefde, vertrouwen, en vooral, als onderdeel van het creëren van een kunstmatige digitale samenleving en niemand achterlaat
Wacht niet tot uw website een "obstakel" wordt dat klanten meer blokkeert. Begin vandaag met het verkennen van uw website met een eenvoudige checklist die we hebben verstrekt en heeft de opening van de deur gemaakt om de klanten te verwelkomen "iedereen" is de nieuwe standaard van uw bedrijf.
Wilt u niet alleen uw website, maar ook klaar om alle klanten te verwelkomen en tastbare bedrijfsresultaten te creëren, toch? Raadpleeg een expert in UX/UI en Web toegankelijkheid. De onze wordt gratis! We zijn klaar om u te helpen een geweldige website voor iedereen te maken.
Recente blog

Wilt u over de hele wereld verkopen? Vergelijk de voordelen van de voordelen tijdens het gebruik van Shopify-markten en taalvertaling-apps. (Mulilingual Apps) om het systeem te selecteren dat het meest geschikt is voor uw winkel.

Voeg klanten toe om te huren met SEO! In -diepte, SEO -strategie voor huurbedrijven, vooral van lokale SEO tot de productpagina.

Stop met het verspillen van tijd om een te rapporteren te maken! Leer u hoe u verbinding kunt maken met N8N met Google Looker Studio (Data Studio) om een dashboard en automatische marketing te maken.