Si ta bësh website-in tënd të aksesueshëm: një udhëzues fillestar WCAG 2.2

Për ta bërë një website të aksesueshëm, ndërtoje që njerëzit ta përdorin me tastierë, lexues ekrani, zoom ose pajisje switch, jo vetëm me miun: përdor elemente reale HTML për butonat, lidhjet, kryetitrat dhe etiketat e formularëve, jep imazheve alt text me kuptim, mbaj kontrastin e tekstit të lartë dhe bëj fokusin të dukshëm. Standardi që duhet synuar është WCAG 2.2 Niveli AA. Kontrollet automatike kapin një pjesë të problemit; një test dhjetëminutësh me tastierë dhe lexues ekrani kap një pjesë të madhe të tjerës.

Çfarë do të thotë "i aksesueshëm" në praktikë

Aksesueshmëria ka të bëjë me njerëz: dikush që është i verbër dhe përdor lexues ekrani, dikush me dridhje që lundron me tastierë, dikush me shikim të dobët që zmadhon në 200%, dikush që lexon në diell të fortë, dikush me një krah të thyer përkohësisht. Aksesueshmëria e mirë priret ta bëjë një faqe më të mirë për të gjithë — strukturë më e qartë, tekst i lexueshëm, formularë që shpjegojnë gabimet e tyre.

Standardi referencë janë Udhëzimet e W3C për Aksesueshmërinë e Përmbajtjes Web (WCAG). Që nga shtatori 2026, versioni aktual është WCAG 2.2 (publikuar në tetor 2023, përditësuar në dhjetor 2024); WCAG 3 është një draft i hershëm. WCAG është organizuar rreth katër parimeve — përmbajtja duhet të jetë e perceptueshme, e operueshme, e kuptueshme dhe e qëndrueshme — dhe ka tre nivele përputhshmërie:

Niveli	Çfarë do të thotë	Kush e synon
A	Minimumi; pa të, disa njerëz nuk mund ta përdorin fare faqen	Të gjithë
AA	Synimi i zakonshëm; mbulon kontrastin, fokusin, ndryshimin e madhësisë, trajtimin e gabimeve	Shumica e organizatave dhe shumë ligje
AAA	Më i rreptë; jo i arritshëm për çdo përmbajtje	Shërbime dhe audienca specifike

Ligje në disa vende i referohen WCAG — për shembull, Akti Evropian i Aksesueshmërisë, që zbatohet për shumë shërbime dixhitale për konsumatorë në BE që nga qershori 2025. Cilat rregulla zbatohen për ty varet nga vendi ku vepron dhe çfarë shet; konsultohu me një këshilltar nëse nuk je i sigurt. Ky udhëzues mbulon punën praktike.

Opsionet: si arrihet aty

Qasja	E mirë për	Kompromisi
Ndërtoje që në fillim	Website-e dhe aplikacione të reja	Më pak punë në total; duhet thënë që në fillim
Auditim dhe rregullim	Website-e ekzistuese	Gjen probleme reale; kërkon një kalim të përqendruar për çdo faqe
Auditim profesional	Sektorë të rregulluar, website-e të mëdha, organe publike	I thellë dhe i dokumentuar; kushton para
Widget mbivendosës	Nuk rekomandohet	Nuk mund të rregullojë kodin nën të

Për shumicën e website-eve të vogla, dy të parat mjaftojnë: i thua AI-së ta ndërtojë në mënyrë të aksesueshme që në fillim, pastaj auditon para lansimit.

Rregullimet që kanë më shumë rëndësi

Përdor elementet e duhura HTML

Shumica e aksesueshmërisë vjen falas me HTML të saktë. Një <button> është i fokusueshëm, funksionon me Enter dhe Space, dhe lajmërohet si buton. Një <div> me një handler klikimi nuk është asnjë nga këto. Kodi i gjeneruar nga AI ndonjëherë përdor div të stilizuar për gjithçka; kërko elemente semantike:

<button> për veprimet, <a href> për navigimin
Një <h1> për faqe, pastaj <h2>, <h3> në rend — përdoruesit e lexuesve të ekranit kërcejnë mes kryetitrave
Landmark-et: <header>, <nav>, <main>, <footer>
<label> i lidhur me çdo fushë formulari
Gjuha e faqes në <html lang="en">

Përdor atributet ARIA vetëm kur asnjë element vendas nuk përshtatet — për një grup skedash ose combobox të personalizuar, për shembull. ARIA e gabuar është më keq se aspak.

Aksesi me tastierë dhe fokus i dukshëm

