<p>Eesnimi:</p> 

<input type="text" id="first-name" name="firstName" />

<label>Eesnimi:</label> 

<input type="text" name="firstName" />

<span>Eesnimi:</span>

<input type="text" name="firstName" />

<label for="first-name">Eesnimi:</label> 

<input type="text" id="first-name" name="firstName" />

Ainult siis, kui õige semantiline HTML element ei kata olukorda (nt kohandatud JS-komponendid)

ARIA asendab vajaduse kasutada semantilisi HTML elemente

Ainult mobiilirakendustes

Alati, iga HTML elemendi juures, olenemata kontekstist

tabindex="0" lisab elemendi tavapärasesse Tab-järjekorda, tabindex="-1" teeb selle fokuseeritavaks ainult JavaScriptiga

tabindex="-1" määrab elemendi esimeseks Tab-järjekorras

Mõlemad käituvad identselt

tabindex="-1" eemaldab elemendi täielikult lehelt

Brauserid ei luba seda üldse teha

See rikub CSS-i valideerimise

See aeglustab lehe laadimist

Klaviatuurikasutaja ei näe enam, millisel elemendil fookus parasjagu asub

Ütleb ekraanilugejale, et lehte tuleks lugeda eesti hääldusreeglite järgi

Muudab lehe kuupäeva- ja ajaformaadi eestipäraseks

Peidab lehe teistes keeltes kasutajate eest

Tõlgib lehe sisu eesti keelde

Värvipimedusega kasutajad ei pruugi teatud värve eristada

CSS ei toeta rohkem kui kahte värvi korraga

Värvid muudavad lehe liiga aeglaseks

Värvid ei laadi kõikides brauseris korrektselt

See toimib korrektselt ainult koos teiste ligipääsetavuse jaoks mõeldud JavaScripti elementidega

Leht kohandub automaatselt kasutaja operatsioonisüsteemi/brauseri seadistatud eelistusega

See paneb kasutaja kontrasti põhja, et vaegnägijatel oleks lihtsam lugeda

Leht on kõigil kasutajatel tumedas režiimis

<div> ei toeta CSS-i kujundamist

<button> on klaviatuuriga fokuseeritav ja aktiveeritav automaatselt, ilma lisatööta

<div> element laeb aeglasemalt

<button> ei vaja eraldi listener'ide seadistamist