De eisen voor webdesign omvatten steeds meer verbeterde webtoegankelijkheid. Maar is het niet voldoende om de site te optimaliseren voor alle belangrijke browsers met compatibiliteit met meerdere apparaten? U kunt eenvoudig de prestaties, toegankelijkheid, best practices en SEO van uw website meten met Google Lighthouse. Dus waarom is toegankelijkheid belangrijk?

Volgens de CDC (Centers for Disease Control and Prevention) leven meer dan 60 miljoen Amerikanen met een handicap. Als u de richtlijnen voor toegankelijkheid van webinhoud volgt, kunt u enkele voorlopige overwegingen introduceren die zullen bijdragen aan het maken van een toegankelijke website. Hier vindt u alles wat u nodig hebt om aan de slag te gaan met webtoegankelijkheid met behulp van HTML en CSS.

Gestructureerde HTML met de juiste semantiek

Terwijl de website visueel aantrekkelijk wordt gemaakt, mogen gebruikers van ondersteunende technologie niet in de war raken. Hoewel veel contentmanagementsystemen zoals WordPress de HTML toepassen, is het uw verantwoordelijkheid om opnieuw te controleren en te bevestigen dat deze correct is toegepast.

Bijvoorbeeld, een

Lees verder: Eenvoudige HTML-codevoorbeelden die u in 10 minuten kunt leren

Semantische HTML is gemakkelijker te ontwikkelen omdat u er extra functionaliteiten bij krijgt. Het werkt geweldig op mobiel. Ook, wanneer u belang hecht aan trefwoorden die erin zijn verpakt

of tag, het helpt bij SEO.

Gestructureerde inhoud voor gebruikers van schermlezers

Hier is een voorbeeld van semantische HTML-goed vs. slechte.

Goede semantische HTML
Mijn rubriek

Zo maak je een toegankelijke website met HTML en CSS

Mijn tweede rubriek

Slechte semantische HTML
Mijn rubriek

Zo maak je een toegankelijke website met HTML en CSS

Het eerste geval is vrij eenvoudig te navigeren voor schermlezers. Het leest de koptekst en geeft informatie over de kop en de alinea. Na elk element stopt het een seconde. U kunt enkele koppen overslaan of teruggaan naar de vorige met Enter/Return. U kunt ook een inhoudsopgave maken met behulp van de header-tag.

Wanneer u presentatie-HTML schrijft in plaats van semantische HTML (in het tweede geval), breekt de regel onnodig en resulteert in een slechte ervaring. Het is alsof je een gigantisch blok voorbereidt dat veel moeilijker te cascaderen en manipuleren is omdat er geen potentiële selectors zijn.

Taal en lay-outs voor toegankelijke websites

U moet nauwkeurige taal gebruiken met uitgebreide acroniemen en afkortingen. Probeer indien mogelijk streepjes te vermijden door 9-5 -> 9 tot 5 te schrijven. Voorheen werden HTML-tabellen gebruikt om de paginalay-outs te maken. Vroeger belemmerde het de juiste uitlezingen vanwege geneste tabellen die een vrij complexe lay-out vormden. Hier is een moderne websitestructuur:

Dit is een kop



Inhoud hoofdpagina

met artikel

Artikelkop

artikel inhoud



Voettekst van de website

Dus, zoals u kunt zien, is deze lay-out schermlezervriendelijk. De opmaak is begrijpelijk met een duidelijke en beknopte code. Het is ook gemakkelijk te onderhouden en vereist minder bandbreedte tijdens het downloaden. Zorg ervoor dat je de broncode logisch hebt geplaatst; het zal het verschil maken.

Heroverweeg UI-besturingselementen, tabellen en alternatieve tekst

Meestal zijn UI-besturingselementen knoppen, formulier- en koppelingsbesturingselementen van uw webdocument. De vuistregel is dat ze met het toetsenbord kunnen worden gemanipuleerd. Ze hebben een standaardstijl (kan verschillen in verschillende browsers) waar je naar andere opties kunt springen met de tab-toets en op Enter/Return kunt drukken om tot een conclusie te komen. U kunt de tekstlabels beheren door onderscheidende en betekenisvolle ankerteksten toe te voegen in plaats van "klik hier".

Voeg tabelkoppen toe om toegankelijke tabellen te maken

en specificeer de rijen of kolommen met behulp van het bereikkenmerk. Daarnaast kunt u de of samenvattingsattribuut om de schermlezers een snel overzicht te geven van de inhoud van de tabel.

Alternatieve tekst geeft de contextuele informatie van de afbeelding of video aan de webcrawlers en schermlezers. Als je afbeelding voor decoratieve doeleinden is, is het beter om de alt-tag leeg te laten. Anders helpt het veel om een ​​gedetailleerde beschrijving van de afbeelding te geven.

