{"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-kontrastforhold","status":"publish","type":"post","link":"https:\/\/thecodest.co\/nb\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 vanlige problemer med webtilgjengelighet du b\u00f8r kjenne til"},"content":{"rendered":"

Problem med kontrastforhold<\/h2>\n\n\n\n

Det vanligste tilgjengelighetsproblemet jeg har sett opp gjennom \u00e5rene, er problemer med kontrast og fargetilgjengelighet<\/b>Et d\u00e5rlig kontrastforhold vil gj\u00f8re det vanskelig \u00e5 se innholdet p\u00e5 siden din, og det vil v\u00e6re sv\u00e6rt skadelig for brukerne dine, inkludert de med synshemninger. <\/p>\n\n\n\n

Kontrast er et m\u00e5l p\u00e5 forskjellen i oppfattet \"luminans\" eller lysstyrke mellom to farger, for eksempel forskjellen mellom bakgrunnsfargen og forgrunnsfargen p\u00e5 innholdet p\u00e5 siden din. La oss ta en titt p\u00e5 denne navlinjen.<\/p>\n\n\n\n

\"navigeringslinje<\/figure>\n\n\n\n

La oss si at kunden din virkelig liker den gr\u00f8nnlige fargen og synes den er fantastisk, men det er et problem her med kontrasten. Vi har en #FFFFFFFF<\/code> bakgrunn med en #83A94C<\/code> tekstfarge, noe som resulterer i et kontrastforhold p\u00e5 2,71:1, som er langt under minimumskravet 4.5:1<\/strong> n\u00f8dvendig. Vi har flere l\u00f8sninger for \u00e5 oppdage dette problemet: <\/p>\n\n\n\n

    \n
  1. Bruk en kontrastkontroll p\u00e5 nettet, for eksempel Webaim Contrast Checker<\/a>som beregner kontrastforholdet og gir deg en Pass<\/strong> eller Mislykkes<\/strong> karakter.<\/li>\n\n\n\n
  2. Bruk en av de mange nettleserutvidelsene for kontrastkontroll, f.eks: WCAG Fargekontrastkontroll<\/a>.<\/li>\n\n\n\n
  3. Pr\u00f8v nettleserens integrerte kontrastkontroll. For \u00e5 bruke den p\u00e5 Google Chrome, \u00e5pne dev-verkt\u00f8yene, inspiser m\u00e5lelementet (f.eks. Hjem-lenken til navlinjen v\u00e5r), g\u00e5 til CSS-fargeegenskapen, og klikk p\u00e5 fargerektangelet for \u00e5 \u00e5pne fargevelgeren, nederst vil du bli presentert med en kontrastforholdsverdi, utvid den for mer informasjon. Prosessen er n\u00f8yaktig den samme for Firefox, bare en liten forskjell i forholdet vises nederst til venstre i fargevelgeren.<\/li>\n<\/ol>\n\n\n\n
    \"svart<em>bakgrunn<\/em>med<em>bl\u00e5<\/em>kode\"<\/figure>\n\n\n\n

    For \u00e5 f\u00e5 mer informasjon om kontrast, sjekk dette Artikkel om kontrast- og fargetilgjengelighet<\/a>.<\/p>\n\n\n\n

    Problem med lenketekst<\/h2>\n\n\n\n

    Lenker er en stor del av nett<\/a> i disse dager, s\u00e5 det er veldig viktig \u00e5 gj\u00f8re dem tilgjengelige. En lenke m\u00e5 gi mening og informere brukeren om konteksten, s\u00e5 en lite informativ lenke med tekst som \"les mer\", \"klikk her\", \"sjekk detaljer\" er ikke s\u00e6rlig nyttig, s\u00e5 i stedet for \u00e5 legge til \"sjekk detaljer\" for produkt<\/a> detaljer, er det for eksempel bedre og mer informativt \u00e5 bruke produktnavn som \"The Mandalorian Helmet\". Ord som klikk her<\/code> eller mer om<\/code> kan utelates fordi en lenke er klikkbar som standard, og noe s\u00e5nt som \"mer om dagens nyheter\" kan forkortes til \"dagens nyheter\". Det er ingen spesiell regel eller grense for lenkelengde, men lenken m\u00e5 v\u00e6re lesbar<\/b> og lang nok til \u00e5 gi en god beskrivelse av form\u00e5let.<\/p>\n\n\n\n

    Bilder som lenker er et mye brukt m\u00f8nster, s\u00e5 dette m\u00e5 f\u00f8lge de samme reglene som vi har snakket om ovenfor. Bildets alt-attributt vil spille rollen som lenketekst og bli kunngjort av skjermlesere. Det finnes flere scenarier for behandling av bilder som lenker: Hvis bildet er det eneste innholdet i lenken, m\u00e5 det ha et alt-attributt. Hvis lenken inneholder b\u00e5de tekst og bilde, kan vi utelate alt-attributtet:<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Varsler">\r\n<\/a><\/code><\/pre>\n\n\n\n
    Sjekk ut noen lenker her for \u00e5 lese om universell utforming av lenker:Lenketekst og utseende<\/a>, Funksjonelle bilder<\/a>.<\/p>\n\n\n\n
    Skjemainput mangler en etikett<\/h2>\n\n\n\n
    \"input<em>labels<\/em>med<em>bl\u00e5<\/em>knapp\"<\/figure>\n\n\n\n
    Vi har alle sett slike skjemainnganger f\u00f8r, uten noen etikett og bare en plassholder for \u00e5 beskrive form\u00e5let med inngangen. En f\u00f8rste merknad er at s\u00e5 snart brukeren fyller ut alle inndataene og plassholderne ikke er i sikte lenger, vil vi ikke ha noen visuell kontekst om form\u00e5let med inndataene, men la oss<\/a> fokusere p\u00e5 tilgjengeligheten her. <\/p>\n\n\n\n
    Tilknytning av en etikett<\/code> til en inndata gir oss to store fordeler: En skjermleser vil lese opp etiketten n\u00e5r brukeren fokuserer p\u00e5 skjemainndataene, og n\u00e5r en etikett klikkes p\u00e5 eller ber\u00f8res\/trykkes p\u00e5, flytter nettleseren fokuset til den tilh\u00f8rende inndataen. En enkel l\u00f8sning for denne typen situasjoner er \u00e5 legge til etiketter p\u00e5 f\u00f8lgende m\u00e5te:<\/p>\n\n\n\n
        Fornavn\n\n    \n  \n\n    Etternavn\n\n    \n  \n\n    E-post\n\n    \n  \n\n    Send inn\n  \n\n```<\/code><\/pre>\n\n\n\n
    Det var det, alle innganger har sine tilh\u00f8rende etiketter som gj\u00f8r dem tilgjengelige for alle. Vi kan til og med fjerne plassholderne for \u00e5 unng\u00e5 \u00e5 duplisere inngangsform\u00e5let, men vi vet alle at det ikke er s\u00e5 lett \u00e5 h\u00e5ndtere virkelige scenarier, du har nettopp mottatt et design som har disse skjemainngangene uten etiketter, og kunden \u00f8nsker ikke \u00e5 endre den delen. Den f\u00f8rste l\u00f8sningen som kommer til hjernen er \u00e5 bruke en display: ingen;<\/code> eller synlighet: skjult;<\/code> til etikettene v\u00e5re, vil dette skjule dem, men de er der fortsatt, ikke sant? Disse egenskapene skjuler ikke bare elementer p\u00e5 skjermen, men ogs\u00e5 for brukere av skjermlesere, s\u00e5 dette vil ikke l\u00f8se problemet v\u00e5rt.<\/p>\n\n\n\n
    Vi kan bruke klippem\u00f8nster<\/strong> for \u00e5 l\u00f8se dette. P\u00e5 den m\u00e5ten vil vi skjule innholdet visuelt, men likevel gi innholdet til skjermlesere. Vi oppretter f\u00f8lgende CSS kun sr<\/code> klassen og bruke den p\u00e5 alle etikettene v\u00e5re:<\/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   h\u00f8yde: 1px;\n   overflow: skjult;\n   posisjon: absolutt;\n   white-space: nowrap;\n   width: 1px;\n }\n<\/code><\/code> <\/code<\/pre>\n\n\n\n
    Dette vil skjule etikettene v\u00e5re, gj\u00f8re dem tilgjengelige for skjermlesere og matche designet v\u00e5rt. Den :not(:fokus):not(:aktiv)<\/code> pseudoklasse forhindrer fokuserbare elementer som a<\/code>, knapp<\/code>, innspill<\/code> fra \u00e5 bli skjult n\u00e5r du mottar fokus.<\/p>\n\n\n\n
    Ingen fokusindikator<\/h2>\n\n\n\n
    En gang i tiden gjorde jeg dette i det globale CSS-stilarket mitt:<\/p>\n\n\n\n
    * {\noutline: none; \/* fryktelig feil *\/\n}<\/code><\/pre>\n\n\n\n
    Rundt 2020 la jeg merke til at svarte kanter dukket opp p\u00e5 Google Chrome-skjemainnganger n\u00e5r de var fokusert eller p\u00e5 knappene n\u00e5r jeg tabbet inn - det var veldig rart da jeg ikke forsto det p\u00e5 den tiden, etter litt forskning har jeg funnet ut at det er p\u00e5 grunn av omrisset CSS-egenskap s\u00e5 \u00e5 fjerne l\u00f8ste det 'problemet' for meg.<\/p>\n\n\n\n
    P\u00e5 det tidspunktet hadde jeg ingen anelse om hva som var den riktige m\u00e5ten \u00e5 gj\u00f8re det p\u00e5.  Etter \u00e5 ha unders\u00f8kt hvorfor og hvordan den nye standardinnstillingen ble innf\u00f8rt, fant jeg ut at omrisset er en fokusindikator for elementer, og hvis den fjernes, m\u00e5 det gis en tydelig fokusstyling. Du kan tilpasse fokusindikatorene som du vil, men \u00e5 fjerne dem helt fra nettstedet er et stort tilgjengelighetsproblem. Det er for eksempel ganske enkelt \u00e5 tilpasse et elements fokusstyling:<\/p>\n\n\n\n
     a:focus {\n   outline: 4px solid #ee7834;\n   outline-offset: 4px;\n }<\/code><\/code> <\/code<\/pre>\n\n\n\n
    Verkt\u00f8y for tilgjengelighet<\/h2>\n\n\n\n
    Det kan v\u00e6re mye arbeid \u00e5 sjekke alle de temaene vi har snakket om, spesielt med tanke p\u00e5 at det er mye mer \u00e5 ta tak i n\u00e5r det gjelder tilgjengelighet, s\u00e5 for \u00e5 hjelpe oss med \u00e5 h\u00e5ndtere tilgjengelighet har vi to flotte nettleserutvidelser.<\/p>\n\n\n\n
    WAVE evalueringsverkt\u00f8y<\/a> er en pakke med evalueringsverkt\u00f8y som hjelper oss med \u00e5 gj\u00f8re nettinnholdet v\u00e5rt mer tilgjengelig. Den er tilgjengelig i b\u00e5de Google Chrome og Firefox. <\/p>\n\n\n\n
    La oss pr\u00f8ve det p\u00e5 en liten webside som inneholder en navbar og en inngang som mangler en etikett og se hva den returnerer, etter \u00e5 ha installert utvidelsen, trenger vi bare \u00e5 klikke p\u00e5 utvidelsesikonet for \u00e5 bruke det.<\/p>\n\n\n\n
    \"hvitt<em>vindu<\/em>med<em>gr\u00e5<\/em>partier\"<\/figure>\n\n\n\n
    Sammendrag-fanen viser 1 feil (skjemaelement som mangler en etikett), 2 kontrastfeil og 1 varsel (manglende overskriftsstruktur), og som du kan se, er resultatet sv\u00e6rt tydelig og detaljert. Fanen Detaljer viser en liste over alle feilene, varslene og funksjonene. Vi kan ogs\u00e5 interagere direkte p\u00e5 siden ved \u00e5 klikke p\u00e5 de r\u00f8de rektanglene for \u00e5 sjekke feilbeskrivelsen og feiltypen.<\/p>\n\n\n\n
    Axe DevTools<\/a> er et kraftig og n\u00f8yaktig tilgjengelighetsverkt\u00f8y. Det er tilgjengelig i b\u00e5de Google Chrome og Firefox. Etter at du har installert utvidelsen, m\u00e5 du \u00e5pne nettleserens utviklingsverkt\u00f8y og g\u00e5 til Axe DevTools-fanen og klikke p\u00e5 Skann alle sidene mine.<\/p>\n\n\n\n
    \"DevTools<em>vindu<\/em>med<em>svart<\/em>gr\u00e5_seksjoner\"<\/figure>\n\n\n\n
    Du kan se at Axe DevTools har rapportert om de samme problemene med WAVE Evaluation Tool, som kontrastproblemer, manglende etikett p\u00e5 skjemaelementet og manglende overskriftselement, og det ga oss til og med noen beste fremgangsm\u00e5ter \u00e5 f\u00f8lge.<\/p>\n\n\n\n
    En annen m\u00e5te \u00e5 teste tilgjengeligheten p\u00e5 er \u00e5 bruke en skjermleser og teste nettstedet ditt med den. Det finnes mange tilgjengelige skjermlesere, for \u00e5 nevne noen f\u00e5:<\/p>\n\n\n\n