{"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":"kontrastsuhte-probleem","status":"publish","type":"post","link":"https:\/\/thecodest.co\/et\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 \u00fcldist veebi juurdep\u00e4\u00e4setavuse probleemi, mida peaks teadma"},"content":{"rendered":"

Kontrastsuhte probleem<\/h2>\n\n\n\n

K\u00f5ige levinum juurdep\u00e4\u00e4setavuse probleem, mida olen aastate jooksul n\u00e4inud, on see, et kontrasti ja v\u00e4rvide k\u00e4ttesaadavuse probleem<\/b>halb kontrastsus muudab teie lehe sisu raskesti n\u00e4htavaks ja see on teie kasutajatele, sealhulgas n\u00e4gemispuudega inimestele, v\u00e4ga kahjulik. <\/p>\n\n\n\n

Kontrast on kahe v\u00e4rvi tajutava heleduse v\u00f5i heleduse erinevuse m\u00f5\u00f5t, n\u00e4iteks on see erinevus teie lehe sisu taustav\u00e4rvi ja esiplaaniv\u00e4rvi vahel. Vaatame seda navibari.<\/p>\n\n\n\n

\"navigatsioonipalk<em>rohelise<\/em><\/figure>\n\n\n\n

Oletame, et teie kliendile meeldib see rohekas v\u00e4rv v\u00e4ga ja ta leiab, et see on vinge, kuid siin on probleem kontrastiga. Meil on #FFFFFFFF<\/code> taustaga #83A94C<\/code> tekstiv\u00e4rv, mille tulemuseks on kontrastsussuhe 2,71:1, mis on kaugelt alla minimaalse 4.5:1<\/strong> vajalik. Selle probleemi tuvastamiseks on meil mitu lahendust: <\/p>\n\n\n\n

    \n
  1. Kasutage veebip\u00f5hist kontrasti kontrollijat nagu Webaim Kontrasti kontrollija<\/a>, mis arvutab kontrastsuse suhte ja annab teile Pass<\/strong> v\u00f5i Fail<\/strong> klass.<\/li>\n\n\n\n
  2. Kasutage \u00fchte paljudest brauseri kontrastsuse kontrollija laiendustest, nt: WCAG V\u00e4rvikontrasti kontroller<\/a>.<\/li>\n\n\n\n
  3. Proovige veebilehitsejate integreeritud kontrasti kontrollimist. Selle kasutamiseks Google Chrome'is avage dev tools, kontrollige sihtelementi (nt: meie navibari link Home), minge CSS-v\u00e4rvi omaduse juurde ja kl\u00f5psake v\u00e4rvi ristk\u00fclikul, et avada v\u00e4rvivalik, allosas kuvatakse teile kontrastsuse suhte v\u00e4\u00e4rtus, laiendage seda t\u00e4psemate \u00fcksikasjade saamiseks. Firefoxi puhul on protsess t\u00e4pselt sama, ainult v\u00e4ike erinevus suhtarvus on n\u00e4idatud v\u00e4rvivaliku vasakus allosas.<\/li>\n<\/ol>\n\n\n\n
    \"must<em>taustap\u00f5hi<\/em><em>sinise<\/em>koodiga\"<\/figure>\n\n\n\n

    Lisateabe saamiseks kontrasti kohta vaadake seda Kontrast ja v\u00e4rvide k\u00e4ttesaadavus Artikkel<\/a>.<\/p>\n\n\n\n

    Link Teksti k\u00fcsimus<\/h2>\n\n\n\n

    Lingid on suur osa veeb<\/a> t\u00e4nap\u00e4eval, seega on nende k\u00e4ttesaadavaks tegemine v\u00e4ga oluline. Link peab olema m\u00f5ttekas ja teavitama kasutajat selle kontekstist, seega ei ole informatiivne link tekstiga nagu loe edasi, kliki siia, vaata \u00fcksikasju v\u00e4ga kasulik, nii et selle asemel, et lisada \"vaata \u00fcksikasju\" jaoks toode<\/a> \u00fcksikasjad, n\u00e4iteks on parem ja informatiivsem kasutada toote nime, n\u00e4iteks \"Mandalori kiiver\". Sellised s\u00f5nad nagu kliki siia<\/code> v\u00f5i rohkem teavet<\/code> v\u00f5ib \u00e4ra j\u00e4tta, sest link on vaikimisi klikitav ja midagi sellist nagu \"rohkem t\u00e4nastest uudistest\" v\u00f5ib l\u00fchendada \"t\u00e4nased uudised\". Linkide pikkuse kohta ei ole erireeglit ega piirangut, linkide link peab olema loetav<\/b> ja piisavalt pikk, et anda hea kirjeldus selle eesm\u00e4rgist.<\/p>\n\n\n\n

    Pilte kui linke kasutatakse laialdaselt, nii et see peab j\u00e4rgima samu reegleid, millest me eespool r\u00e4\u00e4kisime. Pildi alt-atribuut t\u00e4idab lingi teksti rolli ja seda teatavad ekraanilugejad. Piltide kui linkide k\u00e4sitlemisel on mitmeid juhtumeid, kui pilt on lingi ainus sisu, siis peab sellel olema alt atribuut, kui lingil on mingi tekst ja pilt, siis v\u00f5ime alt atribuudi \u00e4ra j\u00e4tta, siin on m\u00f5ned n\u00e4ited:<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Teated">\r\n<\/a><\/code><\/pre>\n\n\n\n
    Vaadake siit m\u00f5ned lingid, et lugeda linkide juurdep\u00e4\u00e4setavuse kohta:Lingi tekst ja v\u00e4limus<\/a>, Funktsionaalsed pildid<\/a>.<\/p>\n\n\n\n
    Vormi sisend, millel puudub silt<\/h2>\n\n\n\n
    \"input<em>labels<\/em>with<em>blue<\/em>button\"<\/figure>\n\n\n\n
    Me k\u00f5ik oleme varemgi n\u00e4inud selliseid vormisisendeid, millel puudub m\u00e4rgistus ja millel on ainult sisendi eesm\u00e4rki kirjeldav paigutus. Esimene m\u00e4rkus on see, et niipea kui kasutaja t\u00e4idab k\u00f5ik sisendid ja paigutussalvestid ei ole enam n\u00e4htaval, ei ole meil visuaalset konteksti sisendite otstarbe kohta, kuid las us<\/a> keskenduda siinkohal ligip\u00e4\u00e4setavusele. <\/p>\n\n\n\n
    Assotsieerimine silt<\/code> sisendile annab meile kaks suurt eelist: ekraanilugeja loeb sildi ette, kui kasutaja on keskendunud vormi sisendile, ja kui sildil kl\u00f5psatakse v\u00f5i seda puudutatakse\/tapsitakse, suunab brauser fookuse sellega seotud sisendile. Lihtne lahendus sellisele olukorrale on lihtsalt lisada sildid j\u00e4rgmiselt:<\/p>\n\n\n\n
        Eesnimi\n\n    \n  \n\n    Perekonnanimi\n\n    \n  \n\n    E-post\n\n    \n  \n\n    Saada\n  \n\n```<\/code><\/pre>\n\n\n\n
    See on k\u00f5ik, k\u00f5ik sisendid on seotud siltidega, mis teeb need k\u00f5igile k\u00e4ttesaadavaks. Me v\u00f5ime isegi eemaldada paigutuss\u00e4tted, et v\u00e4ltida sisendi otstarbe dubleerimist, kuid me k\u00f5ik teame, et reaalsetes stsenaariumides ei ole nii lihtne toime tulla, te olete just saanud disaini, millel on need vormisisendid ilma siltideta ja klient ei taha seda osa muuta. Esimene lahendus, mis p\u00e4he tuleb, on rakendada display: none;<\/code> v\u00f5i n\u00e4htavus: peidetud;<\/code> meie siltidele, see peidab need \u00e4ra, kuid nad on ikkagi olemas, eks? Need omadused ei peida elemente mitte ainult ekraanil, vaid ka ekraanilugeja kasutajate jaoks, seega ei lahenda see meie probleemi.<\/p>\n\n\n\n
    Me v\u00f5ime kasutada clip muster<\/strong> selle lahendamiseks. Sel viisil peidame sisu visuaalselt, kuid pakume sisu ekraanilugejatele. Loome j\u00e4rgmise CSS-i ainult sr-only<\/code> klassi ja rakendame seda k\u00f5ikidele meie siltidele:<\/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   height: 1px;\n   overflow: hidden;\n   position: absolute;\n   white-space: nowrap;\n   width: 1px;\n }\n<\/code><\/code><\/pre>\n\n\n\n
    See peidab meie sildid, teeb need k\u00e4ttesaadavaks ekraanilugejatele ja sobib meie kujundusega. Veebileht :not(:focus):not(:active)<\/code> pseudoklass takistab fookustatavaid elemente, nagu n\u00e4iteks a<\/code>, nupp<\/code>, sisend<\/code> fookuse saamisel varjata.<\/p>\n\n\n\n
    Fookuse indikaator puudub<\/h2>\n\n\n\n
    Kunagi tegin seda oma globaalse CSS-stiililehega:<\/p>\n\n\n\n
    * {\noutline: none; \/* kohutav viga *\/\n}<\/code><\/pre>\n\n\n\n
    Umbes 2020 m\u00e4rkasin mustad piirid ilmub Google Chrome vormi sisendid, kui keskendunud v\u00f5i nupud, kui taabeldatud sisse - see oli t\u00f5esti imelik, sest ma ei m\u00f5ista seda ajal, p\u00e4rast m\u00f5ningaid uuringuid olen teada saanud, et see on, sest kontuuri CSS vara nii eemaldamine lahendatud, et \"probleem\" minu jaoks.<\/p>\n\n\n\n
    Tol ajal ei olnud mul aimugi, kuidas seda \u00f5igesti teha.  P\u00e4rast m\u00f5ningaid uurimisi selle uue vaikimisi miks ja kuidas, sain teada, et kontuur on elemendi fookuse indikaator ja kui see eemaldatakse, tuleb anda ilmne fookuse stiil, p\u00f5him\u00f5tteliselt peetakse seda, mida ma tegin, halvaks tavaks. Fookusindikaatoreid v\u00f5ib kohandada nii, nagu heaks arvate, kuid nende t\u00e4ielik eemaldamine veebilehelt on suur ligip\u00e4\u00e4setavuse probleem. Elemendi fookuse stiilim\u00e4rgistuse kohandamine on n\u00e4iteks \u00fcsna lihtne:<\/p>\n\n\n\n
     a:focus {\n   outline: 4px solid #ee7834;\n   outline-offset: 4px;\n }<\/code><\/code><\/pre>\n\n\n\n
    Ligip\u00e4\u00e4setavuse t\u00f6\u00f6riistad<\/h2>\n\n\n\n
    K\u00f5igi teemade kontrollimine, millest me r\u00e4\u00e4kisime, v\u00f5ib olla palju t\u00f6\u00f6d, eriti teades, et ligip\u00e4\u00e4setavuse kohta on veel palju muudki, nii et ligip\u00e4\u00e4setavusega tegelemiseks on meil 2 suurep\u00e4rast brauseripikendust, mis aitavad meil ligip\u00e4\u00e4setavusega tegeleda.<\/p>\n\n\n\n
    WAVE hindamisvahend<\/a> on hindamisvahendite komplekt, mis aitab meil muuta meie veebisisu k\u00e4ttesaadavamaks. See on saadaval nii Google Chrome'is kui ka Firefoxis. <\/p>\n\n\n\n
    Proovime seda v\u00e4ikesel veebilehek\u00fcljel, mis sisaldab naviriba ja sisendit, millel puudub silt, ja vaatame, mida see tagastab, p\u00e4rast laienduse paigaldamist peame selle kasutamiseks lihtsalt laienduss\u00fcmboli ikoonil kl\u00f5psama.<\/p>\n\n\n\n
    \"valge<em>aken<\/em><\/figure>\n\n\n\n
    Kokkuv\u00f5tte vahekaart n\u00e4itab 1 viga (vormi elemendi puuduv silt), 2 kontrasti viga ja 1 hoiatus (puuduv pealkirjastruktuur), nagu n\u00e4ete, on tulemus v\u00e4ga selge ja \u00fcksikasjalik. Vahekaardil Details kuvatakse k\u00f5igi vigade, hoiatuste ja funktsioonide loetelu. Me saame ka otse lehel suhelda, kl\u00f5psates nendele punastele ristk\u00fclikutele, et kontrollida vea kirjeldust ja t\u00fc\u00fcpi.<\/p>\n\n\n\n
    Axe DevTools<\/a> on v\u00f5imas ja t\u00e4pne juurdep\u00e4\u00e4setavuse t\u00f6\u00f6riistakomplekt. See on saadaval nii Google Chrome'is kui ka Firefoxis. P\u00e4rast laienduse paigaldamist tuleb avada brauseri dev-t\u00f6\u00f6riistad ja minna vahekaardile axe DevTools ning kl\u00f5psata nupule Scan all of my pages.<\/p>\n\n\n\n
    \"DevTools<em>window<\/em>with<em>black<\/em>grey_sections<\/figure>\n\n\n\n
    N\u00e4ete, et Axe DevTools on teatanud samadest probleemidest WAVE Evaluation Tooliga, milleks on kontrasti probleemid, vormi elemendi puuduv silt ja puuduv pealkirja element, see andis meile isegi m\u00f5ned parimad tavad, mida j\u00e4rgida.<\/p>\n\n\n\n
    Lisav\u00f5imalus ligip\u00e4\u00e4setavuse testimiseks on kasutada ekraanilugejat ja testida oma veebisaiti sellega, saadaval on palju ekraanilugejaid, et nimetada vaid m\u00f5ned neist:<\/p>\n\n\n\n