{"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-kontrastniho-pomeru","status":"publish","type":"post","link":"https:\/\/thecodest.co\/cs\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 b\u011b\u017en\u00e9 probl\u00e9my s p\u0159\u00edstupnost\u00ed webu, kter\u00e9 je t\u0159eba zn\u00e1t"},"content":{"rendered":"

Probl\u00e9m kontrastn\u00edho pom\u011bru<\/h2>\n\n\n\n

Nej\u010dast\u011bj\u0161\u00edm probl\u00e9mem s p\u0159\u00edstupnost\u00ed, se kter\u00fdm jsem se v pr\u016fb\u011bhu let setkal, je. probl\u00e9m s kontrastem a p\u0159\u00edstupnost\u00ed barev<\/b>, \u0161patn\u00fd kontrastn\u00ed pom\u011br zt\u011b\u017euje viditelnost obsahu str\u00e1nky, co\u017e je pro u\u017eivatele, v\u010detn\u011b t\u011bch se zrakov\u00fdm posti\u017een\u00edm, velmi \u0161kodliv\u00e9. <\/p>\n\n\n\n

Kontrast je m\u011b\u0159\u00edtkem rozd\u00edlu ve vn\u00edman\u00e9 \"sv\u00edtivosti\" nebo jasu dvou barev, nap\u0159\u00edklad rozd\u00edlu mezi barvou pozad\u00ed a barvou pop\u0159ed\u00ed obsahu str\u00e1nky. Pod\u00edvejme se na tento naviga\u010dn\u00ed panel.<\/p>\n\n\n\n

\"naviga\u010dn\u00ed<em>pruh<\/em>se<em>zelen\u00fdmi<\/em>n\u00e1pisy\"<\/figure>\n\n\n\n

\u0158ekn\u011bme, \u017ee se va\u0161emu klientovi tato zelenkav\u00e1 barva opravdu l\u00edb\u00ed a pova\u017euje ji za \u00fa\u017easnou, ale je zde probl\u00e9m s kontrastem. M\u00e1me #FFFFFF<\/code> pozad\u00ed s #83A94C<\/code> barva textu, co\u017e vede ke kontrastn\u00edmu pom\u011bru 2,71:1, kter\u00fd je mnohem ni\u017e\u0161\u00ed ne\u017e minim\u00e1ln\u00ed hodnota. 4.5:1<\/strong> pot\u0159ebn\u00e9. Pro zji\u0161t\u011bn\u00ed tohoto probl\u00e9mu m\u00e1me n\u011bkolik \u0159e\u0161en\u00ed: <\/p>\n\n\n\n

    \n
  1. Pou\u017eijte online n\u00e1stroj pro kontrolu kontrastu, jako je Kontrola kontrastu Webaim<\/a>, kter\u00fd vypo\u010d\u00edt\u00e1 kontrastn\u00ed pom\u011br a poskytne v\u00e1m informace o tom. P\u0159edat<\/strong> nebo Selh\u00e1n\u00ed<\/strong> stupe\u0148.<\/li>\n\n\n\n
  2. Pou\u017eijte jedno z mnoha roz\u0161\u00ed\u0159en\u00ed pro kontrolu kontrastu v prohl\u00ed\u017ee\u010di, nap\u0159: Kontrola kontrastu barev WCAG<\/a>.<\/li>\n\n\n\n
  3. Vyzkou\u0161ejte integrovanou kontrolu kontrastu v prohl\u00ed\u017ee\u010di. Chcete-li jej pou\u017e\u00edt v prohl\u00ed\u017ee\u010di Google Chrome, otev\u0159ete n\u00e1stroje pro v\u00fdvoj\u00e1\u0159e, prohl\u00e9dn\u011bte si c\u00edlov\u00fd prvek (nap\u0159. odkaz Home na\u0161eho naviga\u010dn\u00edho panelu), p\u0159ejd\u011bte na vlastnost CSS color a kliknut\u00edm na obd\u00e9ln\u00edk barvy otev\u0159ete n\u00e1stroj pro v\u00fdb\u011br barvy, v doln\u00ed \u010d\u00e1sti se zobraz\u00ed hodnota kontrastn\u00edho pom\u011bru, rozbalte ji a z\u00edskejte dal\u0161\u00ed podrobnosti. Pro Firefox je postup naprosto stejn\u00fd, jen v lev\u00e9m doln\u00edm rohu n\u00e1stroje pro v\u00fdb\u011br barev je zobrazen mal\u00fd rozd\u00edl v pom\u011bru.<\/li>\n<\/ol>\n\n\n\n
    \"\u010dern\u00e9<em>pozad\u00ed<\/em>s<em>modr\u00fdm<\/em>k\u00f3dem\"<\/figure>\n\n\n\n

    Chcete-li z\u00edskat v\u00edce informac\u00ed o kontrastu, pod\u00edvejte se na tuto str\u00e1nku \u010cl\u00e1nek o kontrastu a p\u0159\u00edstupnosti barev<\/a>.<\/p>\n\n\n\n

    Probl\u00e9m s textem odkazu<\/h2>\n\n\n\n

    Odkazy jsou d\u016fle\u017eitou sou\u010d\u00e1st\u00ed web<\/a> v dne\u0161n\u00ed dob\u011b, a proto je jejich zp\u0159\u00edstupn\u011bn\u00ed velmi d\u016fle\u017eit\u00e9. Odkaz mus\u00ed d\u00e1vat smysl a informovat u\u017eivatele o jeho kontextu, tak\u017ee neinformativn\u00ed odkaz s textem typu p\u0159e\u010dt\u011bte si v\u00edce, klikn\u011bte zde, zkontrolujte podrobnosti nen\u00ed p\u0159\u00edli\u0161 u\u017eite\u010dn\u00fd, tak\u017ee m\u00edsto p\u0159id\u00e1n\u00ed \"zkontrolujte podrobnosti\" pro produkt<\/a> podrobnosti, nap\u0159\u00edklad pou\u017eit\u00ed n\u00e1zvu produktu, jako je \"Mandaloriansk\u00e1 helma\", je lep\u0161\u00ed a informativn\u011bj\u0161\u00ed. Slova jako nap\u0159. klikn\u011bte zde<\/code> nebo v\u00edce o<\/code> lze vynechat, proto\u017ee odkaz je standardn\u011b klikac\u00ed a n\u011bco jako \"v\u00edce o dne\u0161n\u00edch zpr\u00e1v\u00e1ch\" lze zkr\u00e1tit na \"dne\u0161n\u00ed zpr\u00e1vy\". Neexistuje \u017e\u00e1dn\u00e9 zvl\u00e1\u0161tn\u00ed pravidlo nebo omezen\u00ed t\u00fdkaj\u00edc\u00ed se d\u00e9lky odkazu, tzv. odkaz mus\u00ed b\u00fdt \u010diteln\u00fd<\/b> a dostate\u010dn\u011b dlouh\u00fd, aby bylo mo\u017en\u00e9 dob\u0159e popsat jeho \u00fa\u010del.<\/p>\n\n\n\n

    Obr\u00e1zky jako odkazy jsou \u0161iroce pou\u017e\u00edvan\u00fdm vzorem, tak\u017ee se mus\u00ed \u0159\u00eddit stejn\u00fdmi pravidly, o kter\u00fdch jsme hovo\u0159ili v\u00fd\u0161e. Atribut alt obr\u00e1zku bude hr\u00e1t roli textu odkazu a bude ohla\u0161ov\u00e1n \u010dte\u010dkami obrazovky. P\u0159i zach\u00e1zen\u00ed s obr\u00e1zky jako odkazy existuje v\u00edce sc\u00e9n\u00e1\u0159\u016f, pokud je obr\u00e1zek jedin\u00fdm obsahem odkazu, pak mus\u00ed m\u00edt atribut alt, pokud je v odkazu n\u011bjak\u00fd text a obr\u00e1zek, pak m\u016f\u017eeme atribut alt vynechat, zde je n\u011bkolik p\u0159\u00edklad\u016f:<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Oznámení">\r\n<\/a><\/code><\/pre>\n\n\n\n
    Pod\u00edvejte se na n\u011bkter\u00e9 odkazy zde a p\u0159e\u010dt\u011bte si o p\u0159\u00edstupnosti odkaz\u016f:Text a vzhled odkazu<\/a>, Funk\u010dn\u00ed obr\u00e1zky<\/a>.<\/p>\n\n\n\n
    Chyb\u011bj\u00edc\u00ed popisek vstupn\u00edho formul\u00e1\u0159e<\/h2>\n\n\n\n
    \"input<em>labels<\/em>s<em>modr\u00fdm<\/em>tla\u010d\u00edtkem\"<\/figure>\n\n\n\n
    V\u0161ichni jsme se ji\u017e setkali s formul\u00e1\u0159ov\u00fdmi vstupy bez popisku a pouze se z\u00e1stupn\u00fdm znakem, kter\u00fd popisuje \u00fa\u010del vstupu. Prvn\u00ed pozn\u00e1mka je, \u017ee jakmile u\u017eivatel vypln\u00ed v\u0161echny vstupy a z\u00e1stupn\u00e9 symboly ji\u017e nebudou v dohledu, nebudeme m\u00edt \u017e\u00e1dn\u00fd vizu\u00e1ln\u00ed kontext o \u00fa\u010delu vstup\u016f, ale nechme n\u00e1s<\/a> zam\u011b\u0159te se na p\u0159\u00edstupnost. <\/p>\n\n\n\n
    P\u0159idru\u017een\u00ed \u0161t\u00edtek<\/code> na vstup n\u00e1m p\u0159in\u00e1\u0161\u00ed dv\u011b hlavn\u00ed v\u00fdhody: \u010dte\u010dka obrazovky p\u0159e\u010dte \u0161t\u00edtek, kdy\u017e je u\u017eivatel zam\u011b\u0159en na vstup formul\u00e1\u0159e, a kdy\u017e je na \u0161t\u00edtek kliknuto nebo se ho dotknete, prohl\u00ed\u017ee\u010d p\u0159ed\u00e1 zam\u011b\u0159en\u00ed na p\u0159idru\u017een\u00fd vstup. Jednoduch\u00fdm \u0159e\u0161en\u00edm takov\u00e9 situace je prost\u011b p\u0159idat \u0161t\u00edtky n\u00e1sleduj\u00edc\u00edm zp\u016fsobem:<\/p>\n\n\n\n
        K\u0159estn\u00ed jm\u00e9no\n\n    \n  \n\n    P\u0159\u00edjmen\u00ed\n\n    \n  \n\n    E-mail\n\n    \n  \n\n    Odeslat\n  \n\n```<\/code><\/pre>\n\n\n\n
    To je v\u0161e, v\u0161echny vstupy maj\u00ed p\u0159i\u0159azen\u00e9 \u0161t\u00edtky, tak\u017ee jsou p\u0159\u00edstupn\u00e9 v\u0161em. M\u016f\u017eeme dokonce odstranit z\u00e1stupn\u00e9 symboly, abychom se vyhnuli duplicitn\u00edmu \u00fa\u010delu vstupu, ale v\u0161ichni v\u00edme, \u017ee re\u00e1ln\u00e9 sc\u00e9n\u00e1\u0159e nejsou tak snadno \u0159e\u0161iteln\u00e9, pr\u00e1v\u011b jste obdr\u017eeli n\u00e1vrh, kter\u00fd m\u00e1 tyto vstupy formul\u00e1\u0159e bez \u0161t\u00edtk\u016f, a klient nechce tuto \u010d\u00e1st zm\u011bnit. Prvn\u00edm \u0159e\u0161en\u00edm, kter\u00e9 v\u00e1s napadne, je pou\u017e\u00edt tzv. zobrazen\u00ed: \u017e\u00e1dn\u00e9;<\/code> nebo viditelnost: skryt\u00e1;<\/code> k na\u0161im \u0161t\u00edtk\u016fm, co\u017e je skryje, ale st\u00e1le tam jsou, \u017ee? Tyto vlastnosti skr\u00fdvaj\u00ed prvky nejen na obrazovce, ale tak\u00e9 pro u\u017eivatele \u010dte\u010dky obrazovky, tak\u017ee to n\u00e1\u0161 probl\u00e9m nevy\u0159e\u0161\u00ed.<\/p>\n\n\n\n
    M\u016f\u017eeme pou\u017e\u00edt vzor klipu<\/strong> k vy\u0159e\u0161en\u00ed tohoto probl\u00e9mu. T\u00edmto zp\u016fsobem obsah vizu\u00e1ln\u011b skryjeme, ale z\u00e1rove\u0148 ho poskytneme \u010dten\u00e1\u0159\u016fm obrazovky. Vytvo\u0159\u00edme n\u00e1sleduj\u00edc\u00ed CSS pouze pro sr<\/code> a pou\u017e\u00edt ji na v\u0161echny \u0161t\u00edtky:<\/p>\n\n\n\n
     .sr-only:not(:focus):not(:active) {\n   clip: rect(0 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
    T\u00edm se na\u0161e \u0161t\u00edtky skryj\u00ed, budou dostupn\u00e9 pro \u010dte\u010dky obrazovky a budou odpov\u00eddat na\u0161emu designu. Str\u00e1nka :not(:focus):not(:active)<\/code> pseudot\u0159\u00edda zabra\u0148uje zaost\u0159iteln\u00fdm prvk\u016fm, jako jsou nap\u0159. a<\/code>, tla\u010d\u00edtko<\/code>, vstup<\/code> p\u0159ed skryt\u00edm p\u0159i p\u0159ij\u00edm\u00e1n\u00ed zam\u011b\u0159en\u00ed.<\/p>\n\n\n\n
    \u017d\u00e1dn\u00fd indik\u00e1tor zaost\u0159en\u00ed<\/h2>\n\n\n\n
    Kdysi d\u00e1vno jsem to ud\u011blal v glob\u00e1ln\u00edm souboru styl\u016f CSS:<\/p>\n\n\n\n
    * {\noutline: none; \/* stra\u0161n\u00e1 chyba *\/\n}<\/code><\/pre>\n\n\n\n
    Kolem roku 2020 jsem si v\u0161iml, \u017ee se na vstupech formul\u00e1\u0159e v prohl\u00ed\u017ee\u010di Google Chrome objevuj\u00ed \u010dern\u00e9 okraje, kdy\u017e je na n\u011b zaost\u0159eno, nebo na tla\u010d\u00edtk\u00e1ch, kdy\u017e se do nich dostanete na kart\u011b - to bylo opravdu divn\u00e9, proto\u017ee jsem tomu tehdy nerozum\u011bl, po n\u011bjak\u00e9m v\u00fdzkumu jsem zjistil, \u017ee je to kv\u016fli vlastnosti CSS outline, tak\u017ee odstran\u011bn\u00ed tohoto \"probl\u00e9mu\" pro m\u011b vy\u0159e\u0161ilo.<\/p>\n\n\n\n
    V t\u00e9 dob\u011b jsem netu\u0161il, jak se to m\u00e1 spr\u00e1vn\u011b d\u011blat.  Pot\u00e9, co jsem trochu p\u00e1tral po tom, co a jak je s t\u00edmto nov\u00fdm v\u00fdchoz\u00edm nastaven\u00edm, jsem zjistil, \u017ee obrys je indik\u00e1torem zam\u011b\u0159en\u00ed prvku a v p\u0159\u00edpad\u011b jeho odstran\u011bn\u00ed mus\u00ed b\u00fdt zaji\u0161t\u011bno zjevn\u00e9 stylizov\u00e1n\u00ed zam\u011b\u0159en\u00ed, co\u017e je v podstat\u011b to, co jsem d\u011blal, pova\u017eov\u00e1no za \u0161patn\u00fd postup. Indik\u00e1tory zam\u011b\u0159en\u00ed si m\u016f\u017eete upravit podle sv\u00e9ho uv\u00e1\u017een\u00ed, ale jejich \u00fapln\u00e9 odstran\u011bn\u00ed z webu je velk\u00fdm probl\u00e9mem pro p\u0159\u00edstupnost. P\u0159izp\u016fsoben\u00ed stylov\u00e1n\u00ed zam\u011b\u0159en\u00ed prvku je nap\u0159\u00edklad pom\u011brn\u011b snadn\u00e9:<\/p>\n\n\n\n
     a:focus {\n   outline: 4px solid #ee7834;\n   outline-offset: 4px;\n }<\/code><\/code><\/pre>\n\n\n\n
    N\u00e1stroje pro zp\u0159\u00edstupn\u011bn\u00ed<\/h2>\n\n\n\n
    Kontrola v\u0161ech probl\u00e9m\u016f, o kter\u00fdch jsme hovo\u0159ili, m\u016f\u017ee b\u00fdt velmi n\u00e1ro\u010dn\u00e1, zejm\u00e9na s v\u011bdom\u00edm, \u017ee je t\u0159eba pokr\u00fdt je\u0161t\u011b mnoho dal\u0161\u00edch v\u011bc\u00ed t\u00fdkaj\u00edc\u00edch se p\u0159\u00edstupnosti, tak\u017ee abychom se s p\u0159\u00edstupnost\u00ed vypo\u0159\u00e1dali, m\u00e1me 2 skv\u011bl\u00e1 roz\u0161\u00ed\u0159en\u00ed prohl\u00ed\u017ee\u010de.<\/p>\n\n\n\n
    N\u00e1stroj pro hodnocen\u00ed WAVE<\/a> je sada hodnot\u00edc\u00edch n\u00e1stroj\u016f, kter\u00e1 n\u00e1m pom\u00e1h\u00e1 zp\u0159\u00edstupnit n\u00e1\u0161 webov\u00fd obsah. Je k dispozici v prohl\u00ed\u017ee\u010d\u00edch Google Chrome a Firefox. <\/p>\n\n\n\n
    Vyzkou\u0161\u00edme si to na mal\u00e9 webov\u00e9 str\u00e1nce obsahuj\u00edc\u00ed naviga\u010dn\u00ed panel a vstup, kter\u00e9mu chyb\u00ed popisek, a uvid\u00edme, co n\u00e1m to vr\u00e1t\u00ed.Po instalaci roz\u0161\u00ed\u0159en\u00ed sta\u010d\u00ed kliknout na ikonu roz\u0161\u00ed\u0159en\u00ed, abychom ho mohli pou\u017e\u00edt.<\/p>\n\n\n\n
    \"b\u00edl\u00e9<em>okno<\/em>s<em>\u0161ed\u00fdmi<\/em>d\u00edly\"<\/figure>\n\n\n\n
    Na kart\u011b Souhrn je zobrazena 1 chyba (chyb\u011bj\u00edc\u00ed popisek prvku formul\u00e1\u0159e), 2 chyby kontrastu a 1 upozorn\u011bn\u00ed (chyb\u011bj\u00edc\u00ed struktura nadpisu), jak vid\u00edte, v\u00fdsledek je velmi p\u0159ehledn\u00fd a podrobn\u00fd. Karta Podrobnosti zobraz\u00ed seznam v\u0161ech chyb, upozorn\u011bn\u00ed a prvk\u016f. M\u016f\u017eeme tak\u00e9 interagovat p\u0159\u00edmo na str\u00e1nce kliknut\u00edm na tyto \u010derven\u00e9 obd\u00e9ln\u00edky a zkontrolovat popis a typ chyby.<\/p>\n\n\n\n
    N\u00e1stroje Axe DevTools<\/a> je v\u00fdkonn\u00e1 a p\u0159esn\u00e1 sada n\u00e1stroj\u016f pro p\u0159\u00edstupnost. Je k dispozici v prohl\u00ed\u017ee\u010d\u00edch Google Chrome i Firefox. Po instalaci roz\u0161\u00ed\u0159en\u00ed budeme muset otev\u0159\u00edt n\u00e1stroje pro v\u00fdvoj\u00e1\u0159e prohl\u00ed\u017ee\u010de, p\u0159ej\u00edt na kartu axe DevTools a kliknout na mo\u017enost Skenovat v\u0161echny m\u00e9 str\u00e1nky.<\/p>\n\n\n\n
    \"DevTools<em>okno<\/em>s<em>\u010dern\u00fdmi<\/em>\u0161ed\u00fdmi_\u00faseky\"<\/figure>\n\n\n\n
    M\u016f\u017eete vid\u011bt, \u017ee Axe DevTools hl\u00e1s\u00ed stejn\u00e9 probl\u00e9my s hodnot\u00edc\u00edm n\u00e1strojem WAVE, co\u017e jsou probl\u00e9my s kontrastem, chyb\u011bj\u00edc\u00edm prvkem formul\u00e1\u0159e a chyb\u011bj\u00edc\u00edm prvkem nadpisu, a dokonce n\u00e1m poskytl n\u011bkolik osv\u011bd\u010den\u00fdch postup\u016f, kter\u00e9 bychom m\u011bli dodr\u017eovat.<\/p>\n\n\n\n
    Dal\u0161\u00edm zp\u016fsobem, jak otestovat p\u0159\u00edstupnost, je pou\u017e\u00edt \u010dte\u010dku obrazovky a otestovat s n\u00ed sv\u00e9 webov\u00e9 str\u00e1nky.K dispozici je mnoho \u010dte\u010dek obrazovky, jmenujme alespo\u0148 n\u011bkter\u00e9:<\/p>\n\n\n\n