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: ეკრანის მკითხველებს ვეუბნებით შინაარსის ცვლილების შესახებ, რომელიც მიმდინარეობს გვერდის გადატვირთვის გარეშე (ძიების ফলები, toast შეტყობინებები, ვალიდაციის შეცდომები).
ართიკულირებული ARIA არის უარესი ვიდრე არცერთი — ეს აძლევს ეკრანის მკითხველების მომხმარებელს ცრუ ინფორმაციას. და ARIA ცვლის მხოლოდ სემანტიკას, არასოდეს ქცევას: role="button" <div>-ზე მას არ აქცევს ფოკუსირებადად ან დაჭერადად; თქვენ თავად უნდა დაამატოთ tabindex და key handlers.
იხმარეთ სემანტიკური HTML 95% შემთხვევისთვის; გამოიყენეთ ARIA სიცარიელეების შესავსებად მომხმარებელის ჩვენი ვიჯეტებისთვის (ჩანართები, კომბობოქსები, მენიუები) და დინამიური განახლებების გასაცხადებლად live regions-ის მეშვეობით.
팔ოვ წესები — უპირატესობა მიეცით მშობელ ელემენტს, არ შეცვალოთ მშობელი სემანტიკა უკანონოდ, შენახეთ მდგომარეობები სინქროში, და არასოდეს გამოიყენოთ როლი, რომელიც სრულად არ განახორციელე.