CSS — Sadəcə Screen Readerlər Üçün Nəzərdə Tutulmuş Görünməz Məzmun

Giriş

Bəzən elə hallar yaranır ki, saytımızdakı müəyyən kontenti adi istifadəçilərdən gizlətməli, görmə problemi olan — ekran oxuyucuları (screen readers) işlədən istifadəçilərə isə göstərilməli oluruq. Əksər hallarda, screen readerlərə göstərilməli olan kontent, digər istifadəçilərə göstəriləcək qədər mühüm olur. Sadəcə screen readerlərə göstərilməli olan kontentin var olduğu hallar isə kasad dizayndan və ya mövcud accessibility problemindən qaynaqlanır. Müəyyən hallarda isə vizual olaraq görünən məlumat screen readerlərə göstərilmir. Bu cür hallar yadandığı zaman kontenti elə yazmağımız lazımdır ki, məlumat ekran oxuyucuları üçün əlçatan, vizual olaraq isə görünməz olsun.

Mətni gizlətmək üçün üsullar

Kontenti gizlətmək üçün CSS-də bir neçə üsul mövcuddur. İstifadə etdiyimiz üsulun istədiyimiz kimi nəticələnməsi və müyəssərliyə zərər yetirməməsi vacibdir.

display:none və ya visibility:hidden

Bu stillər kontenti bütün istifadəçilərdən gizlədir. Bu cür stillər tətbiq edilən elementlər vizual olaraq səhifədən itir və screen readerlər tərəfindən iqnor olunur. Screen readerlər tərəfindən oxunulmasını istədiyiniz kontenti bu cür gizlətməyin. Screen readerlərin oxumamalı olduğu məlumatı bu cür gizlədə bilərsiniz.

width: 0px , height: 0px və ya digər 0px ölçü vermə üsulları

Eynilə yuxarıdakı kimi, uzunluğu və hündürlüyü olmayan element vizual olaraq itdiyi üçün əksər screen readerlər bu kontenti iqnor edəcəklər. HTML with və height property-ləri də eyni nəticəni verəcək. Əgər kontentin screen readerlər tərəfindən oxunulmasını istəyirsinizsə ona 0px ölçülər verməyin. font-size:0px və ya line-height:0 stilləri işinizə yaraya bilər lakin bu elementlər səhifədə horizontal yer tutacaqlar. Sadalanan bu üsullar search engine-ləri tərəfindən şübhəli yanaşıldığı üçün SEO-nuza zərər yetirə bilər.

text-indent: -10000px;

Bu yanaşma kontenti 10 000 piksel sola sürüşdürür — bu səbəbdən də görünən sahədən çıxarır. Ekran oxuyucuları bu elementləri rahatlıqla oxuya bilərlər. Lakin bu tip CSS link, form elementi və ya button kimi interaktiv elementlərə tətbiq olunarsa, element fokus halını aldığı (misalçün, klaviaturada Tab düyməsilə üzərinə gəldiyinizdə) zaman soldan səhifənin ortasına uzanan fokus indikator (mavi outline və ya qırıq-qırıq xətt) görə bilərsiniz. Bu yanaşma həm də sağdan sola dillərdə də problemlər yarada bilər.

Kontenti absolute positioning ilə ekrandan çıxarmaq

CSS positioning vasitəsilə elementləri ekrandan kənara sürüşdürmək kontenti gizlətmək üçün qəbul olunan və accessible (və ya müyəssər) üsuldur. Aşağıdakı kod parçası kontenti vizual olaraq gizlətmək və eyni zamanda screen readerlər üçün əlçatan etmək üçün tövsiyyə olunur.

.hidden {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.hidden classı gizlətməli olduğumuz elementin üzərinə birbaşa bağlanmalıdır:

<div class="hidden">This text is hidden.</div>

Normal istifadəçilər üçün bu mətn tamamilə gizlədilmiş olacaq. Kontent brauzerin görünən hissəsindən sola sürüşdürüldüyü üçün normal istifadəçilər tərəfindən görünməyəcək lakin screen readerlər tətbiq olunan stilləri tamamilə iqnor etdikləri üçün mətni oxuya biləcəklər.

Gəlin yazdığımız CSS-i bir balaca analiz edək.

position:absolute; brauzerə bu elementi səhifənin normal axışından çıxarmalı olduğunu və onu yerləşdirməli olduğunu bildirəcək. left:-10000px; kontenti 10 000 piksel sola sürüşdürəcək. top:auto isə elementin vertikal olaraq ilkin olduğu yerdə qalmasını təmin edəcək. top propertysini yazılmaması left -in dəyərinin bəzi brauzerlər tərəfindən iqnor olunması ilə nəticələnə bilər.

width:1px; height:1px; overflow: hidden; brauzerə elementi ölçüsü 1px olan kvadrata yerləşdirməsini və bu sahəyə sığmayan hər şeyi gizlətməli olduğunu deyir. Bu bir az qəribə səslənsə də, elə hallar ola bilər ki, positioning tamamilə iqnor olunsun və digər stillər tətbiq olunsun. Bu halda element öz ilkin yerində qalacaq lakin səhifədə sadəcə 1px yer tutacaq.

CSS clip

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Nisbətən müasir üsul isə CSS vasitəsilə ölçüsü 1px olan qutuya sığmayan kontenti kəsmək və nəticədə onu gizlətməkdir. Bu üsulla gizlədilmiş element screen readerlər tərəfindən oxunula bilər.

İstifadə yerləri

“Skip to main content” (Əsas məzmuna keçid) linkləri

“Skip to main content” linkləri accessibility-nin vizual dizayna təsir göstərdiyi az yerlərdəndir. Skip linklər adətən səhifənin ən başında yazılan markaplardır. Bu linklər adətən vizual olaraq gizlədilir və ancaq üzərinə fokuslandığında görünür və istifadəçilərin bütün səhifələrdə təkrarlanan kontentin (misalçün, main navigation) üzərindən keçib bir başa əsas kontentə fokuslanmasını təmin edir.

Normal istifadəçilər üçün bu nə qədər mənasız səslənsə də klaviatura və ya screen reader istifadəçilər üçün bir o qədər yararlı xüsusiyyətdir. Skip linklərin real nümunələri ilə edX online öyrənmə platformasında, Ağ Evin rəsmi səhifəsində və accessibility mövzusuna diqqət yetirən bir sıra digər saytlarda tanış ola bilərsiniz. Bunu yoxlamaq üçün sayta daxil olduğunuzda mausunuzu işlətmədən sadəcə Tab düyməsinə toxunun — o zaman qarşınıza çıxan “Skip to main content” keçidini görəcəksiniz.

Bunu öz saytınızda tətbiq etmək istəyirsinizsə, markapınızın ən başlığında aşağıdakı kimi bir link qoya bilərsiniz:

<div id="skip"><a href="#content">Skip to Main Content</a></div>

və o linki yuxarıda qeyd etdiyimiz üsullarla gizlədə bilərsiniz:

#skip a {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

Skip link ilkin olaraq gizlədilir lakin (Tab düyməsini basaraq) üzərinə fokuslandığımızda görünür. Bunu təmin etmək üçün focus pseudo klasından istifadə edin:

#skip a:focus {
  position:static;
  width:auto;
  height:auto;
}

Xülasə

Yuxarıda qeyd olunan CSS texnikaları tətbiq olunduqda, kontent normal istifadəçilər üçün görünməz olacaq və eyni zamanda görmə əngəlli istifadəçilər screen readerlər vasitəsilə həmin kontenti oxuya biləcəklər. Görmə əngəlli istifadəçilər kontentin gizlədilyini bilməyəcək, digər istifadəçilər isə (CSS-i bloklamasalar) saytda elə bir kontentin olduğundan xəbərdar olmayacaqlar.

References

• CSS in Action: Invisible Content Just for Screen Reader Users. (n.d.). Retrieved from https://webaim.org/techniques/css/invisiblecontent/