რა არის ვებ-ხელმისაწვდომობა? WCAG და ინკლუზიური დიზაინი ახსნილი
ვებ-ხელმისაწვდომობა ნიშნავს ვებსაიტებისა და აპების ისე აგებას, რომ შეზღუდული შესაძლებლობის მქონე ადამიანებს შეეძლოთ მათი გამოყენება — იქნება ისინი ბრმები, რომლებიც screen reader-ს იყენებენ, თაგვს ვერ იყენებენ, დაბალი მხედველობა ან ფერთა სიბრმავე აქვთ, ყრუები არიან, ან კოგნიტური ან სასწავლო შეზღუდვები აქვთ. პრაქტიკაში ეს ისეთ რამეებზე მოდის, როგორიცაა სურათების ტექსტური ალტერნატივები, საკმარისი ფერთა კონტრასტი, ფორმები სწორი ლეიბლებით და ყველაფერი, რაც მხოლოდ კლავიატურით მუშაობს. მისი საერთაშორისო სტანდარტია WCAG — Web Content Accessibility Guidelines, W3C-ის მიერ.
Accessibility ხშირად იწერება შემოკლებით a11y — „a“, შემდეგ 11 ასო, შემდეგ „y“.
რატომ არის ხელმისაწვდომობა მნიშვნელოვანი AI-ით აშენებისას
AI ბილდერები კარგად აწარმოებენ აპებს, რომლებიც სწორად გამოიყურებიან. ხელმისაწვდომობა ძირითადად იმაზეა, რაც ეკრანის სურათზე არ ჩანს: არის თუ არა ღილაკი რეალურად ღილაკი, აქვს თუ არა ველს ლეიბლი, რომელსაც screen reader წაიკითხავს, და შეგიძლიათ თუ არა მენიუს მიწვდომა Tab კლავიშით.
ამიტომ მნიშვნელოვანია კითხვა:
- ადვილია გამოტოვება. სპეციალურად სტილიზებული dropdown შეიძლება ლამაზად გამოიყურებოდეს და თაგვის გარეშე სრულიად გამოუყენებელი იყოს. ამას ვერ შეამჩნევთ, სანამ არ შეამოწმებთ.
- ადრე გაკეთება იაფია. ხელმისაწვდომ კომპონენტებზე თხოვნა პირველივე prompt-ში თითქმის არაფერი ჯდება. დასრულებული აპის შესწორება ყველა ეკრანის შეხებას მოითხოვს.
- ეხმარება ყველას. სუბტიტრები ხმაურიან ადგილას ეხმარება, კარგი კონტრასტი — ტელეფონზე მზის ქვეშ, ნათელი ლეიბლები კი ყველას ეხმარება ფორმების უფრო სწრაფად შევსებაში.
- ემთხვევა SEO-ს. სწორი სათაურები, აღწერითი ბმულები და alt ტექსტი საძიებო სისტემებსაც ეხმარება გვერდების გაგებაში — იხილეთ SEO AI-ით აშენებული ვებსაიტებისთვის.
- შეიძლება სავალდებულო იყოს. იმისდა მიხედვით, სად მუშაობთ და ვის ემსახურებით, ხელმისაწვდომობა შეიძლება იურიდიული ვალდებულება იყოს.
ყოველდღიური ანალოგია
წარმოიდგინეთ შენობის შესასვლელი.
კიბეები ბევრისთვის კარგად მუშაობს. პანდუსი მუშაობს ეტლით მოსარგებლეებისთვის — და ასევე ბავშვის ეტლით მოსიარულე მშობლებისთვის, ტვირთით მომუშავე კურიერებისთვის და ჩემოდნებით მოგზაურებისთვის. ავტომატური კარები, ნათელი ნიშნები, ბრაილის ხელის ღილაკები და კარგი განათება თითოეულ ბარიერს ვიღაცისთვის ხსნის.
ვებ-ხელმისაწვდომობა იგივე იდეაა ციფრული სივრცისთვის: თქვენი აპის პანდუსები, ნიშნები და სახელურები. და როგორც შენობის შემთხვევაში, პანდუსის გეგმებში ჩართვა ბევრად ადვილია, ვიდრე ბეტონის გამყარების შემდეგ დამატება.
WCAG მოკლედ
WCAG-ს აქვეყნებს W3C-ის Web Accessibility Initiative. მიმდინარე ვერსია არის WCAG 2.2, რომელიც პირველად 2023 წლის ოქტომბერში გამოქვეყნდა. ის უკუთავსებადია: შინაარსი, რომელიც WCAG 2.2-ს აკმაყოფილებს, აკმაყოფილებს 2.1-ისა და 2.0-ისაც, და W3C ურჩევს ბოლო ვერსიის გამოყენებას. WCAG 2.2 ასევე დამტკიცებულია როგორც საერთაშორისო სტანდარტი, ISO/IEC 40500:2025. ძალიან განსხვავებული WCAG 3 მუშავდება როგორც ადრეული პროექტი და არა დასრულებული სტანდარტი.
WCAG ოთხ პრინციპად არის ორგანიზებული, რომელიც ხშირად POUR-ით ახსოვთ:
| პრინციპი | მნიშვნელობა | მაგალითები |
|---|---|---|
| Perceivable (აღქმადი) | ადამიანებს შეუძლიათ შინაარსის აღქმა იმ გრძნობებით, რასაც იყენებენ | Alt ტექსტი სურათებისთვის, სუბტიტრები ვიდეოსთვის, საკმარისი კონტრასტი |
| Operable (მართვადი) | ადამიანებს შეუძლიათ კონტროლების გამოყენება და ნავიგაცია | კლავიატურით წვდომა, დროის შეზღუდვები, რომლებიც შეიძლება გაგრძელდეს, ხილული ფოკუსი |
| Understandable (გასაგები) | შინაარსი და ქცევა გასაგებია | ნათელი ლეიბლები, სასარგებლო შეცდომის შეტყობინებები, თანმიმდევრული ნავიგაცია |
| Robust (მდგრადი) | მუშაობს ბრაუზერებისა და დამხმარე ტექნოლოგიების ფართო სპექტრთან | სწორი HTML ელემენტები, კონტროლების სწორი სახელები და როლები |
თითოეულ მიმართულებას აქვს შემოწმებადი კრიტერიუმები სამ დონეზე:
- დონე A — მინიმუმი. ამის ვერ შესრულება ზოგიერთ ადამიანს მთლიანად უშლის.
- დონე AA — სტანდარტული სამიზნე, და დონე, რომელსაც უმეტესობა კანონი და პოლიტიკა მიუთითებს.
- დონე AAA — უმაღლესი დონე. ზოგან სასარგებლოა მისწრაფება, მაგრამ W3C არ ურჩევს მის მოთხოვნას მთელი საიტისთვის, რადგან ზოგი შინაარსი ვერ აკმაყოფილებს მას.
WCAG 2.2-მა 2.1-ს ცხრა კრიტერიუმი დაამატა, მათ შორის Target Size (Minimum) დონე AA-ზე — დასაჭერი ელემენტები, როგორც წესი, მინიმუმ 24 × 24 CSS პიქსელი უნდა იყოს, გამონაკლისებით — და Accessible Authentication (Minimum), რომელიც ზღუდავს შესვლის ნაბიჯებს, რომლებიც მეხსიერებაზე ან თავსატეხებზე დამოკიდებულია, მაგალითად პაროლის ხელახლა აკრეფას, როცა ჩასმა არ შეიძლება. ის ასევე ამოიღო ძველი „Parsing“ კრიტერიუმი, როგორც მოძველებული.
სამუშაო მაგალითი: რეგისტრაციის ფორმა
აი რეგისტრაციის ფორმა, რომელსაც AI შეიძლება გამოიმუშავებდეს, და რას პოულობს ხელმისაწვდომობის შემოწმება:
| პრობლემა | ვის ეხება | გამოსწორება |
|---|---|---|
| ველები იყენებენ placeholder ტექსტს („Email“) label-ის ნაცვლად | Screen reader-ის მომხმარებლები; ყველა, ვინც ავიწყდება, რა იყო ველი, როცა წერას იწყებს | ხილული <label>, დაკავშირებული თითოეულ ველთან |
| ღია ნაცრისფერი ტექსტი თეთრზე, 4.5:1 კონტრასტზე მნიშვნელოვნად დაბლა | დაბალი მხედველობის მქონე ადამიანები, გარეთ მყოფი ყველა | უფრო მუქი ტექსტი, რომელიც 4.5:1 კონტრასტს აკმაყოფილებს |
| შეცდომები ნაჩვენებია მხოლოდ წითელი საზღვრით | ფერთა სიბრმავის მქონე მომხმარებლები, screen reader-ის მომხმარებლები | ტექსტური შეტყობინება ველის გვერდით, რომელსაც screen reader-ები გამოაცხადებენ |
„Sign up“ არის სტილიზებული <div>, და არა <button> | კლავიატურის და screen reader-ის მომხმარებლებს არ შეუძლიათ მისი გააქტიურება | გამოიყენეთ რეალური <button> ელემენტი |
| არ ჩანს ხილული კონტური ველებს შორის Tab-ით გადასვლისას | კლავიატურის მომხმარებლები კარგავენ თვალყურს, სად არიან | ნათელი ფოკუსის სტილი |
| ლოგოს სურათს alt ტექსტი არ აქვს | Screen reader-ის მომხმარებლები ფაილის სახელს ისმენენ | Alt ტექსტი, მაგალითად „Acme Bookings“ |
ამ შესწორებებიდან არცერთი ფორმის გარეგნობას დიდად არ ცვლის. ყველა მათგანი კი ცვლის იმას, შეუძლიათ თუ არა ზოგიერთ ადამიანს მისი გამოყენება საერთოდ.
გამოყენებული ტერმინები
| ტერმინი | მნიშვნელობა |
|---|---|
| Screen reader | პროგრამა, რომელიც ეკრანს ხმამაღლა კითხულობს ან ბრაილის ეკრანზე გამოაქვს, მაგალითად VoiceOver, NVDA ან JAWS. |
| Alt ტექსტი | სურათის ტექსტური აღწერა, რომელსაც screen reader-ები კითხულობენ. დეკორატიულ სურათებს ცარიელი alt ენიჭებათ, რომ გამოტოვებულ იქნენ. |
| კონტრასტის თანაფარდობა | რამდენად განსხვავდება ტექსტისა და ფონის ფერები, 1:1-დან 21:1-მდე. |
| კლავიატურით ნავიგაცია | საიტით სარგებლობა Tab, Enter, Space და ისრის კლავიშებით თაგვის ნაცვლად. |
| ფოკუსის ინდიკატორი | ხილული კონტური, რომელიც აჩვენებს, რომელ ელემენტზეა კლავიატურა. |
| სემანტიკური HTML | სწორი ელემენტის გამოყენება საჭირო დანიშნულებისთვის — <button>, <nav>, <h2> — რათა ბრაუზერებმა და დამხმარე ტექნოლოგიებმა გვერდი გაიგონ. |
| ARIA | დამატებითი ატრიბუტები, რომლებიც მორგებულ კონტროლებს დამხმარე ტექნოლოგიას აღუწერს. გამოიყენეთ ფრთხილად; ჯერ მშობლიური HTML ელემენტები. |
| დამხმარე ტექნოლოგია | ინსტრუმენტები, რომლებსაც ადამიანები კომპიუტერთან წვდომისთვის იყენებენ — screen reader-ებიდან switch მოწყობილობებამდე და ხმოვან მართვამდე. |
გავრცელებული მცდარი წარმოდგენები
- „ხელმისაწვდომობა მხოლოდ ბრმა მომხმარებლებს ეხება.“ ის მოიცავს მხედველობის, მოტორული, სმენის, მეტყველებისა და კოგნიტური შეზღუდვებს, ასევე დროებით მდგომარეობებს, მაგალითად გატეხილ მკლავს.
- „ხელმისაწვდომი საიტები ხელშეუხებლად უბრალოა.“ ხელმისაწვდომობა ზღუდავს რამდენიმე რამეს — კონტრასტს, ფოკუსის სტილებს, ტექსტის ზომას — მაგრამ კარგად გამოიყურება ხელმისაწვდომი საიტები და არა გამონაკლისია.
- „ავტომატური შემმოწმებელი 100-ს აჩვენებს, ესე იგი დავასრულეთ.“ ავტომატური ინსტრუმენტები მხოლოდ ზოგიერთ პრობლემას იჭერს. იმის შემოწმება, არის თუ არა alt ტექსტი მნიშვნელოვანი, ან გამართულია თუ არა ნაკადი screen reader-ით, ადამიანს სჭირდება.
- „ოვერლეის widget მიგვიყვანს შესაბამისობამდე.“ ზემოდან დამაგრებული ინსტრუმენტთა პანელი ვერ გამოასწორებს დაუწერელ ლეიბლებს ან გატეხილ კლავიატურულ წვდომას თქვენს კოდში. გაასწორეთ წყარო.
- „ჩვენ არ გვყავს შეზღუდული შესაძლებლობის მქონე მომხმარებლები.“ შეიძლება უბრალოდ არ იცოდეთ. ბევრი შეზღუდვა არ ჩანს, და ადამიანები, რომლებიც ბარიერს შეხვდებიან, ჩვეულებრივ უბრალოდ გადიან საიტიდან.
რა სთხოვოთ თქვენს AI-ბილდერს
- „ააგე ეს WCAG 2.2 დონე AA-ს შესაბამისად.“
- „გამოიყენე სემანტიკური HTML: რეალური ღილაკები, ბმულები, სათაურები რიგით და ლეიბლები ყველა ფორმის ველისთვის.“
- „დარწმუნდი, რომ ყოველი ინტერაქტიული ელემენტი მუშაობს მხოლოდ კლავიატურით და აქვს ხილული ფოკუსის სტილი.“
- „შეამოწმე ყველა ტექსტისა და ხატულის ფერის კონტრასტი — 4.5:1 ჩვეულებრივი ტექსტისთვის, 3:1 დიდი ტექსტისა და ხატულებისთვის.“
- „დაამატე მნიშვნელოვანი alt ტექსტი ინფორმაციულ სურათებზე და ცარიელი alt დეკორატიულებზე.“
- „აჩვენე ფორმის შეცდომები ტექსტად, ველთან დაკავშირებულად, და არა მხოლოდ ფერით.“
- „პატივი სცი მომხმარებლის reduced-motion პარამეტრს ანიმაციებისთვის.“
- „გაუშვი ავტომატური ხელმისაწვდომობის შემოწმება და ჩამომითვალე, რა ვერ შეამოწმა, რომ ეს ხელით შემოვამოწმო.“
შემდეგ თავად შეამოწმეთ: გადადეთ თაგვი და სცადეთ მთავარი ნაკადის დასრულება მხოლოდ Tab, Shift+Tab, Enter და Space კლავიშებით. სცადეთ თქვენი ტელეფონის ჩაშენებული screen reader მთავარ გვერდზე. გაზარდეთ ბრაუზერის მასშტაბი 200%-მდე და ნახეთ, ხომ არაფერი იშლება.
ხელმისაწვდომობა Mythex-ში
Mythex არ შეიცავს სპეციალურ ხელმისაწვდომობის შემმოწმებელს, ამიტომ ხელმისაწვდომობას თქვენს prompt-ებსა და ტესტირებაში ჩართეთ. პირველივე prompt-ში სთხოვეთ WCAG 2.2 AA, შეამოწმეთ შედეგი Preview-ში კლავიატურით და გამოიყენეთ /test, რომ აგენტმა გაიაროს თქვენი მთავარი ნაკადები გამოქვეყნებამდე — იხილეთ App Testing. SEO რეცეპტი ასევე ითხოვს სემანტიკურ სათაურებსა და მნიშვნელოვან alt ტექსტს, რაც ორივე მიზანს ემსახურება.
პრაქტიკული ჩეკლისტისთვის იხილეთ როგორ გავხადოთ თქვენი ვებსაიტი ხელმისაწვდომი. დიზაინისთვის წაიკითხეთ როგორ შევქმნათ კარგად გამოიყურებადი აპი AI-ით, ხოლო გაშვებამდე — როგორ შევამოწმოთ თქვენი აპი გაშვებამდე. W3C-ის საკუთარი WCAG მიმოხილვა არის ავტორიტეტული წყარო.
კითხვები
რა არის ვებ-ხელმისაწვდომობა მარტივად?
ვებ-ხელმისაწვდომობა ნიშნავს ვებსაიტებისა და აპების ისე დაპროექტებასა და აგებას, რომ შეზღუდული შესაძლებლობის მქონე ადამიანებს შეეძლოთ მათი აღქმა, გაგება, ნავიგაცია და გამოყენება. ეს ეხება ბრმა ადამიანებს, რომლებიც screen reader-ს იყენებენ, ადამიანებს, რომლებიც თაგვს ვერ იყენებენ, დაბალი მხედველობის ან ფერთა სიბრმავის მქონე ადამიანებს, ყრუ მომხმარებლებს და კოგნიტური შეზღუდვების მქონე ადამიანებს.
რა არის WCAG?
WCAG (Web Content Accessibility Guidelines) არის ვებ-ხელმისაწვდომობის საერთაშორისო სტანდარტი, რომელსაც W3C აქვეყნებს. მიმდინარე ვერსია არის WCAG 2.2, რომელიც პირველად 2023 წლის ოქტომბერში გამოქვეყნდა. მისი კრიტერიუმები A, AA და AAA დონეებად იყოფა, და AA დონე არის სამიზნე, რომელსაც ორგანიზაციები და კანონები ყველაზე ხშირად მოიხსენიებენ.
რა ფერთა კონტრასტს მოითხოვს WCAG?
AA დონეზე ჩვეულებრივ ტექსტს ფონთან მიმართებაში მინიმუმ 4.5:1 კონტრასტის თანაფარდობა სჭირდება, ხოლო დიდ ტექსტს (დაახლოებით 18 პუნქტი, ან 14 პუნქტი მუქი) — მინიმუმ 3:1. ხატულებსა და კონტროლების ხილულ ნაწილებს მეზობელთან მიმართებაში მინიმუმ 3:1 სჭირდებათ.
არის თუ არა ვებ-ხელმისაწვდომობა სამართლებრივი მოთხოვნა?
ბევრ ადგილას, ბევრი ორგანიზაციისთვის, დიახ. კანონები ქვეყნისა და სექტორის მიხედვით განსხვავდება — მაგალითად, ევროპული Accessibility Act მრავალ მომხმარებლურ ციფრულ პროდუქტსა და სერვისს მოიცავს ევროკავშირში. შეამოწმეთ თქვენზე მოქმედი წესები ან იკითხეთ იურიდიული მრჩეველი.
შეუძლია თუ არა accessibility overlay-ს ან widget-ს საიტის შესაბამისობაში მოყვანა?
თავისთავად — არა. Overlay-ები თქვენს საიტზე ინსტრუმენტთა პანელს ამატებს, მაგრამ ვერ აგვარებს საფუძვლად არსებულ პრობლემებს, როგორიცაა დაუწერელი ლეიბლები, გაუმართავი კლავიატურით ნავიგაცია ან გაუგებარი სტრუქტურა. სანდო მიდგომა არის საიტის კოდისა და შინაარსის გასწორება.