Aksesueshmëria e faqeve web: pse ka rëndësi dhe si të filloni

Rreth një në pesë njerëz jeton me ndonjë formë aftësie të kufizuar. Kjo do të thotë 20% e audiencës suaj potenciale që mund të mos jetë në gjendje të përdorë faqen tuaj. Dhe ja çfarë: përmirësimet e aksesueshmërisë pothuajse gjithmonë e bëjnë faqen më të mirë për të gjithë, jo vetëm për njerëzit me aftësi të kufizuara.

Çfarë është aksesueshmëria e web-it?

Aksesueshmëria e web-it do të thotë ndërtim faqesh që funksionojnë për njerëzit me aftësi të kufizuara. Flasim për njerëz që:

• Janë të verbër ose kanë shikim të ulët
• Janë të shurdhër ose me dëgjim të vështirësuar
• Kanë dëmtime motorike
• Kanë aftësi të kufizuara kognitive
• Mbështeten tek teknologjitë asistive si lexuesit e ekranit

Është një spektër i gjerë, dhe zgjidhjet janë shpesh më të thjeshta se ç’mendoni.

Pse duhet t’ju interesojë

Thjesht është gjëja e duhur

Të gjithë meritojnë akses të barabartë në informacion dhe shërbime online. Pikë.

Është mirë për biznesin tuaj

• Audiencë më e madhe: 15-20% e njerëzve kanë aftësi të kufizuara
• SEO më e mirë: faqet e aksesueshme rendisin më mirë sepse motorët e kërkimit shpërblejnë strukturën e mirë
• Mbrojtje ligjore: shumë vende tani kërkojnë pajtueshmëri aksesueshmërie
• UX më e mirë në përgjithësi: gjëra si navigimi i qartë dhe teksti i lexueshëm ndihmojnë çdo përdorues

Ligji po ecën përpara

Në BE, faqet e sektorit publik tashmë duhet të plotësojnë standardet e aksesueshmërisë. Kërkesat për sektorin privat po zgjerohen gjithashtu. Të veprosh tani ju kursen dhimbje koke më vonë.

Udhëzimet WCAG

Udhëzimet e Aksesueshmërisë së Përmbajtjes Web (WCAG) janë standardi që të gjithë referencojnë. Ka tre nivele:

Shumica e organizatave synojnë pajtueshmëri WCAG 2.1 AA. Kjo është pika e ëmbël mes përpjekjes dhe mbulimit.

Gjëra që mund t’i rregulloni sot

Alt text në imazhe

Lexuesit e ekranit nuk mund të shohin imazhet. Pa alt text, një përdorues i verbër nuk ka ide çfarë ndodhet aty.

<!-- Keq -->
<img src="ekipi.jpg">

<!-- Mirë -->
<img src="ekipi.jpg" alt="Ekipi ynë duke u takuar në zyrën e Tiranës">

Shkruani alt text që përcjell qëllimin e imazhit, jo vetëm çfarë tregon fjalë për fjalë. Nëse imazhi është dekorativ, përdorni alt="" të zbrazët që lexuesit e ekranit ta kapërcejnë.

Strukturë e duhur titujsh

Titujt nuk janë thjesht stilim vizual. Përdoruesit e lexuesve të ekranit kërcejnë mes titujve për të naviguar faqen, kështu që hierarkia ka rëndësi.

<!-- Keq: Kapërcim nivelesh -->
<h1>Titulli i Faqes</h1>
<h3>Seksioni</h3>

<!-- Mirë: Hierarki e duhur -->
<h1>Titulli i Faqes</h1>
<h2>Seksioni</h2>
<h3>Nënseksioni</h3>

Kontrasti i ngjyrave

Teksti ka nevojë për kontrast të mjaftueshëm kundrejt sfondit. Raportet minimale:

• 4.5:1 për tekst normal
• 3:1 për tekst të madh (18pt+ ose 14pt bold)

Përdorni WebAIM Contrast Checker për të testuar ngjyrat tuaja. Do të habiteshit sa kombinime ngjyrash “që duken mirë” dështojnë këtu.

Aksesueshmëria nga tastiera

Shumë përdorues nuk mund të përdorin mouse. Disa përdorin vetëm tastierën, disa përdorin pajisje switch, disa përdorin kontroll me zë. Sigurohuni që:

• Të gjitha elementet interaktive janë të fokusueshme
• Rendi i fokusit ndjek një rrugë logjike nëpër faqe
• Indikatorët e fokusit janë të dukshëm (seriozisht, mos hiqni outline-t vetëm sepse duken keq)

Etiketat e formave

Çdo input forme ka nevojë për etiketë të duhur. Placeholder-at nuk janë etiketa.

<!-- Keq -->
<input type="email" placeholder="Email">

<!-- Mirë -->
<label for="email">Email</label>
<input type="email" id="email">

Testimi i faqes suaj

Mjete automatike

Këto janë falas dhe kapin gjërat e dukshme:

• WAVE: extension browser-i për kontrolle të shpejta vizuale
• Lighthouse: i integruar në Chrome DevTools, ju jep një rezultat
• axe DevTools: më gjithëpërfshirës, i mirë për zhvilluesit

Testim manual

Ja ku qëndron çështja: mjetet automatike gjejnë vetëm rreth 30% të problemeve të aksesueshmërisë. Duhet gjithashtu:

• Navigoni të gjithë faqen vetëm me tastierë
• Provoni një lexues ekrani (VoiceOver në Mac, NVDA në Windows)
• Zmadhoni në 200% dhe kontrolloni që asgjë nuk prishet
• Çaktivizoni imazhet dhe shikoni nëse faqja ka ende kuptim

Testimi manual është aty ku gjeni problemet e vërteta. Një buton që teknikisht kalon kontrollet automatike mund të jetë ende i papërdorshëm nëse rendi i fokusit është pa kuptim.

Gabime që shohim vazhdimisht

• Imazhe pa alt text: problemi më i zakonshëm pa dyshim
• Kontrast i ulët ngjyrash: veçanërisht me tekst gri të lehtë
• Etiketa formash të munguar: teksti placeholder nuk mjafton
• Kurthe tastiere: modale nga të cilat nuk mund të dilni pa mouse
• Media me luajtje automatike: çorientuese për përdoruesit e lexuesve të ekranit
• Heqja e outline-ve të fokusit: CSS outline: none pa zëvendësim është makth për përdoruesit e tastierës

Si e trajtojmë aksesueshmërinë

Ne e ndërtojmë aksesueshmërinë që nga fillimi në vend që ta shtojmë në fund. Kjo do të thotë strukturë HTML semantike, etiketa ARIA ku elementet native nuk mjaftojnë, skip links për përdoruesit e tastierës, raporte kontrasti të duhura, dhe testim me teknologji asistive reale.

Është shumë më e lirë dhe më e lehtë të ndërtosh me aksesueshmëri që ditën e parë sesa të rinovosh një faqe ekzistuese.

Burime

• WebAIM : burime praktike aksesueshmërie, pa përgjithësime
• A11y Project : checklist dhe udhëzues nga komuniteti
• WCAG Quick Reference : specifika zyrtare, e filtrueshme sipas nivelit

Merrni një rishikim aksesueshmërie

Nëse keni një faqe ekzistuese dhe nuk jeni të sigurt ku qëndron, mund të bëjmë një auditim dhe t’ju japim një listë të prioritizuar se çfarë të rregulloni së pari, të renditur sipas ndikimit real tek përdoruesit.

Na kontaktoni dhe do ta shikojmë.