{"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-med-kontrastforhallandet","status":"publish","type":"post","link":"https:\/\/thecodest.co\/sv\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 vanliga problem med webbtillg\u00e4nglighet att k\u00e4nna till"},"content":{"rendered":"

Problem med kontrastf\u00f6rh\u00e5llandet<\/h2>\n\n\n\n

Det vanligaste tillg\u00e4nglighetsproblemet som jag har sett genom \u00e5ren \u00e4r kontrast- och f\u00e4rgtillg\u00e4nglighetsproblem<\/b>Ett d\u00e5ligt kontrastf\u00f6rh\u00e5llande g\u00f6r det sv\u00e5rt att se inneh\u00e5llet p\u00e5 din sida och det \u00e4r mycket skadligt f\u00f6r dina anv\u00e4ndare, inklusive personer med synneds\u00e4ttning. <\/p>\n\n\n\n

Kontrast \u00e4r ett m\u00e5tt p\u00e5 skillnaden i upplevd \"luminans\" eller ljusstyrka mellan tv\u00e5 f\u00e4rger, t.ex. skillnaden mellan bakgrundsf\u00e4rgen och f\u00f6rgrundsf\u00e4rgen p\u00e5 sidans inneh\u00e5ll. L\u00e5t oss ta en titt p\u00e5 det h\u00e4r navf\u00e4ltet.<\/p>\n\n\n\n

\"navigerande<em>f\u00e4lt<\/em>med<em>gr\u00f6na<\/em>texter\"<\/figure>\n\n\n\n

L\u00e5t oss s\u00e4ga att din kund verkligen gillar den gr\u00f6naktiga f\u00e4rgen och tycker att den \u00e4r fantastisk, men det finns ett problem h\u00e4r med kontrasten. Vi har en #FFFFFF<\/code> bakgrund med en #83A94C<\/code> textf\u00e4rg, vilket resulterar i ett kontrastf\u00f6rh\u00e5llande p\u00e5 2,71:1, vilket \u00e4r l\u00e5ngt under minimikravet 4.5:1<\/strong> beh\u00f6vs. F\u00f6r att uppt\u00e4cka detta problem har vi flera l\u00f6sningar: <\/p>\n\n\n\n

    \n
  1. Anv\u00e4nd en kontrastkontroll online som t.ex. Webaim kontrastkontroll<\/a>som ber\u00e4knar kontrastf\u00f6rh\u00e5llandet och ger dig ett Passera<\/strong> eller Misslyckas<\/strong> betyg.<\/li>\n\n\n\n
  2. Anv\u00e4nd ett av de m\u00e5nga webbl\u00e4sartill\u00e4ggen f\u00f6r kontrastkontroll, t.ex: WCAG Kontroll av f\u00e4rgkontrast<\/a>.<\/li>\n\n\n\n
  3. Testa webbl\u00e4sarens integrerade kontrastkontroll. F\u00f6r att anv\u00e4nda den p\u00e5 Google Chrome, \u00f6ppna dev-verktygen, inspektera det riktade elementet (ex: Heml\u00e4nk i v\u00e5rt navf\u00e4lt), g\u00e5 till CSS-f\u00e4rgegenskapen och klicka p\u00e5 f\u00e4rgrektangeln f\u00f6r att \u00f6ppna f\u00e4rgv\u00e4ljaren, l\u00e4ngst ner kommer du att presenteras med ett kontrastf\u00f6rh\u00e5llandev\u00e4rde, expandera det f\u00f6r mer information. Processen \u00e4r exakt densamma f\u00f6r Firefox, bara en liten skillnad i f\u00f6rh\u00e5llandet visas l\u00e4ngst ner till v\u00e4nster i f\u00e4rgv\u00e4ljaren.<\/li>\n<\/ol>\n\n\n\n
    \"svart<em>bakgrund<\/em>med<em>bl\u00e5<\/em>kod\"<\/figure>\n\n\n\n

    F\u00f6r att f\u00e5 mer information om kontrast, kolla h\u00e4r Kontrast och f\u00e4rg Tillg\u00e4nglighet Artikel<\/a>.<\/p>\n\n\n\n

    Problem med l\u00e4nktext<\/h2>\n\n\n\n

    L\u00e4nkar \u00e4r en stor del av webb<\/a> idag, s\u00e5 att g\u00f6ra dem tillg\u00e4ngliga \u00e4r mycket viktigt. En l\u00e4nk m\u00e5ste vara begriplig och informera anv\u00e4ndaren om sitt sammanhang, s\u00e5 en oinformativ l\u00e4nk med text som l\u00e4s mer, klicka h\u00e4r, kolla detaljer \u00e4r inte s\u00e4rskilt hj\u00e4lpsam, s\u00e5 ist\u00e4llet f\u00f6r att l\u00e4gga till \"kolla detaljer\" f\u00f6r Produkt<\/a> detaljer, t.ex. \u00e4r det b\u00e4ttre och mer informativt att anv\u00e4nda produktnamnet som \"The Mandalorian Helmet\". Ord som Klicka h\u00e4r<\/code> eller mer om<\/code> kan utel\u00e4mnas eftersom en l\u00e4nk \u00e4r klickbar som standard och n\u00e5got i stil med \"mer om dagens nyheter\" kan f\u00f6rkortas till \"dagens nyheter\". Det finns ingen s\u00e4rskild regel eller gr\u00e4ns f\u00f6r l\u00e4nkl\u00e4ngd, utan l\u00e4nken m\u00e5ste vara l\u00e4sbar<\/b> och tillr\u00e4ckligt l\u00e5ng f\u00f6r att ge en bra beskrivning av dess syfte.<\/p>\n\n\n\n

    Bilder som l\u00e4nkar \u00e4r ett vanligt f\u00f6rekommande m\u00f6nster, s\u00e5 det m\u00e5ste f\u00f6lja samma regler som vi har pratat om ovan. Bildens alt-attribut kommer att spela rollen som l\u00e4nktext och meddelas av sk\u00e4rml\u00e4sare. Det finns flera olika scenarier n\u00e4r man behandlar bilder som l\u00e4nkar, om bilden \u00e4r det enda inneh\u00e5llet i l\u00e4nken m\u00e5ste den ha ett alt-attribut, om l\u00e4nken har lite text och bild i sig kan vi utel\u00e4mna alt-attributet, h\u00e4r \u00e4r n\u00e5gra exempel:<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Meddelanden">\r\n<\/a><\/code><\/pre>\n\n\n\n
    Kolla in n\u00e5gra l\u00e4nkar h\u00e4r f\u00f6r att l\u00e4sa om tillg\u00e4nglighet f\u00f6r l\u00e4nkar:L\u00e4nktext och utseende<\/a>, Funktionella bilder<\/a>.<\/p>\n\n\n\n
    Formul\u00e4rinmatning saknar en etikett<\/h2>\n\n\n\n
    \"input<em>labels<\/em>med<em>bl\u00e5<\/em>knapp\"<\/figure>\n\n\n\n
    Vi har alla sett dessa formul\u00e4rinmatningar tidigare utan etikett och bara en platsh\u00e5llare f\u00f6r att beskriva syftet med inmatningen. En f\u00f6rsta anm\u00e4rkning \u00e4r att s\u00e5 snart anv\u00e4ndaren fyller i alla inmatningar och platsh\u00e5llarna inte syns l\u00e4ngre kommer vi inte att ha n\u00e5got visuellt sammanhang om inmatningens syfte, men l\u00e5t oss<\/a> fokusera p\u00e5 tillg\u00e4ngligheten h\u00e4r. <\/p>\n\n\n\n
    Att associera en etikett<\/code> till en inmatning ger oss tv\u00e5 stora f\u00f6rdelar: en sk\u00e4rml\u00e4sare l\u00e4ser upp etiketten n\u00e4r anv\u00e4ndaren fokuserar p\u00e5 formul\u00e4rinmatningen och n\u00e4r en etikett klickas eller vidr\u00f6rs\/knackas p\u00e5 flyttar webbl\u00e4saren fokus till den tillh\u00f6rande inmatningen. En enkel l\u00f6sning f\u00f6r den h\u00e4r typen av situation \u00e4r att bara l\u00e4gga till etiketter enligt f\u00f6ljande:<\/p>\n\n\n\n
        F\u00f6rnamn\n\n    \n  \n\n    Efternamn\n\n    \n  \n\n    E-post\n\n    \n  \n\n    Skicka in\n  \n\n```<\/code><\/pre>\n\n\n\n
    Nu har alla inmatningar f\u00e5tt sina tillh\u00f6rande etiketter, vilket g\u00f6r dem tillg\u00e4ngliga f\u00f6r alla. Vi kan till och med ta bort platsh\u00e5llarna f\u00f6r att undvika att duplicera inmatningens syfte, men vi vet alla att verkliga scenarier inte \u00e4r s\u00e5 l\u00e4tta att hantera, du har just f\u00e5tt en design som har dessa formul\u00e4rinmatningar utan etiketter och kunden vill inte \u00e4ndra den delen. Den f\u00f6rsta l\u00f6sningen som kommer att t\u00e4nka p\u00e5 \u00e4r att till\u00e4mpa en display: ingen;<\/code> eller synlighet: dold;<\/code> till v\u00e5ra etiketter, kommer detta att d\u00f6lja dem men de \u00e4r fortfarande d\u00e4r, eller hur? Dessa egenskaper d\u00f6ljer element inte bara p\u00e5 sk\u00e4rmen utan \u00e4ven f\u00f6r sk\u00e4rml\u00e4saranv\u00e4ndare, s\u00e5 detta kommer inte att l\u00f6sa v\u00e5rt problem.<\/p>\n\n\n\n
    Vi kan anv\u00e4nda klippm\u00f6nster<\/strong> f\u00f6r att l\u00f6sa detta. P\u00e5 s\u00e5 s\u00e4tt kommer vi att d\u00f6lja inneh\u00e5llet visuellt, men \u00e4nd\u00e5 tillhandah\u00e5lla inneh\u00e5llet till sk\u00e4rml\u00e4sare. Vi kommer att skapa f\u00f6ljande CSS sr-endast<\/code> och till\u00e4mpa den p\u00e5 alla v\u00e5ra etiketter:<\/p>\n\n\n\n
     .sr-only:not(:focus):not(:active) {\n   clip: rect(0 0 0 0);\n   clip-path: inset(50%);\n   h\u00f6jd: 1px;\n   \u00f6verfl\u00f6de: dold;\n   position: absolut;\n   white-space: nowrap;\n   bredd: 1px;\n }\n<\/code><\/code> <\/code<\/pre>\n\n\n\n
    Detta d\u00f6ljer v\u00e5ra etiketter, g\u00f6r dem tillg\u00e4ngliga f\u00f6r sk\u00e4rml\u00e4sare och matchar v\u00e5r design. Den :inte(:fokus):inte(:aktiv)<\/code> pseudoklass f\u00f6rhindrar fokuserbara element som t.ex. a<\/code>, knapp<\/code>, inmatning<\/code> fr\u00e5n att vara dolda n\u00e4r de f\u00e5r fokus.<\/p>\n\n\n\n
    Ingen fokusindikator<\/h2>\n\n\n\n
    En g\u00e5ng i tiden gjorde jag detta p\u00e5 min globala CSS-stilmall:<\/p>\n\n\n\n
    * {\noutline: none; \/* fruktansv\u00e4rt misstag *\/\n}<\/code><\/pre>\n\n\n\n
    Runt 2020 m\u00e4rkte jag svarta kanter som dyker upp p\u00e5 Google Chrome-formul\u00e4ring\u00e5ngar n\u00e4r de fokuserades eller p\u00e5 knapparna n\u00e4r de tabbades in - det var v\u00e4ldigt konstigt eftersom jag inte f\u00f6rstod det vid den tiden, efter lite forskning har jag f\u00e5tt reda p\u00e5 att det beror p\u00e5 CSS-egenskapen outline s\u00e5 att ta bort l\u00f6ste det \"problemet\" f\u00f6r mig.<\/p>\n\n\n\n
    Vid den tidpunkten hade jag ingen aning om vad som var det r\u00e4tta s\u00e4ttet att g\u00f6ra det.  Efter att ha unders\u00f6kt varf\u00f6r och hur den nya standardinst\u00e4llningen fungerar fick jag reda p\u00e5 att outline \u00e4r en fokusindikator f\u00f6r element och om den tas bort m\u00e5ste en uppenbar fokusstyling tillhandah\u00e5llas, vilket i princip \u00e4r vad jag gjorde som anses vara en d\u00e5lig praxis. Du kan anpassa fokusindikatorer som du vill, men att ta bort dem helt fr\u00e5n webbplatsen \u00e4r ett stort tillg\u00e4nglighetsproblem. Det \u00e4r till exempel ganska enkelt att anpassa en fokusstyling f\u00f6r element:<\/p>\n\n\n\n
     a:fokus {\n   outline: 4px solid #ee7834;\n   outline-offset: 4px;\n }<\/code><\/code> <\/code<\/pre>\n\n\n\n
    Verktyg f\u00f6r tillg\u00e4nglighet<\/h2>\n\n\n\n
    Att kontrollera alla de fr\u00e5gor vi har pratat om kan vara mycket arbete, s\u00e4rskilt med tanke p\u00e5 att det finns mycket mer att g\u00f6ra om tillg\u00e4nglighet, s\u00e5 f\u00f6r att hj\u00e4lpa oss att hantera tillg\u00e4ngligheten har vi tv\u00e5 fantastiska webbl\u00e4sartill\u00e4gg.<\/p>\n\n\n\n
    WAVE utv\u00e4rderingsverktyg<\/a> \u00e4r en upps\u00e4ttning utv\u00e4rderingsverktyg som hj\u00e4lper oss att g\u00f6ra v\u00e5rt webbinneh\u00e5ll mer tillg\u00e4ngligt. Den finns tillg\u00e4nglig i b\u00e5de Google Chrome och Firefox. <\/p>\n\n\n\n
    L\u00e5t oss prova det p\u00e5 en liten webbsida som inneh\u00e5ller ett navf\u00e4lt och en inmatning som saknar en etikett och se vad den returnerar, efter att ha installerat till\u00e4gget beh\u00f6ver vi bara klicka p\u00e5 till\u00e4ggsikonen f\u00f6r att anv\u00e4nda den.<\/p>\n\n\n\n
    \"vitt<em>f\u00f6nster<\/em>med<em>gr\u00e5<\/em>partier\"<\/figure>\n\n\n\n
    Fliken Sammanfattning visar 1 fel (formul\u00e4relement saknar etikett), 2 kontrastfel och 1 varning (rubrikstruktur saknas), som du kan se \u00e4r resultatet mycket tydligt och detaljerat. P\u00e5 fliken Detaljer visas en lista \u00f6ver alla fel, varningar och funktioner. Vi kan ocks\u00e5 interagera direkt p\u00e5 sidan genom att klicka p\u00e5 de r\u00f6da rektanglarna f\u00f6r att kontrollera felbeskrivning och feltyp.<\/p>\n\n\n\n
    Axe DevTools<\/a> \u00e4r en kraftfull och exakt verktygsl\u00e5da f\u00f6r tillg\u00e4nglighet. Det finns tillg\u00e4ngligt i b\u00e5de Google Chrome och Firefox. Efter att ha installerat till\u00e4gget m\u00e5ste vi \u00f6ppna webbl\u00e4sarens utvecklingsverktyg och g\u00e5 till fliken Axe DevTools och klicka p\u00e5 Skanna alla mina sidor.<\/p>\n\n\n\n
    \"DevTools<em>f\u00f6nster<\/em>med<em>svarta<\/em>gr\u00e5a_sektioner\"<\/figure>\n\n\n\n
    Du kan se att Axe DevTools har rapporterat samma problem med WAVE Evaluation Tool, vilket \u00e4r kontrastproblem, formul\u00e4relement som saknar en etikett och saknade rubrikelement, och det gav oss \u00e4ven n\u00e5gra b\u00e4sta metoder att f\u00f6lja.<\/p>\n\n\n\n
    Ett ytterligare s\u00e4tt att testa tillg\u00e4ngligheten \u00e4r att anv\u00e4nda en sk\u00e4rml\u00e4sare och testa webbplatsen med den. Det finns m\u00e5nga olika sk\u00e4rml\u00e4sare, f\u00f6r att bara n\u00e4mna n\u00e5gra:<\/p>\n\n\n\n