Gjithçka që mund ta bësh me mi duhet të funksionojë vetëm me tastierë (WCAG 2.1.1). Shtyp Tab nëpër faqe: çdo lidhje, buton dhe fushë duhet të arrihet në një rend logjik, dhe gjithmonë duhet të shohësh ku është fokusi (2.4.7 Focus Visible). WCAG 2.2 shtoi që elementi i fokusuar nuk duhet të jetë krejtësisht i fshehur pas header-ave fiks ose banderolave të cookie-ve (2.4.11, Niveli AA).

Dështimet e zakonshme: menu që hapen vetëm me hover, modale që nuk e mbajnë fokusin ose nuk mbyllen me Escape, dhe outline: none në CSS pa asgjë për ta zëvendësuar.

Alternativat tekstuale

Çdo imazh me kuptim duhet alt text që thotë çfarë shfaq në kontekst ("Kuzhinieri që servir menynë e degustimit", jo "image1.jpg"). Imazhet dekorative marrin alt="" bosh që lexuesit e ekranit t'i kalojnë. Butonat vetëm me ikonë kanë nevojë për emër të aksesueshëm ("Mbyll", "Kërko"). Videot kanë nevojë për titra; audio për transkript.

Ngjyra dhe kontrasti

WCAG 2.2 AA kërkon një raport kontrasti prej të paktën 4.5:1 për tekstin normal dhe 3:1 për tekstin e madh (1.4.3), dhe 3:1 për pjesët e ndërfaqes si kufijtë e fushave të hyrjes dhe ikonat me kuptim (1.4.11). Tekstet placeholder gri të çelët dhe butonat e zbehtë janë dështimet e zakonshme. Gjithashtu, mos e përdor kurrë vetëm ngjyrën për të përcjellë kuptim — një kufi i kuq në një fushë të pavlefshme ka nevojë edhe për një mesazh gabimi.

Ndryshimi i madhësisë dhe rrjedhja

Teksti duhet të mbetet i përdorshëm kur zmadhohet në 200% (1.4.4), dhe përmbajtja duhet të funksionojë në një gjerësi prej 320 pikselësh CSS pa lëvizur anash (1.4.10). Një layout i përgjegjshëm e trajton shumicën e kësaj.

Madhësia e objektivave, formularët dhe gabimet

Madhësia e objektivit: WCAG 2.2 AA kërkon objektiva treguesi të paktën 24 me 24 pikselë CSS, ose hapësirë të mjaftueshme rreth atyre më të vegjël (2.5.8). Më i madh është më i mirë në telefon.
Formularët: etiketa të dukshme (jo vetëm placeholder), udhëzime të qarta, dhe mesazhe gabimi që thonë çfarë është e gabuar dhe si ta rregullosh, pranë fushës.
Login: mos i bëj njerëzit të zgjidhin një enigmë ose të transkriptojnë një kod pa alternativë; lejo menaxherët e fjalëkalimeve dhe ngjitjen (3.3.8 Accessible Authentication).

Prompt-e që funksionojnë

Ndërto këtë website për të përmbushur WCAG 2.2 Niveli AA: landmark-e HTML semantike, një h1 për faqe me kryetitra në rend, elemente reale buton dhe lidhje, etiketa në çdo fushë formulari, stile fokusi të dukshme, kontrast teksti të paktën 4.5:1, alt text te imazhet me kuptim dhe alt="" te ato dekorative, dhe html lang të vendosur.

Auditon faqet /signup dhe /checkout për aksesueshmëri. Kontrollo përdorimin vetëm me tastierë, rendin e fokusit, fokusin e dukshëm, etiketat, mesazhet e gabimit, kontrastin dhe emrat për lexuesit e ekranit të butonave me ikona. Listo çdo problem me kriterin WCAG, pastaj rregulloji pa ndryshuar dizajnin vizual më shumë sesa duhet.

Menuja mobile nuk mund të përdoret me tastierë. Bëje një buton me aria-expanded, fokuso brenda menusë kur hapet, mbyllë me Escape dhe ktheje fokusin te butoni.

Hap pas hapi

Nis një kontroll automatik. Seksioni Accessibility i Lighthouse në Chrome DevTools, ose shtesa e shfletuesit axe, në çdo faqe kryesore. Rregullo gjithçka që raporton.
Hiq miun. Shtyp Tab nëpër çdo faqe dhe përfundo çdo detyrë kryesore — regjistrim, kërkim, checkout. Shëno çdo gjë ku nuk arrin, nuk e sheh fokusin, ose nuk mund të dalësh.
Zmadho në 200% dhe ngushto dritaren në gjerësi telefoni. Asgjë nuk duhet të prritet ose të kërkojë lëvizje anash.
Provo një lexues ekrani për dhjetë minuta: VoiceOver në Mac dhe iPhone, TalkBack në Android, ose NVDA në Windows (falas). Dëgjo kryetitrat, lidhjet dhe fushat e formularit. "Buton" pa emër, ose "lidhje, kliko këtu", do të thotë punë për të bërë.
Kontrollo kontrastin për tekstin, butonat dhe fushat me një kontrollues kontrasti.
Rregullo, pastaj ri-testo të njëjtat detyra.
Publiko një deklaratë aksesueshmërie që thotë cilin standard synon dhe si të raportohen problemet — dhe u përgjigju atyre raportimeve.

