Ekran oxuyucuları üçün dizayn, rəqəmsal məzmununuzun köməkçi texnologiyaların ekranı görə bilməyən istifadəçilərə məlumatı dəqiq şərh edib çatdıra biləcəyi şəkildə strukturlaşdırılmasını nəzərdə tutur. Semantik HTML və müvafiq etiketləməyə üstünlük verməklə, tərtibatçılar naviqasiya, formalar və media elementlərinin hər kəs üçün funksional qalmasını təmin edirlər. Bu yanaşma, bütün ziyarətçilər üçün istifadəyə yararlı bir təcrübəyə zəmanət vermək üçün yalnız vizual estetika deyil, ardıcıl kod standartlarına əsaslanır.
Niyə semantik HTML əlçatanlığın təməlidir?
Semantik HTML veb-saytınızın struktur skeleti kimi çıxış edərək, həm brauzerlərə, həm də ekran oxuyucularına mənalı kontekst təqdim edir. Ümumi div elementləri əvəzinə header, nav, main, section və footer kimi etiketlərdən istifadə etdikdə, səhifə tərtibatınızın aydın xəritəsini təqdim edirsiniz. Ekran oxuyucusu bu etiketləri şərh edərək istifadəçiyə əsas naviqasiya menyusunu və ya əsas məqalə məzmununu müəyyən etmək kimi xüsusi bölmələrin məqsədi haqqında məlumat verir. Bu struktur olmadan, köməkçi texnologiyaya güvənən istifadəçi səhifənin müvafiq hissələrinə effektiv şəkildə keçid etməkdə çətinlik çəkə bilər. Bu, saytınıza daxil olan bütün istifadəçilər üçün proqnozlaşdırıla bilən bir mühit yaratmaq üçün ilk addımdır.
h1-dən h6-ya qədər düzgün başlıq etiketlərindən istifadənin təsirini nəzərə alın. Ekran oxuyucusu istifadəçiləri tez-tez səhifə məzmununa sürətli baxış keçirmək üçün başlıqlar arasında tullanaraq naviqasiya edirlər. Əgər faktiki başlıq elementləri əvəzinə başlıqları simulyasiya etmək üçün şrift ölçüsü üslublarından istifadə etsəniz, ekran oxuyucusu iyerarxiyanı tanıya bilmir. Bu, istifadəçini bütün səhifə məzmununu yuxarıdan aşağıya dinləməyə məcbur edir ki, bu da vaxt aparan və səmərəsizdir. Etiketləri vizual görünüşlərindən çox, nəzərdə tutulan mənalarına görə istifadə edin. Bu təcrübə, ekran oxuyucularının məzmunu düzgün şərh etməsini təmin etmək üçün semantik HTML-in istifadəsini göstərən W3C sənədləri ilə dəstəklənir.
ARIA etiketləri nədir və onlardan nə vaxt istifadə etməlisiniz?
ARIA və ya Əlçatan Zəngin İnternet Tətbiqləri, standart HTML elementləri kifayət etmədikdə əlçatanlıqdakı boşluqları doldurmaq üçün bir yol təqdim edir. W3C sənədləri, yerli semantik mənası olmayan və ya mürəkkəb interaktiv vəziyyətlərə malik elementləri təsvir etmək üçün ARIA etiketlərinin istifadəsini göstərir. Məsələn, əgər mətn olmadan yalnız bir ikona göstərən düyməniz varsa, ekran oxuyucusu sadəcə düymə elan edə bilər. ARIA etiketi, istifadəçinin qarşılıqlı əlaqə zamanı nə baş verdiyini dəqiq anlaması üçün aria-label=”Məhsul kataloqumuzda axtarış edin” kimi təsviri mətn təqdim etməyə imkan verir.
ARIA faydalı olsa da, yerli HTML elementi işi görə bilirsə, bu sizin ilk seçiminiz olmamalıdır. Düymə elementi təbii olaraq fokuslana bilən və interaktivdir, klik hadisəsi olan div isə bu davranışı təqlid etmək üçün əlavə atributlar tələb edir. ARIA-dan HTML-in təbii imkanlarını əvəz etmək üçün deyil, artırmaq üçün istifadə edin. ARIA-dan həddindən artıq istifadə istifadəçi üçün qarışıq və çaşdırıcı rəy yarada bilər, buna görə də bu atributları yalnız lazım olduqda tətbiq edin. Etiketlərinizin real ssenarilərdə necə elan edildiyini eşitmək üçün NVDA və ya VoiceOver kimi daxili ekran oxuyucusunu işə salaraq tətbiqinizi yoxlayın.
ARIA atributları ilə bağlı qaçınılması lazım olan ümumi səhvlər
- Məcbur olmadıqca düymələr və ya keçidlər kimi yerli interaktiv elementlərdə ARIA istifadə etməkdən çəkinin.
- Hər bir ARIA etiketinin unikal olduğundan və hərəkətin və ya məqsədin aydın təsvirini təmin etdiyindən əmin olun.
- Həyati əhəmiyyətli məzmunu olan elementlərdə aria-hidden=”true” istifadə etməyin, çünki bu onları ekran oxuyucuları üçün görünməz edir.
- Dinamik məzmun yeniləmələrinizin müvafiq aria-live regionlarından istifadə edilərək çatdırıldığını yoxlayın.
Şəkilləri və mətnsiz məzmunu necə idarə edirsiniz?
Şəkillər xüsusi diqqət tələb edir, çünki ekran oxuyucuları təsviri mətn olmadan vizual məlumatları şərh edə bilmirlər. Alt atributu səhifənizdəki hər hansı mənalı şəkil üçün vacibdir. Alt etiketi yazarkən, məqalənizin kontekstində şəklin məzmununu və məqsədini təsvir edin. Əgər şəkil sırf dekorativdirsə, məsələn, fon burulğanı və ya haşiyə xətti, ekran oxuyucusunun onu tamamilə keçməsini təmin etmək üçün alt=”” kimi boş alt atributundan istifadə edin. Bu, lazımsız səs-küydən qaçaraq istifadəçi təcrübəsini təmiz saxlayır.
Mürəkkəb diaqramlar və ya qrafiklər üçün alt mətn məlumatları izah etmək üçün kifayət etməyə bilər. Bu hallarda, yaxınlıqda aydın mətn xülasəsi təqdim edin və ya tam məlumat dəstini ehtiva edən xüsusi səhifəyə keçid edin. Video və ya audiodan istifadə edirsinizsə, həmişə transkriptlər və ya alt yazılar daxil edin. Bu, ekran oxuyucularına güvənən istifadəçilərin vizual və ya audio mediadan istifadə edənlərlə eyni məlumatı almasını təmin edir. Tipik bir hesabda, bu kiçik düzəlişlər, əks halda əlçatmaz dizayn səbəbindən geridə qala biləcək istifadəçilər üçün qarşılıqlı əlaqə keyfiyyətini əhəmiyyətli dərəcədə artırır.
Naviqasiya və fokus vəziyyətlərinin idarə edilməsi
Naviqasiya, düzgün dizayn edilmədikdə ekran oxuyucusu istifadəçiləri üçün veb-saytın ən çətin hissəsidir. Ümumi bir nümunə, istifadəçilərə təkrarlanan naviqasiya menyularını keçməyə və birbaşa əsas məzmuna keçməyə imkan verən skip-to-content keçidinin istifadəsidir. Bu keçidin istifadəçi tab düyməsini basdıqda görünən olduğundan əmin olun, bu da onu naviqasiya üçün klaviaturadan istifadə edənlər üçün əlçatan edir. Bu sadə xüsusiyyət, hər dəfə yeni səhifə yüklədikdə menyular arasında hərəkət etməli olan ziyarətçilər üçün vaxta və məyusluğa qənaət edir.
Fokus idarəetməsi modal pəncərələr və açılan menyular üçün də eyni dərəcədə vacibdir. İstifadəçi modal açdıqda, klaviatura fokusu avtomatik olaraq modal pəncərənin daxilinə keçməlidir. İstifadəçi modalı bağladıqdan sonra fokus onu işə salan elementə qayıtmalıdır. Bu fokus döngəsi pozularsa, istifadəçi səhifədə itə bilər, harada olduğunu və ya necə davam edəcəyini bilməyə bilər. Fokus göstəricisinin hər zaman görünən qalmasını təmin etmək üçün menyularınızın necə davrandığını izləyin, çünki bu, istifadəçinin səhifə iyerarxiyasında harada olduğunun əsas göstəricisidir.
Saytınızın əlçatanlığını effektiv şəkildə necə yoxlamaq olar
Yoxlama avtomatlaşdırılmış alətlər və əl ilə yoxlamaların birləşməsini tələb edir. Avtomatlaşdırılmış skanerlər çatışmayan alt mətn və ya yanlış başlıq səviyyələri kimi ümumi səhvləri tuta bilər. Bu alətlər, daha mürəkkəb sınaqlara keçməzdən əvvəl tez bir zamanda düzəldilə bilən bariz problemləri müəyyən edərək ilk keçid kimi xidmət edir. Əlçatanlıq standartlarınızı yüksək saxlamaq üçün sayt məzmununuzu yenilədikcə bu skanerlərdən mütəmadi olaraq istifadə edin. Bununla belə, unutmayın ki, avtomatlaşdırılmış alətlər səhifə məzmununuzun nüanslarını və ya naviqasiyanızın məntiqi axınını qiymətləndirə bilməz.
Əl ilə sınaq, dizaynınızın insanlar üçün həqiqətən işləyib-işləmədiyini öyrəndiyiniz yerdir. Windows-da NVDA və ya macOS-da VoiceOver kimi ekran oxuyucusu ilə veb-saytınızdan istifadə etməyə vaxt ayırın. Bütün keçidlərə, düymələrə və forma sahələrinə daxil ola biləcəyinizi görmək üçün yalnız klaviaturadan istifadə edərək bütün saytınızda naviqasiya edin. Əgər özünüzü ilişib qalmış və ya çaşqın hiss edirsinizsə, bu, dizaynın təkmilləşdirilməyə ehtiyacı olduğunun aydın siqnalıdır. Alien Road, hər dəfə əsas səhifə şablonu yeniləndikdə bu əl ilə keçid prosesinə vaxt ayırmağı tövsiyə edir.
Əlçatanlıq auditiniz üçün yoxlama siyahısı
- Bütün şəkillərin təsviri alt mətni və ya dekorativ elementlər üçün boş alt atributları olduğunu yoxlayın.
- Başlıq səviyyələrinin məntiqi şəkildə iç-içə olduğunu yoxlayın (h1, sonra h2, sonra h3).
- Ekran oxuyucularının müəyyən edə biləcəyi əlaqəli etiketlərə malik olduğundan əmin olmaq üçün forma girişlərini sınaqdan keçirin.
- Klaviaturadan istifadə edərək elementlər arasında hərəkət edərkən fokusun görünən qaldığını təsdiqləyin.
- Səhifənin yuxarısında keçidlərin (skip links) mövcud və funksional olduğunu yoxlayın.
Forma əlçatanlığının rolu nədir?
Formalar, istifadəçilərin bülletenə abunə olmaq və ya alış-veriş etməkdən asılı olmayaraq biznesinizlə qarşılıqlı əlaqədə olduğu əsas yoldur. Hər bir giriş sahəsinin proqramlaşdırılmış şəkildə onunla əlaqəli müvafiq etiketi olmalıdır. Ekran oxuyucusu istifadəçisi bir girişə çatdıqda, etiket onlara hansı məlumatı təqdim edəcəklərini dəqiq bilmələrini təmin edir. Giriş sahəsinin id-si ilə uyğunlaşdırmaq üçün etiket etiketlərinizdə for atributundan istifadə edin. Bu, köməkçi texnologiyaların dəqiq rəy bildirmək üçün güvəndiyi güclü bir əlaqə yaradır.
Formalardakı səhv mesajları da əlçatan olmalıdır. İstifadəçi səhv edərsə, səhv mesajı ekran oxuyucusu tərəfindən aydın şəkildə elan edilməlidir. Səhvi göstərmək üçün yeganə yol kimi rəngdən istifadə etməkdən çəkinin, çünki bu bütün istifadəçilər üçün tərcümə olunmur. Bunun əvəzinə, təsviri mətni daxil edin və səhv baş verdikdə dərhal elan etmək üçün ARIA live regionundan istifadə etməyi düşünün. Formalarınızı aydın və cavabdeh etməklə, hər bir istifadəçinin lazımsız mübarizə və ya çaşqınlıq olmadan məlumatlarını uğurla təqdim edə biləcəyinə əmin olursunuz.
Bu həftə haradan başlamaq lazımdır
Səyahətinizə ana səhifənizi düzgün semantik HTML istifadəsi üçün audit edərək başlayın. Brauzerinizin tərtibatçı alətlərini açın və əsas bölmələrinizin düzgün header, main və footer etiketləri ilə müəyyən edilib-edilmədiyini yoxlayın. Struktur qurulduqdan sonra, dəyər təmin etdiklərindən əmin olmaq üçün şəkil alt etiketlərinizi nəzərdən keçirin. Əgər əlaqə formanızda çatışmayan etiketlər görürsünüzsə, onları əvvəlcə düzəldin, çünki onlar biznes konversiya hədəfləriniz üçün vacibdir. Bu sahələrdə ardıcıl iş, veb dizaynınızı bütün auditoriyanız üçün daha inklüziv və etibarlı edən bir təməl yaradır.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn