Tillgänglighet och användarvänlighet inom webbutveckling
Renkonen, Sebastian (2024)
Renkonen, Sebastian
2024
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2024052917661
https://urn.fi/URN:NBN:fi:amk-2024052917661
Tiivistelmä
Arbetet har utmynnat i en webbsida som byggts med primärt fokus på tillgänglighet och användarvänlighet. Syftet med detta var att sidan ska kunna nå ut till bredast möjliga publik och att användare oavsett eventuell funktionsnedsättning ska kunna ta del av den. För att följa den europeiska rättsakten om tillgänglighet beaktas riktlinjer ur Web Content Accessibility Guidelines (WCAG); en samling riktlinjer framtagna av World Wide Web Consortium (W3C).
För ändamålet har ramverk och bibliotek med öppen källkod använts som aktivt utvecklas av dess användare och som har grundläggande funktioner för tillgänglighet färdigt inbyggda. Öppen källkod prioriterades för att själv kunna utöka dess funktionalitet vid behov.
Front-end utvecklades med metaramverket Nuxt och använde sig av TailwindCSS samt komponentbiblioteket Shadcn/ui. Back-end använde även Nuxt för att kommunicera med den molnbaserade databasen Supabase. Samtliga teknologier har övervägts mot motsvarande alternativ och valts med beaktande av tillgänglighetsfunktioner, prestanda, digital integritet, och utvecklarupplevelse (DX).
Webbsidan uppnår kraven för AA-standarden angiven i WCAG och bibehåller även en visuell karaktär som urskiljer sig från motsvarande webbsidor. Typsnitten som används för brödtext är utvecklade för att vara lättlästa. Färgkontrasten mellan text och bakgrund är tillräcklig för att kunna läsas av användare med nedsatt syn. Sidan kan navigeras med antingen pekskärm, mus, eller tangentbord, och fungerar på de flesta moderna webbläsarna oavsett skärmstorlek. The work has resulted in a website that has been built with accessibility and userfriendliness as its primary focus. The purpose of this was that the site would be able to reach out to as wide an audience as possible and that all users, no matter potential disabilities, could partake in it. To conform to the European accessibility act, the Web Content Accessibility Guidelines (WCAG) have been followed; a collection of guidelines developed by the World Wide Web Consortium (W3C). For this purpose, the frameworks and libraries used all have open-source code that is actively developed by its users, and which have basic functionality for accessibility already built in. Open source was prioritized to enable the expansion of functionalities as needed.
The frontend was developed with the meta-framework Nuxt and used TailwindCSS along with the component library Shadcn/ui. Backend also used Nuxt for communicating with the cloud-based Supabase database. All technologies have been compared to equivalent alternatives and chosen based on accessibility features, performance, digital privacy, and developer experience (DX).
The website meets the criteria for the AA-standard set in the WCAG while also maintaining a visual flair that distinguishes it from similar websites. The fonts used for body text are developed to be easy to read. The color contrast between text and background is sufficient to be read by users with impaired vision. The site can be navigated using a touch screen, mouse, or keyboard, and works on most modern web browsers regardless of screen size.
För ändamålet har ramverk och bibliotek med öppen källkod använts som aktivt utvecklas av dess användare och som har grundläggande funktioner för tillgänglighet färdigt inbyggda. Öppen källkod prioriterades för att själv kunna utöka dess funktionalitet vid behov.
Front-end utvecklades med metaramverket Nuxt och använde sig av TailwindCSS samt komponentbiblioteket Shadcn/ui. Back-end använde även Nuxt för att kommunicera med den molnbaserade databasen Supabase. Samtliga teknologier har övervägts mot motsvarande alternativ och valts med beaktande av tillgänglighetsfunktioner, prestanda, digital integritet, och utvecklarupplevelse (DX).
Webbsidan uppnår kraven för AA-standarden angiven i WCAG och bibehåller även en visuell karaktär som urskiljer sig från motsvarande webbsidor. Typsnitten som används för brödtext är utvecklade för att vara lättlästa. Färgkontrasten mellan text och bakgrund är tillräcklig för att kunna läsas av användare med nedsatt syn. Sidan kan navigeras med antingen pekskärm, mus, eller tangentbord, och fungerar på de flesta moderna webbläsarna oavsett skärmstorlek.
The frontend was developed with the meta-framework Nuxt and used TailwindCSS along with the component library Shadcn/ui. Backend also used Nuxt for communicating with the cloud-based Supabase database. All technologies have been compared to equivalent alternatives and chosen based on accessibility features, performance, digital privacy, and developer experience (DX).
The website meets the criteria for the AA-standard set in the WCAG while also maintaining a visual flair that distinguishes it from similar websites. The fonts used for body text are developed to be easy to read. The color contrast between text and background is sufficient to be read by users with impaired vision. The site can be navigated using a touch screen, mouse, or keyboard, and works on most modern web browsers regardless of screen size.