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

a11y განიმარტება, როგორც Accessibility (a + 11 სიმბოლო + y) და ნიშნავს ხელმისაწვდომობას. ამ სტატიაში ზოგადად განვიხილავთ, რას გულისხმობს ხელმისაწვდომობა ვებ ტექნოლოგიებში და როგორ შეგვიძლია ხელმისაწვდომობის უზრუნველყოფა მარტივი, სემანტიკური HTML-ის დონეზე. გაითვალისწინეთ, რომ ეს ხელმისაწვდომობის საკითხს - კერძოდ ტექნიკებსა და პრაქტიკის საუკეთესო პატერნებს - სრულყოფილად არ ფარავს, შესაბამისად, თუ ეს საკითხი თქვენთვის მნიშვნელოვანია, გაეცანით უფრო ვრცელ სტატიას MDN-ზე.

რა არის a11y?

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

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

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

• სემანტიკური HTML, რომელიც აუმჯობესებს ხელმისაწვდომობას, ასევე აუმჯობესებს SEO-ს.
• ხელმისაწვდომობაზე ზრუნვა არის კარგი ეთიკისა და მორალის დემონსტრაცია, რაც ხელს უწყობს საიტის იმიჯს.
• სხვა კარგი პრაქტიკის პატერნები რომლებიც აუმჯობესებს ხელმისაწვდომობას ამავდროულად საიტს უფრო გამოყენებადს ხდის სხვა ჯგუფებისთვის, მაგალითად მობილუი ტელეფონების მომხმარებლებისთვის, ცუდი ინტერნეტის მქონე მოწყობილობებისთვის და ა.შ. მაშასადამე, ყველა იღებს სარგებელს ასეთი პრაქტიკიდან.
• ზოგან ეს უბრალოდ კანონით მოითხოვება ყველა ვებსაიტისგან.

რა შეზღუდულ შესაძლებლობებზე ვლაპარაკობთ?

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

მხედველობის დარღვევბი

მხედველობის დარღვევების მაგალითია უსინათლობა, ცუდი მხედველობა ან დალტონიზმი (ფერების სიბრმავე). ასეთი დარღვევების მქონე ადამიანები იყენებენ ეკრანის გამადიდებლებს, როგორიცაა ფიზიკური გამადიდებელი ან ციფრული ზუმი. ბრაუზერთა უმეტესობას დღეს აქვს ზუმის მხარდაჭერა. ზოგი მომხმარებელი ეყრდნობა ეკრანის წამკითხველებს (screen reader), რაც წარმოადგენს პროგრამას, რომელიც ხმამაღლა კითხულობს ციფრულ ტექსტს. ეკრანის წამკითხველების მაგალითებია:

• ფასიანი კომერციული პროდუქტები: JAWS და Dolphin Screen Reader.
• უფასო პროდუქტები, როგორიცაა NVDA, ChromeVox და Orca.
• ოპერატიულ სისტემებში ჩაშენებული პროგრამები, როგორიცაა VoiceOver, Narrator, ChromeVox და TalkBack.

კარი იქნება, თუ თქვენით ცდით რომელიმე ეკრანის წამკითხველს, რათა გაიგოთ როგორ მუშაობს.

ჯანდაცვის მსოფლიო ორგანიზაციის სტატისტიკის თანახმად, 285 მილიონი ადამიანს აქვს მხედველობის დარღვევა: 39 მილიონი არის უსინათლო და 246-ს აქვს დაქვეითებულ მხედველობა. ეს საკმაოდ დიდი აუდიტორიაა, რომელიც ჩვენი ვებსაიტით ვერ ისარგებლებს, თუ მას სათანადოდ არ გავმართავთ!

სმენის დარღვევები

ყრუ და სმენადაქვეითებულ ადამიანებს გააჩნიათ დამხმარე ტექონოლოგიები (იხილეთ დამხმარე სისტემები სმენადაქვეითებულთათვის), თუმცა ისინი არაა ფართოდ გავრცელებული.

ხელმისაწვდომობისთვის, საჭიროა ალტერნატიული ტექსტური ინფორმაცია. ვიდეოებს უნდა გააჩნდეს სუბტიტრები, ხოლო აუდიო კონტენტს - ტრანსკრიპტები.

ჯანდაცვის მსოფლიო ორგანიზაციის თანახმად, 466 მილიონ ადამიანს გააჩნია მნიშვნელოვნად დაქვეითებული სმენა.

მოტორული დარღვევები

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

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

