siem-p / look-and-feel-corporate-identity

Ontwerp en maak voor een opdrachtgever een component of website op basis van een bestaande huisstijl

Toolgankelijk - Vervoerregio Amsterdam

Inhoudsopgave

• Beschrijving
• Kenmerken
• Bronnen
• Licentie

Titel

Toolgankelijk - Het overzicht van de minimale toegankelijkheid richtlijnen voor het verbeteren van toegankelijkheid op een website of applicatie.

Beschrijving

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.

Preview - Website

Live website

⭕ Voor een live bezichtiging -> http://siemva.student.fdnd.nl/

Kenmerken

Voor het maken van deze website is er gebruik gemaakt van HTML, CSS & Javascript.

HTML structuur

In dit project wordt gebruik gemaakt van een simpele HTML layout. Met daarin een <main> <section> <nav> & <article>.

CSS

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!

JavaScript

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>

Bronnen

De WCAG richtlijnen - https://wcag.nl/
Huistijl Vervoerregio Amsterdam -
https://github.com/fdnd-agency/vervoerregio-amsterdam/blob/main/Vervoerregio%20Handboek_Huisstijl%202021.pdf

Licentie

This work is licensed under GNU GPLv3.

look-and-feel-corporate-identity's Issues

Een link?

Als je iets class="link" geeft, is het dan niet gewoon een link? :) Is daar een beter element voor?

look-and-feel-corporate-identity/index.html

Line 81 in 7e8c0e7

<p class="contact-info link">[email protected]</p>

Hoe zorg je dat deze links iets bevatten?

Check het Accessibility tabje in devtools; de linkjes in deze sectie bevatten geen labels/tekst.

look-and-feel-corporate-identity/index.html

Lines 42 to 58 in 7e8c0e7

	<div class="icon-container">
	<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
	<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
	<path
	d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
	</svg></a>
	<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
	<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
	<path
	d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z" />
	</svg></a>
	<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
	<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
	<path
	d="M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32ZM382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z" />
	</svg></a>
	</div>

Bugje in Safari

In Safari ziet je site er zo uit.. Geen idee hoe dit komt, maar lijkt iets met grids te maken te hebben. In Brave/Chromium gaat het wel goed (denk ik :)).

Wat als JS het niet doet?

Stel dat JavaScript om wat voor reden het niet doet, hoe kom je dan bij de verschillende secties op deze pagina? Hint: je verbergt ze met CSS, maar je toont ze weer met JS.

look-and-feel-corporate-identity/waarneembaar.html

Lines 31 to 38 in 7e8c0e7

	<li><button class="nav-button" data-id="card1_0">Waarneembaar</button></li>
	<li><button class="nav-button" data-id="card1_1">Ondertiteling</button></li>
	<li><button class="nav-button" data-id="card1_2">Audiobeschrijving</button></li>
	<li><button class="nav-button" data-id="card1_3">Aanwijzingen</button></li>
	<li><button class="nav-button" data-id="card1_4">Voorlezen</button></li>
	<li><button class="nav-button" data-id="card1_5">Suggesties</button></li>
	<li><button class="nav-button" data-id="card1_6">Tekstgrootte</button></li>
	<li><button class="nav-button" data-id="card1_7">Vergroten</button></li>