UX წვდომა და ინტერფეისი ყველასთვის

1) რატომ არის მნიშვნელოვანი

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

2) საფუძვლები და პრინციპები (POUR)

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

3) სემანტიკა, სათაურები და ARIA

სემანტიკური ნიშნები ადრე ARIA: '<button>', '<nav>', '<form>', '<table>' - დანიშნულებისამებრ.
სათაურების იერარქია: ერთი '<h1> გვერდზე, შემდეგ ლოგიკური სტრუქტურა' <h2> '-' <h3> '.
Landmarks: '<header>', '<main>', '<aside>', '<footer>', '<nav>' - სკრინრიდერებს ეხმარება.
ARIA მხოლოდ საჭიროების შემთხვევაში: 'role', 'aria-label', 'aria-describedby', 'aria-expanded', 'aria-live'.
სახელმწიფოები/შეცდომები 'aria-invalid', 'aria-errormessage'.

4) კლავიატურა და ფოკუსის მენეჯმენტი

კლავიატურის სრული მართვა: 'Tab/Shift + Tab' - შეკვეთა, 'Enter/Space' - გააქტიურება, 'Esc' - გამოსავალი.
ხილული ხრიკი ყოველთვის; არ გამორთოთ outline.
ფოკუსის ხაფანგები: მოდალებში - ციკლური ხრიკი, ფოკუსის დაბრუნება წყაროზე დახურვის შემდეგ.
ფარული ელემენტები არ უნდა მოხვდეს ტაბლეტის წესრიგში (' display: none', 'aria-hidden =“ ნამდვილი“).
სკიპის ბმულები: „გადავიდეთ მთავარ შინაარსზე“ - გვერდის დასაწყისში.

5) ფერი, კონტრასტი და სტამბა

ტექსტის კონტრასტი: მინიმუმ 4. 5:1 ჩვეულებრივი ტექსტისთვის და 3:1 დიდი.
ნუ დაეყრდნობით მხოლოდ ფერს: დუბლიკატი ხატით/ნიმუშით/ხელმოწერით.
დაწკაპუნებული მიზნების ზომა: მინიმუმ 40-48 px, გარშემო საკმარისი ველები.
შრიფტები: წაკითხული ყურსასმენები, ინტერსტრუქტურული 1. 4–1. 6, ხაზის სიგრძე 45-90 სიმბოლოა.

6) მოძრაობა, ანიმაცია და ეპილეფტოგენის ციმციმი

პატივს სცემთ სისტემის დროშას prefuced-motion - დაამატეთ გამარტივებული ანიმაციები/გამორთეთ პარალელები.
მოერიდეთ ციმციმებს> 3 ჯერ/წმ.
ყველა მანქანას უნდა ჰქონდეს Pause/Stop/Hide.

7) ფორმები, შეცდომები და მოვალეობები

აშკარად დააკავშირეთ ეტიკეტები და ველები: '<label for = „id“>'.
პლეიშოლდერი არ არის ეტიკეტი.
შეტყობინებები მინდვრის მახლობლად შეცდომების შესახებ და ზედა შეცდომების შეჯამებაში; დაუკავშირეთ 'aria-describedby'.
ახსენით შეყვანის ფორმატი, მაგალითი, ნიღაბი; მიუთითეთ ერთეული და ვალუტა.
არ გამოტოვოთ შევსებული ველები შეცდომით; შეინარჩუნეთ ყურადღება პრობლემურ სფეროში.

html
<label for="email">Эл. почта</label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id="email-hint" class="hint">Мы не рассылаем спам</div>
<div id="email-err" class="error" role="alert">Укажите адрес в формате name@example.com</div>

8) კომპონენტები და ინტერაქტიული: ნიმუშები

ბმულის ღილაკები: მოქმედება = '<button>', გადასვლა = '<a>'.
ტაბები/აკორდეონები: სანავიგაციო ისრები, 'aria-Controlls', 'aria-selected'.
მოდელები/დიალოგები: 'role = „dialog“,' aria-modal = „ნამდვილი“, ხრიკის ხაფანგი, 'Esc' დახურულია.
Tooltip/Popover: კლავიატურაზე წვდომა, ტაიმაუტები არ ერევა კითხვაში.
Drag & Drop: ალტერნატივები - ღილაკები „ზემოთ/ქვევით“, კლავიატურის ისრები; მოვლენები არ არის მხოლოდ მაუსი.

9) მედია: ვიდეო/აუდიო/გრაფიკა

ვიდეო: სუბტიტრები, გაშიფვრა (transcript), აუდიო აღწერილობების ალტერნატიული ბილიკი (AD).
აუდიო: ტექსტის გაშიფვრა.
გრაფიკა/დიაგრამები: ტექსტის რეზიუმე („რაც მთავარია“), მონაცემთა ცხრილი, ღერძების აღწერითი ხელმოწერები.
ცოცხალი ტერიტორიები: 'aria-live = "polite "/" assertive" "- ფრთხილად რომ არ" ყვირილი "ძალიან ხშირად.

10) ცხრილი და სიები

11) i18n, ლოკალი და RTL

ატრიბუტი 'lang' http ფესვზე; ადგილობრივი ფორმატის ნომრები/თარიღები/ვალუტები.
RTL მხარდაჭერა (არაბული/ებრაული): ხატების მარცვლეული, სანავიგაციო პროცედურა, კურსორები.
მოერიდეთ ხატებში ჩაფლულ სიტყვებს (ტექსტი უნდა ითარგმნოს).
მარტივი ფორმულირებები, თავიდან აიცილოთ ჟარგონი; ტერმინების გლოსარიუმი.

