Analyseren - Davidvboxt/Oba-release-candidate-2 GitHub Wiki
Het project opzetten
woensdag 4 uur en anders donderdag 4 uur.
woesndag 11 tot 12
Om te beginnen met dit project moet ik eerst het project opzetten. Dit doe ik doormiddel van stappen.
1. Repository forken
Door het project te forken naar mijn eigen repo heb ik nu de mogelijkheid om mijn wiki en issues op te zetten. Er is een repo van fdnd-agency die speciaal voor ons is gemaakt. Ook werk ik in de projectboard van de fdnd-agency repo.
2. Project opzetten volgens de DLC
Ook heb ik mijn wiki alvast opgezet. Hier komen de volgende onderwerpen aan bod:
-
Analyseren
-
Ontwerpen
-
Testen
-
Debriefing
-
Principes & conventies
3. Project installeren
Door het project te forken heb ik ook het project kunnen clonen. Dit deed ik doormiddel van de GitHub desktop. Er is al een speciale branch voor me gemaakt. Hier ga ik in werken tot ik zeker weet dat de applicatie goed is. Dan push ik het naar de release-candidate branch.
4. Weekplanning maken
Door een weekplanning te maken krijg ik een overzicht van alles wat ik moet doen en weet ik hoelang ik de tijd ervoor moet besteden. Dit doe ik in de projectboard.
Link: https://github.com/orgs/fdnd-agency/projects/5/views/6
5. Website live zetten
Om de website live te zetten heb ik netlify gebruikt. Om de api keys werkend te maken heb ik environment variables toegevoegd aan de site.
Project analyseren
Om de puntjes op de i te zetten check ik of de website bugs heeft en responsive is. Ik ging elke pagina langs en kwam aantal dingen tegen:
Teamcanvas
A11Y project testen
Inhoud
-
Gebruik duidelijke taal en vermijd stijlfiguren, idiomen en ingewikkelde metaforen.
-
Zorg ervoor dat de inhoud van het button, a, en labelelement uniek en beschrijvend is.
-
Gebruik links uitgelijnde tekst voor talen van links naar rechts ( LTR ) en rechts uitgelijnde tekst voor talen van rechts naar links ( RTL ).
Globale code
-
Valideer uw HTML.
-
Gebruik een langattribuut voor het htmlelement.
-
Geef een unieke waarde op titlevoor elke pagina of weergave.
-
Zorg ervoor dat de viewport-zoom niet is uitgeschakeld.
-
Gebruik oriëntatiepuntelementen om belangrijke inhoudsregio's aan te duiden.
-
Zorg voor een lineaire contentstroom.
-
Vermijd het gebruik van het autofocuskenmerk.
-
Sta verlenging van sessietime-outs toe.
-
Tooltips voor attributen verwijderen title.
Toetsenbord
-
Zorg ervoor dat er een zichtbare focusstijl is voor interactieve elementen waarnaar wordt genavigeerd via toetsenbordinvoer.
-
Controleer of de focusvolgorde van het toetsenbord overeenkomt met de visuele lay-out.
-
Verwijder onzichtbare focusseerbare elementen.
Afbeeldingen
-
Zorg ervoor dat alle imgelementen een attribuut hebben alt.
-
Zorg ervoor dat decoratieve afbeeldingen null alt(lege) attribuutwaarden gebruiken.
-
Bied een tekstalternatief voor complexe afbeeldingen zoals diagrammen, grafieken en kaarten.
-
Voor afbeeldingen die tekst bevatten, zorg ervoor dat de alt-beschrijving de tekst van de afbeelding bevat.
Koppen
-
Gebruik kopelementen om inhoud te introduceren.
-
Gebruik slechts één h1element per pagina of weergave.
-
Kopelementen moeten in een logische volgorde worden geschreven.
-
Sla kopniveaus niet over.
Lijsten
- Gebruik lijstelementen ( ol, ul, en dlelementen) voor lijstinhoud.
Controles
-
Gebruik het aelement voor links.
-
Zorg ervoor dat links herkenbaar zijn als links.
-
Zorg ervoor dat de controles statussen hebben :focus.
-
Gebruik het buttonelement voor knoppen.
-
Zorg voor een skip-link en zorg ervoor dat deze zichtbaar is wanneer de focus ligt.
-
Identificeer links die in een nieuw tabblad of venster worden geopend.
Tafels
-
Gebruik het tableelement om tabelgegevens te beschrijven.
-
Gebruik het thelement voor tabelkoppen (met de juiste scopeattributen).
-
Gebruik het captionelement om een titel voor de tabel op te geven.
Forms
-
Alle invoer in een formulier is gekoppeld aan een overeenkomstig labelelement.
-
Gebruik fieldseten legendelementen waar nodig.
-
Ingangen gebruiken autocompletewaar nodig.
-
Zorg ervoor dat formulierinvoerfouten na indiening in de lijst boven het formulier worden weergegeven.
-
Koppel invoerfoutmeldingen aan de invoer waarmee deze correspondeert.
-
Zorg ervoor dat fout-, waarschuwings- en successtatussen niet visueel worden gecommuniceerd door alleen maar kleur.
Media
-
Zorg ervoor dat media niet automatisch worden afgespeeld.
-
Zorg ervoor dat mediabedieningen de juiste opmaak gebruiken.
-
Controleer of alle media kunnen worden gepauzeerd.
Video
-
Bevestig de aanwezigheid van bijschriften.
-
Verwijder epileptische triggers.
Audio
- Bevestig dat transcripties beschikbaar zijn.
Appearance
-
Controleer uw inhoud in gespecialiseerde browsermodi.
-
Vergroot de tekstgrootte naar 200%.
-
Controleer nogmaals of de inhoud goed op elkaar aansluit.
-
Zorg ervoor dat kleur niet de enige manier is waarop informatie wordt overgebracht.
-
Zorg ervoor dat instructies niet alleen visueel of alleen audio zijn.
-
Gebruik een eenvoudige, duidelijke en consistente lay-out.
Animation
-
Zorg ervoor dat animaties subtiel zijn en niet te veel flitsen.
-
Zorg voor een mechanisme om achtergrondvideo te pauzeren.
-
Zorg ervoor dat alle animaties voldoen aan de prefers-reduced-motionmediaquery.
Color contrast
-
Controleer het contrast voor alle tekst van normaal formaat.
-
Controleer het contrast voor alle grote tekst.
-
Controleer het contrast voor alle pictogrammen.
-
Controleer het contrast van de randen van invoerelementen (tekstinvoer, keuzerondjes, selectievakjes, enz.).
-
Controleer tekst die afbeeldingen of video overlapt.
-
Controleer aangepaste ::selectionkleuren.
Mobile and touch
-
Controleer of de site in elke richting kan worden gedraaid.
-
Horizontaal scrollen verwijderen.
-
Zorg ervoor dat knop- en linkpictogrammen gemakkelijk kunnen worden geactiveerd.
-
Zorg voor voldoende ruimte tussen interactieve items om een scrollgebied te creëren.