Kravene til webdesign omfatter i stigende grad forbedret tilgængelighed på nettet. Men er det ikke nok at optimere webstedet til alle de store browsere med flere enhedskompatibilitet? Du kan nemt måle dit websteds ydeevne, tilgængelighed, bedste praksis og SEO ved hjælp af Google Lighthouse. Så hvorfor betyder tilgængelighed noget?

Ifølge CDC (Centers for Disease Control and Prevention) lever over 60 millioner amerikanere med et handicap. I henhold til retningslinjerne for tilgængelighed for webindhold kan du introducere nogle foreløbige overvejelser, der vil bidrage til at gøre et tilgængeligt websted tilgængeligt. Her er alt hvad du behøver for at komme i gang med webtilgængelighed ved hjælp af HTML og CSS.

Struktureret HTML med korrekt semantik

Selvom hjemmesiden gør visuelt tiltalende, bør hjælpemiddelbrugere ikke blive forvirrede. Selvom mange indholdshåndteringssystemer som WordPress anvender HTML, er det dit ansvar at kontrollere og bekræfte, at det bruges korrekt.

F.eks

Læs mere: Enkle HTML -kodeeksempler, du kan lære på 10 minutter

Semantisk HTML er lettere at udvikle, da du får flere funktioner sammen med det. Det fungerer fantastisk på mobilen. Også når du lægger vægt på søgeord pakket ind

eller tag, det hjælper i SEO.

Struktureret indhold til brugere af skærmlæser

Her er et eksempel på semantisk HTML god vs. dårligt.

God semantisk HTML
Min overskrift

Sådan kan du gøre et tilgængeligt websted ved hjælp af HTML og CSS

Min anden overskrift

Dårlig semantisk HTML
Min overskrift

Sådan kan du gøre et tilgængeligt websted ved hjælp af HTML og CSS

Den første sag er ret let at navigere for skærmlæsere. Det vil læse overskriften med besked om overskriften og afsnittet. Det stopper et sekund efter hvert element. Du kan springe nogle overskrifter over eller gå tilbage til den forrige ved hjælp af Enter/Return. Du kan også danne en indholdsfortegnelse ved hjælp af overskriftstagget.

Når du skriver præsentations -HTML i stedet for semantisk HTML (i det andet tilfælde), bryder linjen unødigt og resulterer i en dårlig oplevelse. Det er som at forberede en kæmpe blok, der er langt sværere at kaskade og manipulere, da der ikke er nogen potentielle vælgere.

Sprog og layout til tilgængeligt websted

Du bør bruge præcist sprog med udvidede akronymer og forkortelser. Prøv om muligt at undgå streger ved at skrive 9-5 -> 9 til 5. Tidligere blev HTML -tabeller brugt til at oprette sidelayouterne. Det plejede at hæmme de korrekte aflæsninger på grund af indlejrede tabeller, der dannede et ret komplekst layout. Her er en moderne webstedsstruktur:

Dette er en overskrift



Indhold på hovedsiden

indeholdende artikel

Artikeloverskrift

artiklens indhold



Webside sidefod

Så som du kan se, er dette layout skærmlæservenligt. Markeringen er forståelig med en klar og kortfattet kode. Det er også let at vedligeholde og kræver mindre båndbredde under download. Sørg for, at du har placeret kildekoden logisk; det vil gøre hele forskellen.

Genovervej UI -kontroller, tabeller og alt tekst

Almindeligvis er UI -kontroller knapper, formularer og linkkontroller i dit webdokument. Tommelfingerreglen er, at de kan manipuleres med tastatur. De har en vis standardstil (kan variere i forskellige browsere), hvor du kan springe til andre muligheder ved hjælp af tabulatortasten og trykke på Enter/Return for at nå til en konklusion. Du kan administrere tekstetiketterne ved at tilføje markante og meningsfulde ankertekster i stedet for "klik her".

Tilføj tabeloverskrifter for at oprette tilgængelige tabeller

og angiv rækkerne eller kolonnerne ved hjælp af attributten scope. Derudover kan du bruge eller summarisk attribut for at give skærmlæserne et hurtigt overblik over tabellens indhold.

