Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md
Voor de opdrachgever OBA heb ik een website gebouwd voor de uitleningen binnen het mijn OBA platform. Ik heb hierbij gewerkt vanuit de feedback van een versie (ook door mij) van de vorige sprint. Voor deze 2e versie van de website heb ik me naast het verwerken van de feedback me vooral bezig gehouden met de toegankelijkheid volgens de WCAG richtlijnen. Hiervoor heb ik voorafgaand een aantal toegankelijkheidstesten uitgevoerd: Lighthouse test, handmatige testen, zoals de keyboard en screenreader test.
Userstory: "Toon in een overzicht alle abonnementen van een familie met een verwijzing naar een indiviueel profiel van elk familielid, met de functies: familieleden, beschikbare diensten, laatst geleende boeken en in te leveren boeken om boete te voorkomen."
Mijn OBA uitleningen pagina bestaat uit 2 delen, namelijk de navigatiebar en uit de homepage met uitleningen zelf. Op de navigatiebar vindt je een search-box, darkmodus en linkjes naar andere pagina's binnen het mijn OBA platform. Deze is ook in- en uit te klappen mocht dat nodig zijn. Op de homepage met de uitleningen vindt je alle uitgeleende producten en materialen op volgorde van boeken, DVD's en CD's. Per categorie staan de producten horizontaal naast elkaar en kun je door middel van scrollen, de rest van de producten zien, die evt. niet in beeld zijn. Elk product heeft verder nog een verleng button, mocht de gebruiker het product nog langer willen lenen. En bijna in te leveren producten zijn voorzien van een rode font voor de urgentie er van. Voor een duidelijker overzicht staat er boven op de pagina ook nog het totaal aantal producten die de gebruiker nog moet inleveren.
Link naar mijn website: https://wingsvn.github.io/all-human-accessible-website/uitleningen.html
Mijn pagina is in HTML gestructureerd uit een navbar en main met daarin div- en article elementen. De navigatiebar heb ik in HTML opgezet met list items binnen een unordered list. De gegevens van elk boek, DVD en CD bevinden zich elk in een article element. Elk article van de desbetreffende categoriën zit weer in hun desbetreffende div element, om ze van elkaar te onderscheiden. En om per categorie de producten naast elkaar te zetten heb ik CSS flex gebruikt. Verder heb ik voor de uitbeeld vallende producten CSS overflow: scroll gebruikt om deze producten zichtbaar te krijgen. Om de website aan te passen naar verschillende schermgroottes heb ik mediaquery gebruikt.
Werken aan deze website? Installeer door deze repository te forken en te clonen.
Google Lighthouse https://www.a11yproject.com/checklist/ https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html Colour Contrast Analyzer
This project is licensed under the terms of the MIT license.