ასეთი შეზღუდვა ვებ დეველოპმენტში თავს იჩენს იმის საჭიროებით, რომ კონტროლები ხელმისაწვდომი იყოს კლავიატურით. კარგად გამართულ ვებსაიტზე უნდა შესაძლებელი იყოს მხოლოდ კლავიატურით ნავიგაცია. სცადეთ რომელიმე ვებსაიტზე Tab ღილაკით გადაადგილება, ფორმის შევსება, ღილაკებთან ინტერაქცია და ა.შ.

კოგნიტური დარღვევები

კოგნიტური დარღვევები გულისხმობს შეზღუდული შესაძლებლობების ფართო სპექტრს. ეს შეიძლება იყოს გენეტიკური ინტელექტის პრობლემები, ხანდაზმულობის დროს დაქვეითებული აზროვნებისა და მეხსიერების პროცესები და ა.შ. ეს სპექტრი ასევე გულისხმობს ისეთ დარღვევებს, როგორიცაა დისლექსია, ან ყურადღების დეფიციტისა და ჰიპერაქტივობის აშლილობა.

კარგი ხელმისაწვდომობის ფუნდამენტები, რომლებიც ეხმარება კოგნიტური დარღვევის მქონე პირებს:

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

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

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

• არსებულ რპოექტში, რომელსაც ხელმისაწვდომობის პრობლემები აქვს, გვინდა ცვლილებების შეტანა.
• ხელმისაწვდომობაზე ფიქრი და მასთან დაკავშირებული პრობლემების აღმოჩენა დაიწყეპროექტის ძალიან გვიანდელ სტადიებზე.

თუმცა თუ ხელმისაწვდომობაზე ზრუნვა პროექტის ადრეულ ეტაპებზე დავიწყეთ, მაშინ მისი იმპლემენტაციის საფასური საკმაოდ უმნიშვნელოა.

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

• თარიღის ასარჩევი ვიჯეტი სწორად მუშაონს მომხმარებლებისთვის, რომლებიც ეკრანის წამკითხველს იყენებენ?
• თუ კონტენტი დინამიურად იცვლება, მხედველობადაქვეითებული ინდივიდები ამ ცვლილებას დააფიქსირებენ?
• ჩემი UI ღილაკები ხელმისაწვდომია კლავიატურისა და თაჩის ინტერფეისის მომხმარებლებისთვის?

სიმართლე ითქვას, 100%-იანი ხელმისაწდომობა შეუძლებელია. ჩვენ ყოველთვის წავაწყდებით ისეთ კერძო შემთხვევებს, როცა რომელიმე მომხმარებელი გარკვეულ კონტენტს კომფორტულად ვერ მოიხმარს. მიუხედავად ამისა, ყოველთვის უნდა სცადოთ, რომ ვებსაიტი რაც შეიძლება მეტი ადამიანისთვის იყოს ხელმისაწვდომი.

მთლიანობაში, მნიშვნელოვანია შემდეგი პუნქტები:

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

HTML და ხელმისაწვდომობა

სემანტიკური HTML-ის ცნებას უკვე ბევრჯერ შეხვდებოდით, რაც გულისხმობს სწორი HTML ელემენტების გამოყენებას მათი დანიშნულების მიხედვით. რატომ არის ეს მნიშვნელოვანი? ბოლოსდაბოლოს, შეგვიძლია ავიღოთ ნებისმიერი ელემენტი, კარგად გავსტილოთ და მოვიშველიოთ ჯავასკრიპტის ლოგიკა, რათა ვებსაიტზე, მაგალითად, ვიდეოს ჩამრთველი შევქმნათ. ასეთი ღილაკის მარკაპი შეიძლება იყოს შემდეგნაირი:

<div>ჩართე ვიდეო</div>

მაგრამ, რიგი მიზეზების გამო, უმჯობესია ასეთი მარკაპი:

<button>ჩართე ვიდეო</button>

<button> ელემენტს არამხოლოდ სათანადო სტილები გააჩნია (რომელსაც ალბათ ისედაც შეცვლით), არამედ ჩაშენებული კლავიატურის ხელმისაწვდომობაც - მომხმარებლებს შეუძლიათ Tab-ის გამოყენება რათა ღილაკიდან ღილაკზე გადაადგილდნენ და გაააქტიურონ შერჩეული ელემენტი Space-ით, Return-ით ან Enter-ით.

სემანტიკური HTML-ის წერას იმაზე მეტი დრო არ სჭირდება, ვიდრე არასემანტიკურ (და საშინელ) მარკაპს, თუკი ჩვენ თავიდანვე სწორი მიდგომით ვიწყებთ პროექტს.

