De user story die ik koos luidde alsvolgt:
Als organisatie wil ik een overzicht van toegankelijkheidsverbeteringen kunnen bekijken, zodat ik een gevoel kan krijgen wat er moet gebeuren om mijn website/app toegankelijker te maken op het terrein van waarneembaarheid, robuustheid, begrijpelijkheid en bedienbaarheid
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.
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 knoppen die de content laten weergeven.
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.