Het betekent links, knoppen en andere interactieve gebieden zo ontwerpen dat ze gemakkelijk te vinden, duidelijk, begrijpelijk en bruikbaar zijn.
L’objectif est de permettre aux utilisateurices, quel que soit son moyen d’interaction (souris, clavier, écran tactile, commande vocale, lecteur d’écran…), de savoir ce que fait l’élément, de le trouver et d’interagir avec sans difficulté.
Un élément interactif invisible, trop petit ou mal étiqueté est inutilisable et peut rapidement frustrer les utilisateurices, entraînant fausses manipulations, erreurs et même des départs intempestifs de ton site. Un lien ou bouton doit être un repère clair de navigation, pas une devinette ou un piège.
Om voor interactiegemak te zorgen, moet je om te beginnen je klikbare gebieden groot genoeg maken. Streef naar een doelgrootte van ten minste 44x44 px en vermijd kleine elementen zoals links of te kleine pictogrammen.
Utilise toujours les éléments HTML sémantiques natifs adéquats : un lien doit être un <a href=""> et un bouton un <button>, et non des div stylisées.
Zorg ervoor dat al deze interactieve elementen bereikbaar zijn met de Tab-toets en dat hun toetsenbordfocus duidelijk zichtbaar is (door een omlijning, een schaduw of een kleurverandering). Maak de tekst van je links en knoppen expliciet en geef aan welke actie ze teweegbrengen.
De tekst alleen al moet begrijpelijk zijn, zelfs als hij uit zijn context wordt gehaald, dus vermijd "Klik hier" of "Lees meer". Als alleen de tekst van een koppeling of knop niet voldoende is, gebruik dan attributen zoals aria-label om de bestemming of functie te specificeren, met name voor hulptechnologieën.
Vermijd ten slotte te dubbelzinnige klikzones, zoals het klikbaar maken van een hele afbeelding of kaart zonder duidelijke visuele indicatie van de specifieke actie.
N°1.
N°2.
N°3.
N°4.
N°5.
