მომხმარებელი საიტს ყოველთვის ერთნაირად არ იყენებს. ზოგს მაუსის ნაცვლად კლავიატურა სჭირდება, ზოგი ტექსტს ადიდებს, ზოგიც ეკრანის წამკითხველით მუშაობს. გასაგები და ხელმისაწვდომი გვერდი ამ განსხვავებებს ითვალისწინებს. ბიზნესისთვის დასაწყისი კონკრეტული გზების შემოწმებაა: შეუძლია თუ არა ადამიანს მომსახურების პოვნა, პირობების წაკითხვა და დაკავშირება იმ საშუალებით, რომელსაც იყენებს.
1. შემოწმება მომხმარებლის მოქმედებით დაიწყე
აირჩიე სამი მნიშვნელოვანი ამოცანა და თითოეულის დასრულების პირობა დაწერე. მაგალითად: მომსახურების აღწერის პოვნა, შესაბამისი ნამუშევრის ნახვა და მოთხოვნის გაგზავნა. შემდეგ ამ გზას სხვადასხვა პირობებში გაჰყევი. მხოლოდ მთავარი ეკრანის ვიზუალური შეფასება მთელი საიტის გამოცდილებას ვერ აჩვენებს.
პირობითი მაგალითი: არქიტექტურული სტუდიის პორტფოლიო ფოტოების გალერეით იხსნება. ვიზიტორმა პროექტი უნდა გახსნას, აღწერა წაიკითხოს და უკან დაბრუნდეს. თუ დახურვის ღილაკს მხოლოდ მაუსი სწვდება, სხვა გზით მოსული ადამიანი გალერეაში ჩერდება. ეს გამოგონილი სცენარია. სამუშაო დავალებაში ჩაიწერება კონკრეტული დაბრკოლება და მისი გამეორების ნაბიჯები. ფრაზა „ხელმისაწვდომობა გააუმჯობესეთ“ ბევრად ნაკლებად გამოსადეგია, ვიდრე ინფორმაცია, რომელ მოქმედებას ვერ ასრულებს მომხმარებელი.
2. მთავარი გზა მხოლოდ კლავიატურით გაიარე
მაუსი გვერდზე გადადე და ნავიგაცია კლავიატურით სცადე. Tab-ით ელემენტებს შორის გადაადგილებისას უნდა ხედავდე, სად ხარ. შესაბამის კონტროლს თავისი კლავიშით უნდა ააქტიურებდე; გახსნილი ფანჯრიდან გამოსვლაც შესაძლებელი იყოს. ფოკუსის რიგი გვერდის შინაარსს გასაგებად უნდა მიჰყვებოდეს.
WCAG-ის კლავიატურის კრიტერიუმი ფუნქციების კლავიატურით ხელმისაწვდომობას ეხება, განსაზღვრული გამონაკლისებით — W3C-ის ოფიციალური განმარტება. შენს საიტზე განსაკუთრებით შეამოწმე ჩამოსაშლელი მენიუ, სლაიდერი, ფილტრი და გალერეა. თუ ადამიანი ფანჯარას ხურავს, სად გადადის მისი ფოკუსი? შეუძლია გვერდის გაგრძელება თუ თავიდან უწევს ყველა ბმულის გავლა? დაკვირვება ტექნიკურ გუნდს გადასცე კონკრეტული მისამართით. ერთი სწორად მომუშავე ღილაკი დანარჩენი კომპონენტების გამართულობას ავტომატურად არ ადასტურებს.
3. კონტრასტი გაზომე და ფერების დანიშნულება გაანაწილე
სასიამოვნო ფერთა წყვილი ყოველთვის წაკითხვადი არ არის. ღია ნაცრისფერი ტექსტი თეთრ ფონზე და წვრილი წარწერა ნათელ ფოტოზე შემოწმებას საჭიროებს. კონტრასტი გაზომე რეალური ტექსტისა და მის უკან არსებული ფონისთვის, მათ შორის ღილაკის სხვადასხვა მდგომარეობაში.
WCAG 2.2-ის მინიმალური ტექსტური კონტრასტის კრიტერიუმი ჩვეულებრივი ტექსტისთვის სულ მცირე 4.5:1-ს, დიდი ტექსტისთვის კი 3:1-ს განსაზღვრავს. დიდი ტექსტი აქ განსაზღვრული ზომაა: მინიმუმ 18 პუნქტი, ან 14 პუნქტი გამუქებული შრიფტით; კრიტერიუმს გამონაკლისებიც აქვს. იხილე კონტრასტის ოფიციალური აღწერა. ბრენდის ნათელი ფერი შეგიძლია დეკორატიულ აქცენტად დატოვო, ხოლო ტექსტისთვის უფრო მუქი ვარიანტი შეარჩიო. ასეთი წყვილები ბრენდის სამუშაო გზამკვლევში ჩაწერე, რათა ყოველ ახალ ბანერზე არჩევანი თავიდან არ გახდეს საჭირო.
4. სათაურებმა შინაარსის ლოგიკა უნდა აჩვენოს
დიდი ასოებით დაწერილი წინადადება ტექნიკურად ყოველთვის სათაური არ არის. გვერდს სტრუქტურა სჭირდება, რომელშიც მთავარი თემა, ქვეთემები და მათი განმარტებები ერთმანეთთან ურთიერთობას აჩვენებს. დიზაინისთვის შერჩეული ზომა ამ იერარქიის შემთხვევით შეცვლის მიზეზი არ უნდა გახდეს.
W3C სათაურების ლოგიკურ წყობას შინაარსის ორგანიზებისა და ნავიგაციისთვის აღწერს — გვერდის სათაურების გზამკვლევი. ბიზნესის გუნდი ამას ტექსტის დონეზეც ამოწმებს: მხოლოდ სათაურების წაკითხვით გასაგებია, რას მიიღებს მკითხველი? „ჩვენი მიდგომა“ შესაძლოა მისაღები იყოს, მაგრამ „როგორ იწყება პროექტი“ ხშირად უფრო კონკრეტულ მოლოდინს ქმნის. მომსახურების მნიშვნელოვანი პირობა შემთხვევით სხვა თემის ქვეშ არ დამალო. რედაქტირებისას სათაურის იერსახე და მისი სტრუქტურული დონე ცალ-ცალკე გაითვალისწინე.
5. კითხვა მხოლოდ შრიფტის ზომით არ გაამარტივო
წაკითხვადობას ტექსტის წყობაც განსაზღვრავს. გრძელ აბზაცში შეარჩიე ერთი აზრი, განმეორებადი პირობა ცალკე ჩამონათვალში გადაიტანე და ბუნდოვან ტერმინს მარტივი ახსნა დაურთე. მომხმარებლისთვის საჭირო ინფორმაცია მხოლოდ ფოტოზე ან აიქონის მნიშვნელობაში არ დატოვო. ღილაკზე დაწერილი მოქმედება გასაგები იყოს გვერდის სხვა ნაწილების გახსენების გარეშეც.
ბრაუზერში ტექსტი გაადიდე და შეამოწმე, ხომ არ იჭრება სათაური, ღილაკის წარწერა ან ფასი. რეალურ ქართულ ტექსტზე გამოცადე პატარა ბარათებიც: გრძელი დასახელება ხშირად მოკლე სატესტო სიტყვისგან განსხვავებულ განლაგებას ქმნის. არ აიძულო მკითხველი მნიშვნელოვანი პირობების სანახავად ზედმეტად წვრილი ტექსტი გაშიფროს. მობილურზე მომხმარებლის გზის შემოწმება ამ საკითხების აღმოჩენაშიც გეხმარება, განსაკუთრებით მაშინ, როცა ქვედა ნავიგაცია ან ჩათი შინაარსს ფარავს.
6. ავტომატურ ანგარიშს ხელით შემოწმება დაუმატე
ავტომატური ხელსაწყოს აღმოჩენა კონკრეტული საკითხის გამოსაკვლევად გამოიყენე. მაღალი ქულა თავისთავად ვერ გეტყვის, გასაგებია თუ არა ღილაკის დანიშნულება ან მოხერხებულია თუ არა რთული პროცესის გავლა. ერთი დაფიქსირებული შეცდომის გასწორებაც სრული შეფასების დასრულებას არ ნიშნავს.
- მომხმარებლის მთავარი მოქმედებები კლავიატურით სრულდება.
- ფოკუსის მდებარეობა ჩანს და მისი რიგი გასაგებია.
- ტექსტის კონტრასტი რეალურ ფონზე შემოწმებულია.
- სათაურები გვერდის ლოგიკურ ნაწილებს აღწერს.
- ტექსტის გადიდებისას მთავარი ინფორმაცია არ იკარგება.
- შეცდომა მხოლოდ ფერით არ გადმოიცემა.
ეს საწყისი სამუშაო სიაა და სრულ აუდიტს არ ცვლის. შეძლებისდაგვარად შემოწმებაში ჩართე ადამიანები, რომლებიც სხვადასხვა დამხმარე ტექნოლოგიას იყენებენ. მათ მიერ აღწერილ დაბრკოლებებს ზუსტი სცენარი დაურთე, რათა გუნდი პრობლემის გამეორებას და შემდეგ გამოსწორების დადასტურებას შეძლებდეს.
7. პასუხისმგებლობა ყოველდღიურ მუშაობაში გაანაწილე
ხელმისაწვდომობა მხოლოდ დეველოპერის ბოლო დავალებად არ დატოვო. დიზაინერი ფერთა წყვილებსა და კონტროლების მდგომარეობებს გეგმავს; რედაქტორი გასაგებ სათაურებსა და ტექსტს ამზადებს; დეველოპერი კომპონენტების სწორ ქცევას უზრუნველყოფს. ახალი მასალის ატვირთვისას თითოეულმა თავისი ნაწილი უნდა იცოდეს.
დაიწყე ყველაზე მნიშვნელოვანი გამეორებადი შაბლონებით. საერთო მენიუს, ფორმის ან ბარათის გამოსწორება მთელ საიტზე შეიძლება გავრცელდეს. ცვლილების მიღების პირობა წინასწარ აღწერე: რას ამოწმებთ, რა საშუალებით და ვინ ადასტურებს შედეგს. თუ საიტს რედიზაინი უტარდება, ეს მოთხოვნები პროექტის ბრიფშიც შეიტანე. ვებსაიტის შექმნისა და განვითარებისას ასეთი სამუშაო კონკრეტულ სარგებელს ემსახურება: მეტი ადამიანი ახერხებს შენი შეთავაზების დამოუკიდებლად გაცნობას და საჭირო მოქმედების შესრულებას.
