{"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":"kontrasta-attiecibas-problema","status":"publish","type":"post","link":"https:\/\/thecodest.co\/lv\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 bie\u017e\u0101k sastopamie t\u012bmek\u013ca pieejam\u012bbas jaut\u0101jumi, kas j\u0101zina"},"content":{"rendered":"

Kontrasta attiec\u012bbas probl\u0113ma<\/h2>\n\n\n\n

Visbie\u017e\u0101k sastopam\u0101 pieejam\u012bbas probl\u0113ma, ko esmu nov\u0113rojis vair\u0101ku gadu laik\u0101, ir. kontrasta un kr\u0101su pieejam\u012bbas probl\u0113ma<\/b>, slikta kontrasta attiec\u012bba apgr\u016btin\u0101s j\u016bsu lapas satura redzam\u012bbu, un tas \u013coti kait\u0113s j\u016bsu lietot\u0101jiem, tostarp lietot\u0101jiem ar redzes trauc\u0113jumiem. <\/p>\n\n\n\n

Kontrasts ir divu kr\u0101su uztveram\u0101s \"spilgtuma\" jeb spilgtuma at\u0161\u0137ir\u012bbas m\u0113rvien\u012bba, piem\u0113ram, t\u0101 ir at\u0161\u0137ir\u012bba starp j\u016bsu lapas satura fona kr\u0101su un priek\u0161pl\u0101na kr\u0101su. Apl\u016bkosim \u0161o navig\u0101cijas joslu.<\/p>\n\n\n\n

\"navig\u0101cijas<em>josla<\/em>ar<em>za\u013ciem<\/em>uzrakstiem\"<\/figure>\n\n\n\n

Pie\u0146emsim, ka j\u016bsu klientam patie\u0161\u0101m pat\u012bk \u0161\u012b za\u013cgani za\u013c\u0101 kr\u0101sa, un vi\u0146\u0161 to uzskata par lielisku, ta\u010du \u0161eit ir probl\u0113ma ar kontrastu. Mums ir #FFFFFF<\/code> fons ar #83A94C<\/code> teksta kr\u0101su, k\u0101 rezult\u0101t\u0101 kontrasta attiec\u012bba ir 2,71:1, kas ir daudz zem\u0101ka par minim\u0101lo 4.5:1<\/strong> nepiecie\u0161ams. Lai atkl\u0101tu \u0161o probl\u0113mu, mums ir vair\u0101ki risin\u0101jumi: <\/p>\n\n\n\n

    \n
  1. Izmantojiet tie\u0161saistes kontrasta p\u0101rbaudi, piem\u0113ram. Webaim kontrasta p\u0101rbaud\u012bt\u0101js<\/a>, kas apr\u0113\u0137ina kontrasta attiec\u012bbu un sniedz jums Pass<\/strong> vai Fail<\/strong> pak\u0101pe.<\/li>\n\n\n\n
  2. Izmantojiet k\u0101du no daudzajiem p\u0101rl\u016bkprogrammas kontrasta p\u0101rbaudes papla\u0161in\u0101jumiem, piem\u0113ram: WCAG kr\u0101su kontrasta p\u0101rbaud\u012bt\u0101js<\/a>.<\/li>\n\n\n\n
  3. Izm\u0113\u0123iniet p\u0101rl\u016bkprogramm\u0101 integr\u0113to kontrasta p\u0101rbaudi. Lai to izmantotu p\u0101rl\u016bkprogramm\u0101 Google Chrome, atveriet izstr\u0101des r\u012bkus, p\u0101rbaudiet m\u0113r\u0137a elementu (piem\u0113ram, m\u016bsu navig\u0101cijas joslas saiti Home), dodieties uz CSS kr\u0101sas \u012bpa\u0161\u012bbu un noklik\u0161\u0137iniet uz kr\u0101sas taisnst\u016bra, lai atv\u0113rtu kr\u0101su atlas\u012bt\u0101ju, apak\u0161\u0101 tiks par\u0101d\u012bta kontrasta attiec\u012bbas v\u0113rt\u012bba, izv\u0113rsiet to, lai ieg\u016btu s\u012bk\u0101ku inform\u0101ciju. Process ir piln\u012bgi t\u0101ds pats ar\u012b Firefox, tikai neliela at\u0161\u0137ir\u012bba attiec\u012bb\u0101 uz attiec\u012bbu ir redzama kr\u0101su atlas\u012bt\u0101ja apak\u0161\u0113j\u0101 kreisaj\u0101 pus\u0113.<\/li>\n<\/ol>\n\n\n\n
    \"melns<em>fons<\/em>ar<em>zilu<\/em>kodu\"<\/figure>\n\n\n\n

    Lai ieg\u016btu s\u012bk\u0101ku inform\u0101ciju par kontrastu, p\u0101rbaudiet \u0161o Kontrasts un kr\u0101su pieejam\u012bba<\/a>.<\/p>\n\n\n\n

    Saites teksta probl\u0113ma<\/h2>\n\n\n\n

    Saites ir liela da\u013ca no t\u012bmek\u013ca vietne<\/a> m\u016bsdien\u0101s, t\u0101p\u0113c ir \u013coti svar\u012bgi, lai tie b\u016btu pieejami. Saitei ir j\u0101b\u016bt j\u0113gpilnai un j\u0101inform\u0113 lietot\u0101js par t\u0101s kontekstu, t\u0101p\u0113c neinformat\u012bva saite ar tekstu, piem\u0113ram, lasiet vair\u0101k, noklik\u0161\u0137iniet \u0161eit, p\u0101rbaudiet inform\u0101ciju, nav p\u0101r\u0101k noder\u012bga, t\u0101p\u0113c t\u0101 viet\u0101, lai pievienotu \"p\u0101rbaudiet inform\u0101ciju\", lai produkts<\/a> inform\u0101ciju, piem\u0113ram, lab\u0101k un informat\u012bv\u0101k ir izmantot produkta nosaukumu, piem\u0113ram, \"Mandalorie\u0161u \u0137ivere\". T\u0101di v\u0101rdi k\u0101 klik\u0161\u0137iniet \u0161eit<\/code> vai vair\u0101k par<\/code> var izlaist, jo saite p\u0113c noklus\u0113juma ir klik\u0161\u0137in\u0101ma, un kaut ko t\u0101du k\u0101 \"vair\u0101k par \u0161odienas zi\u0146\u0101m\" var sa\u012bsin\u0101t l\u012bdz \"\u0161odienas zi\u0146as\". Nav \u012bpa\u0161u noteikumu vai ierobe\u017eojumu attiec\u012bb\u0101 uz saites garumu. saitei j\u0101b\u016bt salas\u0101mai<\/b> un pietiekami gar\u0161, lai sniegtu labu aprakstu par t\u0101 m\u0113r\u0137i.<\/p>\n\n\n\n

    Att\u0113li k\u0101 saites ir pla\u0161i izmantots modelis, t\u0101p\u0113c tam ir j\u0101iev\u0113ro tie pa\u0161i noteikumi, par kuriem run\u0101j\u0101m iepriek\u0161. Att\u0113la atrib\u016bts alt pild\u012bs saites teksta lomu un tiks pazi\u0146ots ekr\u0101na las\u012bt\u0101jiem. Ir vair\u0101ki scen\u0101riji, kad att\u0113li tiek uzskat\u012bti par sait\u0113m, ja att\u0113ls ir vien\u012bgais saites saturs, tad tam j\u0101b\u016bt alt atrib\u016btam, ja sait\u0113 ir k\u0101ds teksts un att\u0113ls, tad alt atrib\u016btu varam izlaist, \u0161eit ir da\u017ei piem\u0113ri:<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Pazi\u0146ojumi">\r\n<\/a><\/code><\/pre>\n\n\n\n
    P\u0101rbaudiet da\u017eas saites \u0161eit, lai izlas\u012btu par sai\u0161u pieejam\u012bbu:Saites teksts un izskats<\/a>, Funkcion\u0101lie att\u0113li<\/a>.<\/p>\n\n\n\n
    Veidlapas ievadei tr\u016bkst eti\u0137etes<\/h2>\n\n\n\n
    \"ievade<em>iez\u012bmes<\/em>ar<em>zilu<\/em>pogu\"<\/figure>\n\n\n\n
    M\u0113s visi jau esam redz\u0113ju\u0161i \u0161\u0101das veidlapas ievades bez eti\u0137etes un tikai ar ievietni, kas apraksta ievades m\u0113r\u0137i. Pirm\u0101 piez\u012bme ir t\u0101da, ka, tikl\u012bdz lietot\u0101js aizpild\u012bs visas ievades un vietz\u012bmes vairs neb\u016bs redzamas, mums neb\u016bs vizu\u0101la konteksta par ievades m\u0113r\u0137i, bet \u013caujiet. mums<\/a> piev\u0113rsiet uzman\u012bbu pieejam\u012bbai. <\/p>\n\n\n\n
    Saistot eti\u0137ete<\/code> pie ievades sniedz mums divas galven\u0101s priek\u0161roc\u012bbas - ekr\u0101na las\u012bt\u0101js nolas\u012bs eti\u0137eti, kad lietot\u0101js b\u016bs fokus\u0113jies uz veidlapas ievadi, un, kad uz eti\u0137etes tiek noklik\u0161\u0137in\u0101ts vai t\u0101 tiek pieskartas\/pieskarta, p\u0101rl\u016bkprogramma nodod fokusu saist\u012btai ievades formai. \u0160\u0101da veida situ\u0101ciju var viegli atrisin\u0101t, vienk\u0101r\u0161i pievienojot eti\u0137etes \u0161\u0101di:<\/p>\n\n\n\n
        V\u0101rds\n\n    \n  \n\n    Uzv\u0101rds\n\n    \n  \n\n    E-pasts\n\n    \n  \n\n    Iesniegt\n  \n\n```<\/code><\/pre>\n\n\n\n
    Tas ir viss, visiem ievades datiem ir pievienoti attiec\u012bgie mar\u0137\u0113jumi, padarot tos pieejamus ikvienam. M\u0113s pat varam no\u0146emt vietz\u012bmes, lai izvair\u012btos no ievades m\u0113r\u0137a dubl\u0113\u0161anas, bet m\u0113s visi zin\u0101m, ka re\u0101l\u0101s pasaules scen\u0101rijos nav tik viegli tikt gal\u0101 ar to, ka j\u016bs tikko esat sa\u0146\u0113mis dizainu, kur\u0101 \u0161\u012bs veidlapas ievades ir bez eti\u0137et\u0113m, un klients nev\u0113las main\u012bt \u0161o da\u013cu. Pirmais risin\u0101jums, kas n\u0101k pr\u0101t\u0101, ir piem\u0113rot displejs: nav;<\/code> vai redzam\u012bba: sl\u0113pta;<\/code> uz m\u016bsu eti\u0137et\u0113m, tas t\u0101s pasl\u0113ps, bet t\u0101s joproj\u0101m tur b\u016bs, vai ne? \u0160\u012bs \u012bpa\u0161\u012bbas sl\u0113pj elementus ne tikai ekr\u0101n\u0101, bet ar\u012b ekr\u0101nlas\u012bt\u0101ju lietot\u0101jiem, t\u0101p\u0113c tas neatrisin\u0101s m\u016bsu probl\u0113mu.<\/p>\n\n\n\n
    M\u0113s varam izmantot klipu modelis<\/strong> lai to atrisin\u0101tu. \u0160\u0101d\u0101 veid\u0101 m\u0113s vizu\u0101li pasl\u0113psim saturu, bet vienlaikus nodro\u0161in\u0101sim t\u0101 pieejam\u012bbu ekr\u0101na las\u012bt\u0101jiem. M\u0113s izveidosim \u0161\u0101du CSS tikai sr<\/code> klasi un piem\u0113rojiet to vis\u0101m m\u016bsu eti\u0137et\u0113m:<\/p>\n\n\n\n
     .sr-only:not(:focus):not(:active) {\n   clip: rect(0 0 0 0 0);\n   clip-path: inset(50%);\n   augstums: 1px;\n   overflow: hidden;\n   position: absolute;\n   white-space: nowrap;\n   platums: 1px;\n }\n<\/code><\/code><\/pre>\n\n\n\n
    Tas pasl\u0113ps m\u016bsu eti\u0137etes, padar\u012bs t\u0101s pieejamas ekr\u0101nlas\u012bt\u0101jiem un piel\u0101gosies m\u016bsu dizainam. Port\u0101ls :not(:focus):not(:active)<\/code> pseidoklase ne\u013cauj fokus\u0113jamiem elementiem, piem\u0113ram. a<\/code>, poga<\/code>, ievades<\/code> no pasl\u0113p\u0161anas, kad sa\u0146em fokusu.<\/p>\n\n\n\n
    Nav fokusa indikatora<\/h2>\n\n\n\n
    K\u0101dreiz es to dar\u012bju sav\u0101 glob\u0101laj\u0101 CSS stilu lap\u0101:<\/p>\n\n\n\n
    * {\noutline: none; \/* briesm\u012bga k\u013c\u016bda *\/\n}<\/code><\/pre>\n\n\n\n
    Apm\u0113ram 2020 Es paman\u012bju melnas robe\u017eas par\u0101d\u0101s uz Google Chrome veidlapas ievades, kad fokus\u0113jas vai uz pog\u0101m, kad ciln\u0113 - tas bija patie\u0161\u0101m d\u012bvaini, jo es to nesapratu to laik\u0101, p\u0113c da\u017eiem p\u0113t\u012bjumiem, es esmu atkl\u0101jis, ka tas ir t\u0101p\u0113c, ka kont\u016bras CSS \u012bpa\u0161umu, t\u0101p\u0113c likvid\u0113jot atrisin\u0101t \u0161o \"probl\u0113mu\" man.<\/p>\n\n\n\n
    Tolaik man nebija ne jausmas, k\u0101 to pareizi dar\u012bt.  P\u0113c tam, kad veicu nelielu izp\u0113ti par to, k\u0101p\u0113c un k\u0101 ir \u0161is jaunais noklus\u0113juma iestat\u012bjums, es uzzin\u0101ju, ka kont\u016bra ir elementa fokusa indikators, un, ja t\u0101 tiek no\u0146emta, ir j\u0101nodro\u0161ina ac\u012bmredzams fokusa stils, b\u016bt\u012bb\u0101 tas, ko es dar\u012bju, tiek uzskat\u012bts par sliktu praksi. J\u016bs varat piel\u0101got fokusa r\u0101d\u012bt\u0101jus p\u0113c saviem ieskatiem, ta\u010du to piln\u012bga iz\u0146em\u0161ana no t\u012bmek\u013ca vietnes ir liela piek\u013cuves probl\u0113ma. Piel\u0101got elementa fokusa stilu ir diezgan vienk\u0101r\u0161i, piem\u0113ram:<\/p>\n\n\n\n
     a:focus {\n   outline: 4px solid #ee7834;\n   outline-offset: 4px;\n }<\/code><\/code><\/pre>\n\n\n\n
    Pieejam\u012bbas r\u012bki<\/h2>\n\n\n\n
    P\u0101rbaud\u012bt visus jaut\u0101jumus, par kuriem run\u0101j\u0101m, var b\u016bt liels darbs, jo \u012bpa\u0161i zinot, ka ir v\u0113l daudz citu ar pieejam\u012bbu saist\u012btu jaut\u0101jumu, t\u0101p\u0113c, lai pal\u012bdz\u0113tu mums risin\u0101t pieejam\u012bbas jaut\u0101jumus, mums ir 2 lieliski p\u0101rl\u016bkprogrammas papla\u0161in\u0101jumi.<\/p>\n\n\n\n
    WAVE nov\u0113rt\u0113\u0161anas r\u012bks<\/a> ir nov\u0113rt\u0113\u0161anas r\u012bku kopums, kas pal\u012bdz mums padar\u012bt m\u016bsu t\u012bmek\u013ca saturu pieejam\u0101ku. Tas ir pieejams gan Google Chrome, gan Firefox. <\/p>\n\n\n\n
    Izm\u0113\u0123in\u0101sim to neliel\u0101 t\u012bmek\u013ca lap\u0101, kur\u0101 ir navig\u0101cijas josla un ievades ievads, kam tr\u016bkst eti\u0137etes, un redz\u0113sim, ko tas atgrie\u017e, p\u0113c papla\u0161in\u0101juma instal\u0113\u0161anas mums vienk\u0101r\u0161i j\u0101noklik\u0161\u0137ina uz papla\u0161in\u0101juma ikonas, lai to izmantotu.<\/p>\n\n\n\n
    \"balts<em>logs<\/em>ar<em>pel\u0113k\u0101m<\/em>da\u013c\u0101m.\"<\/figure>\n\n\n\n
    Kopsavilkuma ciln\u0113 ir redzama 1 k\u013c\u016bda (veidlapas elementam tr\u016bkst eti\u0137etes), 2 kontrasta k\u013c\u016bdas un 1 br\u012bdin\u0101jums (tr\u016bkst virsraksta strukt\u016bras), k\u0101 redzat, rezult\u0101ts ir \u013coti skaidrs un detaliz\u0113ts. Ciln\u0113 Details (S\u012bk\u0101ka inform\u0101cija) tiek att\u0113lots visu k\u013c\u016bdu, br\u012bdin\u0101jumu un funkciju saraksts. M\u0113s varam ar\u012b mijiedarboties tie\u0161i lap\u0101, noklik\u0161\u0137inot uz \u0161iem sarkanajiem taisnst\u016briem, lai p\u0101rbaud\u012btu k\u013c\u016bdas aprakstu un veidu.<\/p>\n\n\n\n
    Axe DevTools<\/a> ir jaud\u012bgs un prec\u012bzs pieejam\u012bbas r\u012bku komplekts. Tas ir pieejams gan Google Chrome, gan Firefox. P\u0113c papla\u0161in\u0101juma instal\u0113\u0161anas mums b\u016bs j\u0101atver p\u0101rl\u016bkprogrammas izstr\u0101des r\u012bki, j\u0101atver cilne axe DevTools un j\u0101noklik\u0161\u0137ina uz Sken\u0113t visas manas lapas.<\/p>\n\n\n\n
    \"DevTools<em>logs<\/em>ar<em>melnu<\/em>pel\u0113ku_sekciju\"<\/figure>\n\n\n\n
    Varat redz\u0113t, ka Axe DevTools ir zi\u0146ojis par t\u0101d\u0101m pa\u0161\u0101m probl\u0113m\u0101m ar WAVE nov\u0113rt\u0113\u0161anas r\u012bku, proti, kontrasta probl\u0113m\u0101m, formas elementa eti\u0137etes tr\u016bkumu un virsraksta elementa tr\u016bkumu, un pat nor\u0101d\u012bja da\u017eas lab\u0101k\u0101s prakses metodes, kas j\u0101iev\u0113ro.<\/p>\n\n\n\n
    Papildu veids, k\u0101 p\u0101rbaud\u012bt pieejam\u012bbu, ir izmantot ekr\u0101na las\u012bt\u0101ju un ar to p\u0101rbaud\u012bt savu vietni; ir pieejami daudzi ekr\u0101na las\u012bt\u0101ji, un min\u0113sim tikai da\u017eus no tiem:<\/p>\n\n\n\n