{"id":3142,"date":"2022-11-15T10:09:22","date_gmt":"2022-11-15T10:09:22","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/4-common-web-accessibility-issues-to-know\/"},"modified":"2026-03-09T13:10:53","modified_gmt":"2026-03-09T13:10:53","slug":"problem-ze-wspolczynnikiem-kontrastu","status":"publish","type":"post","link":"https:\/\/thecodest.co\/pl\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 typowe kwestie zwi\u0105zane z dost\u0119pno\u015bci\u0105 stron internetowych"},"content":{"rendered":"

Kwestia wsp\u00f3\u0142czynnika kontrastu<\/h2>\n\n\n\n

Najcz\u0119stszym problemem z dost\u0119pno\u015bci\u0105, z jakim spotykam si\u0119 od lat, jest Problem z kontrastem i dost\u0119pno\u015bci\u0105 kolor\u00f3w<\/b>Z\u0142y wsp\u00f3\u0142czynnik kontrastu sprawi, \u017ce trudno b\u0119dzie zobaczy\u0107 zawarto\u015b\u0107 strony, co b\u0119dzie bardzo szkodliwe dla u\u017cytkownik\u00f3w, w tym os\u00f3b z wadami wzroku. <\/p>\n\n\n\n

Kontrast jest miar\u0105 r\u00f3\u017cnicy w postrzeganej \"luminancji\" lub jasno\u015bci mi\u0119dzy dwoma kolorami, na przyk\u0142ad jest to r\u00f3\u017cnica mi\u0119dzy kolorem t\u0142a a kolorem pierwszego planu zawarto\u015bci strony. Sp\u00f3jrzmy na ten pasek nawigacyjny.<\/p>\n\n\n\n

\"pasek<\/figure>\n\n\n\n

Za\u0142\u00f3\u017cmy, \u017ce klient naprawd\u0119 lubi ten zielonkawy kolor i uwa\u017ca go za niesamowity, ale jest tu problem z kontrastem. Mamy #FFFFFF<\/code> t\u0142o z #83A94C<\/code> kolor tekstu, co daje wsp\u00f3\u0142czynnik kontrastu 2,71:1, kt\u00f3ry jest znacznie poni\u017cej minimum 4.5:1<\/strong> potrzebne. Aby wykry\u0107 ten problem, mamy wiele rozwi\u0105za\u0144: <\/p>\n\n\n\n

    \n
  1. Skorzystaj z internetowego narz\u0119dzia do sprawdzania kontrastu, takiego jak Webaim Contrast Checker<\/a>kt\u00f3ry obliczy wsp\u00f3\u0142czynnik kontrastu i poda warto\u015b\u0107 przepustka<\/strong> lub Niepowodzenie<\/strong> stopie\u0144.<\/li>\n\n\n\n
  2. U\u017cyj jednego z wielu rozszerze\u0144 sprawdzaj\u0105cych kontrast w przegl\u0105darce, np: Sprawdzanie kontrastu kolor\u00f3w WCAG<\/a>.<\/li>\n\n\n\n
  3. Wypr\u00f3buj zintegrowane narz\u0119dzie do sprawdzania kontrastu w przegl\u0105darkach. Aby u\u017cy\u0107 go w Google Chrome, otw\u00f3rz narz\u0119dzia deweloperskie, sprawd\u017a docelowy element (np. link Home naszego paska nawigacyjnego), przejd\u017a do w\u0142a\u015bciwo\u015bci koloru CSS i kliknij prostok\u0105t koloru, aby otworzy\u0107 selektor kolor\u00f3w, na dole zostanie wy\u015bwietlona warto\u015b\u0107 wsp\u00f3\u0142czynnika kontrastu, rozwi\u0144 j\u0105, aby uzyska\u0107 wi\u0119cej szczeg\u00f3\u0142\u00f3w. Proces jest dok\u0142adnie taki sam dla przegl\u0105darki Firefox, tylko niewielka r\u00f3\u017cnica w wsp\u00f3\u0142czynniku jest pokazana w lewym dolnym rogu selektora kolor\u00f3w.<\/li>\n<\/ol>\n\n\n\n
    \"czarne<em>t\u0142o<\/em><\/figure>\n\n\n\n

    Aby uzyska\u0107 wi\u0119cej informacji na temat kontrastu, sprawd\u017a to Artyku\u0142 na temat kontrastu i dost\u0119pno\u015bci kolor\u00f3w<\/a>.<\/p>\n\n\n\n

    Problem z tekstem linku<\/h2>\n\n\n\n

    Linki s\u0105 wa\u017cn\u0105 cz\u0119\u015bci\u0105 sie\u0107<\/a> w dzisiejszych czasach, wi\u0119c uczynienie ich dost\u0119pnymi jest bardzo wa\u017cne. Link musi mie\u0107 sens i informowa\u0107 u\u017cytkownika o jego kontek\u015bcie, wi\u0119c nieinformacyjny link z tekstem takim jak czytaj wi\u0119cej, kliknij tutaj, sprawd\u017a szczeg\u00f3\u0142y nie jest zbyt pomocny, wi\u0119c zamiast dodawa\u0107 \"sprawd\u017a szczeg\u00f3\u0142y\" dla produkt<\/a> szczeg\u00f3\u0142y, na przyk\u0142ad u\u017cycie nazwy produktu, takiej jak \"The Mandalorian Helmet\", jest lepsze i bardziej pouczaj\u0105ce. S\u0142owa takie jak kliknij tutaj<\/code> lub wi\u0119cej o<\/code> mo\u017cna pomin\u0105\u0107, poniewa\u017c link jest domy\u015blnie klikalny, a co\u015b takiego jak \"wi\u0119cej o dzisiejszych wiadomo\u015bciach\" mo\u017cna skr\u00f3ci\u0107 do \"dzisiejsze wiadomo\u015bci\". Nie ma specjalnych zasad ani ogranicze\u0144 dotycz\u0105cych d\u0142ugo\u015bci link\u00f3w, a link musi by\u0107 czytelny<\/b> i wystarczaj\u0105co d\u0142ugi, aby dobrze opisa\u0107 jego przeznaczenie.<\/p>\n\n\n\n

    Obrazy jako linki s\u0105 szeroko stosowanym wzorcem, wi\u0119c musz\u0105 by\u0107 zgodne z tymi samymi zasadami, o kt\u00f3rych m\u00f3wili\u015bmy powy\u017cej. Atrybut alt obrazu b\u0119dzie odgrywa\u0142 rol\u0119 tekstu linku i b\u0119dzie og\u0142aszany przez czytniki ekranu. Istnieje wiele scenariuszy traktowania obraz\u00f3w jako link\u00f3w, je\u015bli obraz jest jedyn\u0105 tre\u015bci\u0105 linku, musi mie\u0107 atrybut alt, je\u015bli link zawiera tekst i obraz, mo\u017cemy pomin\u0105\u0107 atrybut alt, oto kilka przyk\u0142ad\u00f3w:<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Powiadomienia">\r\n<\/a><\/code><\/pre>\n\n\n\n
    Sprawd\u017a kilka link\u00f3w tutaj, aby przeczyta\u0107 o dost\u0119pno\u015bci link\u00f3w:Tekst i wygl\u0105d linku<\/a>, Obrazy funkcjonalne<\/a>.<\/p>\n\n\n\n
    Brak etykiety w formularzu wej\u015bciowym<\/h2>\n\n\n\n
    \"input<em>labels<\/em><\/figure>\n\n\n\n
    Wszyscy widzieli\u015bmy ju\u017c te wej\u015bcia formularzy bez etykiety i tylko symbol zast\u0119pczy opisuj\u0105cy cel wej\u015bcia. Pierwsz\u0105 uwag\u0105 jest to, \u017ce gdy tylko u\u017cytkownik wype\u0142ni wszystkie dane wej\u015bciowe, a symbole zast\u0119pcze nie b\u0119d\u0105 ju\u017c widoczne, nie b\u0119dziemy mieli wizualnego kontekstu na temat celu danych wej\u015bciowych, ale niech my<\/a> skupi\u0107 si\u0119 na dost\u0119pno\u015bci. <\/p>\n\n\n\n
    Powi\u0105zanie etykieta<\/code> do wej\u015bcia daje nam dwie g\u0142\u00f3wne korzy\u015bci, czytnik ekranu odczyta etykiet\u0119, gdy u\u017cytkownik skupi si\u0119 na wej\u015bciu formularza, a gdy etykieta zostanie klikni\u0119ta lub dotkni\u0119ta \/ dotkni\u0119ta, przegl\u0105darka przeka\u017ce fokus do powi\u0105zanego z ni\u0105 wej\u015bcia. \u0141atwym rozwi\u0105zaniem dla tego rodzaju sytuacji jest po prostu dodanie etykiet w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n\n\n\n
        Imi\u0119\n\n    \n  \n\n    Nazwisko\n\n    \n  \n\n    E-mail\n\n    \n  \n\n    Prze\u015blij\n  \n\n```<\/code><\/pre>\n\n\n\n
    To wszystko, wszystkie dane wej\u015bciowe maj\u0105 powi\u0105zane etykiety, dzi\u0119ki czemu s\u0105 dost\u0119pne dla wszystkich. Mo\u017cemy nawet usun\u0105\u0107 symbole zast\u0119pcze, aby unikn\u0105\u0107 powielania celu wprowadzania danych, ale wszyscy wiemy, \u017ce rzeczywiste scenariusze nie s\u0105 tak \u0142atwe do rozwi\u0105zania, w\u0142a\u015bnie otrzyma\u0142e\u015b projekt, kt\u00f3ry ma te dane wej\u015bciowe formularza bez etykiet, a klient nie chce zmienia\u0107 tej cz\u0119\u015bci. Pierwszym rozwi\u0105zaniem, kt\u00f3re przychodzi na my\u015bl, jest zastosowanie metody display: none;<\/code> lub widoczno\u015b\u0107: ukryta;<\/code> do naszych etykiet, to je ukryje, ale nadal tam s\u0105, prawda? Te w\u0142a\u015bciwo\u015bci ukrywaj\u0105 elementy nie tylko na ekranie, ale tak\u017ce dla u\u017cytkownik\u00f3w czytnik\u00f3w ekranu, wi\u0119c nie rozwi\u0105\u017ce to naszego problemu.<\/p>\n\n\n\n
    Mo\u017cemy u\u017cy\u0107 wz\u00f3r klipu<\/strong> aby to rozwi\u0105za\u0107. W ten spos\u00f3b ukryjemy zawarto\u015b\u0107 wizualnie, a jednocze\u015bnie udost\u0119pnimy j\u0105 czytnikom ekranu. Stworzymy nast\u0119puj\u0105cy CSS tylko sr<\/code> i zastosowa\u0107 j\u0105 do wszystkich naszych etykiet:<\/p>\n\n\n\n
     .sr-only:not(:focus):not(:active) {\n   clip: rect(0 0 0);\n   clip-path: inset(50%);\n   height: 1px;\n   overflow: hidden;\n   position: absolute;\n   white-space: nowrap;\n   width: 1px;\n }\n<\/code><\/code><\/pre>\n\n\n\n
    Ukryje to nasze etykiety, udost\u0119pni je czytnikom ekranu i dopasuje do naszego projektu. The :not(:focus):not(:active)<\/code> pseudoklasa zapobiega fokusowaniu element\u00f3w takich jak a<\/code>, przycisk<\/code>, wk\u0142ad<\/code> przed ukryciem podczas otrzymywania skupienia.<\/p>\n\n\n\n
    Brak wska\u017anika ostro\u015bci<\/h2>\n\n\n\n
    Kiedy\u015b zrobi\u0142em to w moim globalnym arkuszu styl\u00f3w CSS:<\/p>\n\n\n\n
    * {\noutline: none; \/* okropny b\u0142\u0105d *\/\n}<\/code><\/pre>\n\n\n\n
    Oko\u0142o 2020 roku zauwa\u017cy\u0142em czarne obramowania pojawiaj\u0105ce si\u0119 na wej\u015bciach formularzy Google Chrome po ustawieniu ostro\u015bci lub na przyciskach po przej\u015bciu do zak\u0142adki - to by\u0142o naprawd\u0119 dziwne, poniewa\u017c wtedy tego nie rozumia\u0142em, po kilku badaniach dowiedzia\u0142em si\u0119, \u017ce jest to spowodowane w\u0142a\u015bciwo\u015bci\u0105 outline CSS, wi\u0119c usuni\u0119cie rozwi\u0105za\u0142o ten \"problem\" dla mnie.<\/p>\n\n\n\n
    W tamtym czasie nie mia\u0142em poj\u0119cia, jaki jest prawid\u0142owy spos\u00f3b, aby to zrobi\u0107.  Po zbadaniu powod\u00f3w i sposob\u00f3w tego nowego domy\u015blnego ustawienia dowiedzia\u0142em si\u0119, \u017ce kontur jest wska\u017anikiem fokusu elementu i je\u015bli zostanie usuni\u0119ty, nale\u017cy zapewni\u0107 oczywist\u0105 stylizacj\u0119 fokusu, w zasadzie to, co robi\u0142em, jest uwa\u017cane za z\u0142\u0105 praktyk\u0119. Mo\u017cesz dostosowa\u0107 wska\u017aniki fokusu wed\u0142ug w\u0142asnego uznania, ale ca\u0142kowite usuni\u0119cie ich ze strony internetowej jest du\u017cym problemem z dost\u0119pno\u015bci\u0105. Na przyk\u0142ad dostosowanie stylu fokusu elementu jest do\u015b\u0107 \u0142atwe:<\/p>\n\n\n\n
     a:focus {\n   outline: 4px solid #ee7834;\n   outline-offset: 4px;\n }<\/code><\/code><\/pre>\n\n\n\n
    Narz\u0119dzia dost\u0119pno\u015bci<\/h2>\n\n\n\n
    Sprawdzanie wszystkich kwestii, o kt\u00f3rych rozmawiali\u015bmy, mo\u017ce by\u0107 bardzo pracoch\u0142onne, zw\u0142aszcza wiedz\u0105c, \u017ce jest o wiele wi\u0119cej rzeczy do om\u00f3wienia na temat dost\u0119pno\u015bci, wi\u0119c aby pom\u00f3c nam poradzi\u0107 sobie z dost\u0119pno\u015bci\u0105, mamy 2 \u015bwietne rozszerzenia przegl\u0105darki.<\/p>\n\n\n\n
    Narz\u0119dzie oceny WAVE<\/a> to zestaw narz\u0119dzi do oceny, kt\u00f3ry pomaga nam uczyni\u0107 nasze tre\u015bci internetowe bardziej dost\u0119pnymi. Jest on dost\u0119pny zar\u00f3wno w przegl\u0105darce Google Chrome, jak i Firefox. <\/p>\n\n\n\n
    Wypr\u00f3bujmy to na ma\u0142ej stronie internetowej zawieraj\u0105cej pasek nawigacyjny i dane wej\u015bciowe bez etykiety i zobaczmy, co zwraca, po zainstalowaniu rozszerzenia wystarczy klikn\u0105\u0107 ikon\u0119 rozszerzenia, aby z niego skorzysta\u0107.<\/p>\n\n\n\n
    \"bia\u0142e<em>okno<\/em><\/figure>\n\n\n\n
    Zak\u0142adka Podsumowanie pokazuje 1 b\u0142\u0105d (brak etykiety w elemencie formularza), 2 b\u0142\u0119dy kontrastu i 1 alert (brak struktury nag\u0142\u00f3wka), jak wida\u0107 wynik jest bardzo przejrzysty i szczeg\u00f3\u0142owy. Zak\u0142adka Szczeg\u00f3\u0142y wy\u015bwietli list\u0119 wszystkich b\u0142\u0119d\u00f3w, alert\u00f3w i funkcji. Mo\u017cemy r\u00f3wnie\u017c wchodzi\u0107 w interakcje bezpo\u015brednio na stronie, klikaj\u0105c te czerwone prostok\u0105ty, aby sprawdzi\u0107 opis i typ b\u0142\u0119du.<\/p>\n\n\n\n
    Axe DevTools<\/a> to pot\u0119\u017cny i dok\u0142adny zestaw narz\u0119dzi dost\u0119pno\u015bci. Jest on dost\u0119pny zar\u00f3wno w przegl\u0105darce Google Chrome, jak i Firefox. Po zainstalowaniu rozszerzenia b\u0119dziemy musieli otworzy\u0107 narz\u0119dzia deweloperskie przegl\u0105darki i przej\u015b\u0107 do zak\u0142adki Axe DevTools i klikn\u0105\u0107 Skanuj wszystkie moje strony.<\/p>\n\n\n\n
    \"DevTools<em>window<\/em><\/figure>\n\n\n\n
    Mo\u017cesz zobaczy\u0107, \u017ce Axe DevTools zg\u0142osi\u0142o te same problemy z narz\u0119dziem oceny WAVE, kt\u00f3re dotycz\u0105 kontrastu, braku etykiety elementu formularza i brakuj\u0105cego elementu nag\u0142\u00f3wka, a nawet da\u0142o nam kilka najlepszych praktyk do na\u015bladowania.<\/p>\n\n\n\n
    Dodatkowym sposobem na przetestowanie dost\u0119pno\u015bci jest u\u017cycie czytnika ekranu i przetestowanie witryny za jego pomoc\u0105, dost\u0119pnych jest wiele czytnik\u00f3w ekranu, aby wymieni\u0107 tylko kilka:<\/p>\n\n\n\n