Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Ekran o‘quvchi dasturlar

ULASHISH

Nega

Ekran o‘quvchi dasturlar ko‘zi ojiz insonlar uchun zarur, qisman ko‘radigan foydalanuvchilar uchun muhim va o‘qishda qiynaladigan insonlar uchun foydali.

Nima

Ekran o‘quvchi dasturlar haqida gapirmasdan veb qulaylikni o‘rgatish qiyin. Nogironlar aravachasi umumiy qulaylik uchun qanday ramz bo‘lsa, ekran o‘quvchi dasturlar veb qulaylik uchun xuddi shunday ramzga aylangan. Qulaylik faqat ko‘zi ojiz yoki qisman ko‘radigan foydalanuvchilar uchun degan fikr afsona bo‘lsa-da, ekran o‘quvchi dasturlarni qo‘llab-quvvatlash majburiy mavzudir.

Agar bu kursda o‘rgangan hamma narsani bajargan bo‘lsangiz, saytingiz ekran o‘quvchi dasturlarda yaxshi ishlashi ehtimoli katta. Bu barcha ko‘zi ojiz foydalanuvchilar undan foydalana oladi degani emas.

Nomidan ko‘rinib turibdiki, ekran o‘quvchi dastur — ekraningizni o‘qib beradigan vosita. U ko‘zi ojiz insonlar uchun zarur, qisman ko‘radigan foydalanuvchilar uchun muhim va o‘qishda qiynaladigan insonlar uchun foydali.

Eng keng tarqalgan ekran o‘quvchi dasturlar

To‘rtta turli ekran o‘quvchi dasturning nomini bilib olasiz.

Mobil qurilmalar

Mobil qurilmalarda ekran o‘quvchi dastur foydalanuvchilarining eng katta ulushi Apple’ga to‘g‘ri keladi. VoiceOver ekran o‘quvchi dasturi iOS’ga o‘rnatilgan. Ikkinchi eng mashhuri — Android uchun TalkBack, u ham barcha Android qurilmalariga o‘rnatilgan.

Saytingiz shu ikkisi bilan yaxshi ishlashini ta’minlash yaxshi boshlanish nuqtasi bo‘ladi. Davom etishdan oldin quyidagi maqolalarni o‘qing:

Stol kompyuteri va noutbuk

Stol kompyuterlari va noutbuklar uchun bilishingiz kerak bo‘lgan ikkita ekran o‘quvchi dastur bor – NVDA va JAWS. Agar test uchun bittasini tanlashingiz kerak bo‘lsa, NVDA’ni tanlang. U bepul va mashhurligi oshib bormoqda. Ikkalasi ham faqat Windows uchun mavjud.

Qanday

Tilni qanday belgilashni o‘rganasiz, shuningdek, ikkita veb-saytni sinab ko‘ramiz – Toyota va Hyundai.

Til

Ekran o‘quvchi dastur to‘g‘ri tilda gapirishi uchun kontentingiz qaysi tilda ekanini bilishi kerak. Bu <html> elementidagi lang atributi yordamida amalga oshiriladi. Quyidagi misolda til sifatida ingliz tili belgilangan:

<!DOCTYPE html>
<html lang="en">

  1. Ingliz tilidagi Disleksiya haqidagi Wikipedia maqolasining manba kodini ko‘rib chiqing.
  2. Bahasa Indonesia tilini tanlang.
  3. Manba kodini yana ko‘rib chiqing.

lang atributi lang="en"dan lang="id"ga o‘zgardi. Bu ekran o‘quvchi dasturlar uchun ham, qidiruv tizimlari uchun ham yaxshi.

Sahifa qismlarining tili

Ba’zan kontentingizning ayrim qismlari boshqa tilda bo‘ladi. Ekran o‘quvchi dasturlar sahifa o‘rtasida tilni almashtirishi uchun o‘sha lang atributidan foydalanamiz. Disleksiya haqidagi ingliz tilidagi sahifadagi Bahasa Indonesia havolasining manba kodini ko‘rib chiqing:

<a href="https://id.wikipedia.org/wiki/Disleksia" lang="id" hreflang="id">Bahasa Indonesia</a>

Endi ekran o‘quvchi dastur "Bahasa Indonesia" so‘zlarini ingliz tilida emas, balki indonez tilida (Bahasa Indonesia) o‘qish kerakligini tushunadi. Shuningdek, hreflang atributi tufayli havola olib boradigan sahifa indonez tilida ekanini ham tushunadi.

Ekran o‘quvchi dastur yordamida testlash

Keling, ekran o‘quvchi dastur bilan testlashga yuzaki to‘xtalamiz. Bu kursda chuqur kirmaymiz. Ekran o‘quvchi dasturlar — katta mavzu. Quyidagi ikki misolni bajarish uchun telefoningizdan foydalaning. Bu yerda yozilganni aynan eshitmasligingiz mumkin, chunki ekran o‘quvchi dastur chiqaradigan natijaga ko‘plab omillar ta’sir qiladi.

Toyota

