search

nl-design-system / backlog

Central product backlog of the NL Design System.
European Union Public License 1.2
10 stars 1 forks source link

Richtlijnen formulieren: Links versus buttons, wanneer gebruik je welk element? #210

Closed rianrietveld closed 10 months ago

rianrietveld commented 11 months ago

In de richtlijnen voor formulieren kan de onderstaande tekst worden opgenomen. Maar hiertegen zijn goede bezwaren. Als NLDS is het belangrijk dat we een gefundeerde bruikbare richtlijn hebben waar consensus over is. We voeren de discussie hierover bij dit issue.

Deze richtlijn is voor nu niet opgenomen in de docimentatie Discussie bij orginele PR: nl-design-system/documentatie#400 https://github.com/nl-design-system/documentatie/pull/400#discussion_r1411119013

Links versus buttons, wanneer gebruik je welk element?

Het fundamentele verschil tussen een button en een link is het doel en de opvolgende actie.

Een link verwijst naar een andere locatie, op of buiten de webpagina. Een button zorgt voor een actie, zoals het formulier versturen, informatie wissen, een modal openen of het uploaden van een bestand.

Ook de toetsenbordinteractie is anders. Een link bestuur je met alleen de “enter”-toets, een button bestuur je met de “enter”-toets of de spatiebalk. Screenreadergebruikers krijgen de informatie “button” of “link” voorgelezen als het element focus krijgt en hebben dus verschillende verwachtingen van de werking.

Maar hoe gaan we hiermee om in het design? Standaard ziet een button eruit als een knop en een link is een onderstreept woord of zin. Soms wordt hiervan afgeweken om een knop minder visueel gewicht te geven. Kies dan voor een ander ontwerp van de button en gebruik dat consistent binnen de website. Kies niet voor een button die eruitziet als een link en andersom.

Door te zorgen voor een consistente weergave van links en buttons, voldoe je aan:

rianrietveld commented 11 months ago

Ook relevant is de discussie bij gov.uk: (https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270)

bramsmulders commented 11 months ago

In het verleden heb ik eigenlijk altijd 2 componenten(of styles) gehad in een codebase: Link & Button.

Semantisch:

Allebei deze componenten kunnen een a of button element zijn aan de hand van hun context. Navigeer je ergens naartoe kies je een a, trigger je een actie op dezelfde pagina of controleer je iets binnen een formulier kies je button.

Visueel

Een Link component kan ook een button element zijn, bijvoorbeeld: Een modal trigger in een lopende tekst wil je semantisch een button laten zijn, maar visueel moet het een link zijn. Daarnaast kan een Button component ook gebruikt worden als CTA knop naar een andere pagina. Dan moet het semantisch een a zijn, maar visueel een knop.

Ik denk dus dat je prima beiden door elkaar kunt gebruiken, maar dat de "intent" duidelijk moet zijn.