რატომ დაემატა roll ატრიბუტი?

ARIA (Accessible Rich Internet Applications)-ის role ატრიბუტი გამოიყენება ელემენტის მომხმარებლის ინტერფეისის ტიპის მკაფიო განსაზღვრებისთვის. ეს ეხმარება დამხმარე ტექნოლოგიებს, როგორიცაა სკრინრიდერები, გააზრონ ელემენტის დანიშნულება და გადასცენ ეს ინფორმაცია შეზღუდული შესაძლებლობების მქონე მომხმარებლებს. ის ავსებს HTML-ის სემანტიკას, განსაკუთრებით იმ ელემენტებისთვის, რომლებსაც არ აქვთ შიდა სემანტიკა, ან როდესაც სტანდარტული სემანტიკა არასაკმარისია.

მაგალითები:

• div ელემენტს, რომელსაც მიენიჭება button როლი, სკრინრიდერი განიხილავს როგორც ღილაკს, მიუხედავად იმისა, რომ მას არ აქვს სტანდარტული ფუნქციონალი და HTML-ის სემანტიკა.

<div role="button" tabindex="0" aria-pressed="false">
  დაწკაპე მე
</div>

• navigation როლი nav ელემენტზე (მიუხედავად იმისა, რომ nav უკვე აქვს შიდა სემანტიკა ნავიგაციისთვის) შეიძლება დამატებით გაუმჯობესდეს მისი ინტერპრეტაცია ზოგიერთ შემთხვევაში.

<nav role="navigation">
  <ul>
    <li><a href="/">მთავარი</a></li>
  </ul>
</nav>

• ზოგიერთი რთული ვიჯეტი, რომელიც შექმნილია ნეიმსემანტიკური ელემენტების საფუძველზე, იღებს თავის როლებს სწორად წარმოდგენისთვის:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">სექცია 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">სექცია 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  სექციის 1 შინაარსი.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  სექციის 2 შინაარსი.
</div>

role ატრიბუტი კლასიფიცირებს ელემენტებს მათი ფუნქციის და მიზნის მიხედვით, უზრუნველყოფს უფრო ზუსტ და სასარგებლო ურთიერთქმედებას დამხმარე ტექნოლოგიების მომხმარებლებისთვის. მნიშვნელოვანია გამოიყენოთ იგი სხვა ARIA ატრიბუტებთან ერთად (მაგალითად, aria-label, aria-expanded, aria-hidden), რომლებიც გადასცემენ ელემენტების მდგომარეობასა და თვისებებს.

უნდა გახსოვდეთ:

• ყოველთვის უპირატესობა ენიჭება ნატიური HTML სემანტიკას. თუ არსებობს შესაბამისი HTML ელემენტი, გამოიყენეთ ის role და სხვა ARIA ატრიბუტების იმიტაციის ნაცვლად. მაგალითად, გამოიყენეთ <button> <div role="button">-ის ნაცვლად.
• ელემენტის როლის შეცვლა არ იცვლის მისი შიდა ფუნქციონალს. მაგალითად, role="button" div-ზე არ აქცევს მას ფოკუსირებად ან აქტივირებად Space ან Enter-ის დაჭერით დამატებითი JavaScript-ის გარეშე.