Portfolio Case

- Semantisk HTML: Alt HTML er gennemgået med fokus på at anvende de korrekte semantiske elementer, så skærmlæsere bedre kan forstå og formidle indholdet. Eksempler inkluderer brugen af header, main, section, figure, aside, og footer. Div er blevet erstattet af semantiske alternativer som section eller article, hvor det giver mening.

- Tilføjelse af ARIA: I koden er der blevet tilføjet aria-labels, hvor det er nødvendigt for at give skærmlæsere en bedre beskrivelse af interaktive elementer. Derudover er roles blevet tilføjet for at tydeliggøre formålet med bestemte elementer hvor det ikke har været muligt at anvende semantiske tags. For ikoner er attributten aria-hidden="true" blevet anvendt, så skærmlæsere ignorerer ikonernes visuelle tekst. Dekorative elementer, såsom scroll-animationen, har også fået aria-hidden="true" for at forhindre skærmlæsere i at fokusere på dem og dermed sikre en mere relevant brugeroplevelse.

- Navigation: Der bør kun være én nav på siden. Hvis der bruges flere navigationselementer, tilføjes aria-labels for at beskrive forskellen mellem dem. Fx får .mainNav attributten aria-label="Main Navigation", og .subNav får aria-label="Secondary Navigation".

- Burgermenu og tilgængelighed: For at gøre burgermenu-ikonet tydeligt klikbart og tilgængeligt for besøgende, der bruger hjælpeteknologier, er det omsluttende div-element blevet ændret til et button-element. Dette gør det muligt for skærmlæsere at genkende det som et klikbart element. De steder, hvor det ikke er muligt at erstatte et a-element med et button, er attributten role="button" blevet tilføjet for at forbedre tilgængeligheden.

- Farvekontrast: For at imødekomme brugere med nedsat syn, lysfølsomhed, eller farveblindhed, er kontrastforholdet blevet testet. Et onlineværktøj som Siege Media Contrast Ratio Checker blev brugt til at verificere, at kontrastforholdet ligger mellem de anbefalede værdier på 4.5 og 7. Testen viste, at den primære farvekombination er acceptabel, men i Dark Mode er kontrastforholdet meget højt, hvilket kan medføre en for stor kontrast. Det er dog vurderet, at farverne ikke skal ændres, da tekstens læsbarhed stadig er intakt. I et forsøg på at forbedre kontrasten, anvendes en mildere nuance af sort, #212121.

- Links og synlighed: For at forbedre synligheden af links for personer, der ikke kan skelne farveskift, tilføjes understregning ved hover. Dette simulerer visuelt, at linkene er klikbare. Hover-effekten forbliver uændret, da den hjælper brugere med motoriske vanskeligheder ved at give dem en visuel indikation, når musen er over et klikbart område.

- Ikoner til links: På portfolio-siden er der tilføjet ikoner i øverste højre hjørne af hvert link for at indikere, at det er klikbart. Derved er der mere en én indikation på, at området er interaktivt.

- Farveblindhedstest: Der er gennemført en farveblindhedstest via browserens funktion til at simulere synsnedsættelser. Testen viste ingen problemer, der krævede designændringer.

- Motoriske funktionsnedsættelser: Koden er forbedret for at understøtte hjælpeteknologier. Brug af media-forespørgsler såsom "prefers-reduced-motion" sikrer, at animationer og hover-effekter slås fra, hvis brugerens browser har en præference for reduceret bevægelse. Dette imødekommer brugere med fx bevægelsessyge eller epilepsi.

- Større touch-target: Størrelsen på klikbare elementer såsom knapper er blevet justeret, så de er nemmere at ramme. Minimumsstørrelsen er på de fleste elementer sat til 43x43px for at forbedre brugervenligheden.