განვიხილოთ მარკაპის ძირითადი პრინციპები, რომლებიც ხელს უწყობს ხელმისაწვდომობას.

კარგად სტრუქტურირებული კონტენტი

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

<h1>მთავარი სათაური</h1>

<p>ეს არის დოკუმენტის პირველი სექცია.</p>

<p>ესეც მეორე აბზაცი. მგონი რძის პროდუქტებს ჩამოვწერ:</p>

<ol>
  <li>მაწონი</li>
  <li>ხაჭო</li>
  <li>არაჟანი</li>
</ol>

<h2>ქვესათაური</h2>

<p>
  ეს არის დოკუმენტის ერთგვარი ქვე-სექცია
</p>

<h2>მეორე ქვესათაური</h2>

<p>
  ეს არის მეორე ქვესექცია სადაც დამატებით საკითხს განვიხილავ.
  ჩემი გჯერა?
</p>

ასეთ დოკუმენტში ნავიგაცია მარტივია:

• ეკრანის წამკითხველი ტექსტს ჩამოუვლის და ყველა სათაურს წაიკითხავს, გაცნობებთ რომელია სათაური, რომელი პარაგრაფი და ა.შ.
• იგი გაჩერდება ყოველი ელემენტის შემდეგ, რათა თქვენი ტემპით გადაინაცვლოთ ტექსტებს შორის.
• შეგიძლიათ სწრაფად გადახტეთ ერთი სათაურიდან მეორეზე, ანუ იხელმძღვანელოთ ერთგვარი სარჩევით, რათა კონკრეტული საკითხი მარტივად მოძებნოთ.

ვიზუალურად იგივე შედეგის მიღება შეიძლება ასეთი მარკაპითაც:

<span style="font-size: 3em">მთავარი სათაური</span> <br /><br />

ეს არის დოკუმენტის პირველი სექცია.
<br /><br />

ესეც მეორე აბზაცი. მგონი რძის პროდუქტებს ჩამოვწერ:

1. მაწონი
<br /><br />
2. ხაჭო
<br /><br />
3. არაჟანი
<br /><br />

თუმცა ეკრანის წამკითხველი აქედან ღირებულ ინფორმაციას ვერ ამოიღებს და, შესაბამისად, კარგი ფორმატით ვერ გადმოგვცემს ინფორმაციას.

რა თქმა უნდა, გარდა ხელმისაწვდომობისა, ასეთი კონტენტის გასტილვაც ძალზედ რთულია, რათგან სელექტორებსაც ვერ გამოვიყენებთ, ზოგიერთი ტექსტური ნაწილისთვის!

გასაგები ენა

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

• განავრცეთ აბრივიაციები - მაგალითად, ჯობია "ხუთშაბათი" და არა "ხუთშ."
• განავრცეთ აკრონიმები, ტექსტში სულ მცირე ერთხელ ან ორჯერ მაინც, შემდეგ გამოიყენეთ <abbr> თეგი მათ მოსანიშნად.

გვერდის ლოგიკური სტრუქტურა

იხელმძღვანელეთ სწორი სექციის ელემენტებით, როცა ვებგვერდის სტრუქტურულ ნაწილებს აგებთ, მაგალითად ნავიგაციას (<nav>), ბოლოსართს (<footer>) და განმეორებადი კონტენტის ერთეულებს (<article>).

მაგალითად, თანამედროვე კონტენტის სტრუქტურა ასე გამოიყურება:

<header>
  <h1>თავსართი ან რამე</h1>
</header>

<nav>
  <!-- მთავარი ნავიგაცია -->
</nav>

<!-- გვერდის მთავარი კონტენტი -->
<main>
  <!-- შეიცავს სტატიას -->
  <article>
    <h2>სტატიის სათაური</h2>

    <!-- სტატიის შიგთავსი -->
  </article>

  <aside>
    <h2>მსგავსი სტატიები</h2>

    <!-- გვერდითა კონტენტი -->
  </aside>
</main>

<!-- საიტის მთავარი ფუტერი/ბოლოსართი, რომელიც ყველა გვერდზე გამოიყენება -->

<footer>
  <!-- ბოლოსართის კონტენტი -->
</footer>

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

სემანტიკური UI კონტროლები

UI კონტროლებში იგულისხმება ვებ დოკუმენტის ის ნაწილები, რომელთანაც მომხმარებელი ურთიერთქმედებს — ძირითადად ღილაკები, ლინკები და ფორმის კონტროლები. მათი ხელმისაწვდომობის ძირითადი ასპექტი არის ის, რომ ბრაუზერი საშუალებას გვაძლევს, მათზე ვიმოქმედოთ კლავიატურით.

