Bread and butter is een event dat is gehouden in November 2024 waarbij kennis wordt gedeeld met klanten en gastsprekers. Het gaat over goede toegankelijkheid van websites. Er komt een one-pager waar overzichtelijk staat over het event dat heeft plaatsgevonden.
De webiste is een one-pager wat betekent dat alle informatie alleen maar op een pagina staat. De pagina is opgedeeld in een header, body (met secties erin) en footer.
Op de header staat het JUST logo met aan de rechterkant een switch waar je van dark naar lightmode en andersom kan gaan.
In de HTML is er conventie toegepast. Dit voor een overzichtelijke HTML wat helpt met makkelijk coderen. Alle elementen worden per enter in een rij gezet zodat je ziet welke elementen in wat staan. Zo zijn de hoofdelementen: body en head en hier vallen header, sections en footer in
De volgorde van de CSS staan op volgorde hoe de HTML is opgebouwd. Hierbij staan de grote elementen bovenaan zoals de body en *. Ook staan de keyframes helemaal onderaan zodat deze altijd worden uitgevoerd wanneer ze worden benoemd in een class. Alle classes in een specifieke class zijn genest in het hoofdelement zo wordt de h1 van een sectie benoemd in de body class.
Media Queries worden genest in de class zelf
De naamgeving wordt als kebabcase gebruikt. In de custom CSS properties zie je dat dit is opgesteld per element.
Aangezien het belangrijk is dat de website toegankelijk is voor iedereen wordt er een Lighthouse test uitgevoerd op de website maar niet voordat we door de eisen gaan van de briefing.
Door de functie "tabindex" is het mogelijk om door de content te navigeren met alleen toetsenbord.
Ook is er rekening gehouden met de kleurblindheid. In de test staat dat groen niet goed samengaat met een donkere achtergrond dus het groen is uit de color-palette gehaald op de stickers na. Er zijn veel verschillende soorten kleurenblindheid. Hier gebruik ik de bron AcessCSS. Hier kan ik dan drie filters toepassen op de website CSS zones, Greyscale en Colorblindfilter. Dit moet gedaan worden met een speciale variant ".scss". Dit is wat om later uit te zoeken echter ga ik gebruik maken avn de CSS zones en de greyscale. Op de header staan buttons om dit in te schakelen.
Voor de lighthouse test scoort de website 80%. Enkele goede punten zijn dat de language Engels is van de pagina, ARIA roles en alle elementen hebben een toegankelijke naam. Echter ontbreken er een aantal alt teksten bij de image. Ook is de 'tabindex' niet volledig in order omdat deze optelt 1..2...3 terwijl het 1 moet blijven.
