Əlçatan CSS fokus görünən indikatorları klaviatura istifadəçilərinə hansı elementin hazırda fokuzda olduğunu bildirən əsas vizual işarələrdir. İstifadəçi Tab düyməsindən istifadə edərək veb-səhifədə naviqasiya edərkən brauzer keçidlər, düymələr və forma sahələri kimi interaktiv elementlərə defolt kontur tətbiq edir. Bu indikatorların fərdiləşdirilməsi hər bir istifadəçinin səfər zamanı səhifədəki mövqeyini çətinlik çəkmədən müəyyən edə bilməsini təmin etmək üçün dizayn estetikasından və ciddi əlçatanlıq standartlarından balanslı istifadəni tələb edir.
Niyə fokus görünürlüğü veb-saytınız üçün çox vacibdir?
Bir çox dizaynerlər saytlarının vizual dizaynına xələl gətirdiyinə inanaraq defolt fokus konturunu səhvən silirlər. Lakin bu konturun görünən əvəzedici təqdim edilmədən silinməsi klaviatura istifadəçilərini çıxılmaz vəziyyətdə qoyur. Aydın indikator olmadan siçandan istifadə edə bilməyən istifadəçilərin harada naviqasiya etdiklərini bilməyə heç bir yolu yoxdur. Bu, istifadəçilərin formalar, menyular və hərəkətə çağırış düymələri ilə qarşılıqlı əlaqə qurmasının qarşısını alan əhəmiyyətli bir maneə yaradır. WCAG 2.2 2.4.13 Meyarı açıq şəkildə tələb edir ki, fokus indikatorları kifayət qədər vizual kontrasta və asanlıqla müəyyən edilmək üçün aydın sahəyə malik olmalıdır. Fokus vəziyyətlərini dizayn sisteminizin əsas komponenti kimi qəbul etməklə siz platformanızın daha geniş spektrli istifadəçilər üçün açıq qalmasını təmin edirsiniz ki, bu da inklüziv veb dizayn üçün standart təcrübədir.
WCAG 2.2 2.4.13 Meyarının qaydaları hansılardır?
WCAG 2.2 təlimatları indikatorların istifadəçilər tərəfindən gözdən qaçırılmamasını təmin etmək üçün fokus görünüşü ilə bağlı xüsusi tələblər təmin edir. İndikator fondan asılı olaraq minimum kontrast nisbətinə malik olmalıdır və o, elementin müəyyən bir sahəsini əhatə etməlidir. Bu standartlar dizaynerlərin interfeysə qaynayıb-qarışan incə, nazik xətlərdən istifadə etməsinin qarşısını alır. Bunun əvəzinə, fokus indikatoru dərhal nəzərə çarpacaq qədər qalın olmalıdır. Bu indikatorları tətbiq edərkən onların ümumi səhifə düzəni ilə ziddiyyət təşkil etmədiyini və ya aktiv elementin aydın siqnalını verməklə yanaşı digər vacib məzmunu gizlətmədiyini yoxlayın. Ümumi model qalın, yüksək kontrastlı sərhəddən və ya fokusa gəldikdə işə düşən fon rənginin dəyişməsindən istifadə etməkdir.
CSS-də xüsusi fokus üslublarını necə tətbiq edə bilərsiniz?
Xüsusi üslubların tətbiqi CSS-də :focus psevdo-klassından istifadə etməyi əhatə edir. Siz outline xüsusiyyətini dəyişdirə bilərsiniz, lakin yüksək görünürlük effekti yaratmaq üçün fon rəngi, kölgə və ya mətn qalınlığı kimi digər vizual dəyişiklikləri də nəzərdən keçirməlisiniz. Bu üslubları təyin edərkən yalnız rəng dəyişikliklərindən istifadə etmədiyinizə əmin olun, ஏnki rəngi ayırd edə bilməyən istifadəçilər fokus vəziyyətini müəyyən etməkdə çətinlik çəkə bilərlər. Bunun əvəzinə birdən çox vizual indikatoru birləşdirin. Məsələn, bərk sərhədin və yüngül fon dəyişikliyinin əlavə edilməsi gözdən qaçırmaq çətin olan güclü vizual işarə yaradır. Siz həmçinin istifadəçi klaviatura ilə naviqasiya edərkən fokus indikatorunu yalnız göstərməyə imkan verən və siçan istifadəçiləri üçün dizaynı təmiz saxlayan müasir yanaşma olan :focus-visible psevdo-klassından istifadə edə bilərsiniz.
CSS fokus tətbiqi üçün ən yaxşı təcrübələr
- Həmişə fonla əhəmiyyətli dərəcədə ziddiyyət təşkil edən yüksək kontrastlı rənglərdən istifadə edin.
- Asanlıqla görünməsi üçün fokus indikatorunun ən azı 2 piksel qalınlığında olmasını təmin edin.
- Yalnız rəngə güvənməkdən çəkinin; forma və ya kölgə dəyişikliklərini daxil edin.
- Yalnız Tab və Enter düymələrindən istifadə edərək bütün saytınızda naviqasiya etməklə fokus vəziyyətlərinizi sınayın.
- Xüsusi olaraq yalnız klaviatura istifadəçilərini hədəf almaq üçün :focus-visible xüsusiyyətindən istifadə edin.
Fərqli fokus indikatoru üsullarının müqayisəsi
| Üsul | Vizual Təsir | Əlçatanlıq Səviyyəsi |
|---|---|---|
| Defolt Kontur | Minimal | Əsas |
| Xüsusi Sərhəd | Yüksək | Güclü |
| Qutu Kölgəsi | Mۆtədils | Yaxşı |
Alien Road fokus görünürlüğü standartlarını necə tətbiq edir
Alien Road olaraq biz ilkin çərçivə mərhələsindən dizayn prosesimizə əlçatanlığı inteqrasiya edirik. Müştəri saytını qurarkən biz WCAG 2.2 kontrast nisbətlərinə cavab verməklə brend identikliyinə uyğun gələn CSS dəyişənlərimizdə qlobal fokus üslubu təyin edirik. Fokus vəziyyətinin ardıcıl olmasını təmin etmək üçün daxiletmə sahələri, naviqasiya menyuları və düymələr kimi bütün interaktiv komponentlərin əyani auditini həyata keçiririk. Tipik əməkdaşlıqda biz tərtibatçılara hover, aktiv və fokus vəziyyətləri üçün aydın tələblər təqdim edərək bu halları üslub bələdçimizdə sənədləşdiririk. Bu, layihə böyüdükcə əlçatanlıq boşluqları riskini azaldaraq hər bir elementin ardıcıl qalmasını təmin edir.
Fokus dizayn edərkən qarşısı alınmalı olan ümumi səhvlər
Tez-tez edilən səhvlərdən biri əvəzedici təmin etmədən brauzerin defoltunu silmək üçün bütün elementlərdə outline: none təyin etməkdir. Bu, klaviatura istifadəçiləri üçün naviqasiyanı effektiv şəkildə pozur və saytı köməkçi texnologiyaya və ya klaviatura qısayollarına güvənən hər kəs üçün yararsız hala gətirir. Digər səhv isə çox nazik olan və ya fon rənginə çox yaxın uyğun gələn fokus indikatorundan istifadə etməkdir. Bu indikatorlar WCAG 2.2-də müəyyən edilmiş kontrast tələblərindən keçə bilmir. Ağ başlıqda işləyən rəng tünd altlıqda görünməyə biləcəyi üçün həmişə səhifənizin hər bir bölməsinin fon rəngləri ilə fokus vəziyyətlərinizi yoxlayın. Ardıcıl sınaq bu tələlərdən qaçmağın və rəqəmsal keyfiyyətin yüksək standartını qorumağın yeganə yoludur.
Fokus indikatorlarınızı bu həftə yaxşılaşdırmağa necə başlamaq olar
Əlaqə forması və ya ödəniş səhifəsi kimi ən vacib interaktiv səhifələrinizi yoxlamaqla başlayın. Fokus indikatorunun harada əskik və ya zəif olduğunu müəyyən etmək üçün yalnız klaviaturadan istifadə edərək bu səhifələrdə naviqasiya edin. Bu boşluqları müəyyən etdikdən sonra saytınızda ardıcıl fokus üslubu tətbiq etmək üçün CSS üslub cədvəlinizi yeniləyin. Həftəlik optimizasiya səylərinizi istiqamətləndirmək və heç bir kritik komponenti qaçırmadığınızdan əmin olmaq üçün aşağıdakı siyahıdan istifadə edin. Bu kiçik düzəlişlərə vaxt ayırmaqla siz saytınıza daxil olan hər bir ziyarətçi üçün daha peşəkar və inklüziv təcrübə yaradırsınız.
- Mövpud formaları və düymələri itirilmiş fokus vəziyyətləri üçün yoxlayın.
- Sayt üzrə CSS dəyişənlərinizdə yüksək kontrastlı fokus rəngi təyin edin.
- Siçan əsaslı qarşılıqlı əlaqələri təmizləmək üçün bütün interaktiv elementlərə :focus-visible tətbiq edin.
- Bütün fokus indikatorlarını WCAG 2.2 kontrast standartlarına qarşı yoxlayın.
- Bütün əsas istifadəçi axınlarında klaviatura naviqasiya testi keçirin.
Tez-tez Verilən Suallar
Defolt fokus konturunu silə bilərəmmi?
Siz defolt konturu yalnız onu aydın, xüsusi fokus indikatoru ilə əvəz etdiyiniz təqdirdə silə bilərsiniz. Əvəzedici olmadan onu silmək saytı klaviatura istifadəçiləri üçün əlçatmaz edir. Əvəzedicinizin kontrast tələblərinə cavab verdiyinə və aktiv elementi müəyyən etməyi asanlaşdıran görünən dəyişiklik təmin etdiyinə əmin olun.
:focus və :focus-visible arasındakı fərq nədir?
:focus psevdo-klasası giriş üsulundan asılı olmayaraq, elementə fokuslanıldığı hər zaman üslubu tətbiq edir. :focus-visible psevdo-klasası daha ağıllıdır; o, brauzerə fokus indikatorunu yalnız istifadəçi klaviaturadan istifadə etdikdə göstərməyə imkan verir və siçan istifadəçiləri üçün lazımsız konturların qarşısını alır.
Fokus indikatoru nə qədər qalın olmalıdır?
Tək bir məcburi piksel dəyəri olmasa da, görünürlük üçün ümumiyyətlə ən azı 2 piksel qalınlıq tövsiyə olunur. Əsas odur ki, o, fondan asanlıqla müəyyən edilə bilsin. Həmişə indikatorun əlçatanlıq yoxlamalarından keçəcək qədər qalın olduğunu yoxlayın.
Fokus vəziyyətləri üçün box-shadow istifadə etməliyəmmi?
Box-shadow səhifənin tərtibatını dəyişdirməyən fokus indikatoru yaratmaq üçün məşhur üsuldur. O, yüksək dərəcədə çevikdir və çox görünən şəkildə dizayn edilə bilər. Sadəcə olaraq kölgənin kifayət qədər kontrasta malik olduğundan və fondakı və ya ətrafdakı elementlərlə qaynayıb-qarışmadığından əmin olun.
Saytımı fokus görünürlüğü üçün necə sınaya bilərəm?
Test etməyin ən sadə yolu siçanınızı kənara qoymaq və yalnız Tab, Shift+Tab və Enter düymələrindən istifadə edərək bütün saytınızda naviqasiya etməkdir. Səhifədə harada olduğunuzu heç vaxt itirirsinizsə, fokus indikatoru düzgün işləmir və yenilənməlidir.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn