İnternetdən istifadə imkanı yoxlama siyahısı

Əlçatanlıq veb saytların əlillər üçün eyni səviyyədə olmasını təmin etmək praktikasıdır və bu saytların təmin etdikləri mal və xidmətlərə bərabər çıxışı təmin edir. Bu professional veb dizaynının və inkişafının ayrılmaz hissəsidir.


Contents

Niyə diqqət etməlisiniz? Əlçatanlıq?

Geliştiricilərin, dizaynerlərin və işəgötürənlərin / müştərilərin əlçatanlığın veb inkişafı prosesinin erkən və ayrılmaz bir hissəsi olmasını təmin etməsinin bir çox səbəbi var..

  • ABŞ, AB, İngiltərə, İsrail və Yaponiya kimi bir çox ərazidə insanları əlillik səbəbindən ayrı-seçkilik etməməsi qanuni bir tələbdir. ABŞ-da keçən il, 2.235 yeni ADA Veb saytına iddia açıldı federal məhkəmədə. Bu saatda bir.
  • Əlçatan saytlar daha yaxşı kodlanmağa, daha möhkəm olmağa və axtarış motorlarında yaxşı yer tutmağa meyllidirlər.
  • Əlçatan saytlar olmağa meyllidir əlil olmayanlar üçün daha əlverişlidir, daha çox məmnuniyyətə və dönüşümə səbəb olur.
  • Əlçatmaz saytlar iş üçün pisdir. 2019-cu ildə a İngiltərə anketi 4 milyondan çox insanın tapdıqları erişim maneələri səbəbiylə pərakəndə bir veb saytı tərk etdiyini tapdı. Bu itirilmiş iş, ‘Tıkla Away Funt’, 17.1 milyard funt sterlinq idi. Yəni milyard. İngiltərədə tək.
  • Potensial müştəriləri könüllü olaraq tərk etmək pis işdir.

Ümumi standartlar və problemlər

Xoşbəxtlikdən, W3C (veb-nin etibar etdiyi bir çox standartı istehsal edən orqan) veb saytları necə əldə etmək üçün standarta sahibdir. Deyilir Veb məzmunu əldə etmə qaydaları (WCAG). Üç uyğunluq səviyyəsi (A, AA, AAA) mövcuddur və ‘A’ əlçatanlığın ən aşağı səviyyəsidir. AA səviyyəsini təyin etməyi məsləhət görürəm.

Təəssüf ki, WCAG uzun, quru və çox texniki bir oxunuşdur, buna görə nisbətən asanlıqla nə edə biləcəyinizi nəzərdən keçirək və çömçəniz üçün ən böyük partlayış əldə edin. Bu, bilmək üçün lazım olan hər şey deyil; ən çox yayılmış səhvlərin siyahısı və əlillərin dedikləri səhvlər problemlərin həlli üçün praktik təkliflər olan əsas blokerlərdir. Bütün xarici bağlantılar yeni bir nişanda açılır.

Click-Away Pound sorğusunda əlilliyi olan respondentlərdən alış-verişi başa çatdıran əsas blokların nə olduğu soruşuldu. Budur ən böyük maneələr (bir çox cavab verildi):

  1. Tərkibi çox olan səhifələr – 66%
  2. reCAPTCHA testləri – 59%
  3. Pis görünmə (kontrast, mətn düzeni) 56%
  4. Hərəkətli şəkillər və qrafiklərin yayındırılması – 53%
  5. Zəif link məlumatı – 59% (ekran oxucu istifadəçiləri üçün 77%)
  6. Form doldurma 56%

Veb saytına girişi necə yaxşılaşdırmaq olar

Əvvəlcə qeyd edək ki, ilk 5-dən heç biri texniki problem deyil – bunlar dizayn və ya kopirayter səhvləridir.

1) Çox məzmun

Qısaca: mətni başlıqları və bülletenli siyahıları olan hissələrə ayırın. Sadə dildə istifadə edin.

Məlum məsələdir ki, seçimlərin sayı artdıqca, seçim də edilir məlumat toplamaq üçün tələb olunan səy və düzgün qərarlar qəbul edin. Çox məzmunla eynidir – çox keçmədən aşınacaqdır. Məzmunu əsas maddələrə ayırmaq çox vaxt aparan bir sənətdir; Mark Tvenin (guya) yazdığı kimi: “Qısa məktub yazmağa vaxtım yox idi, əvəzinə uzun bir məktub yazdım.”

Son kitab Yazı Dizayndır təklif edir

