ARIA (Accessible Rich Internet Applications) ni seti ya sifa zinazongeza semantiki ya ufikiaji — majukumu, hali, na mali — ambazo HTML asili haiwezi kueleza. Lakini sheria muhimu zaidi ya ARIA ni: pendekeza HTML asili kwanza.
Save
Save
Vipengee vya asili vinakuja na majukumu sahihi, tabia ya kibodi, na lengo bure. Geuka kwenda ARIA tu wakati hakuna kipengee asili kinachofanya kazi.
<!-- 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 -->
Hii ni ARIA inayofaa kweli: kumwambia wasomaji wa skrini juu ya maudhui yanayobadilika bila upakuzi upya wa ukurasa (matokeo ya utafutaji, tosti, hitilafu za uthibitisho).
ARIA isiyo sahihi ni mbaya kuliko hakuna — inatoa watumiaji wa kisomaji cha skrini taarifa za uwongo. Na ARIA inabadilisha tu semantiki, kamwe si tabia: role="button" kwenye <div> haiifanyi fokusable au klikable; lazima ujioneze tabindex na waendeshaji wa funguo mwenyewe.
Tumia HTML ya semantiki kwa kesi 95%; tumia ARIA kupokezea njia kwa widgets za kawaida (kichupo, visanduku vya kuchanganya, menyu) na kujulisha sasisho la kigeni kupitia maeneo yanayoishi.
Fuata kanuni — pendekeza asili, usibadilishe semantiki ya asili bila sababu, badilisha hali katika usambazaji, na kamwe usitumie jukumu ambalo haulioneza kamili.