ARIA (Accessible Rich Internet Applications) është një grup atributesh që shtojnë semantikën e aksesibilitetit — role, gjendje dhe veti — që HTML-i nativ nuk mund të shprehë. Por rregulli më i rëndësishëm i ARIA-s është: preferojë HTML-in nativ fillimisht.
Save
Save
Elementet native kanë role të saktë, sjellje tastiere dhe fokus falas. Drejtohuni në ARIA vetëm kur asnjë element nativ nuk e bën punën.
<!-- 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 -->
Kjo është ARIA vërtet e dobishme: t'i informoni lexuesit e ekranit për përmbajtjen që ndryshon pa riodhje të faqes (rezultate kërkimi, tostadë, gabime validimi).
ARIA e pasaktë është më e keqe se asnjehere — jep informata të rreme për përdoruesit e lexuesve të ekranit. Dhe ARIA ndryshon vetëm semantikën, kurrë sjelljen: role="button" në <div> nuk e bën atë fokusable ose klikuese; duhet të shtosh tabindex dhe trajtues tastiere vetë.
Përdorni HTML-in semantik për rastin 95%; përdorni ARIA për të plotësuar boshllëqet për widget-e përshtatjeje (skedat, kutitë kombinuese, menytë) dhe për njoftim përdorimesh dinamike nëpërmjet rajoneve të drejtpërdrejtë.
Ndiqni rregullat — preferojë native, mos ndryshoni semantikën e natyrshme pa nevojë, mbani gjendjet në sinkronizim dhe asnjëherë mos aplikoni një rol që nuk e implementoni plotësisht.