İnsanlar, görmə və ya səsdən asılı olmayaraq, uzun mətn bloklarını kəsmək istəyirlər, buna görə uzun formatlı yazılarınızı başlıqlar, qısa paraqraflar və digər məzmun dizaynının ən yaxşı təcrübələri ilə qurmaq olduqca vacibdir.

Belə ki:

  • Yalnız birinə sahib olun

    bir səhifədə.

  • Alt başlıqları sərbəst istifadə edin; görmə qabiliyyətli istifadəçilər üçün bir mətn ‘slab’ -ni ayırır, ekran oxuyucuları kimi köməkçi texnologiyaların istifadəçiləri başlıqlar arasında atlama və ya başlıq quruluşundan məzmunun zehni xəritəsini əldə etmək üçün qısa düymədən istifadə edə bilərlər.
  • Başlıqların səviyyəsini atmayın. Məsələn, bir istifadə edirsinizsə

    , bir əvvəl əvvəl əmin olun

    .

  • HTML olaraq düzgün olaraq qeyd edilmiş bülletenli siyahılardan (bu kimi!) İstifadə edin
      ,
    • . Ekran oxuyucuları “10 əşyanın siyahısı” nı elan edəcəklər (istifadəçiyə onların üstündən keçməyə icazə verəcəklər).

    Düz İngilis dilindən istifadə edin

    Monzo Bankın “Səs tonumuz” bələdçisi düz dilin əhəmiyyətini izah edir:

    2010-cu ildə ABŞ-ın vəkil Sean Flammer eksperiment keçirdi. O, 800 dairə məhkəməsinin hakimlərindən ənənəvi bir ‘leqal’ ‘dəlilini ya da’ düz İngilis ‘adlandırdığı bir iddianı dəstəkləməsini istədi..

    Hakimlər İngilis dilinin sadə versiyasını (66% -dən 34% -ə qədər) üstün tutdular və bu üstünlük yaşından və yaşlarından asılı olmayaraq edildi.

    Flammer qeydləri (PDF) düz İngilis versiyasının:

    Demək olar ki, bir səhifə ilə qısaldılmışdır, buna görə açıq-aydın lazımsız cümlələr və sözləri aradan qaldırır. Onun cümlələri 25,2 sözdən fərqli olaraq orta hesabla 17,8 söz təşkil edir.

    Başa düşür:

    İndi 25 illik empirik araşdırmalarımız qaçılmaz bir nəticəyə səbəb olur: oxucunuzu məmnun etmək və razı salmaq istəyirsinizsə, düz ingilis dilində yazın.

    2) ReCAPTCHA

    Qısacası: istifadəçilərinizə geliştirici vaxtına qənaət etmək üçün mümkün olmayan halqa ilə keçməyə icazə verməyin.

    Respondentlər tez-tez köhnə haqqında danışırdılar ReCAPTCHA versiyası:

    yenidən yazmalı olduğunuz boş mətn ilə reCAPTCHA versiyaları

    Şəkillərlə mübarizə aparıram və nömrələri və ya hərfləri yazmalı oluram. Bir mağazanın və ya nəyin olduğu şəkillərin üzərinə basmalı olduğum yerlərdə həmişə bəzilərini qaçırıram və ya qarışıq oluram və enerjimdən istifadə edirəm …

    ReCAPTCHA’nın dolğun məktublar üslubu artıq köhnəlmişdir. “CAPTCHA reCAPTCHA YOX” adlanan daha yeni bir təcəssümü görmək daha çox yayılmışdır (Mən robot deyiləm “onay qutusu) istifadəçidən robot olmadığını və istifadəçini vurmaq üçün gizli voodoo istifadə edən bir qutunun yoxlanmasını tələb edir. Keçirlərsə, qarşılıqlı əlaqə tələb olunmur. Ancaq uğursuz olduqda, daha bir problem göstəriləcək:

    İstifadəçidən portağal göstərən bütün meydanları vurmağı tələb edən bir captcha'nın qismən görüntüsü

    Unutmayın ki, istifadəçidən küçə işarəsi ilə bütün meydanları vurmağı tələb edən CAPTCHA növü mütləq beynəlxalq deyildir. Terence Eden yazdığı kimi, CAPTCHAs sizin insan olduğunuzu sübut etmir – Amerikan olduğunuzu sübut edir.

    ReCAPTCHA’nın ən əlçatan formasıdır reCAPTCHA v3 heç bir istifadəçi qarşılıqlı tələb etmir, lakin sınağa uğramayan ziyarətlərlə məşğul olmaq üçün daha çox iş görməyiniz lazımdır:

    Hesabınızı qaytaran təmiz JavaScript API saytınızın kontekstində hərəkət etmək imkanı verir: məsələn, identifikasiya üçün əlavə amillər tələb edən, moderatora bir yazı göndərən və ya məzmunu qıra bilən botları sıxan məsələn..

    3) Zəif Görünüş

    Qısaca: Mətnin adekvat kontrasta malik olduğundan, oxunan və haqlı olmadığından əmin olun.

    • Müvafiq kontrastı təmin edin. İnternetdə ən çox yayılmış giriş blokerlərindən biri mətn və fon arasında zəif kontrastdır. W3C qaydaları, ən azı 3: 1 nisbət nisbətinə malik olan genişmiqyaslı mətn və böyük ölçülü mətn şəkillərindən başqa ən az 4.5: 1 nisbət nisbətini tələb edir (loqotiplər və ‘təsadüfi’ mətnlər azaddır). Sizin üçün kontrast nisbətlərini ölçə biləcək bir çox yardım proqramı var; mənim şəxsi sevimlisim Ada Rose Cannon əladır kontrastlı widget, səhifənizdəki qeyri-kafi kontrast sahələri vurğulayan faydalı bir brauzer əlfəcinidir.
    • Baş kapital yoxdur. Böyük hərflərin hamısı eyni olduğu üçün oxumaq daha çətin olduğuna dair sübutlar var, buna görə də ümumi sözlərin formasını tanımırıq. Bundan əlavə, bəzi ekran oxuyanlar böyük hərflərin qruplarını sanki ixtisarlar kimi yazırlar (BBC, DOJ və s.). Bütün başlıq başlıqlarınız olmalıdırsa, onları HTML-də normal bir vəziyyətdə yazın və CSS ilə dəyişdirin mətn çevirmək: böyük.
    • Sol align mətni. (Ərəb və ya İvrit kimi sağdan sola olan dillərdəki səhifələr üçün, sağa uyğunlaşdırma mətni.) Bunu əsaslandırmayın, çünki disleksiyası olan insanların oxumasını çətinləşdirir. The İngilis Dyslexia Assosiasiyasının stil bələdçisi də təklif edir

      Arial və Comic Sans kimi sans serif şriftlərdən istifadə edin, çünki məktublar daha az izlənə bilər. Alternativlərə Verdana, Tahoma, Əsr Gothic, Trebuchet, Calibri, Açıq Sans daxildir.

    4) Şəkilləri və qrafikləri yayındırır

    Qısaca: istifadəçilərə hər hansı bir hərəkəti dayandırmağa icazə verin; əməliyyat sistemi parametrlərinə hörmətlə yanaşmaq; videonu avtomatik ifa etmə.

    Click-Away Pound sorğusuna cavab verənlərdən biri yazdı,

    Kiçik məsələ ilə istifadə etdiyim saytlar indi problemə çevrilməkdədir, çünki indi reklamlar hərəkət edir və alış-veriş etdiyiniz zaman daha çox reklam yükləyirik..

    WCAG-ın ən əsas səviyyəsi “(1) avtomatik olaraq başlayan, (2) beş saniyədən çox davam edən və (3) digər məzmuna paralel olaraq təqdim olunan hər hansı bir hərəkət edən, yanıb-sönən və ya fırlanan məlumat üçün istifadəçi hərəkət, yanıb-sönmə və ya fırladılması vacib olduğu bir fəaliyyət hissəsidirsə, onu dayandırmaq, dayandırmaq və ya gizlətmək. “.

    Diqqəti çəkmək əsəbidir – xüsusilə DEHB və ya digər bilişsel pozuntuları olan insanlar üçün. Ancaq hərəkət və yanıb-sönmə də nöbetə səbəb ola bilər, buna görə WCAG qaydaları, hər ikinci ikinci dövrdə məzmunun 3 dəfədən çox yanmamasını tələb edir..

    Animasiyalar üçün istifadəçinin seçiminə hörmət edin

    Bütün əsas əməliyyat sistemləri istifadəçiyə ekrandakı hərəkəti azaltmağı üstün tutduğunu ifadə etməyə imkan verir – bəlkə də hərəkət hərəkətli vestibulyar spektr pozğunluğuna görə. Veb saytınız istifadəçinin bunu CSS ilə etdiyini aşkar edə bilər hərəkət azaldılır media sorğusu.

    Burada istifadəçi heç bir üstünlük vermədiyi təqdirdə yalnız bir düymənin canlandırılmasına icazə veririk:

    @media (üstünlük-azaldılmış hərəkət: üstünlük verilmir) {
    düymə {
    / * 'vibrasiya' açar çərçivələri başqa yerdə müəyyən edilir * /
    animasiya: hər ikisini 0.3s xətti sonsuz titrətsin;
    }
    }

    Bir çox animasiya qaydaları olan bir saytı geri qaytarmağa çalışırsınızsa, aşağıdakılar ola bilər əvvəllər elan edilmiş bütün CSS animasiyalarını dayandırın:

    @media (üstünlük-azaldılmış hərəkət: azaltmaq) {
    *,
    * :: əvvəl,
    * :: sonra {
    animasiya müddəti: 0.001s! vacib;
    keçid müddəti: 0.001s! vacibdir;
    }
    }

    İstifadəçinin əməliyyat sisteminin üstünlüklərinə hörmət mövzusunda, düşünmək istəyə bilərsiniz qaranlıq rejim üçün veb saytınızı dizayn.

    5) Zəif link məlumatı

    Qısaca: bənzərsiz bağlantı mətni ilə əlaqələri eyniləşdirin. Bir keçid yeni bir nişan və ya bir fayl açacağı təqdirdə istifadəçiləri xəbərdar edin.

    Zəif bağlantıların əsas səbəblərindən biri çox vaxt zəif kopirayterlikdir. Ekran oxuyucularının çoxu istifadəçiyə səhifədəki bağlantıların siyahısını tez bir zamanda görmək imkanı verir (ən çox istifadə olunan reklam ekranı oxucu, JAWS, klaviatura qısa yolları Ins + F7; pulsuz NVDA ekran oxuyucusu, eyni klaviatura qısa yol səhifənin bağlantılarını, başlıqlarını və işarələrini sadalayan Elementlər Siyahısına gətirir).

    Ancaq hər bir bağlantıda “Buraya vurun” və ya “Daha çox oxu” deyən mətn varsa, onları ayırd etmək üçün başqa bir şey yoxdursa, bu faydasızdır. Bunu həll etməyin ən asan yolu sadəcə unikal link mətni yazmaqdır, lakin bu mümkün deyilsə, hər bir linkdə unikal aria etiket atributu istifadə edərək köməkçi texnologiya üçün link mətnini aşa bilərsiniz..

    Burada yaxşı bir nümunə var Joomla veb saytı:

    Hər biri eyni olan iki fərqli hekayə göstərən Joomla veb saytı

    Görünən link mətni sadəcə “daha çox oxu”, lakin Joomla istifadə edir aria-etiket köməkçi texnologiyanın hər birini unikal etmək üçün xüsusiyyətlər:

    Daha çox oxu
    
    Daha çox oxu

    Çünki aria-etiket köməkçi texnologiyalar tərəfindən link mətninin yerinə mətn istifadə ediləcək, W3C, aria etiketdə istifadə olunan mətni link daxilində istifadə olunan mətnlə başlamağı tövsiyə edir, çünki “bu, istifadəçilər arasında ardıcıl əlaqə yaratmağa imkan verəcək”..

    Qeyd: Hələ köhnə saytlarda gördüyüm bəzi pis məsləhətlər, istifadə edilən bağlantılara izahlı mətn əlavə etməkdir başlıq atribut:

    Daha ətraflı>

    Bunu etmə. The başlıq əksər ekran oxuyucularına məruz qalmır (inkişaf etdiricilər onu “SEO” məqsədləri üçün açar sözlər ilə doldururdular, buna görə ekran oxucu satıcıları bunu standart olaraq əlil edir) və brauzerlər başlıq atributlarını yalnız hover-də siçan istifadəçiləri üçün əlçatan olan “alət tipləri” kimi təqdim edirlər..

    Links bağlantılar kimi görünməlidir

    Varsayılan olaraq, brauzerlər bağlantıları vurğulayırlar. Bunu dəyişdirməmək yaxşıdır, ancaq bu barədə dizaynerlə avtomobil parkında bir döyüş itirsəniz, link mətni ətrafdakı bağlantı olmayan mətndən 3: 1 nisbətində bir nisbətə sahib olmalıdır və bəzi ‘rəngsiz dizayner’ verməlidir. “Məsələn, fokuslandıqda və ya fokuslandıqda bir əlaqə olduğunu.

    a: hover, a: odaklanma {mətn bəzək: alt alt;}

    Fokus üslubu, siçan olmayan bir istifadəçi klaviaturadan, stilusdan və ya səs girişindən diqqəti yönəldərkən əlaqənin vurğulanmasına səbəb olur. Ümumiyyətlə, səhifədəki bir şey hover stilinə sahib olduqda, eyni zamanda fokus stili verilməlidir.

    ‘Rəngsiz dizayner’ (bizim vəziyyətimizdə bir alt) görmə qabiliyyəti və ya rəng korluğu olan ziyarətçilərin dəyişikliyi hover və ya fokusda görməsini təmin edir. (Ekran oxuyucuları link mətnindən əvvəl avtomatik olaraq “Bağlantı” elan edir.)

    Link yeni bir tab / səhifə açarsa, insanlara deyin

    Bir əlaqəni aktivləşdirmək yeni bir nişanı və ya yeni bir pəncərəni açarsa, xüsusən səhifədəki bəzi bağlantılar bunu edərsə (məsələn, yalnız xarici bağlantılar yeni bir nişanı açarsa) ziyarətçi üçün çaşqın ola bilər. Bunu etməlisinizsə istifadəçi ya link mətnində ya da yuxarıdakı aria etiket metodundan istifadə edərək xəbərdar etməlisiniz.

    Bağlantı bir faylı olduqda insanlara deyin

    Bir link bir fayla (məsələn, bir PDF və ya video) aiddirsə, link mətnindəki istifadəçiyə deyin. Bunu gizlətməyin aria-etiket, bu bir çox görmə qabiliyyəti olan istifadəçilər üçün faydalı ola bilər (bəzi telefonlar, məsələn .docx faylı aça bilməz). Böyük bir fayldırsa, istifadəçiyə təxmini ölçü barədə xəbərdarlıq et; 3G üzərindən böyük bir video faylı yükləmək istəməyə bilər.

    Siz də istifadə edə bilərsiniz yükləyin atribut, bu brauzerin əməliyyat sisteminin doğma fayl yükləmə dialoqunu açmasına səbəb olur. Bütün bunları bir araya gətirərək kod aşağıdakı kimi görünəcəkdir:

    İllik hesabat (PDF, 240 MB)

    6) Başqa bir dizayn xətası: Fokus halqasının çıxarılması

    Qısaca: bir klaviatura istifadəçisinin həmişə diqqət mərkəzində olduqları yerləri görə biləcəyinə əmin olun.

    Qeyd etdik : diqqət əvvəl üslub. Hər hansı bir səbəbdən siçan istifadə edə bilməyən insanlar üçün əvəzolunmaz vizual bir göstəricidir: bəlkə də RSI və ya Parkinson və ya çox skleroz xəstəliyi var. Varsayılan olaraq, brauzerlər hazırda diqqət mərkəzində olan elementdə fokus üzüyü göstərirlər. Budur, şəxsi brauzerdəki Xrom brauzerində Əsas səhifə:

    Bir link ətrafındakı Chromium'un standart fokus ringinin görüntüsü (bu da bir görüntüdür)

    Ancaq bəzi insanlar bir siçan istifadə edərkən bu estetik cəhətdən xoşagəlməz bir şey hesab edir və CSS ilə bağlayır və bununla da saytı klaviatura istifadəçiləri üçün əlçatmaz qoyur.

    Firefox tərəfindən irəli sürülmüş yeni bir standart daxil edin : diqqət mərkəzində olan. Bu, bir klaviatura və ya siçan olmayan bir cihaz tərəfindən əldə edildiyi, lakin siçan istifadəçilərinə heç bir şey göstərmədiyi təqdirdə bir fokus halqasını bir elementə tətbiq edəcəkdir. Yalnız Firefox-da dəstəkləndiyinə görə (yazı zamanı), Patrick Lauke təklif edir aşağıdakı brauzerlər ilə yaxşı oynamaq üçün aşağıdakı CSS:

    düymə: fokus {/ * bəzi maraqlı düymə fokus üslubları * /}
    düymə: fokus: deyil (: diqqət mərkəzində görünən) {
    / * yuxarıda göstərilən düymə üslublarının hamısını geri qaytarın
    əgər düymədə fokus var, lakin brauzer normal deyil
    standart fokus üslublarını göstər * /
    }
    düymə: fokusda görünən {/ * bəziləri daha da * daha çox * maraqlı düymə diqqət üslubu

    7) Form doldurma

    Qısaca: hər biri etiketlə əlaqəli forma sahələrinə bənzəyən dizayn forması sahələri. Avtomatik doldurmağı dayandırmayın.

    Elektron ticarət saytları üçün formaların həyati əhəmiyyətini nəzərə alsaq, nə qədər əlçatmaz formaları gördüyüm məni heyrətləndirir. Tez-tez bu, köhnə brauzerlərin forma elementlərini tərtib etmək yolunda çox şeyə imkan vermədikləri üçün, inkişaf etdiricilər onları digər HTML elementləri ilə saxtalaşdırırlar. Müasir brauzerlər imkan verir cəlbedici onay qutuları, radio düymələri, xüsusi seçilmiş komponentlər və kombokslar, əlçatan avtoköçürmə idarələri və daha çox.

    Avtomatik doldurma sizin dostunuzdur

    Brauzerlərin formaları avtomatik doldurmasına icazə vermək ziyarətçilərdən daha az iş görmələrini tələb edir, buna görə bir forma doldurub məhsulunuzu qeyd etmək / satın almaq ehtimalı daha yüksəkdir. Brauzerlərdə avtomatik doldurma: Dərin bir dalış eBay-ın bu barədə mükəmməl bir məqaləsidir (və bilməlidirlər).

    Ayrıca, avtoköçürmə hal-hazırda AA-nın uyğunluğuna çatmaq üçün yeganə kifayətdir Uğur meyarı 1.3.5: Giriş Məqsədini müəyyənləşdirin.

    Forma Alanları Form Sahələrinə bənzəyin

    Varsayılan olaraq, brauzerlər forma giriş sahələrini qutular şəklində göstərir. Hər şeylə, kənarları, padding və haşiyələri ilə tərtib edin, ancaq qutular kimi saxlayın. Bir çox dizayner, istifadəçinin mətn daxil etməsi üçün bir xətt istifadə edərək, Google-un 2017-ci il öncəsi Material Dizayn nümunəsinə əməl etdi:

    Köhnə material dizayn giriş, düzbucaqlı qutu deyil, üfüqi xətt ilə

    Ancaq Google, köhnə mətn sahələri altındakı xətt bəzi istifadəçilər üçün aydın olmadığını, tez-tez bir bölücü ilə qarışıq olduqlarını və dizaynını dəyişdirdiyini tapdı. Bir praktikliyi sınağı 600 iştirakçı ilə birlikdə bunu aşkar etdilər

    düzbucaqlı (qutu) forma ilə bağlanmış mətn sahələri xətti uyğun olanlardan daha yaxşı yerinə yetirilmişdir … Bu gün bu yeni mətn sahələri Google məhsullarında hesab giriş səhifələrindən Google formalarına qədər görünür..

    Google’un tam Material Dizayn UI kitabxanasını qəbul etməyi düşünürsünüzsə, oxuyun Material Dizayn mətn sahələrini istifadə etməyi dayandırın! Matsuko Friedland tərəfindən ehtiyaclarınıza cavab verdiyini görmək üçün.

    Bütün Form sahələrini etiketləyin

    Bütün forma sahələri (mətn girişləri, onay qutuları, radio düymələri, sürgülər və s.) Etiketlənməlidir. Bunun ən yaxşı yolu HTML istifadə etməkdir ; WCAG’ın dediyi kimi, “standart HTML kontrolları dəqiqləşdirməyə uyğun istifadə edildikdə artıq bu uğur meyarına cavab verir”.

    Budur, hazırladığım bir demo etiketsiz forma sahəsi vs etiketli bir forma sahəsi. Bir-birinə oxşayırlar, amma yuxarısında müvafiq etiket yoxdur, halbuki ikincisi. Ən altının mətn etiketinə vurun və əlaqəli girişə diqqət etdiyini görəcəksiniz.

    saxta vs real etiket müqayisəsi

    Bu, motor idarəetmə çətinliyi olan birisi üçün bir girişə diqqəti daha da asanlaşdırır – və ya bəlkə sizin üçün, kələ-kötür bir kiçik ekranda kiçik bir onay qutusunu yoxlamağa çalışır. Bir forma sahələri ara-sıra açan ekran oxucu istifadəçiləri üçün də çox vacibdir (standart olaraq, yalnız bağlantılar və forma sahələri sekmeleri ilə diqqəti cəlb edir); bir giriş sahəsinə daxil olduqda, ekran oxucu əlaqəli etiketin məzmununu elan edəcəkdir.

    Bunun kodu çox sadədir. Giriş sahəsinə bənzərsiz bir şəxsiyyət vəsiqəsi verilir və etiket istifadə edərək onunla əlaqələndirilir üçün atribut:

    
    

    Etiketləri gizlədir

    Bəzən görünən bir etiket istəməyəcəksiniz. Və ya dizayner etmir və avtomobil parkında başqa bir mübarizə istəmirsiniz. Hər halda, girişdən əvvəl “Axtarış” deyilən bir etiketin həddən artıq dərəcədə öldürülməsi kimi bir nümunə var.

    Bundan sonra 'axtarış' etiketi ilə giriş sahəsi

    Giriş sahəsini istifadə edərək təqdim düyməsinin məzmunu olan “Axtarış” mətni ilə əlaqələndirə bilərik aria-labeldby:

    
    

    İstifadə edə bilərdik aria-etiket (bağlantılar haqqında danışarkən daha əvvəl tanış olduq):


    Bir səhifədə görünən mətnə ​​üstünlük vermək həmişə yaxşıdır, çünki səhifə tərcümə vasitəsi ilə işlədildiyi təqdirdə tərcümə ediləcək, HTML atributlarında “gizli” mətn isə olmayacaqdır. (Bu məqalə üçün Adrian Roselli’ya şapka ucu, möhtəşəm məqaləsindən Nəzarət etiketlənməsi üçün metodların prioriteti.)

    Üst Milyon Ana Səhifələrindəki Ən Çox Səhvlər

    Elektron ticarəti saytlarında ən az maneələri nəzərdən keçirdik, bəzi növ dəyərsizləşmə ilə istifadəçilər tərəfindən bildirildiyi kimi. İndi daha geniş saytlar toplusuna – ən yaxşı 1.000.000 veb saytın ana səhifələrinə baxaq, avtomatik olaraq WebAIM tərəfindən təhlil edilir Avqust ayında 2019. Təhlil edilən səhifələrin 98% -də ən azı bir səhv var. Ən çox yayılmış səhvlərdir

    1. Aşağı kontrastlı mətn (86.1%)
    2. Şəkillər üçün alternativ mətn yoxdur (67.9%)
    3. Boş bağlantılar (58.9%)
    4. Yarımçıq formalı yazı etiketləri (53.2%)
    5. Yarımçıq sənəd dili (30.5%)

    Yuxarıda göstərilən aşağı kontrast, bağlantılar və daxilolma ilə məşğul olduq. İndi digər çox yayılmış səhvlərdən necə qaça biləcəyimizə baxaq.

    8) Bütün Şəkillər, Video və Səs üçün Mətn Alternativləri təmin edin

    Qısaca: bir şəkil və ya video vasitəsilə ötürülən hər hansı bir məlumat mətn ekvivalenti olmalıdır.

    Hər görmə qüsuru olan və ya brauzerlərində şəkilləri söndürmüş aşağı bant genişliyi / bahalı məlumat planı olanlara çatdırıla bilən alternativ mətn (“alt mətn”) olmalıdır. Buraya mətn şəkilləri daxildir.

    Budur əsas qaydalar:

    • Şəkil sırf dekorativdirsə, boş alt mətni olmalıdır: alt = "". (Ancaq sırf dekorativ şəkillər yəqin ki, hər halda CSS-də olmalıdır.)
    • Bir şəkil bədən mətnində təsvir olunursa, boş alt mətni olmalıdır (alt = ""), təkrarlanmamaq üçün. Ancaq varsa ehtiyatlı olun bir
      – görmək Necə başa düşürsən? daha çox üçün.
    • Bir şəkil bir keçidin yeganə məzmunudursa (məsələn, təşkilatınızın loqotipi ana səhifəyə keçmək üçün tıklana bilər) alternativ mətn linkin təyinatını təsvir etməlidir. Misal üçün, alt = "ana səhifə".
    • Simge şriftlərindən istifadə etməyin; onlar disleksik insanlar üçün həqiqətən pis ola bilər. Onlardan istifadə edirsinizsə, onları SVG-yə çevirin.

    Video və Audio Alternativ Mətn

    Eşitmə qüsurlu insanlar üçün audio məzmunun alternativ mətnə ​​ehtiyac olduğunu unutma. Bu, podkastların transkriptləri və videoların alt yazıları deməkdir. Və yenə: medianı avtomatik ifa etmə.

    9) Düzgün sənəd dili əlavə edin

    Qısaca: köməkçi texnologiyaya mətninizin hansı dildə olduğunu bildirin.

    Ev səhifələrinin 30% -i yazdıqları dili elan etmir, bu da onları ekran oxucu istifadəçiləri üçün çaşdırıcı hala gətirə bilər. Bu, vacibdir, çünki “altılıq” sözü, məsələn, ingilis və ya fransız dillərində olduqda, çox fərqli şəkildə tələffüz olunur.

    Bunu HTML elementinizə bir atribut əlavə etməklə həll etmək asandır:

    “En” bu səhifənin ingilis dilində olduğunu bir ekran oxuyucusuna (və ya tərcümə proqramı) izah edir. “Es” ispan, “fr” fransız və s. Əksər dillər üçün dil etiketini müəyyən etmək asandır. W3C üçün bir bələdçi var Dil etiketinin seçilməsi.

    Səhifədə əsas elan edilmiş bir dildən başqa bir dildə məzmun varsa, həmin məzmunu əhatə edən bir elementə dil atributu əlavə edin. Məsələn, İngilis dili elan edilmiş bir səhifədə:

    Söhbət etmək istəsəniz matador, biraz sərin cabana
    Və görüş senoritalar hesabına görə, Espana por lehinə

    10) Ziyarətçiyə məzmununuzu yaxından tanımağınıza kömək edin

    Qısaca: köməkçi texnologiya istifadəçilərinə məzmununuzu anlamaq və naviqasiya etmək üçün HTML işarələmə elementlərindən istifadə edin.

    Görmə qabiliyyətli bir ziyarətçi səhifənizə gəldikdə, naviqasiyanın harada olduğunu və əsas məzmunun harada başladığını başa düşmək üçün asanlıqla vizual olaraq skan edə bilər. Ekran oxuyan istifadəçi bunu edə bilməz. Bununla birlikdə, HTML5 bizə bu əraziləri qeyd etmək üçün bəzi yeni etiketlər verir və köməkçi texnologiyalarda əlamətlərə keçə biləcək (və ya keçə) qısa yollar mövcuddur. başlıq, altbilgi, naviqasiya və s.

    Bir veb tərtibatçısı və ekran oxucu istifadəçisi Léonie Watson ilə çəkdiyim altı dəqiqəlik video, şəxsi saytımı araşdırmaq üçün bu semantikanı araşdırmaq üçün ekran oxuyucusundan necə istifadə etdiyini təqdim edir:

    • Əsas məzmununuzu, yəni başlığı olmayan, ilkin naviqasiya və ya altbilgi olmayan şeyləri a
      element. Demək olar ki, bütün hallarda yalnız biri olmalıdır
      hər səhifədə. Bütün brauzerlər (IE9 +) onu tərtib etməyə imkan verir və köməkçi texnologiyalar onunla nə edəcəyinizi bilir.
    • Başlığınızı (marka loqotipi, şerit xətti, səhifənin başlığı) a ilə vurun
      element.
    • Ayağınıza (qanuni sənədlər, əlaqə məlumatları, müəllif hüquqları barədə bildiriş və s.) A
    • Istifadə edərək ilkin naviqasiyanı qeyd edin
        bükülmüş element. Bu içəridə yuva edilə bilər
        bu səhifənin vizual dizaynına uyğun gəlirsə.
      • Reklam və qeyri-vacib məzmun birinə sarılmalıdır
      • Bir səhifədə birdən çox məhsul / video / xəbər elementi / blog yazıınız varsa, bunların hər birini birinə sarın
        element.

      Onun içində ekran oxucu istifadəçilərinin sorğusu, WebAIM, ekran oxuyan istifadəçilərin 26% -nin bir səhifəni gəzərkən tez-tez istifadə etdiyini və ya daim bu işarələrdən istifadə etdiyini tapdı.

      Ayrıca içindəki diskret parçaları sarın

      Apple WatchOS’un məzmununu optimal şəkildə göstərməsinə kömək edir. Məqaləmə baxın Semantik HTML-nin praktik dəyəri bu barədə daha çox məlumat üçün.

      11) HTML’dən düzgün istifadə edin

      Qısaca: HTML elementlərinin semantikasını və standart davranışlarını başa düşmək; məzmununuz üçün düzgün elementdən istifadə edin.

      Bu yazıda ümumi bir mövzu düzgün HTML elementlərindən istifadə edilmişdir. A istifadə edərək etiket əlaqəli giriş sahəsinə yönəlmiş daxili brauzer davranışına malikdir; istifadə

      üstünlük verilir

      çünki ekran oxucu istifadəçilərinə ekran oxuyucusundan istifadə etməyənlərə tamamilə maneəsiz olaraq vacib məzmuna birbaşa keçmək imkanı verir..

      Başqa bir nümunə a istifadə edir

      Like this post? Please share to your friends:
Adblock
detector
map