diff --git a/1-getting-started-lessons/3-accessibility/translations/README.md b/1-getting-started-lessons/3-accessibility/translations/README.md new file mode 100644 index 00000000..84654c52 --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/README.md @@ -0,0 +1,231 @@ +# Oprettelse af tilgængelige websider + +![Alt om tilgængelighed](../../sketchnotes/webdev101-a11y.png) +> Sketchnote af [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz før undervisning +[Quiz før undervisning](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5) + +> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. +> +> \- Sir Timothy Berners-Lee, W3C-direktør og opfinder af World Wide Web + +Dette citat fremhæver perfekt vigtigheden af at skabe tilgængelige hjemmesider. En applikation, der ikke kan tilgås af alle, er pr. definition ekskluderende. Som webudviklere bør vi altid have tilgængelighed i tankerne. Ved at have dette fokus fra begyndelsen vil du være godt på vej til at sikre, at alle kan få adgang til de sider, du opretter. I denne lektion lærer du om de værktøjer, der kan hjælpe dig med at sikre, at dine webaktiver er tilgængelige, og hvordan du bygger med tilgængelighed i tankerne. + +> Du kan tage denne lektion på [Microsoft Learn] (https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! + +## Værktøjer, der skal bruges + +### Skærmlæsere + +Et af de mest kendte tilgængelighedsværktøjer er skærmlæsere. + +[Screen readers](https://en.wikipedia.org/wiki/Screen_reader) er almindeligt anvendte klienter til personer med nedsat syn. Når vi bruger tid på at sikre, at en browser korrekt formidler de oplysninger, vi ønsker at dele, skal vi også sikre, at en skærmlæser gør det samme. + +Helt grundlæggende vil en skærmlæser læse en side fra top til bund med lyd. Hvis din side kun består af tekst, vil læseren formidle informationen på samme måde som en browser. Selvfølgelig er websider sjældent ren tekst; de vil indeholde links, grafik, farver og andre visuelle komponenter. Der skal udvises omhu for at sikre, at disse oplysninger læses korrekt af en skærmlæser. + +Enhver webudvikler bør gøre sig bekendt med en skærmlæser. Som fremhævet ovenfor, er det den klient, dine brugere vil bruge. På samme måde som du er bekendt med, hvordan en browser fungerer, bør du lære, hvordan en skærmlæser fungerer. Heldigvis er skærmlæsere indbygget i de fleste operativsystemer. + +Nogle browsere har også indbyggede værktøjer og udvidelser, der kan læse tekst højt eller endda give nogle grundlæggende navigationsfunktioner, såsom [disse tilgængelighedsfokuserede Edge-browserværktøjer] (https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Disse er også vigtige tilgængelighedsværktøjer, men fungerer meget forskelligt fra skærmlæsere, og de bør ikke forveksles med testværktøjer til skærmlæsere. + +✅ Prøv en skærmlæser og en browsertekstlæser. På Windows er [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) inkluderet som standard, og [JAWS](https://webaim.org/articles/jaws/) og [NVDA](https://www.nvaccess.org/about-nvda/) kan også installeres. På macOS og iOS er [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) installeret som standard. + +### Zoom + +Et andet værktøj, der ofte bruges af mennesker med synsnedsættelse, er zoom. Den mest basale form for zoom er statisk zoom, der styres med `Control + plustegn (+)` eller ved at mindske skærmopløsningen. Denne type zoom får hele siden til at ændre størrelse, så det er vigtigt at bruge [responsivt design] (https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) for at give en god brugeroplevelse ved øgede zoomniveauer. + +En anden type zoom er afhængig af specialiseret software til at forstørre et område af skærmen og panorere, ligesom når man bruger et rigtigt forstørrelsesglas. I Windows er [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) indbygget, og [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) er et forstørrelsesprogram fra en tredjepart med flere funktioner og en større brugerbase. Både macOS og iOS har en indbygget forstørrelsessoftware kaldet [Zoom](https://www.apple.com/accessibility/mac/vision/). + +### Kontrasttjek + +Farver på hjemmesider skal vælges med omhu for at imødekomme behovene hos farveblinde brugere eller folk, der har svært ved at se farver med lav kontrast. + +✅ Test et websted, du nyder at bruge, for farvebrug med en browserudvidelse som [WCAG's color checker] (https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Hvad lærer du af det? + +### Lighthouse + +I udviklerværktøjsområdet i din browser finder du Lighthouse-værktøjet. Dette værktøj er vigtigt for at få et første overblik over tilgængeligheden (samt andre analyser) af et websted. Selvom det er vigtigt ikke udelukkende at stole på Lighthouse, er en score på 100 % meget nyttig som udgangspunkt. + +✅ Find Lighthouse i din browsers udviklerværktøjspanel, og kør en analyse på et hvilket som helst websted. hvad opdager du? + +## Design for tilgængelighed + +Tilgængelighed er et relativt stort emne. For at hjælpe dig er der mange ressourcer til rådighed. + +- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) + +Vi vil ikke kunne dække alle aspekter af at skabe tilgængelige sider, men nedenfor er nogle af de grundlæggende principper, du bør implementere. At designe en tilgængelig side fra starten er **altid** lettere end at gå tilbage til en eksisterende side for at gøre den tilgængelig. + +## Gode principper for visning + +### Farvesikre paletter + +Folk ser verden på forskellige måder, og det gælder også farver. Når du vælger et farveskema til din hjemmeside, bør du sikre dig, at det er tilgængeligt for alle. Et godt [værktøj til at generere farvepaletter er Color Safe](http://colorsafe.co/). + +✅ Identificer et websted, der er meget problematisk i sin brug af farver. Hvorfor er den det? + +### Brug korrekt HTML + +Med CSS og JavaScript er det muligt af omdanne alle elementer til enhver type af kontrolelement. `` kan bruge til at skabe et `