Project

General

Profile

Enhancement #4095

Der skal være større kontrast på interaktive elementer

Added by Stefan Søndervang over 1 year ago. Updated about 1 year ago.

Status:
Resolved (tag version)
Priority:
Normal
Assignee:
Target version:
Estimated time:
URL med eksempel:
Kategorier:
Administration - Design (Theming af desktop og mobil), Driftsvedligehold - Teknisk tilgængelighed

Description

Denne sag er lavet på baggrund af anbefalingerne i tilgængelighedsevalueringen af DDB CMS lavet af Sensus.

1. Nemid knap

Knappen ”Log in med NEM ID” har et kontrastforhold på 2.97:1 hvor kravet er 4,5:1 for denne størrelse tekst.

2. Linkbokse

På linksbokse er det laveste kontrastforhold målt til 1,4:1, hvor kravet er 3:1 for overskriften og 4,5:1 for den mindre grå tekst. 

På nedenstående eksempel overholdes kontrastforholdet; her er det laveste målt til 7,9:1. Skyggen, der er lagt i bunden af eksempel 25, bør hæves, så den dækker hele teksten.

Her er det også en mulighed at lægge en sort skygge bag teksten, eksempel:

Farvekombinationer med gode kontraktforhold er især væsentlige for svagsynede og bru-gere, der ikke kan se eller skelne farver.

For at leve op til retningslinjerne for tilgængelighed bør farvevalget ændres, så der ude-lukkende benyttes farvekombinationer, der har de nødvendige kontrastforhold.

3. Interaktive ikoner

På nedenstående eksempel har ikonet til at folde indhold ud, et kontrastforhold på 1,9:1. Kravet for kontrastforholdet for ikoner er 3:1. 

Ikonet til at folde tabellen ind overholder heller ikke kravet, idet kontrastforholdet her er 2,2:1.

Login-ikonet på løsningens mobilmenu overholder ikke kontrastforholdet (1,6:1)

På løsningens pager-ikoner er kontrastforholdet også for lavt (1,2:1). En undtagelse er kontrastforholdet mellem tekst og baggrund, når CSS :hover selectoren benyttes.

Formålet med dette succeskriterium er at sikre, at aktive brugergrænsefladekomponen-ters information præsenteres i en læsbar form for svagsynede.
Farven på ikonet eller baggrund bør ændres for at øge kontrastforholdet således at alle ikoner har et kontrastforhold på minimum 3:1.

1nemid.jpg (15.6 KB) 1nemid.jpg Stefan Søndervang, 01/23/2019 11:08 AM
7pile.jpg (1.91 KB) 7pile.jpg Stefan Søndervang, 01/23/2019 11:57 AM
6pile.jpg (9.22 KB) 6pile.jpg Stefan Søndervang, 01/23/2019 11:57 AM
8pile.jpg (10.8 KB) 8pile.jpg Stefan Søndervang, 01/23/2019 11:57 AM
5pile.jpg (17.9 KB) 5pile.jpg Stefan Søndervang, 01/23/2019 11:57 AM
3rolltab.jpg (47.3 KB) 3rolltab.jpg Stefan Søndervang, 01/23/2019 11:57 AM
4boks.jpg (38.7 KB) 4boks.jpg Stefan Søndervang, 01/23/2019 11:57 AM
2rolltab.jpg (60.9 KB) 2rolltab.jpg Stefan Søndervang, 01/23/2019 11:57 AM
Skærmbillede 2019-09-12 kl. 15.41.56.png (172 KB) Skærmbillede 2019-09-12 kl. 15.41.56.png Gitte Barlach, 09/12/2019 03:44 PM
Skærmbillede 2019-09-12 kl. 15.41.43.png (171 KB) Skærmbillede 2019-09-12 kl. 15.41.43.png Gitte Barlach, 09/12/2019 03:44 PM

Related issues

Related to DDB CMS - Bug #4595: Tabroll overlay for mørk i release 31 (skal merges)Resolved (tag version)
Related to DDB CMS - Enhancement #4606: Der skal være større kontrast under tekst på billeder (IKKE MULIGT AT LØSE I DET NUVÆRENDE DESIGN).Closed

History

#1 Updated by Stefan Søndervang over 1 year ago

  • Description updated (diff)

#2 Updated by Christel Krabbenhøft over 1 year ago

  • Assignee changed from Christel Krabbenhøft to Anonymous

#3 Updated by Benjamin Rasmussen over 1 year ago

  • Assignee changed from Anonymous to Benjamin Rasmussen

#4 Updated by Benjamin Rasmussen over 1 year ago

  • Status changed from Needs design decision to Development

#5 Updated by Benjamin Rasmussen over 1 year ago

  • Status changed from Development to Needs code review
  • Assignee changed from Benjamin Rasmussen to Gitte Barlach

