Genom att göra din hemsida tillgänglig för personer med funktionshinder, slutar du göra är tillgänglig för alla. Att göra din webbplats mer tillgänglig kan faktiskt hjälpa människor att hitta din webbplats i sökmotorer. Varför? Eftersom sökmotorer använder några av de samma signalerna som skärmsläsare gör för att hitta och förstå innehållet på din webbplats.
Men exakt hur gör du en tillgänglig webbplats utan att bli en kodningsexpert?
Här är några tips och tricks som nästan alla med grundläggande HTML-kunskaper kan använda för att förbättra deras webbplatsens tillgänglighet.
Web Accessibility Tools
W3C har en fantastisk lista över verktyg för webbtillgänglighet som du kan använda som checkar för att hitta potentiella problem med din webbplats. Som sagt rekommenderar jag fortfarande att göra lite att utforska med en skärmläsare och uppleva det själv.
Förstå skärmläsare
Ett av de viktigaste sätten att förbättra tillgängligheten på din webbplats är att se till att det kan förstås av skärmsläsare. Skärmsläsare använder en syntetiserad röst för att läsa texten på skärmen. Det låter ganska enkelt; Skärmsläsare eller annan assistentteknologi kan emellertid inte förstå din webbplats så som du har den för närvarande.
Det första du kanske vill göra är att prova en skärmläsare och se hur det går. Om du är på en Mac, försök använda VoiceOver.
- Gå till Systeminställningar.
- Välj Tillgänglighet.
- Välj Dubbning.
- Markera rutan för Aktivera VoiceOver.
Du kan växla på och av med kommandot F5.
Om du är på en Windows-dator kanske du vill ladda ner NVDA. Du kan ställa in det för att växla på och av med genvägskontrollen + alt + n.
Båda skärmsläsarna fungerar genom att låta användaren navigera med tangentbord (det är vettigt - om du inte kan se att använda en mus skulle det vara en utmaning) och genom att skapa ett fokusområde för navigering. Fokus ligger i huvudsak där tangentbordet är "spetsigt" men det visas vanligtvis som en markerad ruta kring fokusobjektet istället för en markör.
Du kan ändra både rösthöjden och den hastighet som rösten läser om standardinställningarna är irriterande (och efter ungefär fem minuter av att lyssna på en vanlig långsam röstläsning, brukar de vara). Blinda människor brukar läsa webbplatser med sina skärmsläsare inställda till höga hastigheter.
Det kan hjälpa till att stänga dina ögon som du gör, men det kan också hjälpa till att hålla dem öppna och jämföra. Några av de saker du kanske märker omedelbart när du försöker att lyssna på din webbplats är att en del av texten kanske inte är i ordning. Rubriker och tabeller kan få jumbled. Bilder kan antingen hoppas över eller de kan säga "bild" eller något lika ohjälpligt. Tabeller brukar läsas som en serie objekt utan sammanhang.
Du kan förhoppningsvis fixa det här.
Alt-Taggar eller Alternativ Attribut
Alt-taggen eller alternativet (alt) -attributet används i HTML för att beskriva en bild. I HTML ser det ut som om det här:
Även om du gör din webbplats med ett visuellt verktyg som döljer din HTML-kod, kommer du nästan alltid att ha en chans att skriva in en bildbeskrivning. Du kan inte skriva in någonting (alt = "") men det skulle verkligen vara bättre att ge varje bild en användbar beskrivning. Om du var blind, vad skulle du behöva veta om bilden? "Kvinna" är inte mycket hjälp, men kanske "Woman drawing design flödesdiagram inklusive tillgänglighet, användbarhet, branding och design."
Titel Text
Webbplatser visar inte alltid HTML-taggtaggen, men det är till hjälp för skärmsläsare. Se till att alla sidor på din webbplats har en beskrivande (men inte alltför stor) titel som berättar för besökare vad sidan handlar om.
Ge din webbplats bra information hierarki
Bryta upp stora bitar av text med rubriker och, om möjligt, använd rubriker med H1, H2, H3 hierarkin på lämpligt sätt. Det gör inte bara din webbplats enklare för skärmsläsare, det gör det lättare för alla andra. Det är också en bra signal för Google och andra sökmotorer för att hjälpa dem att bättre indexera din webbplats.
På samma sätt bör du se till att din webbplats är i en logisk innehållsordning och att du inte har rutor med orelaterad information som visas. Om du använder annonser, se till att dina annonser inte är alltför påträngande och bryta upp texten på din webbplats för ofta.
Gör bättre tabeller
Om du använder HTML-tabeller kan du lägga till bildtexter i dina tabeller med hjälp av taggen för att göra dem lättare att förstå av skärmsläsare än att bara göra titeln på en tabell i fetstil. Du kan också lägga till "scope" -elementet och tydligt märka nya rader och kolumner i ditt bord så att skärmsläsare inte enkelt raserar bort en serie bordceller utan att ge något sammanhang.
Keyboard Navigation
I allmänhet bör allt du lägger på din webbplats vara något som någon kan tänka sig göra med ett tangentbord. Det betyder att dina navigeringsknappar inte ska vara animerade dropdown-knappar om du inte kan använda dem med en skärmsläsare (prova det och se om du inte är säker - vissa knappar är programmerade för tangentbordsbruk.)
Avslutade bilagor
Om du lägger till videor eller ljudelement på din webbplats ska de ha bildtexter. HTML5 och många videostreamingstjänster (som YouTube) erbjuder stängd textningstjänst. Stängda bildtexter är användbara inte bara för tillgänglighet utan också för användare som kan surfa på din webbplats någonstans där de inte kan spela ljud, till exempel på ett kontor eller i en bullriga plats.
För podcaster eller andra ljudelement, överväga att ge en textutskrift. Det är inte bara användbart för personer som inte kan lyssna på ljudet, eftersom texten kommer att underlätta för Google och andra sökmotorer att indexera det innehållet och hjälpa din Google-ranking.
ARIA
Om du vill gå till avancerad tillgänglighet, syftar HTML5 ARIA eller WAI-ARIA-specifikationerna till att vara den nya standarden framåt. Detta är dock en komplicerad (och utvecklande) teknisk manual, så vad du kan göra är att använda en ARIA-validator för att skanna för att se om din webbplats har några problem du kan adressera. Mozilla har också en mer tillgänglig guide för att komma igång med ARIA.
