ARIA (Accessible Rich Internet Applications) એ વિશેષતાઓનો એક સમૂહ છે જે સુલભતા શબ્દશાસ્ત્ર ઉમેરે છે — ભૂમિકાઓ, સ્થિતિ અને ગુણધર્મો — જે મૂળ HTML વ્યક્ત કરી શકતું નથી. પરંતુ સૌથી મહત્વપૂર્ણ ARIA નિયમ છે: પહેલો મૂળ HTML ને પસંદ કરો.
Save
Save
મૂળ તત્વો સાથે સાચી ભૂમિકાઓ, કીબોર્ડ વર્તણૂક અને ફોકસ મુક્ત આવે છે. ARIA માટે માત્ર ત્યારે પહોંચો જ્યારે કોઈ પણ મૂળ તત્વ કામ કરતું નથી.
<!-- 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 -->
યह સત્યમાં ઉપયોગી ARIA છે: સ્ક્રીન રીડર્સને પૃષ્ઠ પુનઃલોડ કર્યા વિના બદલાતા સામગ્રી વિશે કહેવું (શોધ પરિણામો, toasts, માન્યતા ભૂલો).
મોટું ARIA કશું નહીંથી હલકું છે — તે સ્ક્રીન રીડર વપરાશકર્તાઓને ખોટી માહિતી આપે છે. અને ARIA માત્ર શબ્દશાસ્ત્ર બદલે છે, વર્તણૂક ક્યારેય નહીં: <div> પર role="button" તેને ફોકસ કરી શકાય તેવું અથવા ક્લિક કરી શકાય તેવું બનાવતું નથી; તમારે નીચે પોતે tabindex અને કી હ્যાન્ડલર્સ ઉમેરવા જોઈએ.
95% કેસ માટે સિમેન્ટીક HTML નો ઉપયોગ કરો; કસ્ટમ વિજેટ્સ (tabs, comboboxes, menus) માટે અંતર ભરવા માટે અને જીવંત પ્રદેશ દ્વારા ગતિશીલ અપડેટ્સ ઘોષણા કરવા માટે ARIA નો ઉપયોગ કરો.
નિયમોને અનુસરો — મૂળને પસંદ કરો, મૂળ શબ્દશાસ્ત્રને બિનજરૂરી રીતે બદલશો નહીં, સ્થિતિ સમન્વયિત રાખો, અને ક્યારેય એવી ભૂમિકા લાગુ કરશો નહીં જેને તમે સંપૂર્ણરીતે અમલમાં ન લાવતા હોય.