Jeg har et pull-request klart her:
https://github.com/ding2/ding2/pull/1419

Det er en ret bred opgave, men forhåbentlig har jeg fået ram på alle steder hvor farverne mangler kontrast

#6 Updated by Gitte Barlach over 1 year ago

  • Assignee changed from Gitte Barlach to Jørgen Nielsen

#7 Updated by Jørgen Nielsen over 1 year ago

  • Status changed from Needs code review to Reviewed
  • Assignee changed from Jørgen Nielsen to Gitte Barlach

reviewet og godkendt

#8 Updated by Kasper Garnæs over 1 year ago

  • Status changed from Reviewed to Technical test
  • Assignee changed from Gitte Barlach to Kasper Garnæs

Merged.

#9 Updated by Kasper Garnæs over 1 year ago

  • Assignee changed from Kasper Garnæs to Gitte Barlach

#10 Updated by Stefan Søndervang about 1 year ago

  • Assignee changed from Gitte Barlach to Stefan Søndervang

#11 Updated by Nhi A Sy about 1 year ago

  • Status changed from Technical test to Needs code review
  • Assignee changed from Stefan Søndervang to Benjamin Rasmussen

1. er ikke mere relevant, da der er det erstates af SSO login

2. Rolltab er fint, der indsæt en layer til overskrift og teaser teksten

3. Paging ikon ved søgning er fint.
   Login ikonet på mobil er fint
   Åbningstider er kontrast ikke ok, kunne vi ikke bruge den fra paging, background: #505050 og foreground: #ffffff
   Benjamin, vil du lige se på det?

#12 Updated by Gitte Barlach about 1 year ago

  • Status changed from Needs code review to Reviewed - Needs info/rework

#13 Updated by Benjamin Rasmussen about 1 year ago

  • Status changed from Reviewed - Needs info/rework to Development

#14 Updated by Benjamin Rasmussen about 1 year ago

  • Status changed from Development to Need more info
  • Assignee changed from Benjamin Rasmussen to Nhi A Sy

Hej Nhi

 

Jeg læser det som at det kun er åbningstider der er problematisk - er det korrekt? :)

Udover det, så kan jeg ikke rigtigt genskabe constrast problemet..

Jeg kan godt se at kontrasten ikke er god på https://bibliotek.kk.dk/ men på https://upgrade-fbs.ddbcms.dk/ ser det da fint ud?

Vi snakker om det her element, ikke?

 

#15 Updated by Nhi A Sy about 1 year ago

Hej Benjamin

Det er faktisk ikke selve åbningstider ikonet.

Se vedhæftet fil, det er kontrast forskel på baggrundsfarverne mellem 1 og 2.

#16 Updated by Nhi A Sy about 1 year ago

  • Assignee changed from Nhi A Sy to Benjamin Rasmussen

#17 Updated by Benjamin Rasmussen about 1 year ago

  • Status changed from Need more info to Needs code review
  • Assignee changed from Benjamin Rasmussen to Gitte Barlach

Ah, tak, Nhi

Jeg har et PR klart nu:

https://github.com/ding2/ding2/pull/1518

 

Der er screenshots i PR'et hvis nogen skulle være nysgerrig :)

#18 Updated by Gitte Barlach about 1 year ago

  • Assignee changed from Gitte Barlach to Jesper Kristensen

#19 Updated by Jesper Kristensen about 1 year ago

  • Status changed from Needs code review to Reviewed
  • Assignee changed from Jesper Kristensen to Gitte Barlach

Jeg godkender dette da PL laget vil have det med ud men med kommentar:

Next time please check that the test passes CI and Scrutinizer or I'll be forced to decline the changes.

Jeg kan desværre ikke gen-køre test på vejen af en anden udvilker, men da jeg er sikker på at det ikke er relateret lader vi det slippe igennem denne gang.

#20 Updated by Kasper Garnæs about 1 year ago

  • Status changed from Reviewed to Technical test
  • Assignee changed from Gitte Barlach to Kasper Garnæs

Merged.

#21 Updated by Kasper Garnæs about 1 year ago

  • Assignee changed from Kasper Garnæs to Gitte Barlach

#22 Updated by Gitte Barlach about 1 year ago

Testet på stg.aakb.dk med 7.x-5.0.0-beta3
Kontrasten på pileknapperne på siden /biblioteker er nu ok. Hermed godkendt. 

#23 Updated by Rolf Madsen 11 months ago

  • Related to Bug #4595: Tabroll overlay for mørk i release 31 (skal merges) added

#24 Updated by Stefan Søndervang 11 months ago

  • Related to Enhancement #4606: Der skal være større kontrast under tekst på billeder (IKKE MULIGT AT LØSE I DET NUVÆRENDE DESIGN). added

Also available in: Atom PDF