Användbarhet är inte en exakt vetenskap. Den som en besökare anser är en annan anser irriterande. Trots denna osäkerhet och komplexitet bör du alltid sträva efter att göra din webbplats så tillgänglig som möjligt för de personer du försöker nå. Du kommer att upptäcka att en liten bit av catering till speciella behov hos en minoritet av användare kan drastiskt förbättra funktionen på din webbplats för alla användare. Här är vår lista över tolv tillgänglighet fallgropar för att undvika tillsammans med några exempel som visar webbplatser som antingen utmärker sig eller misslyckas i dessa områden.
Captchas
Webbutvecklare verkar verkligen älska captchas, men användare kan inte stå emot dem. Bevilja det, de är inte alla dåliga, men de flesta är antingen omöjliga att läsa eller onödigt komplicerade som ovanstående. En annan viktig fråga är att captchas ofta utgör ett allvarligt vägspärr för de synskadade. Om du absolut måste använda en captcha, se till att de flesta människor kan läsa / förstå det och ha alternativ på plats för de användare som inte kan se den.
Används inte? Alt? Attribut på bilder
Det är definitivt en bra övning att alltid sätta in en bra bit av alt text för bilderna på din webbplats. På så sätt kan användare som inte kan visa dina bilder representeras med en textekvivalent. Observera att inte alla webbläsare behandlar alt ange samma sätt. På grund av detta förvirrar många utvecklare syftet med alt och titel, misstänkt tänka att bilder med en alt attributet ska visa ett verktygstips. I verkligheten titel Attribut är vad som ska visa ett tips på musen över (se Smashing Magazine-exemplet ovan).
Använda pop-ups för innehåll
De flesta moderna webbläsare ser till att ditt innehåll blockeras om det kommer i form av ett popup-fönster. Det innebär att du riskerar att förlora flera möjliga användare som bara går vidare när de inser att din webbplats inte är kompatibel med installationen. Endast de mest dedikerade besökarna kommer att undersöka problemet på dina hjälpsidor för att upptäcka hur man löser problemet.
Felaktiga etiketter på formulär
Besök Mint.com (visas ovan) och kolla in deras anmälningsformulär. Observera att du kan välja ett specifikt fält om du klickar på själva fältet eller på den bifogade etiketten. Detta beror på att Mint-utvecklarna använder märka elementet korrekt. Läran här är att det bara inte är tillräckligt att märka dina formulär med vanlig text. I stället bör du alltid använda märka element för att maximera användbarheten. Detta ger inte bara fält som är lätta att välja, men också att skärmsläsare och autofyllningsfunktioner fungerar korrekt med dina formulär.
Oigenkänliga länkar
Skärmbilden ovan visar ett avsnitt på hemsidan för handledning 9. Observera att du direkt kan skilja mellan texten som innehåller en länk och texten som inte gör det. Populära sätt att skapa länkdifferentiering inkluderar färgkontrast, understrykning och övergångseffekter. Observera att Tutorial 9 faktiskt använder alla tre metoderna! Detta ökar användbarheten dramatiskt eftersom användarna tydligt kan se var man ska klicka om de vill ha mer innehåll.
Vag Länk Text
Tänk på följande exempel:
1. För att besöka vårt CSS-galleri, klicka här.
2. Var noga med att sluta med vårt CSS-galleri!
När du skannar en sida kommer dina ögon sannolikt att fokusera på differentierade länkar mer än resten av texten eftersom de sticker ut. Det första exemplet kan tyckas vara ett bra sätt att gå på grund av uppmaningen till handling? Klicka här? är vad fångar ditt öga. Men utan att korrekt läsa hela meningen, klicka här? inspirerar inte åtgärden eftersom användaren är osäker på var det leder. Däremot kan den andra länken genast erkännas och förstås som en sökväg till ett CSS-galleri, oavsett huruvida användaren har läst innehållet eller inte.
Cluttered Content och otillräcklig spacing
Webbplatsen ovan är verkligen mer av en parodi än ett ordentligt exempel, men det blir poängen över och var alltför roligt att inte inkludera. Enkelt, krossa inte ditt innehåll tillsammans eller ta med en outlandish mängd bilder eller text (nyhetsberättelser och blogginlägg är undantag). Småföretagare som precis börjat på webben blir nästan alltid byte till det här misstaget och innehåller stycke efter ett stycke information som ingen kommer någonsin att läsa. Gilla det eller inte, är webben ett visuellt odjur. Informationen på din sida ska vara tydligt organiserad och lättförståelig inom några sekunder.
Ändra typsnittstyp bör inte bryta layout
Inte alla på webben är en 19 år gammal med 20/20 vision. Många användare, unga och gamla, måste öka sin standardtextstorlek för att göra en sida mer läsbar. Kolla vad som händer med Fox News (och flera andra populära nyheter) när du ökar teckensnittstorleken. Layouten är fullständigt förstörd: navigationslänkarna går ihop, knapparna är mil från deras associerade text och annonserna som går ner till höger har försvunnit helt. Denna typ av övervakning kan alienera en stor del besökare.
Dålig kontrast mellan text och bakgrund
Dessa killar kan vara tilling deras design färdigheter men de har förstört sin trovärdighet genom att göra det med en grafik som är nära omöjligt att läsa. Jag förstår att ibland kräver kunder att du använder ett lagerfoto med noll kopieringsutrymme, men det är ditt jobb som designer att räkna ut hur man integrerar lättläsbar text med bilden. Använd fet stil, slag, droppe skuggor, färgfält och allt annat du kan tänka dig för att skilja ditt meddelande från dess bakgrund.
Överanvändning av Flash
Misstolk inte detta som en Flash bashing mantra. Flash har tagit webben till en nivå av rikedom som kan göra en utvecklares vildaste drömmar förverkliga. Jag är lika benägen att bli sugad av en fantastisk och unik flashplats som nästa kille.Använd dock extrem försiktighet när du integrerar Flash så mycket i din webbplats att det inte fungerar utan det.
Se till att du noga överväger orsaken till webbplatsens existens och din målmarknad för webbplatsen. Om du vill bygga en onlineapplikation eller eye candy för besökare, kan Flash vara vägen att gå. Men om din målmarknad är allmänheten, kan en allt Flash-webbplats vara en dålig idé av ett antal skäl. Den första är användbarhet, Flash-baserade sajtutvecklare kan ofta vara så besatta av att göra någonting snyggt så att nolltänkning läggs på om en användare faktiskt kan räkna ut hur man använder webbplatsen eller inte. Jag har märkt att stora namnannonsbyråer tenderar att följa denna trend genom att göra vackra webbplatser som kan ta minuter för att räkna ut hur man använder. En annan anledning att undvika Flash är att många användare är så irriterad av Flash att de inaktiverar det helt. Slutligen överväga alltid om det är acceptabelt att offra mobila besökare. Många smartphones som iPhone stöder ännu inte flash och stänger därför av många vanliga webbplatser.
Komplicerade nedrullningsmenyer
Det finns en bra linje mellan en hjälpsam meny och en överbelastad röra och utvecklarna hos Microsoft flirar med det. Å ena sidan ger de användarna lätt tillgång till hela sin produktsortiment. Å andra sidan kastar de ett ton mer innehåll hos användarna än vad de brukar använda i en enkel rullgardinsmeny. Detta kan vara acceptabelt om du klickar på "alla produkterna"? knappen tog dig till en dedikerad sida som innehåller listan över produkter, men det är inte fallet (bara klickar stängs menyn). Tillbringa en minut på deras webbplats och du kommer att se att nästan alla navigeringsmenyerna är fyllda med små (kanske svårlästa) monotona länkar.
Poängen är att över befolkade menyer normalt sprider sig från ett försök att öka användbarheten, medan det i verkligheten resulterar i minskad användbarhet på grund av den oerhörda mängd information som måste siktas genom för att komma dit du vill åka.
Slutsats
Så där har du det, tolv enkla sätt att göra din webbplats vänligare för massorna. Jag hoppas att den här artikeln har hjälpt dig att hitta några sätt att börja förbättra dina designers tillgänglighet. Låt oss veta vad du tycker om dessa tips. Känn dig fri att inte vara helt oense om någon eller alla av dem och var noga med att meddela om alla de små saker som buggar dig om tillgänglighet.