Kraven på webbdesign inkluderar alltmer förbättrad tillgänglighet på webben. Men räcker det inte att optimera webbplatsen för alla större webbläsare med flera enhetskompatibilitet? Du kan enkelt mäta din webbplatsprestanda, tillgänglighet, bästa praxis och SEO med Google Lighthouse. Så varför spelar tillgänglighet någon roll?

Enligt CDC (Centers for Disease Control and Prevention) lever över 60 miljoner amerikaner med funktionsnedsättning. Efter riktlinjerna för tillgänglighet för webbinnehåll kan du introducera några preliminära överväganden som kommer att bidra till att göra en tillgänglig webbplats. Här är allt du behöver för att komma igång med webbtillgänglighet med HTML och CSS.

Strukturerad HTML med korrekt semantik

Medan webbplatsen blir visuellt tilltalande bör användare av hjälpmedel inte bli förvirrade. Även om många innehållshanteringssystem som WordPress tillämpar HTML, är det ditt ansvar att kontrollera och bekräfta att det används korrekt.

Till exempel a

Läs mer: Enkla HTML -kodexempel som du kan lära dig på 10 minuter

Semantisk HTML är lättare att utveckla eftersom du får ytterligare funktioner tillsammans med det. Det fungerar fantastiskt på mobilen. Också när du lägger vikt vid nyckelord inslagna inuti

eller tag, det hjälper i SEO.

Strukturerat innehåll för användare av skärmläsare

Här är ett exempel på semantisk HTML bra vs. dålig.

Bra semantisk HTML
Min rubrik

Så här gör du en tillgänglig webbplats med HTML och CSS

Min andra rubrik

Dålig semantisk HTML
Min rubrik

Så här gör du en tillgänglig webbplats med HTML och CSS

Det första fallet är ganska lätt att navigera för skärmläsare. Det kommer att läsa rubriken som meddelar om rubriken och stycket. Det stannar en sekund efter varje element. Du kan hoppa över några rubriker eller gå tillbaka till föregående med Enter/Return. Du kan också skapa en innehållsförteckning med rubriktaggen.

När du skriver presentations -HTML istället för semantisk HTML (i det andra fallet) bryter raden i onödan och resulterar i en dålig upplevelse. Det är som att förbereda ett jätteblock som är mycket svårare att kaskadera och manipulera eftersom det inte finns några potentiella väljare.

Språk och layouter för tillgänglig webbplats

Du bör använda exakt språk med utökade akronymer och förkortningar. Försök om möjligt att undvika streck genom att skriva 9-5 -> 9 till 5. Tidigare användes HTML -tabeller för att skapa sidlayouter. Det brukade hämma de korrekta avläsningarna på grund av kapslade tabeller som bildade en ganska komplex layout. Här är en modern webbplatsstruktur:

Det här är en rubrik



Huvudsida innehåll

innehållande artikel

Artikelrubrik

artikelinnehåll



Webbfot

Så som du kan se är denna layout skärmläsarvänlig. Markeringen är begriplig med en tydlig och koncis kod. Det är också lätt att underhålla och kräver mindre bandbredd vid nedladdning. Se till att du har placerat källkoden logiskt; det kommer att göra stor skillnad.

Ompröva UI -kontroller, tabeller och alt -text

Vanligtvis är UI -kontroller knappar, formulär och länkkontroller i ditt webbdokument. Tumregeln är att de kan manipuleras med tangentbord. De har en viss standardstil (kan skilja sig åt i olika webbläsare) där du kan hoppa till andra alternativ med tabbtangenten och trycka på Retur/Retur för att nå en slutsats. Du kan hantera textetiketterna genom att lägga till distinkta och meningsfulla ankartexter istället för "klicka här".

Lägg till tabellrubriker om du vill skapa tillgängliga tabeller

och ange raderna eller kolumnerna med attributet scope. Dessutom kan du använda eller summeringsattribut för att ge skärmläsarna en snabb överblick över innehållet i tabellen.