Gabimet e zakonshme

Mbështetja te një widget mbivendosës në vend që të rregullohet kodi.
Heqja e konturave të fokusit sepse duken të papastra, pa zëvendësim.
Teksti placeholder si e vetmja etiketë. Zhduket kur dikush fillon të shkruajë dhe shpesh ka kontrast të ulët.
Lidhjet "Kliko këtu" dhe "Lexo më shumë". Jashtë kontekstit, përdoruesit e lexuesve të ekranit dëgjojnë një listë lidhjesh identike.
Alt text i mbushur me fjalë kyçe. Alt text është për njerëzit; përshkruaj imazhin.
Testimi një herë. Çdo veçori e re mund ta prishë aksesin me tastierë. Shto një kalim me tastierë te testimi para lansimit.

Listë kontrolli e aksesueshmërisë

Kontrolli automatik (Lighthouse ose axe) i pastër në faqet kryesore
Çdo detyrë mund të përfundohet vetëm me tastierë
Fokusi gjithmonë i dukshëm dhe kurrë i fshehur pas elementeve fiks
Kryetitra, landmark-e, butona dhe lidhje semantike; lang i vendosur
Alt text me kuptim; imazhet dekorative alt=""; titra te videot
Kontrast teksti ≥ 4.5:1 (teksti i madh ≥ 3:1); pjesët e ndërfaqes ≥ 3:1
Funksionon në zoom 200% dhe gjerësi 320 px
Çdo fushë formulari ka etiketë të dukshme dhe mesazhe gabimi të qarta
Deklaratë aksesueshmërie me një mënyrë për të raportuar problemet

Për konceptet pas kësaj, lexo çfarë është aksesueshmëria e web. Dizajni i aksesueshëm dhe dizajni i mirë mbivendosen shumë; si të dizajnosh një aplikacion bukur me AI e mbulon anën vizuale.

Aksesueshmëria në Mythex

Mythex ndërton me çfarëdo standardi që kërkon, ndaj vendose "WCAG 2.2 AA" në prompt-in e parë dhe në ndjekjet. Mund të përdorësh kornizën e Preview me madhësi telefoni për të kontrolluar ekrane të vegjël (Preview dhe Code), por testet me tastierë, zoom dhe lexues ekrani funksionojnë më mirë në URL-në e publikuar ose në një preview të hapur në skedën e vet. Kërko agjentit të auditojë një faqe, të rregullojë atë që gjen, pastaj testo vetë rregullimet — një kalim automatik është një fillim, jo një firmë miratimi.

Pyetje

Cili është standardi aktual i aksesueshmërisë për website-et?

Që nga shtatori 2026, standardi aktual i W3C është WCAG 2.2, i publikuar për herë të parë në tetor 2023. Shumica e organizatave dhe shumë ligje synojnë Nivelin AA. WCAG 3 është ende një draft i hershëm.

A mund ta bëjë një widget mbivendosës aksesimin e faqes time në përputhje?

Mos u mbështet në një të tillë. Mbivendosjet shtojnë një shirit mjetesh mbi faqe, por nuk mund të rregullojnë etiketat që mungojnë, aksesin e thyer me tastierë ose strukturën e dobët në kodin nën to. Rregullimi i vetë faqes është ajo që e bën atë të përdorshme.

A gjejnë kontrollet automatike çdo problem?

Jo. Mjete si Lighthouse dhe axe kapin gjëra si alt text që mungon, kontrast i ulët dhe fusha pa etiketë, por shumë probleme — rendi i konfuz i fokusit, teksti i pakuptimtë i lidhjeve, alt text që ekziston por është i gabuar — kërkojnë një person që të kontrollojë me tastierë dhe lexues ekrani.

Cili raport kontrasti kërkon WCAG?

WCAG 2.2 Niveli AA kërkon të paktën 4.5:1 për tekstin normal dhe 3:1 për tekstin e madh, dhe 3:1 për komponentët e ndërfaqes së përdoruesit si kufijtë e fushave të hyrjes dhe ikonat që përcjellin kuptim.