HTML -toeganklikheid
HTML-toeganklikheid
Skryf altyd HTML-kode met toeganklikheid in gedagte!
Gee die gebruiker 'n goeie manier om te navigeer en met jou werf te kommunikeer. Maak jou HTML-kode so semanties moontlik.
Semantiese HTML
Semantiese HTML beteken die gebruik van korrekte HTML-elemente vir hul korrekte doel soveel as moontlik. Semantiese elemente is elemente met 'n betekenis; as jy 'n knoppie nodig het, gebruik die <button>element (en nie 'n
<div>element nie).
Semanties
<button>Report an Error</button>
Nie-semanties
<div>Report an Error</div>
Semantiese HTML gee konteks aan skermlesers, wat die inhoud van 'n bladsy hardop lees.
Met die knoppie voorbeeld in gedagte:
- knoppies het by verstek meer geskikte stilering
- 'n skermleser identifiseer dit as 'n knoppie
- fokusbaar
- klikbaar
'n Knoppie is ook toeganklik vir mense wat op sleutelbordnavigasie staatmaak; dit kan met beide muis en sleutels klikbaar wees, en dit kan tussen getabs word (met die tab-sleutel op die sleutelbord).
Voorbeelde van nie-semantiese elemente: <div>en <span>- Vertel niks oor die inhoud daarvan nie.
Voorbeelde van semantiese elemente: <form>, <table>, en <article>- Definieer duidelik die inhoud daarvan.
Opskrifte is belangrik
Opskrifte word gedefinieer met die <h1>to <h6>-tags:
Voorbeeld
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Soekenjins gebruik die opskrifte om die struktuur en inhoud van jou webblaaie te indekseer.
Gebruikers blaai jou bladsye deur die opskrifte daarvan. Dit is belangrik om opskrifte te gebruik om die dokumentstruktuur en die verwantskappe tussen verskillende afdelings aan te toon.
Skermlesers gebruik ook opskrifte as 'n navigasiehulpmiddel. Die verskillende tipes opskrifte spesifiseer die buitelyn van die bladsy.
<h1>opskrifte moet vir hoofopskrifte gebruik word, gevolg deur <h2>opskrifte, dan die minder belangrike
<h3>, ensovoorts.
Let wel: Gebruik HTML-opskrifte slegs vir opskrifte. Moenie opskrifte gebruik om teks GROOT of vet te maak nie .
Alternatiewe teks
Die altkenmerk verskaf 'n alternatiewe teks vir 'n prent, as die gebruiker dit om een of ander rede nie kan sien nie (as gevolg van stadige verbinding, 'n fout in die
src
kenmerk, of as die gebruiker 'n skermleser gebruik).
Die waarde van die altkenmerk moet die beeld beskryf:
Voorbeeld
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
As 'n blaaier nie 'n prent kan vind nie, sal dit die waarde van die alt
kenmerk vertoon:
Voorbeeld
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Verklaar die Taal
Jy moet altyd die lang
kenmerk in die <html>merker insluit om die taal van die webblad te verklaar. Dit is bedoel om soekenjins en blaaiers te help.
Die volgende voorbeeld spesifiseer Engels as die taal:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Gebruik duidelike taal
Gebruik altyd 'n duidelike taal, wat maklik is om te verstaan. Probeer ook karakters vermy wat nie duidelik deur 'n skermleser gelees kan word nie. Byvoorbeeld:
- Hou sinne so kort as moontlik
- Vermy strepies. In plaas daarvan om 1-3 te skryf, skryf 1 tot 3
- Vermy afkortings. In plaas daarvan om Feb te skryf, skryf Februarie
- Vermy slengwoorde
Skep goeie skakelteks
'n Skakelteks moet duidelik verduidelik watter inligting die leser sal kry deur op daardie skakel te klik.
Voorbeelde van goeie en slegte skakels:
Goed
Sleg
Let wel: Hierdie bladsy is 'n inleiding tot webtoeganklikheid. Besoek ons Toeganklikheid Tutoriaal vir meer besonderhede.