დააწკაპეთ ქვემოთ მოცემულ მაგალითზე, რათა ფოკუსი გადაიტანოთ შიდა დოკუმენტზე და შემდეგ სცადეთ ფორმა შეავსოთ მხოლოდ კლავიატურით. Enter ან Return ღილაკით შეგიძლიათ გაააქტიუროთ ბმულები, რომლებიც გადაგიყვანთ სათანადო სექციებზე.

თუ სემანტიკურად გამართული UI კონტროლების მარკაპი გაქვთ, მაშინ ის ავტომატურად ხელმისაწვდომია.

თუ მაგალითის კოდი ნახეთ, შეამჩნევდით tabindex ატრიბუტს:

<ul>
  <li><a href="#form-section" tabindex="0">ფორმის განყოფილება</a></li>
  <li>
    <a href="#buttons-section" tabindex="0">ღილაკების განყოფილება</a>
  </li>
</ul>

tabindex ატრიბუტი გამოიყენება ელემენტებზე, რომლებზეც შესაძლებელია Tab ღილაკით ნავიგაცია და განსაზღვრავს ამ ღილაკით გადანაცვლების თანმიმდევრობას. ჩვეულებრივ, ელემენტებზე გადაადგილება ხდებია იმ თანმიმდევრობით, რა თანმიმდევრობითაც ისინი კოდში (წყაროში) არიან. ხშირ შემთხვევაში, ამ ატრიბუტუის გამოყენება რეკომენდირებული არ არის, თუმცა არის შემთხვევები, როცა საიტის კონტენტის განლაგება და თანმიმდევრობა ვიზუალურად ძალიან განსხვავდება კოდში ამ ელემენტების თანმიმდევრობისგან და, შესაბამისად, ავტომატურად კლავიატურით ნავიგაცია დამაბნეველი გამოდის, რის გამოც საჭირო ხდება გადანაცვლბის თანმიმდევრობის ხელით გაწერა.

tabindex-ის შესაძლო მნიშვნელობები:

• უარყოფითი რიცხვი - ნიშნავს, რომ ელემენტზე კლავიატურით ნავიგაცია შეუძლებელია.
• 0 - ელემენტი ფოკუსირებადია თანმიმდევრული კლავიატურით ნავიგაციის დროს, ნებისმიერი დადებითი tabindex-ის მქონე ელემენტების შემდეგ. ასეთი ელემენტების ფოკუსირებადი ნავიგაციის თანმიმდევრობას განსაზღვრავს მათი თანმიმდევრობა დოკუმენტის წყაროში.
• დადებითი რიცხვი - ნიშნავს, რომ ელემენტი უნდა იყოს ფოკუსიდებადი თანმიმდევრული კლავიატურით ნავიგაციის დროს, სადაც მისი თანმიმდევრობა განისაზღვრება ციფრული მნიშვნელობით. ანუ ჯერ tabindex="4"-ზე მოექცევა ფოკუსი tabindex="5"-მდე და tabindex="0"-მდე, მაგრამ მხოლოდ tabindex="3"-ის შემდეგ. თუ დადებითი რიცხვის მნიშვნელობები ელემენტებს ერთი და იგივე აქვთ, თანმიმდევრობას განსაზღვრავს დოკუმენტის წყარო.
• თუ tabindex-ის ატრიბუტი არსებობს, მაგრამ მნიშვნელობა არ გააჩნია, ელემენტის ფოკუსირებადობას განსაზღვრავს მომხმარებლის აგენტი (ბრაუზერი).

აზრიანი ბმულები!

აუცილებელია, რომ ტექსტში დართულ ბმულებს გააჩნდეთ საზრისი, მაშინაც კი, როცა მათ კონტექსტიდან ამოიღებთ. აზრიანი ბმულის მაგალითი:

<p>
  კატები ლამაზი და გრაციოზული არსებები არიან.
  <a href="cats.html">გაიგეთ მეტი კატების შესახებ</a>.
</p>

ცუდი ბმულის მაგალითი:

<p>
  კატები ლამაზი და გრაციოზული არსებები არიან.
  კატების შესახებ მეტის გასაგებად, <a href="cats.html">დააწკაპეთ აქ</a>.
<p/>

აზრიანი იარლიყები!

ფორმის ველებს აუცილებელია, რომ გააჩნდეთ სემანტიკურად გამართული და შინაარსობრივად გასაგები აღწერა.

ცუდი იარლიყის მაგალითი:

შეიყვანეთ სახელი: <input type="text" id="name" name="name" />