12) დრო, სესიები, ქუდი და ალტერნატივა

ტაიმაუტები - გაფრთხილებით და გახანგრძლივების შესაძლებლობით.
CAPTCHA: ამჯობინეთ ალტერნატივა (კითხვები, ბოტების უხილავი ანალიზატორები, დადასტურება ფოსტით/ტელეფონით); თუ იყენებთ, ტექსტური ალტერნატივა და არა მხოლოდ ვიზუალური.
ავთენტიფიკაცია: პაროლის მენეჯერების მხარდაჭერა, „პაროლის ჩვენება“, WebAuthn.

13) სენსორული და საავტომობილო დარღვევების ხელმისაწვდომობა

ჟესტებს უნდა ჰქონდეთ ეკვივალენტი კლიშე/კლავიატურა.
ნუ მოითხოვთ ხანგრძლივ შეკავებას/ორმაგ ტაპებს ალტერნატივის გარეშე.
„Pointer cancellation“: მოქმედება უნდა განხორციელდეს შვებულებაში, არა „დაჭერით“, რათა გაუქმდეს.

14) სახელმწიფოები, შეტყობინებები და ალერტები

გამოიყენეთ 'role = „status “/“ alert“ დინამიური შეტყობინებებისთვის.
არ გადაკეტოთ ფოკუსი „წებოვანი“ ბანერებით.
Toast შეტყობინებები - პაუზით, როდესაც ყურადღება გამახვილებულია/ჰოვერზე და კლავიატურაზე წვდომა.

15) ტესტის გეგმა (სახელმძღვანელო და მანქანა)

• ყველა ძირითადი სკრიპტის გავლა მხოლოდ კლავიატურით.
• თითოეულ ელემენტზე ფოკუსის ხილვადობის შემოწმება.
• მასშტაბის 200% -მდე გაზრდა - ინტერფეისი რჩება ფუნქციური ჰორიზონტალური ასვლის გარეშე.
• ჩართეთ სისტემური რეჟიმი „მოძრაობის შემცირება“ - ანიმაცია არ ერევა.
• სკრიპტის გავლა ეკრანზე (NVDA/VoiceOver), დარწმუნდით სწორი როლები/ეტიკეტები/წესრიგი.

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

16) წვდომის ხარისხის მეტრიკა

A11y Coverage: კომპონენტების წილი ჩეკების სიებით.
Keyboard-only Pass Rate: კლავიატურის მიერ ჩატარებული სკრიპტების პროცენტი.
Contrast Violations/1k ელემენტები.
SR Flow Time: სკრიპტის დრო ეკრანით.
User-feedback: საჩივრები ხელმისაწვდომობის, რეაქციის დრო და კორექტირების შესახებ.

17) კომპონენტის ჩეკის სია

• სწორი სემანტიკა/როლი გადაჭარბებული ARIA- ს გარეშე
• ხელმოწერილი ეტიკეტები

კლავიატურის სრული კონტროლი, ხილული ფოკუსი

• ტექსტის/ხატის/საზღვრების კონტრასტი ნორმალურია
• შეცდომები და მდგომარეობა გაჟღერებულია ეკრანის მიერ
• prefers-reduced-motion
• clycabel რეგიონის ზომა 40-48 px
• ლოკალიზაცია და RTL არ არღვევს განლაგებას

18) ანტი შაბლონები

დივ ღილაკები როლის/კლავიატურის გარეშე.
'outline' ფოკუსის დამალვა: none 'ალტერნატივის გარეშე.
პლეიშოლდერი ლაბელის ნაცვლად.
შეცდომები მხოლოდ ფერით.
მოდელები ფოკუსის ხაფანგის გარეშე და 'Esc' გარეშე.
Drag-only კლავიატურის გარეშე.
გრძელი დრაივერები/პარალელები გამორთვის ვარიანტის გარეშე.

19) როლები და პროცესი

A11y გუნდის მფლობელი (Product/Design/Dev).
Definishn of Dan (DoD) მოიცავს წვდომას.
დიზაინის მიმოხილვა: კონტრასტის, ფოკუსის, ეტიკეტის შემოწმება.
KOATUU: სემანტიკა/ARIA, კლავიატურის ტესტი.
რეგულარული აუდიტი და გაუმჯობესების გეგმა.

20) გამეორების განხორციელება

• სემანტიკა/სათაურები, კონტრასტი, ფოკუსი და კლავიატურა, ძირითადი ფორმები და შეცდომები.

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

• გზატკეცილები CI, RTL/i18n, მეტრიკა, რეგულარული აუდიტი, გუნდის მომზადება.

21) შაბლონები და სიპეტები

html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id="dlg-title">Подтвердите действие</h2>
<p id="dlg-desc">Эта операция необратима.</p>
<button>Отмена</button>
<button>Подтвердить</button>
</div>

html
<a class="skip-link" href="#main">Перейти к основному содержимому</a>
<main id="main">...</main>

css
@media (prefers-reduced-motion: reduce) {
{ animation-duration: 0.01ms!important; animation-iteration-count: 1!important; transition: none!important; }
}

22) მინი-FAQ

საჭიროა „მხედველობითი დაქვეითების“ ცალკეული ვერსია?
არა. ერთი ადაპტირებული, ხელმისაწვდომი ვერსია ყველასთვის პარამეტრებით.

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

ARIA გადაწყვეტს ყველაფერს?
ARIA არ შეასწორებს არასწორ სემანტიკას. ჯერ სწორი ჭდეები, შემდეგ ARIA განმარტებები.

შედეგი

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