Toolgankelijk - Het overzicht van de minimale toegankelijkheid richtlijnen voor het verbeteren van toegankelijkheid op een website of applicatie.
In deze repository is mijn opdracht voor 'Look and feel corporate identity - Vervoerregio Amsterdam' te vinden.
De user stories die behandeld zijn in mijn project:
#1 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.
#15 Als bezoeker van de tool wil ik contactinformatie kunnen achterhalen over wie de eigenaar/maker van deze tool is.
⭕ Voor een live bezichtiging -> http://siemva.student.fdnd.nl/
Voor het maken van deze website is er gebruik gemaakt van HTML, CSS & Javascript.
In dit project wordt gebruik gemaakt van een simpele HTML layout.
Met daarin een <main> <section> <nav> & <article>.
Vormgeving en media queries zijn een belangrijk onderdeel van de website. Volgens mijn analyse is het noodzakelijk dat ik de huisstijl van Vervoerregio Amsterdam volg. Zie bronnen voor de link naar de huisttijl (pdf).
Media queries is een erg belangrijk onderdeel van de website. (Dit is nog niet af) Tijdens de analyse en ontwerpfase heb ik ondervonden dat de onderstaande mediaqueries belangrijk zijn voor het gebruik van de website.
@media (min-width: 1024px) {} - Desktop
@media (min-width: 768px) and (max-width: 1023px) {} - Tablet/iPad
@media (min-width: 320px) and (max-width: 767px) {} - Mobile
Responsiveness is nog niet af!
Voor het bouwen van de eerste user story was er een belangrijk stuk JavaScript nodig.
Dit had ik op meerdere manieren kunnen doen, maar ik heb gekozen om het met data-id's te doen.
const navButtons = document.querySelectorAll(".nav-button");
const cardsContent = document.querySelectorAll(".card-heading");
console.log(navButtons.length);
console.log(cardsContent.length);
navButtons.forEach((item) => {
item.addEventListener("click", () => {
const id = item.dataset.id;
const active = document.getElementById(id);
cardsContent.forEach((content) => content.classList.add("hide-show"));
active.classList.remove("hide-show");
});
});
In de HTML wordt hier een kopje wel of niet laten zien, door middel van de data-id.
<li ><button class="nav-button" data-id="card1_0">Waarneembaar</button></li>
De WCAG richtlijnen -
https://wcag.nl/
Huistijl Vervoerregio Amsterdam -
https://github.com/fdnd-agency/vervoerregio-amsterdam/blob/main/Vervoerregio%20Handboek_Huisstijl%202021.pdf
This work is licensed under GNU GPLv3.