Mid Sweden University

In today's digital society, web accessibility is crucial to ensure that all users, regardless of ability or disability, can effectively use websites. This thesis aims to improve the accessibility and usability of a section of Preem's website. Leverage insights from working within Preem's customer service, existing issues were identified, and specific improvements were implemented. The prototype development was carried out in Visual Studio Code using HTML, PHP, CSS, and JavaScript, and was tested with XAMPP. Figma was used to create design sketches, while accessibility tools like WAVE and WebAIM Contrast Checker ensured compliance with WCAG guidelines. Manual testing and user tests complemented these automated tools. Improvements included better contrasts, the use of alt texts, clear labels for forms, and an enhanced navigation structure. User tests demonstrated significant improvements in both accessibility and usability, with high ratings for the prototype's adoption to various devices and the clarity of the FAQ page. Feedback led to further areas that needed improvements, such as improved directions and login landing pages. Overall, the work shows that the implemented improvements have enhanced the accessibility and user experience on Preem's website, providing a solid foundation for continued development and serving as a guide for other organizations aiming to make their websites more inclusive.

I dagens digitala samhälle är webbtillgänglighet avgörande for att säkerställa att alla användare, oavsett förmåga eller funktionsvariation, kan använda webbplatser effektivt. Detta examensarbete syftar till att förbättra tillgängligheten och användarvänligheten på en del av Preems webbplats. Genom att använda erfarenheter från arbetet inom Preems kundtjänst identifierades befintliga problem och konkreta förbättringar implementerades. Utvecklingen av prototypen skedde i Visual Studio Code med HTML, PHP, CSS och JavaScript, och testades med XAMPP. Figma användes for att skapa designskisser, och tillgänglighetsverktyg som WAVE och WebAIM Contrast Checker användes for att säkerställa WCAG-efterlevnad. Manuella tester och användartester genomfördes for att komplettera de automatiserade verktygen. Förbättringarna inkluderade bättre kontraster, användning av alt-texter, tydliga labels för formulär, och en förbättrad navigationsstruktur. Användartester visade betydande förbättringar i både tillgänglighet och användarvänlighet, med höga betyg for prototypens anpassning till olika enheter och tydlighet på FAQ-sidan. Feedback ledde till ytterligare områden som fortfarande kan förbättras, såsom förbättrade vägbeskrivningar och landningssidor for inloggningar. Sammantaget visar arbetet att de implementerade forbättringarna har förbättrat tillgängligheten och användarupplevelsen på Preems webbplats, vilket ger en solid grund for fortsätt utveckling och kan tjäna som vägledning for andra organisationer som vill göra sina webbplatser mer inkluderande.