უკეთესი ვერსია:

<div>
  <label for="name">შეიყვანეთ სახელი</label>
  <input type="text" id="name" name="name" />
</div>

ტექსტური ალტერნატივები

ტექსტი თავისთავად ხელმისაწვდომია, თუმცა იგივეს ვერ ვიტყვით მულტიმედიაზე — სურათის ან ვიდეოს ნახვა უსინათლო ადამიანს არ შეუძლია, აუდიოს კი ვერ მოუსმენს სმენადაქვეითებული. ხელმისაწვდომი მულტიმედია საკმაოდ ვრცელი საკითხია, აქ ჩვენ მხოლოდ <img> ელემენტზე ვისაუბრებთ.

ციფრული სურათი ვებ დოკუმენტში თავისთავად მხოლოდ ვიზუალური ინფორმაციაა და ეკრანის წამკითხველისთვის არაფერს ნიშნავს:

<img src="cat.png" />

საუკეთესო შემთხვევაში, იგი ამოიკითხავს ფაილის სახელს "cat.png", რამაც შეიძლება პატარა მინიშნება მისცეს მომხმარებელს, თუ რას შეიძლება გამოსახავდეს სურათი, მაგრამ გარანტია არ გვაქვს, რომ ფაილის სახელი საერთოდ ადამიანურ ენაზე ეწერება. ეს შეიძლება იყოს კომპიუტერის მიერ დაგენერირებული სიმბოლოთა კორიანტელი. სწორედ ამიტომ, უნდა მოვერიდოთ ტექსტური ინფორმაციის სურათის ფორმატში გადმოცემას.

სურათის შესახებ ინფორმაციას აღვწერთ alt ატრიბუტით:

<img src="cat.png" alt="შავი კატა, რომელიც ჩაცუცქულია ბალახებში, უკან გადაწეული ყურებითა და გაფართოებული თვალის გუგებით უცქერს კამერას, თითქოს თავდასხმისთვის ემზადება." />

ეკრანის წამკითხველი გააჟღერებს alt ატრიბუტის შიგთავსს და მიაწვდის მომხმარებელს შედარებით უფრო ამომწურავ ინფორმაციას. რას ჩავწერთ ამ ატრიბუტში, დამოკიდებულია მთლიანი დოკუმენტის კონტექსტზე, თუმცა მნიშვნელოვანია, რომ იგი სურათის პირდაპირი რეპრეზენტაცია იყოს. ის ტექსტურად იმას უნდა გადმოსცემდეს, რასაც სურათი გამოდსცემს ვიზუალურად. მაგალითად, თუ გვაქვს მომხმარებლის ავატარი კომენტარების სექციაში, მაშინ მომხმარებლის სახელი alt="Giorgi" საკმარისია მოცემულ ვითარებაში. თუ ჩვენ გვაქვს ახალი ამბების სტატია, სადაც სურათში ცნობილ მომღერალს თავისი საყვარელი კატები უჭირავს, აღწერა შეიძლება იყოს შემდეგნაირი: alt="მომღიმარი ფრედი მერკური, ორივე ხელში ატატებულ კატებთან. მარჯვენა ხელში ნარინჯისფერი კატა, ხოლო მარცხენა ხელში — მოთეთრო-მონაცრისფრო".

აუცილებელია, რომ პირადი ცოდნა ან ზედმეტი ინფორმაცია alt ატრიბუტში არ შევიტანოთ, რადგან იგი სურათის შიგთავის აღწერას არ ემსახურება. დამატებითი კონტექსტუალური ინფორმაცია შეგვიძლია დავურთოთ ტექსტში, რომელიც სურათის გარშემო არის.

HTML-ში არსებობს ორი ელემენტი — <figure> და <figcaption> — რომლებითაც შეგბიძლია აღვწეოთ ფიგურა (ნებისმიერი რამ და არამარტო სურათი, მაგალითად სქემა, დიაგრამა და ა.შ):

<figure>
  <img
    src="cat.png"
    alt="ედუკატას კატის ლოგო"
    aria-describedby="catdesc" />
  <figcaption id="catdesc">
    ედუკატას კატა: შავი კატა ღია ფერის ფონზე, რომელის უჟმურად შეჰყურებს მომხმარებელს.
  </figcaption>
</figure>

თუმცა ეკრანის წამკითხველის მხარდაჭერა ფიგურებზე შეზღუდულია, aria-labelledby და aria-describedby ატრიბუტებით შეგვიძლია შევქმნათ ელემენტებს შორის ასოციაცია.

შეჯამება

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