# Oprettelse af tilgængelige websider ![Alt om tilgængelighed](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.da.png) > Sketchnote af [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz før lektionen [Quiz før lektionen](https://ff-quizzes.netlify.app/web/) > Internettets styrke ligger i dets universalitet. Adgang for alle, uanset handicap, er en essentiel del. > > \- 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 per definition ekskluderende. Som webudviklere bør vi altid have tilgængelighed i tankerne. Ved at fokusere på dette fra starten er du godt på vej til at sikre, at alle kan få adgang til de sider, du skaber. I denne lektion lærer du om værktøjer, der kan hjælpe dig med at sikre, at dine webressourcer er tilgængelige, og hvordan du bygger med tilgængelighed for øje. > 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 at bruge ### Skærmlæsere Et af de mest kendte tilgængelighedsværktøjer er skærmlæsere. [Skærmlæsere](https://en.wikipedia.org/wiki/Screen_reader) bruges ofte af personer med synsnedsættelser. Når vi bruger tid på at sikre, at en browser korrekt formidler den information, vi ønsker at dele, skal vi også sikre, at en skærmlæser gør det samme. En skærmlæser vil i sin enkleste form læse en side højt fra top til bund. Hvis din side kun består af tekst, vil læseren formidle informationen på en lignende måde som en browser. Men websteder er sjældent kun tekst; de indeholder links, grafik, farver og andre visuelle komponenter. Der skal tages hensyn til, at denne information læses korrekt af en skærmlæser. Alle webudviklere bør sætte sig ind i, hvordan en skærmlæser fungerer. Som nævnt ovenfor er det det værktøj, dine brugere vil benytte. På samme måde som du kender til, 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 give nogle grundlæggende navigationsfunktioner, som f.eks. [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 anderledes end skærmlæsere og 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 personer med synsnedsættelser, er zoom. Den mest grundlæggende form for zoom er statisk zoom, som styres med `Control + plus-tegn (+)` eller ved at reducere 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 bruger specialiseret software til at forstørre et område af skærmen og panorere, ligesom man bruger et forstørrelsesglas. På Windows er [Forstørrelsesglas](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 en tredjeparts forstørrelsessoftware 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/). ### Kontrasttestere Farver på websteder skal vælges omhyggeligt for at imødekomme behovene hos farveblinde brugere eller personer, der har svært ved at se farver med lav kontrast. ✅ Test et websted, du godt kan lide, for farvebrug med en browserudvidelse som [WCAG's farvetester](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Hvad lærer du? ### 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 indtryk af tilgængeligheden (samt andre analyser) af et websted. Selvom det er vigtigt ikke at stole udelukkende 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 vilkårligt websted. Hvad opdager du? ## Design med tilgængelighed for øje Tilgængelighed er et relativt stort emne. For at hjælpe dig er der mange ressourcer tilgængelige. - [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) Selvom vi ikke kan dække alle aspekter af at skabe tilgængelige sider, er nedenfor 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 visuelle principper ### Farvesikre paletter Folk ser verden på forskellige måder, og det inkluderer farver. Når du vælger et farveskema til dit websted, bør du sikre, at det er tilgængeligt for alle. Et fantastisk [værktøj til at generere farvepaletter er Color Safe](http://colorsafe.co/). ✅ Identificer et websted, der er meget problematisk i dets brug af farver. Hvorfor? ### Brug korrekt HTML Med CSS og JavaScript er det muligt at få ethvert element til at ligne enhver type kontrol. `` kunne bruges til at skabe en `