Portfoliosite: menu buiten beeld, zware foto's en ontoegankelijke knoppen
Voor het profielwerkstuk bouwt een leerling een portfoliowebsite. De site heeft een horizontaal menu met vijf items, een fotogalerij en een contactformulier. Op een telefoon van 375 px breed loopt het menu buiten beeld en moet de bezoeker horizontaal scrollen. De galerij gebruikt JPEG's van 4 MB per stuk; de pagina laadt daardoor langzaam. De grijze tekst #999999 staat op een witte achtergrond. Knoppen zijn gemaakt met
en hebben geen focusstaat. Afbeeldingen hebben geen alt-tekst. De leerling wil de site 'mooi' houden en geen hamburgermenu. De leraar eist dat de site toegankelijk is en op 3G binnen 3 seconden bruikbaar is.1. Noem drie concrete problemen en een oplossing per probleem; betrek responsiveness, toegankelijkheid en performance.
Read the worked answer
- Responsiveness: het menu past niet op 375 px en veroorzaakt horizontaal scrollen. Oplossing: een media query waarbij de navigatie onder elkaar komt of met flex-wrap afbreekt, met voldoende grote tapdoelen. Als vijf items te veel ruimte innemen, is een hamburger of een uitklapbaar menu alsnog de betrouwbaarste keuze; 'mooi' mag niet ten koste gaan van bruikbaarheid.
- Toegankelijkheid: #999999 op wit heeft een laag contrast en voldoet niet aan WCAG AA voor normale tekst. Oplossing: donkerdere tekstkleur kiezen en het contrast controleren. De -knoppen vervang ik door of , zodat ze met toetsenbord en screenreader werken, inclusief een zichtbare focusstaat. Afbeeldingen krijgen een beschrijvende alt-tekst; decoratieve afbeeldingen krijgen alt=''.
- Performance: JPEG's van 4 MB per stuk zijn veel te zwaar. Oplossing: afbeeldingen verkleinen tot het werkelijke weergaveformaat, comprimeren en lazy loading toepassen. Ik meet daarna op een trage verbinding of de pagina binnen drie seconden bruikbaar is, niet alleen of hij mooi is.
2. De galerij: kies bestandsformaat, afmetingen en een techniek om verschillende schermen te bedienen. Onderbouw je keuze.
Read the worked answer
Ik kies bij voorkeur WebP of AVIF, met JPEG als fallback voor oudere browsers. Deze formaten geven bij dezelfde kwaliteit een kleinere download dan JPEG. Voor een galerij op een telefoon lever ik thumbnails van ongeveer 400–600 px breed en grotere versies van 1200–1600 px voor desktop en retina-schermen.
Ik gebruik srcset en sizes, zodat de browser zelf de juiste versie kiest op basis van schermbreedte en pixeldichtheid. De afbeeldingen krijgen width en height of een vaste aspect-ratio, zodat de layout niet verspringt. Ik pas loading='lazy' toe voor afbeeldingen onder de vouw en comprimeer op een kwaliteit die visueel goed genoeg is, bijvoorbeeld 75–80. Zo blijft de galerij scherp zonder dat elke bezoeker megabyte's aan foto's hoeft te downloaden.
3. De leerling wil het menu zonder hamburger. Laat met HTML/CSS zien hoe je het menu op 375 px bruikbaar maakt en leg uit waarom dit wel of niet voldoet.
Read the worked answer
Een eenvoudige oplossing is de navigatie op kleine schermen verticaal te stapelen:
<nav aria-label="Hoofdmenu">
<ul class="menu">
<li><a href="#werk">Werk</a></li>
<li><a href="#over">Over</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
.menu { display: flex; gap: 1rem; flex-wrap: wrap; }
.menu a { display: inline-block; padding: 0.75rem; }
@media (max-width: 500px) {
.menu { flex-direction: column; }
.menu a { min-height: 44px; }
}
Dit voldoet aan de eis dat er geen horizontale scrollbalk ontstaat en dat tapdoelen groot genoeg zijn. Het nadeel is dat een verticale lijst veel verticale ruimte inneemt; bij vijf items kan dat nog acceptabel zijn, maar bij meer items wordt een uitklapbaar menu beter. Ik zou daarom testen op 375 px, met toetsenbord bedienen en controleren of de focus zichtbaar blijft. De keuze is dus een ontwerpafweging, geen automatisme.