In de meeste gevallen zal de schermlezer de alt-tekst, bestandsnaam en het titelattribuut voorlezen (u kunt dit overslaan). Als u geen alternatieve tekst wilt gebruiken of hetzelfde label aan meerdere afbeeldingen wilt toevoegen, volgt hier een snelle tip:

Een rode bloem...

U hebt het kenmerk aria-labelledby gebruikt om naar die id te verwijzen. Hiermee kunnen de schermlezers alternatieve tekst gebruiken in de vorm van die alinea.

Standaard CSS voor betere toegankelijkheid

Het stylen van toegankelijke paginafuncties betekent dat uw ontwerp zich moet gedragen in overeenstemming met de kerninhoud van de pagina. Bijvoorbeeld voor een

,

, en

element, zou een typische CSS moeten zijn:

h1 {
lettergrootte: 4rem;
}
p, ik {
lettergrootte: 1.5rem;
kleur blauw;
}

De lettergrootte, letterafstand, lettertypefamilie, enz. zouden moeten helpen om comfortabel te lezen. Koppen moeten opvallen tussen de hoofdtekst (standaardstijl is ook goed). Bovendien moet de tekst een contrasterende kleur hebben van de achtergrond die je selecteert met CSS.

Tekst, links en labels opmaken

Micro-interacties zijn mogelijk met een toegankelijke CSS. Het kan zo klein zijn als het benadrukken van de tekst om de links op de juiste manier te markeren. U kunt de en onderscheidend labelen. U kunt een gestippelde onderstreping toevoegen met de element.

De standaardlink moet worden onderstreept met een standaardkleur: blauw en een eerder bezochte link met een standaardkleur: paars (u kunt deze aanpassen).

een {
kleur: #ff0000;
}
een: actief {
kleur: #000000;
achtergrondkleur: #a60000;
}
a: hover, a: bezocht, a: focus {
kleur: #a60000;
tekstdecoratie: geen;
}

Dus, met een wijziging in de muisaanwijzer, moet u de gefocuste tekst markeren. De aanwijzercursor en de omtrek spelen een belangrijke rol bij webtoegankelijkheid.

Gebruik CSS om de formulierelementen en labels een strak uiterlijk te geven. Bepaal ook de focus/hover-statussen die consistent zijn in de meeste browsers. Onthoud dat deze kleine aanwijzingen mensen helpen uw webpagina te begrijpen.

Kleurcontrast en waarden verbergen

Pas het kleurenschema van de website aan zodat de voorgrondkleur (tekst/afbeelding) contrasteert met de achtergrondkleur voornamelijk omdat het voor mensen met een visuele beperking (bijvoorbeeld kleurenblindheid) moeilijker is om de inhoud te lezen naar behoren. Je kunt gebruiken Kleurcontrastcontrole om een ​​fatsoenlijk kleurenschema te krijgen volgens de WCAG-criteria. Probeer ook opmaaktekens (zoals een asterisk) toe te voegen samen met waarschuwingen of algemene voorwaarden (niet alleen een rode waarschuwing).

Schermlezers hoeven zich nergens zorgen over te maken totdat de volgorde van de broncode fatsoenlijk is geschreven. Probeer het gebruik van display: geen of zichtbaarheid: verborgen eigenschappen te vermijden omdat ze de inhoud verbergen voor de schermlezers.

Maak het gemakkelijk om stijl te negeren

Het belangrijkste punt is hoe goed je de site ook ontwerpt, gebruikers hebben verschillende redenen om de stijl te negeren. Sommigen willen bijvoorbeeld een grotere tekstgrootte of willen de tekst- en achtergrondkleur wijzigen voor de leesbaarheid. Uw inhoudsgebied moet het dus volledig aankunnen.

Afronding: Combineer HTML en CSS

Nu kent u de basisprincipes van het aan de slag gaan met semantische HTML en het schrijven van een verstandige broncode in de juiste volgorde voor een toegankelijke website. Focus op HTML en ga naar het maken van een toegankelijke CSS zodra het klaar is.

Met behulp van bovenstaande technieken kunt u de gebruikerservaring verbeteren en een mooi publiek bedienen. Begin dus met het maken van websites die responsief en toegankelijk zijn.

Een website maken: voor beginners

Vandaag begeleid ik je door het proces van het maken van een complete website vanaf het begin. Maak je geen zorgen als dit moeilijk klinkt. Ik zal je er bij elke stap doorheen leiden.

Lees volgende

Over de auteur

Uitvouwen om het volledige verhaal te lezen