რა არის სემანტიკისა და ხელმისაწვდომობის (a11y) შორის განსხვავება?

სემანტიკა ეხმარება მანქანებს (ბრაუზერებს, პარსერებს, საძიებო რობოტებს) გააზრონ კონტენტის სტრუქტურა და მნიშვნელობა. ხელმისაწვდომობა (a11y) მიზნად ისახავს, რომ კონტენტი იყოს გასაგები და მოსახერხებელი ადამიანებისთვის, რომლებიც იყენებენ დამხმარე ტექნოლოგიებს:

სემანტიკური ტეგები

სემანტიკური HTML ტეგების გამოყენება, როგორიცაა <article>, <nav>, <aside>, <footer>, <h1>-<h6>, ანიჭებს გვერდის ელემენტებს სემანტიკურ მნიშვნელობას. მაგალითად:

<article>
  <h2>მუხლის სათაური</h2>
  <p>მუხლის ტექსტი...</p>
</article>

ეს ეხმარება ბრაუზერებს სწორად გააზრონ დოკუმენტის სტრუქტურა.

ხელმისაწვდომობა (a11y)

ხელმისაწვდომობა მოიცავს მრავალ ასპექტს:

• სემანტიკა: სემანტიკური ტეგების სწორად გამოყენება უკვე არის ხელმისაწვდომობის ნაწილი, რადგან ეხმარება დამხმარე ტექნოლოგიებს (სკრინრიდერებს) გააზრონ ელემენტების სტრუქტურა და დანიშნულება.

• ARIA ატრიბუტები: დამატებითი ატრიბუტები, როგორიცაა aria-label, aria-describedby, aria-hidden, role, უზრუნველყოფს დამატებით ინფორმაციას დამხმარე ტექნოლოგიებისთვის, როდესაც HTML-ის სემანტიკა არ არის საკმარისი:

  <button aria-label="დახურვა დიალოგის ფანჯრისთვის">
    <img src="close.svg" alt="">
  </button>
  

• კონტრასტი: საკმარისი კონტრასტული ფერი ტექსტსა და ფონზე, მხედველობის დარღვევის მქონე ადამიანებისთვის:

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

• სურათებისთვის ალტერნატიული ტექსტი (alt): აღწერა სურათის შინაარსის შესახებ, მომხმარებლებისთვის, რომლებიც ვერ ხედავენ:

  <img src="cat.jpg" alt="შავი კატა სძინავს ფანჯრის რაფაზე">
  

• სათაურების სტრუქტურა: ლოგიკური ჰიერქია სათაურების (<h1> - <h6>) გამოყენებით, სკრინრიდერების საშუალებით მარტივი ნავიგაციისთვის:

ურთიერთობა

სემანტიკა არის მნიშვნელოვანი საფუძველი ხელმისაწვდომობისთვის. კარგად სტრუქტურირებული გვერდი, სემანტიკური ელემენტებით, ბევრად უფრო ადვილია ხელმისაწვდომი გახადოს. თუმცა, სემანტიკა alone არ არის საკმარისი — ხშირად საჭიროა დამატებითი ზომები, როგორიცაა ARIA ატრიბუტები, ფოკუსის მართვა და საკმარისი კონტრასტის უზრუნველყოფა:

ასპექტი	სემანტიკა	ხელმისაწვდომობა (a11y)
მიზანი	მნიშვნელობის მინიჭება ელემენტებს	უზრუნველყოფს, რომ ყველა ადამიანი შეძლოს კონტენტის გაგება და გამოყენება
საშუალებები	HTML ტეგები (<nav>, <article>, <h1>...)	სემანტიკა, ARIA, კონტრასტ, ფოკუსი, alt ტექსტი და სხვა
მომხმარებელი	ბრაუზერები, პარსერები, საძიებო სისტემები	ადამიანები სხვადასხვა საჭიროებებით, დამხმარე ტექნოლოგიები