De user story die ik koos luidde alsvolgt:
Als gebruiker wil ik de webiste in een Donkere modus kunnen bekijken voor tijdens de donkere maanden
Als gebruiker wil ik een terug naar boven kunnen vinden om gemakkelijker te navigeren
De sitemap begint op de landingspagina met een minimalistische opmaak. Het bestaat uit 3 onderdelen: een header, een main die is opgesplitst in 2 secties (de titel van het product en de aside met 4 hoofdcatergorieën).
https://stefan-espant.github.io/all-human-accessible-website/
De sitemap is opgebouwd uit de 3 basistalen: HTML, CSS & Javascript.
De html bestaat overal uit dezelfde indeling: een head en een body.
In de head worden 4 css bestanden in geladen die voor de style zorgen. Ook word er een favicon geladen voor in de tabbladen die snel weergeven dat het om de Toolgankelijk website gaat.
Dit zijn de linkjes naar de CSS:
<link rel="stylesheet" href="../styles/style.css" />
<link rel="stylesheet" href="../styles/mobile.css" />
<link rel="stylesheet" href="../styles/tablet.css" />
<link rel="stylesheet" href="../styles/desktop.css" />
Dit is de link die de favicon projecteert:
<link rel="icon" type="image/png" href="./assets/va-favicon.png"/>
De body bestaat overal uit dezelfde indeling: een header, een aside en een main element.
De header bevat de volgende 2 onderdelen: een logo en een balk die word verbonden door een vloeiende golf.
<img id="logo" src="../assets/logo.png" alt="logo Vervoerregio Amsterdam"/>
<div id="after-curve"></div>
De aside bestaat uit 4 knoppen die doorlinken naar de hoofdcatergorieën:
<a href="waarneembaar.html" class="categorie">
In de main wordt alle content getoond en getoggled wanneer de gebruiker op een knop klikt. Dit component bevat headings, tekst, links, afbeeldingen.
Alle pagina's hebben een scroll-behavior: smooth; om vloeiend te scrollen.
Ook heb ik alle klikbare elementen een transition: 0.8s gegeven om vloeiend en aangenaam van state te veranderen. Harde animaties wordt over het algemeen als grof beschouwd.
Javascript heb ik toegepast op de volgende functies:
De content-item knoppen die de content laten weergeven in de main.
De contrast knop die de verhouding van kleurcontrasten verhoogd en zo aan de WCAG AAA-eisen voldoen.
De tekstvergroot knop die de tekst in de main vergroot tot 200%.
De funcitie om feedback te geven op de website en reactie hierop aan de gebruiker.
Om het product te bouwen heb ik de volgende websites gebruikt voor antwoorden, voorbeelden en kennis.
https://css-tricks.com
https://developer.mozilla.org/en-US/
https://stackoverflow.com
https://whaa.dev
This work is licensed under GNU GPLv3.