Focus visible CSS seçicisi tərtibatçılara veb elementlərində fokus göstəricilərinin görünüşünü idarə etməyə imkan verən funksional alətdir. O, yalnız istifadəçi klaviatura və ya digər işarə etməyən qurğular vasitəsilə qarşılıqlı əlaqədə olduqda fokus üslublarını göstərmək üsulunu təmin edir. Bunu həyata keçirməklə siz naviqasiya üçün fokus hallarından asılı olmayan siçan istifadəçiləri üçün vizual interfeysi qarışdırmadan əlçatanlıq standartlarının qorunub saxlanılmasını təmin edirsiniz.
Focus Visible-ın Məqsədi Nədir?
MDN Web Docs-a görə, :focus-visible psevdo-sinfi fokus göstəricilərini yalnız klaviaturalar kimi istifadəçi girişi rejimləri fokus visible üslubunun zəruri olduğunu göstərdikdə tətbiq edir. Bu fərq istifadəçi siçanla elementi kliklədikdə belə görünən standart brauzer fokus həlqəsindən qaçmaq istəyən dizaynerlər üçün vacibdir. Bir çox istifadəçi sadəcə saytı klikləyərkən standart konturu yayındırıcı hesab edir, lakin klaviatura istifadəçiləri interaktiv elementlər vasitəsilə irəliləyişlərini izləmək üçün bunu məcburi hesab edirlər.
Tərtibatçı standart :focus psevdo-sinfindən istifadə etdikdə, brauzer üslubu hər qarşılıqlı əlaqə üsulu üçün tətbiq edir. Bu, çox vaxt dizaynerlərin outline: none qaydasından istifadə edərək konturu qlobal şəkildə silməsinə səbəb olur ki, bu da əlçatanlıq üçün əhəmiyyətli maneə yaradır. Focus-visible seçicisi şərti qapıçı kimi çıxış etməklə bu münaqişəni həll edir. O, səhifədə harada olduqlarını başa düşmək üçün lazım olan vizual rəyi klaviatura ilə istifadəçilərin əldə etməsini təmin edərkən siçan istifadəçiləri üçün interfeysinizi təmiz saxlayır.
Bunu Standart Fokus Əvəzinə Niyə İstifadə Etməlisiniz?
Bu seçicini qəbul etməyin əsas səbəbi estetik seçimləri funksional tələblərlə balanslaşdırmaqdır. Standart fokus üslubları çox vaxt xüsusi düymə və giriş üslublarına əsaslanan müasir dizayn sistemləri ilə ziddiyyət təşkil edir. :focus-visible istifadə edərək, siçan qarşılıqlı əlaqələrinə toxunulmaz qoymaqla klaviatura naviqasiyası üçün yüksək kontrastlı, aydın göstərici müəyyən edən xüsusi CSS qaydaları yaza bilərsiniz. Bu yanaşma düymənin eyni vaxtda həm vurma vəziyyətini, həm də konturu göstərə biləcəyi ‘ikiqat fokus’ probleminin qarşısını alır.
Giriş üsulları arasında keçid edən istifadəçilərə təsirini nəzərdən keçirin. İstifadəçi trekpad vasitəsilə tapşırığa başlaya və sonra mürəkkəb formanı doldurmaq üçün klaviatura qısayollarına keçə bilər. Əgər CSS-niz fokusu düzgün idarə edirsə, bu iki rejim arasındakı keçid təbii və proqnozlaşdırıla bilən hiss olunacaq. Siz sadəcə üslub seçimi əlavə etmirsiniz; veb səhifələrinizdə səmərəli hərəkət etmək üçün Tab düyməsindən istifadə edən istifadəçilər üçün struktur bələdçi təqdim edirsiniz.
| Seçici Növü | Tətbiq Edildikdə | İstifadə Halları |
|---|---|---|
| :focus | Hər fokus hadisəsi | Geniş vizual rəy |
| :focus-visible | Yalnız giriş rejimi tələb etdikdə | Əlçatanlıq fokusu |
| :focus-within | Alt element fokslananda | Ana konteynerlərin vurğulanması |
Alien Road Focus Visible-ı Necə Tətbiq Edir?
Alien Road olaraq biz hər bir quruluşun əlçatanlıq gözləntilərinə cavab verməsini təmin etmək üçün focus-visible seçicisini standart komponent kitabxanamıza inteqrasiya edirik. Tipik müştəri layihəsi zamanı tərtibatçılarımız əvvəlcə brend identikliyinə uyğun gələn əsas fokus üslubları dəsti təyin edirlər. Biz bu üslubların qəti şəkildə :focus-visible vəziyyətinə tətbiq olunmasını təmin edirik. Bu zəmanət verir ki, istifadəçi naviqasiya menyusuna və ya hərəkətə çağırış düyməsinə keçid edərkən aydın, yüksək kontrastlı sərhəd görünür.
Biz idarə etdiyimiz hər bir sayt üçün ardıcıl prosesi izləyirik. Birincisi, əsas sıfırlamadan istifadə edərək standart brauzer konturunu qlobal olaraq silirik. İkincisi, yalnız klaviatura girişi vasitəsilə işə salınan xüsusi, yüksək görünən fokus halqası tətbiq edirik. Üçüncüsü, hər bir interaktiv elementin əlçatan olmasını yoxlamaq üçün yalnız klaviaturadan istifadə edərək əllə audit həyata keçiririk. Bu proses standart brauzer davranışının qeyri-müəyyənliyini aradan qaldırır və istifadəçi təcrübəsini pikselə qədər idarə etməyə imkan verir.
İcra üçün Ən Yaxşı Təcrübələr
- Həmişə fon rənglərinizdən fərqlənən yüksək kontrastlı fokus göstəricisi təyin edin.
- Rəng korluğu olan istifadəçilərə mənfi təsir etdiyi üçün fokus üçün yalnız rəng dəyişikliklərindən istifadə etməkdən çəkinin.
- Asanlıqla nəzərə çarpan olması üçün fokus halqalarınızın kifayət qədər qalınlığa, adətən ən azı 2 pikselə malik olmasını təmin edin.
- CSS-in düzgün işə düşməsini təsdiqləmək üçün tərtibatınızı müxtəlif giriş cihazları ilə sınayın.
- Proqnozlaşdırıla bilən təcrübə yaratmaq üçün fokus üslubunu bütün layihə boyu ardıcıl saxlayın.
Qaçınılması Lazım Olan Ümumi Səhvlər
Əsas səhvlərdən biri əvəzedici təmin etmədən konturu tamamilə silməkdir. Skrinşotda daha təmiz görünə bilsə də, bir çox insanlar üçün saytı istifadə etməyi qeyri-mümkün edir. Digər ümumi səhv, fokus halqası üçün ağ fonda açıq boz kimi aşağı kontrastlı rənglərdən istifadə etməkdir ki, bu da ilk növbədə göstəriciyə malik olmağın məqsədini puç edir. Fokus üslublarınızın standart kontrast tələblərindən keçməsini təmin etməlisiniz.
Tərtibatçılar da arabir spesifiklik münaqişələri ilə mübarizə aparırlar. Əgər :focus-u hədəfləyən köhnəlmiş CSS-niz varsa, o, yeni :focus-visible qaydalarınızı ləğv edə bilər. Hansı üslubun üstünlük təşkil etdiyini görmək üçün həmişə brauzer tərtibatçı alətlərinizi yoxlayın. İnspektordan :focus-visible vəziyyətini simulyasiya etmək üçün istifadə edin, bu da sizə inkişaf dövrü ərzində bütün səhifənizi daim keçirməli olmadan üslublarınızı iş başında görməyə imkan verir.
Cari Fokus Vəziyyətlərinizi Audit Etmək Üçün Addımlar
- Veb saytınızı müasir brauzerdə açın və bütün interaktiv elementlər arasında naviqasiya etmək üçün Tab düyməsindən istifadə edin.
- Fokslanarkən hər bir keçidin, düymənin və giriş sahəsinin aydın vizual dəyişiklik göstərdiyini yoxlayın.
- Siçanla elementi kliklədiyiniz zaman fokus üslubunun görünən qalıb-qalmadığını yoxlayın və lazım gələrsə tənzimləyin.
- CSS xassələrinizi yoxlamaq üçün focus-visible vəziyyətini dəyişdirmək üçün brauzer dev alətlərindən istifadə edin.
- Sayt arxitekturası üzrə irəliləyişinizi izləmək üçün cədvəldə hər hansı çatışmayan fokus vəziyyətlərini qeyd edin.
Tez-Tez Verilən Suallar
Focus-visible bütün brauzerlərdə işləyirmi?
Müasir brauzerlər bu psevdo-sinif üçün güclü dəstəyə malikdirlər. Bəzi çox köhnə brauzerlər onu tanımaya bilsə də, standart yanaşma tədricən təkmilləşdirmə strategiyasından istifadə etməkdir. Köhnə brauzerlər üçün əsas fokus üslubu təmin edə bilər və seçicini başa düşən müasir, uyğun gələn brauzerlər üçün daha incə təcrübə təmin etmək üçün :focus-visible istifadə edə bilərsiniz.
Mən xüsusi düymələrlə focus-visible istifadə edə bilərəmmi?
Bəli, o, div və ya span etiketləri ilə yaradılanlar da daxil olmaqla, xüsusi düymələrlə mükəmməl işləyir. Bununla belə, siz tabindex atributu əlavə etməklə elementlərinizin klaviatura vasitəsilə əlçatan olmasını təmin etməlisiniz. Element fokslanıldıqdan sonra :focus-visible seçicisi istifadəçinin klaviatura vasitəsilə onu nə vaxt seçdiyini düzgün müəyyən edəcək və onu müvafiq olaraq tərtib etməyə imkan verəcək.
O, box-shadow ilə necə əlaqə qurur?
Tərtibata mane olmayan çox yaradıcı və yüksək görünən fokus halqaları yaratmaq üçün box-shadow istifadə edə bilərsiniz. Bəzən elementlərin fokus zamanı yerdəyişməsinə və ya hərəkət etməsinə səbəb ola bilən outline xassəsindən fərqli olaraq, box-shadow göstəriciyə sənəd axınına və ya ətrafdakı komponentlərə təsir etmədən elementin xaricində və ya daxilində oturmağa imkan verir.
Əlçatanlıq üçün focus-visible kifayətdirmi?
Bu, əlçatanlığın əsas hissəsi olsa da, o, tapmacanın yalnız bir hissəsidir. Siz həmçinin saytınızın məntiqi tab sırasına, bütün mətnlər üçün kifayət qədər rəng kontrastına və düzgün semantik HTML etiketlərinə malik olmasını təmin etməlisiniz. Fokus göstəricisi çox vacibdir, lakin tam təcrübə üçün digər fundamental veb təcrübələri ilə birləşdirildikdə ən yaxşı nəticə verir.
Bu həftə haradan başlamaq lazımdır
Veb saytınızda əsas naviqasiya, axtarış çubuğu və əlaqə forması düymələri kimi ən vacib beş interaktiv komponenti müəyyənləşdirməklə başlayın. :focus-visible psevdo-sinfindən istifadə edərək bu elementlərə fərqli, yüksək kontrastlı fokus üslubu tətbiq edin. Bunun naviqasiya təcrübəsini necə yaxşılaşdırdığını gördükdən sonra eyni məntiqi saytınızın qalan komponentlərinə də tətbiq edin. Ardıcıl, qəsdən fokus üslubu dərhal saytınızı ziyarətçiləriniz üçün daha peşəkar və inklüziv edəcək.
Oxumağa davam edin: Veb Dizayn və İnkişafı · Veb Dizayn