Alternativ tekst giver kontekstuelle oplysninger om billedet eller videoen til webcrawlere og skærmlæsere. Hvis dit billede er til dekorative formål, er det bedre at lade alt -mærket stå tomt. Ellers hjælper det meget med at give en detaljeret beskrivelse af billedet.

I de fleste tilfælde vil skærmlæseren læse alt -teksten, filnavnet og titelattributten op (du kan springe den over). Hvis du ikke vil bruge alt -tekst eller vil tilføje den samme etiket til flere billeder, så er her et hurtigt tip:

En rød blomst ...

Du brugte aria-labelledby-attributten til at henvise til det id. Det giver skærmlæserne mulighed for at bruge alt -tekst i form af dette afsnit.

Standard CSS for bedre tilgængelighed

Styling af tilgængelige sidefunktioner betyder, at dit design skal opføre sig i henhold til kernens indhold på siden. For eksempel for en

,

, og

element, bør en typisk CSS være:

h1 {
skrifttype: 4rem;
}
p, li {
skrifttype: 1.5rem;
farve: blå;
}

Skrifttypestørrelsen, mellemrum mellem bogstaver, skrifttypefamilie osv. Bør hjælpe med en behagelig læsning. Overskrifter skal skille sig ud fra brødteksten (standard styling er også god). Derudover skal teksten have en kontrastfarve fra baggrund du vælger med CSS.

Styling af tekst, links og etiketter

Mikrointeraktioner er mulige med en tilgængelig CSS. Det kan være lige så lille som at understrege teksten til at fremhæve linkene på en ordentlig måde. Du kan bruge og tag markant. Du kan tilføje en stiplet understregning ved hjælp af element.

Standardlinket skal understreges med en standardfarve: blå og et tidligere besøgt link med en standardfarve: lilla (du kan tilpasse den).

en {
farve: #ff0000;
}
a: aktiv {
farve: #000000;
baggrundsfarve: #a60000;
}
a: svæve, a: besøgt, a: fokusere {
farve: #a60000;
tekst-dekoration: ingen;
}

Så med en ændring i musemarkøren bør du markere den fokuserede tekst. Markørmarkøren og omridset spiller en vigtig rolle for webtilgængelighed.

Brug CSS til at give formelementerne og etiketterne et rent udseende. Beslut også fokus/svævetilstande, der er konsistente på tværs af de fleste browsere. Husk, at disse små tegn hjælper folk med at forstå din webside.

Farvekontrast og skjulte værdier

Juster webstedets farveskema, så farven i forgrunden (tekst/billede) står i kontrast til baggrundsfarven primært fordi det er sværere for mennesker med synshandicap (f.eks. farveblindhed) at læse indholdet korrekt. Du kan bruge Kontrastkontrol i farve at få et anstændigt farveskema i henhold til WCAG -kriterierne. Prøv også at tilføje markeringstegn (som en stjerne) sammen med advarsler eller vilkår og betingelser (ikke kun en rød advarsel).

Skærmlæsere har intet at bekymre sig om, før kildekodens rækkefølge er anstændigt skrevet. Prøv at undgå at bruge display: ingen eller synlighed: skjulte egenskaber, da de skjuler indholdet for skærmlæserne.

Gør det let at tilsidesætte stil

Nøglepunktet er, uanset hvor godt du designer webstedet, har brugerne forskellige grunde til at tilsidesætte stilen. For eksempel vil nogle måske have en større tekststørrelse eller ønsker at ændre teksten og baggrundsfarven for at kunne læse den. Så dit indholdsområde skal kunne håndtere det fuldstændigt.

Indpakning: Kombiner HTML og CSS

Nu kender du det grundlæggende ved at komme i gang med semantisk HTML og skrive en fornuftig kildekode i den rigtige rækkefølge for et tilgængeligt websted. Fokuser på HTML, og bevæg dig mod at gøre en tilgængelig CSS, når den er færdig.

Ved hjælp af ovenstående teknikker kan du forbedre brugeroplevelsen og betjene et smukt publikum. Så begynd at lave websteder, der er lydhøre og tilgængelige.

Sådan laver du et websted: For begyndere

I dag guider jeg dig gennem processen med at lave et komplet websted fra bunden. Bare rolig, hvis det lyder svært. Jeg vil guide dig igennem det hvert trin på vejen.

Læs Næste

Om forfatteren

Udvid for at læse hele historien