Screenshot from the Toyota web site on a mobile device. Showing a logo, one location icon, one hamburger icon and one carousel.
  1. Brauzeringizda toyota.com saytini oching va TalkBack yoki VoiceOver’ni yoqing. Android’da Chrome’dan, iOS’da Safari’dan foydalaning.
  2. Bosh sahifadagi birinchi elementga yetish uchun ekranni chapdan o‘ngga suring (swipe). "Skip to main content …" kabi gapni eshitasiz. Yaxshi, bu o‘tkazib yuborish havolasi!
  3. Keyingi elementga suring. "Toyota link main-navigation-bar …". Biroz chalkashmi? "Toyota" so‘zi <title>Toyota</title> elementiga ega SVG’dan kelmoqda.
  4. Keyingi elementga suring. "Button". Bu tugma nima qiladi? Hech tasavvurimiz yo‘q.
  5. Keyingisi. "Button". Nima?
  6. Keyingisi. "Button". Taslim bo‘lamiz.

Logotipni eshitganingizdan so‘ng, ehtimol, adashib qoldingiz. Qulaylik nomi (accessible name) bo‘lmagan uchta tugma. Rol, nom va qiymat sahifasida bilib olganingizdek, barcha elementlar qulaylik nomiga ega bo‘lishi kerak.

Bu tajribani qanday yaxshilash mumkin

  1. Navigatsiya mo‘ljal hududi uchun yaxshiroq yorliq. Mo‘ljal hududlari darsida o‘rganganingizdek, bir turdagi mo‘ljal hududidan bir nechta bo‘lsa, aria-label atributidan foydalanishingiz kerak. Toyota’da bir nechta <nav> bor, shuning uchun ular kerakli tarzda aria-label ishlatgan. Biroq atribut qiymati odamlar uchun, defislarsiz yozilishi kerak. <nav aria-label="main"> yaxshiroq bo‘lardi.
  2. Logotipdagi havola uchun yaxshiroq nom. Havola matni darsida o‘rganganingizdek, havola matni o‘quvchi ushbu havolani bosganda qanday ma’lumot olishini aniq tushuntirishi kerak. Buni <a> elementiga aria-label="Toyota front page" qo‘shish orqali yaxshilash mumkin.
  3. Birinchi "Button" — qulaylik nomi bo‘lmagan <input type="button">. U yaqin atrofdagi Toyota dilerlarini topish uchun pochta indeksini so‘raydigan modal oynani ochadi. Buni <input> elementiga aria-label="Enter zip code to find a dealer nearby" qo‘shish orqali tuzatish mumkin.
  4. Ikkinchi "Button" pochta indeksi tugmasi bilan bog‘liq. Unda geolokatsiya ikonkasi bor. Qulaylik nuqtai nazaridan bu ikki elementni bittaga birlashtirish kerak.
  5. Uchinchi "Button" — gamburger ikonka. aria-label="Open menu" uni qulay qilgan bo‘lardi.

Bu kichik o‘zgarishlar Toyota saytini yaxshilaydi, lekin to‘liq tuzatmaydi. Modal oynalar va menyular kabi komponentlardan foydalanish boshqa jihatlarni ham hisobga olishni talab qiladi. Bu kurs maxsus komponentlar tafsilotlariga kirmaydi. Bunday patternlar haqida ko‘proq bilmoqchi bo‘lsangiz, menyu tugmasi, modal oyna va karusel haqida o‘qish uchun WAI-ARIA Authoring Practices 1.1 sahifasiga tashrif buyuring.

Hyundai

Screenshot of the Hyundai website on a mobile device, showing the logo and four navigation icons.
  • Hyundai Worldwide saytini oching va ekran o‘quvchi dasturingizni yoqing.
  • Bosh sahifadagi birinchi elementga yetish uchun ekranni chapdan o‘ngga suring. "Go to menu". Yaxshi, bu o‘tkazib yuborish havolasi!
  • Keyingi elementga suring. "Hyundai World Wide". Ehtimol, biz turgan sahifa.
  • Keyingisi. "Hyundai, link image". Ehtimol, logotip.
  • Keyingisi. "Go to global distributors page, button". Buni tushunamiz, lekin bu tugmami?
  • Keyingisi. "Go to channel Hyundai page, link". Tushunarli.
  • Keyingisi. "Search, button". Zo‘r.
  • Keyingisi. "Menu, button". Ajoyib.

Umuman olganda, sahifaning yuqori qismi ekran o‘quvchi dastur foydalanuvchilari uchun qulay. Quyidagi maslahatlar kichik yaxshilanishlardir.

Bu tajribani qanday yaxshilash mumkin

  1. "Hyundai World Wide" — faqat ekran o‘quvchi dasturlar uchun mo‘ljallangan <span>. U vizual jihatdan yashirilgan. Maqsad foydalanuvchiga joriy sahifa nomini aytish. <title> elementi borligi sababli bu ortiqcha, shuning uchun uni olib tashlash mumkin.
  2. Logotip uchun yaxshiroq alt matn. Havolaning maqsadini qo‘shing: alt="Hyundai World Wide front page".
  3. Havola va tugmalarning qulaylik nomlarini qisqartiring. "Go to" va "page" so‘zlarini olib tashlang. Global distributors yetarli.
  4. Tugmalar va havolalar darsida o‘rganganimizdek, Global distributors havolasida <button> o‘rniga <a> ishlating.

Endi ekran o‘quvchi dastur asoslarini o‘rganib oldingiz. Mobil qurilmangizga o‘rnatilgan boshqa qulaylik imkoniyatlarini ham bemalol o‘rganib chiqing. Switch boshqaruvi yordamida telefoningizni yuzingiz bilan boshqarib ko‘ring.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish