ZAWODNIK

Dostępność w praktyce: kontrast, alt, klawiatura, powiększenie, WCAG na stronie

INF.03 · teoria
autor: redakcja · 02.11.2026
Praktyczne poprawki sklepu dla osób niewidomych, słabowidzących i korzystających z klawiatury: alternatywy tekstowe, etykiety, fokus, kontrast i powiększanie treści. Lekcja 6.2 kursu INF.03.
Do­stęp­ność strony to moż­li­wość od­bio­ru treści i ob­słu­gi funk­cji przez osoby o róż­nych po­trze­bach, także z nie­peł­no­spraw­no­ścia­mi. Na eg­za­mi­nie roz­po­zna­jesz rolę tekstu al­ter­na­tyw­ne­go, ety­kiet i kon­tra­stu, a w prak­ty­ce sto­su­jesz te zasady w go­to­wej wi­try­nie. Sklep po­wi­nien po­zwa­lać wybrać pro­dukt i wysłać za­mó­wie­nie rów­nież bez myszy, przy po­więk­sze­niu i z czyt­ni­kiem ekranu.

WCAG i po­trze­by od­bior­ców

WCAG, od Web Content Accessibility Guidelines (wy­tycz­ne do­stęp­no­ści treści in­ter­ne­to­wych), opi­su­je kry­te­ria spraw­dza­nia do­stęp­no­ści. Cztery zasady mówią, że treść ma być po­strze­gal­na, funk­cjo­nal­na, zro­zu­mia­ła i so­lid­na. Po­strze­gal­ność obej­mu­je między innymi al­ter­na­ty­wę dla obrazu, funk­cjo­nal­ność ob­słu­gę kla­wia­tu­rą, zro­zu­mia­łość czy­tel­ne ety­kie­ty, a so­lid­ność po­praw­ną współ­pra­cę z tech­no­lo­gia­mi wspo­ma­ga­ją­cy­mi.
Po­zio­my A, AA i AAA ozna­cza­ją ze­sta­wy kry­te­riów, a nie ocenę es­te­ty­ki. Speł­nie­nie AA obej­mu­je rów­nież wy­ma­ga­nia A. Pod­sta­wa INF.03 wy­mie­nia WCAG 2.0, na­to­miast ro­dzi­na WCAG ma póź­niej­sze wersje, w tym 2.1 i 2.2. Przy prak­tycz­nej pracy trzeba wska­zać, według której wersji i po­zio­mu prze­pro­wa­dzo­no ocenę. Nie wy­star­czy na­pi­sać ogól­ne­go „zgodne z WCAG” po do­da­niu jed­ne­go atry­bu­tu.
Osoba nie­wi­do­ma może na­wi­go­wać po na­głów­kach i na­zwach kon­tro­lek. Osoba sła­bo­wi­dzą­ca może po­trze­bo­wać po­więk­sze­nia i wy­raź­ne­go kon­tra­stu, a osoba z ogra­ni­cze­nia­mi ruchu ko­rzy­stać wy­łącz­nie z kla­wia­tu­ry lub innego urzą­dze­nia ste­ru­ją­ce­go. Głuchy od­bior­ca po­trze­bu­je tek­sto­we­go od­po­wied­ni­ka istot­nych in­for­ma­cji dźwię­ko­wych. Jedna funk­cja, na przy­kład po­więk­sze­nie liter, nie roz­wią­zu­je wszyst­kich tych po­trzeb.

Obrazy i rów­no­waż­na in­for­ma­cja

Tekst al­ter­na­tyw­ny to opis zna­cze­nia obrazu w danym kon­tek­ście, za­pi­sa­ny zwykle w atry­bu­cie alt. Dla fo­to­gra­fii pro­duk­tu może brzmieć „Czarna mysz prze­wo­do­wa z dwoma bocz­ny­mi przy­ci­ska­mi”. Nie musi wy­li­czać każ­de­go pik­se­la. Po­wi­nien prze­ka­zać istot­ną in­for­ma­cję, której od­bior­ca nie uzyska z są­sied­nie­go tekstu. Nazwa pliku IMG_0042.jpg nie speł­nia tego za­da­nia.
Obraz de­ko­ra­cyj­ny nie dodaje in­for­ma­cji i po­wi­nien mieć pusty alt. Wtedy czyt­nik nie musi od­czy­ty­wać zbęd­ne­go ozdob­ni­ka. Brak atry­bu­tu nie jest od­po­wied­ni­kiem pu­ste­go atry­bu­tu: tech­no­lo­gia wspo­ma­ga­ją­ca może pró­bo­wać od­czy­tać nazwę pliku. To, czy obraz jest de­ko­ra­cją, zależy od jego użycia. To samo zdję­cie w ka­ta­lo­gu pro­duk­tu i jako po­wtó­rzo­ne tło może pełnić inną rolę.
1
2
3
<img src="img/mysz.jpg" alt="Czarna mysz z dwoma przyciskami bocznymi">
<img src="img/ozdobnik.png" alt="">
<a href="index.html"><img src="img/logo.svg" alt="Sklep komputerowy: strona główna"></a>
W trze­cim przy­kła­dzie obraz jest za­war­to­ścią od­no­śni­ka, więc nazwa ma wska­zy­wać jego cel. Sam napis „logo” nie wy­ja­śnia, dokąd pro­wa­dzi klik­nię­cie. Dla zło­żo­ne­go sche­ma­tu krótki alt może nie wy­star­czyć: po­trzeb­ny będzie rów­nież opis lub tabela danych w treści strony. Istot­ne ceny i wa­run­ki za­mó­wie­nia po­zo­sta­wiaj jako tekst, aby można je było od­czy­tać i po­więk­szyć.

