ARIA (Accessible Rich Internet Applications) hija sett ta' attributi li żżidu semantika ta' aċċesibilità — roles, states, u properties — li HTML nattiv ma jistax jesprimi. Iżda r-regola l-aktar importanti ta' ARIA hi: preferixxi HTML nattiv l-ewwel.
Save
Save
L-elementi nattivi ġejjin ma' roles korretti, imġieba tal-keyboard, u focus ħelsa. Oħroġ għal ARIA biss meta l-ebda element nattiv ma jagħmel ix-xogħol.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
Da verament ARIA utili: ta' infurmazzjoni lir-readers tal-iskrin dwar kontenut li jinbidel mingħajr reload tal-paġna (riżultati tat-tfittxija, toasts, erruri tal-validazzjoni).
ARIA inkorretta hija agħar minn xejn — tagħti lill-utenti tal-screen reader informazzjoni falsa. U ARIA tibdel biss semantika, qatt ma-imġieba: role="button" fuq <div> ma jagħmilha focusable jew clickable; għandek iżżid tabindex u key handlers xejk tiegħek.
Uża HTML semantiku għall-95% tal-każ; uża ARIA biex mimlieħ il-vojt għal widgets custom (tabs, comboboxes, menus) u biex tannunzja aġġornamenti dinamiċi permezz ta' live regions.
Segwi r-regoli — preferixxi nattiv, m'għandekx tbiddel semantika nattiva mingħajr neċessità, żomm states sinkronizzati, u qatt m'applikax role li ma timplimentax kompletament.