Alternativ text ger kontextinformation för bilden eller videon till webbsökare och skärmläsare. Om din bild är för dekorativa ändamål är det bättre att lämna alt -taggen tom. Annars hjälper det mycket att ge en detaljerad beskrivning av bilden.

I de flesta fall kommer skärmläsaren att läsa upp alt -texten, filnamnet och titelattributet (du kan hoppa över det). Om du inte vill använda alt -text eller vill lägga till samma etikett på flera bilder, så är här ett snabbt tips:

En röd blomma ...

Du använde attributet aria-labelledby för att hänvisa till det id: t. Det gör att skärmläsarna kan använda alt -text i form av det stycket.

Standard CSS för bättre tillgänglighet

Att utforma tillgängliga sidfunktioner innebär att din design ska bete sig enligt sidans kärninnehåll. Till exempel för en

,

, och

element, en typisk CSS bör vara:

h1 {
typsnitt: 4rem;
}
p, li {
typsnitt: 1.5rem;
färgen blå;
}

Teckensnittsstorleken, avståndet mellan bokstäver, teckensnittsfamilj, etc., bör hjälpa till att läsa bekvämt. Rubriker ska skilja sig från brödtexten (standardstyling är också bra). Dessutom ska texten ha en kontrastfärg från bakgrund du väljer med CSS.

Styling av text, länkar och etiketter

Mikrointeraktioner är möjliga med en tillgänglig CSS. Det kan vara så litet som att betona texten för att markera länkarna på ett riktigt sätt. Du kan använda och tagga distinkt. Du kan lägga till en prickad understrykning med element.

Standardlänken bör understrykas med en standardfärg: blå och en tidigare besökt länk med en standardfärg: lila (du kan anpassa den).

en {
färg: #ff0000;
}
a: aktiv {
färg: #000000;
bakgrundsfärg: #a60000;
}
a: sväva, a: besökt, a: fokus {
färg: #a60000;
text-dekoration: ingen;
}

Så, med en ändring av muspekaren, bör du markera den fokuserade texten. Pekarmarkören och konturen spelar en viktig roll för webbtillgänglighet.

Använd CSS för att ge formelementen och etiketterna ett rent utseende. Bestäm också fokus/svängstater som är konsekventa i de flesta webbläsare. Kom ihåg att dessa små ledtrådar hjälper människor att förstå din webbsida.

Färgkontrast och dolda värden

Justera webbplatsens färgschema så att förgrundsfärgen (text/bild) står i kontrast med bakgrundsfärgen främst för att det är svårare för personer med synskador (t.ex. färgblindhet) att läsa innehållet ordentligt. Du kan använda Färgkontrastkontroll för att få ett hyfsat färgschema enligt WCAG -kriterierna. Försök också att lägga till markeringstecken (som en asterisk) tillsammans med varningar eller villkor (inte bara en röd varning).

Skärmläsare behöver inte oroa sig förrän källkodens ordning är ordentligt skriven. Försök att undvika att använda display: ingen eller synlighet: dolda egenskaper eftersom de döljer innehållet från skärmläsarna.

Gör det enkelt att åsidosätta stil

Nyckelpunkten är hur bra du än utformar webbplatsen, användarna har olika skäl att åsidosätta stilen. Till exempel kanske vissa vill ha en större textstorlek eller vill ändra text och bakgrundsfärg för läsbarhet. Så ditt innehållsområde ska kunna hantera det helt.

Avslutning: Kombinera HTML och CSS

Nu vet du grunderna för att komma igång med semantisk HTML och skriva en vettig källkod i rätt ordning för en tillgänglig webbplats. Fokusera på HTML och gå mot att göra en tillgänglig CSS när den är klar.

Med hjälp av ovanstående tekniker kan du förbättra användarupplevelsen och tjäna en vacker publik. Så börja skapa webbplatser som är lyhörda och tillgängliga.

Hur man skapar en webbplats: för nybörjare

Idag guidar jag dig genom processen att göra en komplett webbplats från grunden. Oroa dig inte om det här låter svårt. Jag guidar dig igenom det varje steg.

Läs Nästa

Om författaren

Expandera för att läsa hela historien