Kon­trast i ko­mu­ni­ka­ty

Kon­trast tekstu opi­su­je współ­czyn­nik między jego ja­sno­ścią a ja­sno­ścią tła. Dla zwy­kłe­go tekstu na po­zio­mie AA WCAG wymaga co naj­mniej 4,5:1, a dla dużego tekstu co naj­mniej 3:1, z okre­ślo­ny­mi wy­jąt­ka­mi. Duży tekst ozna­cza w tym kry­te­rium co naj­mniej 18 pt zwy­kłe­go pisma albo 14 pt po­gru­bio­ne­go. Przy ty­po­wym prze­li­cze­niu CSS jest to od­po­wied­nio 24 px oraz około 18,7 px.
Nie oce­nia­my współ­czyn­ni­ka przez su­biek­tyw­ne „widzę, więc działa”. Użyj na­rzę­dzia li­czą­ce­go kon­trast i sprawdź rze­czy­wi­stą parę tekstu oraz tła. Na fo­to­gra­fii tło zmie­nia się w róż­nych miej­scach, więc napis czy­tel­ny nad ciem­nym frag­men­tem może znik­nąć nad jasnym. Pomaga stałe tło pod­pi­su lub od­po­wied­nio do­bra­na prze­sło­na. Szcze­gó­ły wy­jąt­ków opi­su­je W3C dla kry­te­rium kon­tra­stu.
Kolor nie po­wi­nien być je­dy­nym no­śni­kiem in­for­ma­cji. Błędne pole za­mó­wie­nia może dostać czer­wo­ną ramkę, lecz po­trze­bu­je także ko­mu­ni­ka­tu, na przy­kład „Podaj liczbę od 1 do 10”. Po­dob­nie do­stęp­ność pro­duk­tu ozna­cza­my tek­stem „Do­stęp­ny”, nie samą zie­lo­ną kropką. Użyt­kow­nik nie­roz­róż­nia­ją­cy barw otrzy­mu­je wtedy tę samą in­for­ma­cję i wie, co po­pra­wić.

Kla­wia­tu­ra, fokus i for­mu­larz

Fokus to ak­tu­al­ne miej­sce ob­słu­gi kla­wia­tu­rą. Kla­wisz Tab prze­no­si go zwykle między ak­tyw­ny­mi kon­tro­l­ka­mi, a Shift z Tab cofa. Wi­docz­ny obrys po­zwa­la zo­rien­to­wać się, który ele­ment zo­sta­nie uru­cho­mio­ny. Usu­nię­cie obrysu bez za­mien­ni­ka spra­wia, że użyt­kow­nik po­ru­sza się po stro­nie bez wska­za­nia po­ło­że­nia. Styl dla na­je­cha­nia myszą nie za­stę­pu­je stylu fokusu.
1
2
3
4
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
}
Na­tyw­ny przy­cisk ma za­cho­wa­nia, któ­rych zwykły <div> nie otrzy­mu­je au­to­ma­tycz­nie. Użyj <button> do wy­ko­na­nia dzia­ła­nia i <a> do przej­ścia pod inny adres. Nie za­mie­niaj każ­de­go napisu w ele­ment z do­dat­nim tabindex, bo wpro­wa­dzisz trudną do utrzy­ma­nia ko­lej­ność. Ko­lej­ność kla­wia­tu­ry po­win­na od­po­wia­dać lo­gicz­ne­mu prze­bie­go­wi: pro­dukt, ilość, dane klien­ta i za­mó­wie­nie.
Ety­kie­ta pola wy­ja­śnia, co wpisać, i wiąże podpis z kon­tro­l­ką. Użyj label z for zgod­nym z id pola, tak jak w lekcji for­mu­la­rzy. placeholder znika pod­czas pi­sa­nia i nie za­stę­pu­je ety­kie­ty. Ko­mu­ni­kat błędu po­wi­nien wska­zy­wać pole oraz sposób po­pra­wie­nia, a nie ogra­ni­czać się do ogól­ne­go „Błąd”. Po wy­sła­niu sprawdź także in­for­ma­cję o wyniku ope­ra­cji.
Pu­łap­ka kla­wia­tu­ro­wa to sy­tu­acja, gdy fokus da się wpro­wa­dzić do ele­men­tu, ale nie da się z niego wyjść stan­dar­do­wą ob­słu­gą. Ręczny test obej­mu­je menu, okna dia­lo­go­we i od­twa­rza­cze, a nie tylko pola tek­sto­we. Sprawdź, czy żaden stały na­głó­wek nie za­sła­nia ak­tu­al­nej kon­tro­l­ki i czy funk­cje nie wy­ma­ga­ją wy­łącz­nie prze­cią­gnię­cia myszą.

Po­więk­sze­nie i ręczna kon­tro­la

Po­więk­sze­nie tekstu do 200 pro­cent nie po­win­no po­zba­wiać treści lub funk­cji zgod­nie z od­po­wied­nim kry­te­rium WCAG. Osob­nym wy­ma­ga­niem jest prze­le­wa­nie treści, czyli do­pa­so­wa­nie układu do wą­skie­go ob­sza­ru bez ko­niecz­no­ści prze­wi­ja­nia całych aka­pi­tów w dwóch kie­run­kach. Dla pio­no­wo prze­wi­ja­nej strony punk­tem od­nie­sie­nia jest sze­ro­kość 320 pik­se­li CSS. Pewne treści, na przy­kład tabela danych wy­ma­ga­ją­ca dwóch wy­mia­rów, mają wy­jąt­ki.
Sprawdź sklep w wąskim oknie i przy po­więk­sze­niu prze­glą­dar­ki. Czy nazwa pro­duk­tu mieści się w karcie? Czy ko­mu­ni­kat błędu nie leży pod przy­ci­skiem? Czy for­mu­larz nadal da się wysłać? Nie blokuj ska­lo­wa­nia w de­kla­ra­cji ob­sza­ru wy­świe­tla­nia. Zna­cze­nie sze­ro­ko­ści 320 px oraz wy­jąt­ków wy­ja­śnia opis prze­le­wa­nia treści W3C.
Au­to­ma­tycz­ny skaner znaj­du­je część błędów, na przy­kład brak ety­kie­ty lub za niski kon­trast w pro­stym przy­pad­ku. Nie roz­strzy­gnie sam, czy opis zdję­cia pra­wi­dło­wo oddaje jego zna­cze­nie ani czy ko­lej­ność czy­ta­nia jest zro­zu­mia­ła. Połącz jego wyniki z testem kla­wia­tu­ry, po­więk­sze­nia i prze­glą­dem treści. Lista kry­te­riów WCAG W3C służy do okre­śle­nia za­kre­su takiej kon­tro­li.

Na eg­za­mi­nie

W pi­sem­nym py­ta­niu od­róż­nij opis obrazu od dymka pod­po­wie­dzi: alt nie jest tym samym co title. Kon­trast do­ty­czy kon­kret­nej pary barw, a se­man­ty­ka zna­cze­nia struk­tu­ry. Naj­lep­sza od­po­wiedź wynika z po­trzeb wska­za­ne­go od­bior­cy, nie z ogól­nej obiet­ni­cy, że strona wy­glą­da no­wo­cze­śnie.
Pu­łap­ka: po­zy­tyw­ny wynik wa­li­da­to­ra HTML nie po­twier­dza pełnej zgod­no­ści z WCAG.
W prak­ty­ce wy­ko­naj przej­ście od po­cząt­ku strony do wy­sła­nia for­mu­la­rza bez użycia myszy. Sprawdź opisy ob­ra­zów, ety­kie­ty i odczyt ko­mu­ni­ka­tów. Na­stęp­nie po­większ widok i popraw miej­sca utraty treści. Taki test po­ka­zu­je rze­czy­wi­ste dzia­ła­nie wi­try­ny, a nie tylko obec­ność kilku atry­bu­tów w kodzie.

Ściąga

Obszar
Kon­tro­la
Zna­czą­cy obraz
opis zna­cze­nia w alt
De­ko­ra­cja
pusty alt
Zwykły tekst AA
kon­trast co naj­mniej 4,5:1
Duży tekst AA
kon­trast co naj­mniej 3:1
For­mu­larz
ety­kie­ty, ko­mu­ni­ka­ty, in­struk­cje
Kla­wia­tu­ra
lo­gicz­na ko­lej­ność i wi­docz­ny fokus
Po­więk­sze­nie
brak utraty treści przy 200 pro­cen­tach
Prze­le­wa­nie treści
zwykła treść przy 320 px CSS
Ocena
na­rzę­dzia oraz ręczne testy
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Projekt strony: układ sekcji, makieta, paleta barw, czcionkinastępna: CMS: WordPress i Joomla!, instalacja, panel, szablony, wtyczki, aktualizacje, rolespis działu: Projekt, CMS, testowanie, publikacja

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuDokumenty CKEFormularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03JavaScript na egzaminie INF.03Zapytania SQL na egzaminie INF.03Bazy danych i SQL na egzaminie INF.03pokaż więcej (85)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulaminKontakt
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.