Əlçatan forma dizaynı hər bir ziyarətçiyə fiziki imkanlarından və ya istifadə etdikləri köməkçi texnologiyadan asılı olmayaraq veb saytınızla qarşılıqlı əlaqədə olmağa imkan verir. Xüsusi texniki standartlara riayət etməklə, daxiletmə sahələrinin, düymələrin və təsdiq mesajlarının bütün istifadəçilər üçün düzgün işləməsini təmin edirsiniz. Bu yanaşma fərdlərin alış-verişi tamamlamaq, xəbər bülletenlərinə abunə olmaq və ya əlaqə sorğuları göndərməkdən çəkindirən maneələri aradan qaldırır. Bu standartların tətbiqi hər bir auditoriya seqmenti üçün ədalətli rəqəmsal mühit yaratmaq üçün fundamental tələbdir.
Formanın əlçatanlığı üçün əsas tələblər hansılardır?
W3C WAI sənədləri veb formaları qurarkən tərtibatçılar və dizaynerlərin riayət etmələri üçün aydın mandatlar təqdim edir. Bu standartlar son istifadəçi üçün aydınlığı, proqnozlaşdırıla bilənliyi və nəzarəti prioritetləşdirir. Birincisi, hər bir forma sahəsinin proqramlaşdırılmış şəkildə əlaqəli etiketi olmalıdır. Bu, HTML etiket elementindən istifadə edərək for atributu vasitəsilə daxiletməyə düzgün şəkildə bağlanması deməkdir. Bu əlaqə olmadan, ekran oxuyucusu istifadəçiləri sahənin məqsədini müəyyən edə bilməzlər. İkincisi, formalar tam klaviatura əlçatanlığını dəstəkləməlidir, hər bir interaktiv elementə siçan olmadan çatmaq və aktivləşdirmək olar. Üçüncüsü, hər hansı səhv identifikasiyası görmə və ya idrak qüsurları ola biləcək istifadəçilər üçün aydın, təsviri və tapılması asan olmalıdır.
Aydın etiket assosiasiyalarının rolu
Veb tərtibatında ümumi bir səhv, forma sahələrini müəyyən etmək üçün yalnız yer tutucu mətndən istifadə etməkdir. İstifadəçi yazmağa başladıqda yer tutucular yox olur, bu da idrak qüsurları olan istifadəçilər üçün əhəmiyyətli yaddaş yükü yaradır. Bundan əlavə, ekran oxuyucuları çox vaxt yer tutucu mətni tamamilə görməməzlikdən gəlirlər. Həmişə daxiletmə sahəsinin üstündə və ya solunda yerləşdirilmiş açıq etiket elementlərindən istifadə edin. Dizayn tərtibatınız etiketi vizual olaraq gizlətməyi tələb edirsə, onu köməkçi texnologiya üçün əlçatan saxlamaqla gizlətmək üçün CSS-dən istifadə edin. Bu, istifadəçi sahəyə diqqət yetirdikdə etiket mətninin həmişə ucadan oxunmasını təmin edir.
Tam klaviatura əlçatanlığını necə təmin edirsiniz?
Klaviatura naviqasiyası bir çox istifadəçinin veb formalarla qarşılıqlı əlaqədə olduğu əsas yoldur. İstifadəçi bütün daxiletmələri, seçimləri və düymələri məntiqi ardıcıllıqla hərəkət etdirmək üçün Tab düyməsini basa bilməlidir. Aktiv elementin ətrafındakı vizual kontur olan fokus göstəricisi hər zaman yüksək görünən olmalıdır. Xüsusi, yüksək kontrastlı alternativ təqdim etmədən fokus konturunu silmək üçün heç vaxt CSS-dən istifadə etməyin. Əgər xüsusi açılan menyular və ya modallar qurursunuzsa, Escape düyməsinin elementi bağlamasını və ox düymələrinin seçimlər daxilində naviqasiya etməsini təmin etmək üçün klaviatura davranışını skript etməlisiniz.
Aydın səhv identifikasiyası niyə vacibdir?
İstifadəçi formada səhv etdikdə, səhv mesajı hər kəs üçün başa düşülən şəkildə təqdim edilməlidir. Yalnız rəngə etibar etməkdən çəkinin, məsələn, haşiyəni qırmızıya çevirmək, çünki bu, rəng korluğu olan istifadəçilər üçün yararsızdır. Bunun əvəzinə, tam olaraq nəyin səhv getdiyini izah edən mətn əsaslı səhv mesajı təqdim edin. Məsələn, ümumi ‘Yanlış giriş’ əvəzinə, ‘Zəhmət olmasa e-poçt ünvanınızı name@example.com formatında daxil edin’ istifadə edin. Bu mesajların dinamik şəkildə yeniləndiyinə əmin olun ki, istifadəçi onlarla qarşılaşdıqda ekran oxuyucuları səhvi dərhal elan etsinlər.
Növbəti forma tətbiqiniz üçün yoxlama siyahısı
- Brauzer tərəfindən təmin edilən əlçatanlıq xüsusiyyətlərindən faydalanmaq üçün mümkün olduqda input, select və textarea kimi yerli HTML forma elementlərindən istifadə edin.
- Bütün forma etiketlərinin for atributundan istifadə edərək daxiletmələrə açıq şəkildə bağlandığından əmin olun.
- Formanın vizual tərtibatını əks etdirən məntiqi tab ardıcıllığını qoruyun.
- Klaviatura istifadəçilərinə kömək etmək üçün bütün interaktiv elementlər üçün görünən fokus göstəricilərini təmin edin.
- Yalnız rəng dəyişikliklərindən istifadə etmək əvəzinə, problemi və onu necə düzəltməyi izah edən təsviri səhv mesajlarını daxil edin.
- Kontekst üçün fieldset və legend elementlərindən istifadə edərək radio düymələri və ya onay qutuları kimi əlaqəli daxiletmələri qruplaşdırın.
- Bütün hərəkətlərin siçan olmadan mümkün olduğunu yoxlamaq üçün formalarınızı yalnız klaviaturadan istifadə edərək sınaqdan keçirin.
Alien Road əlçatan forma dizaynını necə tətbiq edir
Alien Road-da biz əlçatanlığı ilkin çərçivə mərhələsindən dizayn prosesimizə inteqrasiya edirik. Tipik bir əməkdaşlıq zamanı komandamız klaviatura naviqasiyasında və ya etiket assosiasiyalarında boşluqları müəyyən etmək üçün mövcud formaları yoxlayır. Daha sonra biz ekran oxuyucuları ilə əl ilə sınaqdan keçməzdən əvvəl əsas səhvləri tutmaq üçün avtomatlaşdırılmış sınaq alətlərindən istifadə edirik. Məsələn, müştəri üçün mürəkkəb potensial müştəri yaratma forması qurarkən, biz tab ardıcıllığını sənədləşdiririk və hover və fokus daxil olmaqla hər bir vəziyyətin kontrast nisbəti tələblərinə cavab verdiyinə əmin oluruq. Bu strukturlaşdırılmış yanaşma bizə hər bir istifadəçi üçün işləyən yüksək performanslı formalar təqdim etməyə imkan verir.
Mürəkkəb forma tərtibatlarını necə sadələşdirə bilərsiniz?
Böyük formalar hər hansı bir istifadəçi üçün çox çətin ola bilər, lakin onlar köməkçi texnologiyadan istifadə edənlər üçün xüsusi çətinliklər yaradır. Uzun formaları kiçik, məntiqi bölmələrə bölün və ya istifadəçini istiqamətləndirmək üçün çoxpilləli tərəqqi çubuğundan istifadə edin. Əlaqəli daxiletmələri qruplaşdırmaq üçün fieldset elementindən istifadə etmək ekran oxuyucularının effektiv şəkildə çatdıra biləcəyi faydalı struktur təmin edir. Uzun seçim siyahınız varsa, istifadəçiyə seçimini daha tez tapmağa kömək edən avtomatik tamamlama xüsusiyyətlərindən istifadə etməyi düşünün. Bütün ziyarətçilər üçün idrak yükünü azaltmaq üçün tələb olunan sahələrin sayını minimuma endirin.
İnkişafda qarşısını almaq üçün ümumi tələlər
- İstifadəçilər forma sahəsinə diqqət yetirməyə çalışarkən onları yayındıra biləcək avtomatik oynayan elementlərdən və ya hərəkət edən məzmundan çəkinin.
- Etiketlər üçün ‘title’ atributuna etibar etməyin, çünki o, bütün ekran oxuyucuları tərəfindən ardıcıl olaraq dəstəklənmir.
- Daxiletmələri qurmaq üçün div və ya span kimi qeyri-semantik elementlərdən istifadə etməyin, çünki bunlar tələb olunan brauzer davranışından məhrumdur.
- Daha çox vaxta ehtiyacı olan istifadəçilər üçün əhəmiyyətli stress yarada bilən vaxtlı sessiyalara əsaslanan forma təqdimatını bloklamaqdan çəkinin.
- Etiketlərin əvəzi kimi yer tutucu mətndən istifadə etməyin.
Bu həftə haradan başlamaq lazımdır
Bu həftə ən vacib formanızı, məsələn, əlaqə səhifənizi və ya ödəniş axınınızı yoxlamaqla başlayın. Veb saytınızı açın və yalnız klaviaturanızdan istifadə edərək formanı doldurmağa çalışın. Əgər göndərmə düyməsinə çata bilmirsinizsə və ya hansı sahənin hazırda aktiv olduğunu görə bilmirsinizsə, təkmilləşdirmə üçün ilk sahənizi tapmısınız. Naviqasiyanı yoxladıqdan sonra, hər bir daxiletmənin müvafiq etiket elementinə malik olduğundan əmin olmaq üçün HTML-i yoxlayın. Bu iki problemi həll etmək rəqəmsal aktivlərinizin əlçatanlığında dərhal yaxşılaşma təmin edəcək. Səhv mesajlarınızın bütün istifadəçilər üçün aydın və təsviri olub-olmadığını görmək üçün onları sınaqdan keçirməyə davam edin.
Əlçatan formaların hazırlanması istifadəçiləriniz qarşısında davamlı öhdəlikdir. W3C WAI standartlarına diqqət yetirməklə, siz bütün istifadəçi qrupları arasında daha yüksək tamamlama dərəcələrinə gətirib çıxaran daha yaxşı təcrübə yaradırsınız. Heç kimin geridə qalmadığından əmin olmaq üçün formalarınızı təmiz, aydın və naviqasiyası asan saxlayın. Kodunuzda bu gün edilən kiçik, qəsdli dəyişikliklər sabah hər kəs üçün daha inklüziv veb saytla nəticələnəcək. Ardıcıl sınaq və bu prinsiplərə riayət etmək, bütün ziyarətçilərə bərabər hörmət edən peşəkar veb mövcudluğunun təməlini təşkil edir.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn