{"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\/da\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 almindelige problemer med webtilg\u00e6ngelighed, du skal kende"},"content":{"rendered":"

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

Det mest almindelige tilg\u00e6ngelighedsproblem, jeg har set gennem \u00e5rene, er Problem med kontrast og farvetilg\u00e6ngelighed<\/b>Et d\u00e5rligt kontrastforhold vil g\u00f8re det sv\u00e6rt at se indholdet p\u00e5 din side, og det vil v\u00e6re meget skadeligt for dine brugere, ogs\u00e5 dem med synshandicap. <\/p>\n\n\n\n

Kontrast er et m\u00e5l for forskellen i opfattet \"luminans\" eller lysstyrke mellem to farver, for eksempel er det forskellen mellem baggrundsfarven og forgrundsfarven p\u00e5 din sides indhold. Lad os se p\u00e5 denne navbar.<\/p>\n\n\n\n

\"navigationsbj\u00e6lke<\/figure>\n\n\n\n

Lad os sige, at din kunde virkelig kan lide den gr\u00f8nlige farve og synes, den er fantastisk, men der er et problem med kontrasten. Vi har en #FFFFFF<\/code> baggrund med en #83A94C<\/code> tekstfarve, hvilket resulterer i et kontrastforhold p\u00e5 2,71:1, hvilket er langt under minimumskravet. 4.5:1<\/strong> n\u00f8dvendigt. For at opdage dette problem har vi flere l\u00f8sninger: <\/p>\n\n\n\n

    \n
  1. Brug et online-kontrasttjek som f.eks. Webaim-kontrastkontrol<\/a>som beregner kontrastforholdet og giver dig en Pass\u00e9r<\/strong> eller Mislykkes<\/strong> klasse.<\/li>\n\n\n\n
  2. Brug en af de mange udvidelser til kontrastkontrol i browseren, f.eks: WCAG Kontrol af farvekontrast<\/a>.<\/li>\n\n\n\n
  3. Pr\u00f8v browserens integrerede kontrastkontrol. For at bruge den i Google Chrome skal du \u00e5bne udviklingsv\u00e6rkt\u00f8jerne, inspicere det \u00f8nskede element (f.eks. startlinket i vores navbar), g\u00e5 til CSS-farveegenskaben og klikke p\u00e5 farverektanglet for at \u00e5bne farvev\u00e6lgeren, nederst vil du blive pr\u00e6senteret for en kontrastforholdsv\u00e6rdi, udvid den for at f\u00e5 flere detaljer. Processen er n\u00f8jagtig den samme for Firefox, der er bare en lille forskel i forholdet, som vises nederst til venstre i farvev\u00e6lgeren.<\/li>\n<\/ol>\n\n\n\n
    \"sort<em>baggrund<\/em>med<em>bl\u00e5<\/em>kode\"<\/figure>\n\n\n\n

    For at f\u00e5 flere detaljer om kontrast tjek dette Artikel om kontrast- og farvetilg\u00e6ngelighed<\/a>.<\/p>\n\n\n\n

    Problem med link-tekst<\/h2>\n\n\n\n

    Links er en stor del af web<\/a> i disse dage, s\u00e5 det er meget vigtigt at g\u00f8re dem tilg\u00e6ngelige. Et link skal give mening og informere brugeren om dets kontekst, s\u00e5 et uinformativt link med tekst som l\u00e6s mere, klik her, tjek detaljer er ikke s\u00e6rlig nyttigt, s\u00e5 i stedet for at tilf\u00f8je \"tjek detaljer\" til produkt<\/a> detaljer, for eksempel er det bedre og mere informativt at bruge produktnavnet som \"The Mandalorian Helmet\". Ord som klik her<\/code> eller mere om<\/code> kan udelades, fordi et link som standard er klikbart, og noget som \"mere om dagens nyheder\" kan forkortes til \"dagens nyheder\". Der er ingen s\u00e6rlig regel eller gr\u00e6nse for linkl\u00e6ngden. Linket skal v\u00e6re l\u00e6sbart<\/b> og lang nok til at give en god beskrivelse af dens form\u00e5l.<\/p>\n\n\n\n

    Billeder som links er et meget brugt m\u00f8nster, s\u00e5 det skal f\u00f8lge de samme regler, som vi har talt om ovenfor. Billedets alt-attribut vil spille rollen som linktekst og blive annonceret af sk\u00e6rml\u00e6sere. Der er flere scenarier for behandling af billeder som links: Hvis billedet er det eneste indhold i linket, skal det have en alt-attribut, og hvis linket indeholder b\u00e5de tekst og billede, kan vi udelade alt-attributten - her er nogle eksempler:<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Meddelelser">\r\n<\/a><\/code><\/pre>\n\n\n\n
    Se nogle links her for at l\u00e6se om tilg\u00e6ngelighed til links:Linktekst og udseende<\/a>, Funktionelle billeder<\/a>.<\/p>\n\n\n\n
    Formularinput mangler en etiket<\/h2>\n\n\n\n
    \"input<em>labels<\/em>med<em>bl\u00e5<\/em>knap\"<\/figure>\n\n\n\n
    Vi har alle set disse formularinput f\u00f8r uden etiket og kun en pladsholder til at beskrive form\u00e5let med inputtet. En f\u00f8rste bem\u00e6rkning er, at s\u00e5 snart brugeren udfylder alle input, og pladsholderne ikke l\u00e6ngere er synlige, vil vi ikke have nogen visuel kontekst om inputets form\u00e5l, men lad os<\/a> Fokuser p\u00e5 tilg\u00e6ngeligheden her. <\/p>\n\n\n\n
    Tilknytning af en m\u00e6rke<\/code> til et input giver os to store fordele: En sk\u00e6rml\u00e6ser vil l\u00e6se etiketten op, n\u00e5r brugeren har fokus p\u00e5 formularinputtet, og n\u00e5r der klikkes p\u00e5 en etiket, eller der r\u00f8res ved den, flytter browseren fokus til det tilh\u00f8rende input. En nem l\u00f8sning p\u00e5 den slags situationer er bare at tilf\u00f8je labels p\u00e5 f\u00f8lgende m\u00e5de:<\/p>\n\n\n\n
        Fornavn\n\n    \n  \n\n    Efternavn\n\n    \n  \n\n    E-mail\n\n    \n  \n\n    Send ind\n  \n\n```<\/code><\/pre>\n\n\n\n
    Det var det, alle inputs har deres tilh\u00f8rende labels, hvilket g\u00f8r dem tilg\u00e6ngelige for alle. Vi kan endda fjerne pladsholderne for at undg\u00e5 at duplikere form\u00e5let med input, men vi ved alle, at scenarier i den virkelige verden ikke er s\u00e5 nemme at h\u00e5ndtere, du har lige modtaget et design, der har disse formularinput uden labels, og kunden \u00f8nsker ikke at \u00e6ndre den del. Den f\u00f8rste l\u00f8sning, man kommer i tanke om, er at anvende en display: ingen;<\/code> eller synlighed: skjult;<\/code> til vores etiketter, vil det skjule dem, men de er der stadig, ikke? Disse egenskaber skjuler ikke kun elementer p\u00e5 sk\u00e6rmen, men ogs\u00e5 for brugere af sk\u00e6rml\u00e6sere, s\u00e5 det vil ikke l\u00f8se vores problem.<\/p>\n\n\n\n
    Vi kan bruge Clipsm\u00f8nster<\/strong> til at l\u00f8se dette. P\u00e5 den m\u00e5de vil vi skjule indholdet visuelt, men alligevel give indholdet til sk\u00e6rml\u00e6sere. Vi opretter f\u00f8lgende CSS Kun sr<\/code> klasse og anvende den p\u00e5 alle vores 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\u00f8jde: 1px;\n   overl\u00f8b: skjult;\n   position: absolut;\n   white-space: nowrap;\n   width: 1px;\n }\n<\/code><\/code>.<\/pre>\n\n\n\n
    Det vil skjule vores etiketter, g\u00f8re dem tilg\u00e6ngelige for sk\u00e6rml\u00e6sere og matche vores design. Den :not(:focus):not(:active)<\/code> pseudoklasse forhindrer fokuserbare elementer som f.eks. a<\/code>, knap<\/code>, input<\/code> fra at blive skjult, n\u00e5r man modtager fokus.<\/p>\n\n\n\n
    Ingen fokusindikator<\/h2>\n\n\n\n
    Engang gjorde jeg det i mit globale CSS-stilark:<\/p>\n\n\n\n
    * {\noutline: none; \/* forf\u00e6rdelig fejl *\/\n}<\/code><\/pre>\n\n\n\n
    Omkring 2020 bem\u00e6rkede jeg, at der dukkede sorte kanter op p\u00e5 Google Chrome-formularinput, n\u00e5r de var fokuserede, eller p\u00e5 knapperne, n\u00e5r man tabbede ind - det var virkelig underligt, da jeg ikke forstod det p\u00e5 det tidspunkt, men efter nogle unders\u00f8gelser har jeg fundet ud af, at det er p\u00e5 grund af CSS-egenskaben outline, s\u00e5 det l\u00f8ste det 'problem' for mig at fjerne.<\/p>\n\n\n\n
    P\u00e5 det tidspunkt havde jeg ingen id\u00e9 om, hvad der var den rigtige m\u00e5de at g\u00f8re det p\u00e5.  Efter at have unders\u00f8gt hvorfor og hvordan med den nye standard fandt jeg ud af, at outline er en elementfokusindikator, og hvis den fjernes, skal der v\u00e6re en tydelig fokusstyling, s\u00e5 det, jeg gjorde, betragtes som en d\u00e5rlig praksis. Du kan tilpasse fokusindikatorer, som du vil, men at fjerne dem helt fra hjemmesiden er et stort tilg\u00e6ngelighedsproblem. Det er f.eks. ret nemt at tilpasse et elements fokusstyling:<\/p>\n\n\n\n
     a:focus {\n   outline: 4px solid #ee7834;\n   outline-offset: 4px;\n }<\/code><\/code>.<\/pre>\n\n\n\n
    V\u00e6rkt\u00f8jer til tilg\u00e6ngelighed<\/h2>\n\n\n\n
    Det kan v\u00e6re et stort arbejde at tjekke alle de emner, vi har talt om, is\u00e6r n\u00e5r man ved, at der er mange flere ting, der skal d\u00e6kkes om tilg\u00e6ngelighed, s\u00e5 for at hj\u00e6lpe os med at h\u00e5ndtere tilg\u00e6ngelighed har vi 2 gode browserudvidelser.<\/p>\n\n\n\n
    WAVE evalueringsv\u00e6rkt\u00f8j<\/a> er en r\u00e6kke evalueringsv\u00e6rkt\u00f8jer, der hj\u00e6lper os med at g\u00f8re vores webindhold mere tilg\u00e6ngeligt. Den er tilg\u00e6ngelig i b\u00e5de Google Chrome og Firefox. <\/p>\n\n\n\n
    Lad os pr\u00f8ve det p\u00e5 en lille webside, der indeholder en navigationslinje og et input, der mangler en etiket, og se, hvad den returnerer, n\u00e5r vi har installeret udvidelsen, skal vi bare klikke p\u00e5 udvidelsesikonet for at bruge den.<\/p>\n\n\n\n
    \"hvidt<em>vindue<\/em><\/figure>\n\n\n\n
    Fanen Summary viser 1 fejl (formularelementet mangler en label), 2 kontrastfejl og 1 advarsel (manglende overskriftsstruktur), og som du kan se, er resultatet meget klart og detaljeret. Fanen Detaljer viser en liste over alle fejl, advarsler og funktioner. Vi kan ogs\u00e5 interagere direkte p\u00e5 siden ved at klikke p\u00e5 de r\u00f8de rektangler for at tjekke fejlbeskrivelsen og -typen.<\/p>\n\n\n\n
    Axe DevTools<\/a> er et kraftfuldt og pr\u00e6cist tilg\u00e6ngelighedsv\u00e6rkt\u00f8jss\u00e6t. Det er tilg\u00e6ngeligt i b\u00e5de Google Chrome og Firefox. N\u00e5r vi har installeret udvidelsen, skal vi \u00e5bne browserens udviklingsv\u00e6rkt\u00f8jer og g\u00e5 til fanen axe DevTools og klikke p\u00e5 Scan alle mine sider.<\/p>\n\n\n\n
    \"DevTools<em>vindue<\/em>med<em>sorte<\/em>gr\u00e5_sektioner\"<\/figure>\n\n\n\n
    Du kan se, at Axe DevTools har rapporteret de samme problemer med WAVE Evaluation Tool, som er kontrastproblemer, formularelementer, der mangler en etiket, og manglende overskriftselementer, og det gav os endda nogle bedste fremgangsm\u00e5der at f\u00f8lge.<\/p>\n\n\n\n
    En anden m\u00e5de at teste tilg\u00e6ngeligheden p\u00e5 er at bruge en sk\u00e6rml\u00e6ser og teste dit website med den. Der findes mange sk\u00e6rml\u00e6sere, for blot at n\u00e6vne nogle f\u00e5:<\/p>\n\n\n\n