search

kolplattformen / skolplattformen

The source code to the civic tech project Öppna Skolplattformen.
https://skolplattformen.org
Apache License 2.0
799 stars 177 forks source link

Anpassningar för bättre tillgänglighet #457

Closed webberian closed 2 years ago

webberian commented 3 years ago

Ett antal färger i den nya designen uppfyller inte WCAG AAA kontrastkraven. För text av "normal" storlek ska konstrastförhållandet vara 7:1, för "stor" text gäller 4,5:1. ("Large text is defined as minimum 18pt or minimum 14pt if bold." Vet inte riktigt vad som räknas som "stor" i app-sammanhang.)

Nedan är testat på iOS direkt på skärmen. Jag har dock försökt dubbelkolla kontrastvärden utifrån färgkoderna som finns i design json-filerna i den mån det går.

DARK MODE

  1. Vyn för barnöversikt

    • "Anmäl frånvaro" uppfyller inte kontrastkraven.
    • Grå pilen uppfyller inte kontrastkraven.
    • Logga-ut-menyn: -- "Inställningar"-texten uppfyller inte kontrastkraven. (Är denna text överhuvudtaget nödvändigt just nu när det bara finns ett alternativ? Eller var det kanske ett tidigare tillgänglighetskrav att menyer skulle ha namn?...) -- "Logga ut"-texten uppfyller inte kontrastkraven.

  2. Språkväljare

    • Det engelska språknamnet uppfyller inte kontrastkraven.
    • "Tillbaka"-texten uppfyller inte kontrastkraven.

  3. Nyheter

    • Författar- och datumtexten uppfyller inte kontrastkraven (dock uppmätt till 6,93, så väldigt nära).
    • Text vid menyalternativen (Nyheter, Aviseringar, osv.) längst ner: varken cerise eller grå uppfyller kontrastkraven.

  4. Anmäl frånvaro

    • Inmatningsfältet syns inte så väl. Ge inmatningsfältet en ljus bakgrund eller en ram runt för att framhäva fältet. (Se t.ex. denna WCAG artikel för mer info.)
    • Fältrubriken "Personnummer" känns onödigt liten och därmed svårläst. Går det att öka?
    • Barnets namn högst upp är onödigt litet. Om det kan vara svårt att få plats med hela namnet kanske ikonen med barnets första två bokstäver (som används vid barnöversikten) kan användas? Se dock även önskemålet #452 .

LIGHT MODE

  1. Vyn för barnöversikt

    • Grå pilen uppfyller inte kontrastkraven.
    • Logga-ut-menyn: -- "Inställningar"-texten uppfyller inte kontrastkraven. (Är denna text överhuvudtaget nödvändigt just nu när det bara finns ett alternativ?) -- "Logga ut"-texten uppfyller inte kontrastkraven.

  2. Nyheter

    • Grå text vid menyalternativen (Aviseringar, Kalender, osv.) längst ner uppfyller inte kontrastkraven.

  3. Anmäl frånvaro

    • "Dina barn"-texten uppfyller inte kontrastkraven (dock uppmätt till 6,81, så väldigt nära).
    • Inmatningsfältet syns inte så väl. Ge inmatningsfältet en mörkare bakgrund eller en ram runt för att framhäva fältet.
    • Fältrubriken "Personnummer" uppfyller inte kontrastkraven och känns dessutom onödigt liten och därmed svårläst.

För vidare läsning om tillgänglighet i appar kan denna från Microsoft rekommenderas. Den poängterar bl.a. vikten av att använda större typsnittsstorlekar om möjligt.

viktorlarsson commented 3 years ago

@edenstrom Löste vi allt här?

edenstrom commented 3 years ago

Punkten

Barnets namn högst upp är onödigt litet. Om det kan vara svårt att få plats med hela namnet kanske ikonen med barnets första två bokstäver (som används vid barnöversikten) kan användas? Se dock även önskemålet Byta barn genom att klicka på namnet #452 .

Är inte löst, men den har en annan issue med. @viktorlarsson

Resten är löst exkl. systemdialoger.

irony commented 2 years ago

Skapar nytt kort för den kvarvarande delen