Password Input

[Rozerinay]

We willen graag meer leren over de Password Input component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Password Input

Doel

Afgeschermd invoerveld om een geheime tekst in te vullen, zoals een wachtwoord.

Gerelateerde componenten

Checkbox Group, Date Input, File Input, Number Input, Radio Group, Text Area, Text Input, Text Input Group

Onderzoek

Ik heb in een eerder stadium al eens onderzoek gedaan naar de Password Input component (te vinden in het Figma Schetsboek). Hieronder staan notities die ik toen maakte. Hier kunnen notities tussen staan die eerder betrekking hebben tot een patroon rondom 'Aanmelden' of 'Inloggen'. Maar omdat er overlap in zit bewaar ik de notities hier.

Implementatie

<input type="password"> - MDN docs
Documentatie van Mozilla Developers Network over het <input> HTML element van met type="password".

Er is een verschilt tussen een wachtwoord aanmaken (Aanmelden) en wachtwoord invullen (Inloggen). Hier kunnen ook twee verschillende auto-complete ... voor gebruikt worden:

• Aanmelden: autocomplete=”new-password” MDN docs - New Password
• Inloggen: autocomplete="current-password" MDN docs - Current Password

Wat kunnen we leren van GOV.UK?

Password Input - GOV.UK
Password Input implementatie bij GOV.UK. Onder 'Research on this component' worden bevindingen genoteerd. Er is ook een link naar de Pasword Input GitHub Discussion waar meer informatie, onderzoek en aanpassingen worden gedeeld. Enkele interessante comments:

• Geen 2e invulveld. In deze comment wordt uitgelegt waarom ze zijn afgestapt van het inzetten van een 2e invulveld om men een wachtwoord te laten bevestigen.
• Spellcheck = false. In deze comment wordt verwezen naar een blogpost die helaas niet meer bestaat. Maar de strekking is dat het spellcheck attribute false zou moeten zijn waardoor het wachtwoord niet met een externe partij zal worden gedeeld. Ook niet wanneer het wachtwoord getoond wordt door middel van een wijziging naar <input type = "text">.
• autocapitalize="none"?
• autocorrect="off"?
• Icons. In deze comment wordt aangegeven dat het verstandig is rekening te houden met password managers en Safari. Dit is ook relevant voor de positionering van een toon/verberg wachtwoord functionaliteit.
• Toon / Verberg functie helpt toegankelijkheid. In deze comment wordt aangegeven dat een Toon / Verberg functionaliteit kan helpen als iemand moeite heeft met typen.
• Wachtwoord direct als tekst tonen. In deze comment wordt aangegeven dat het mensen kan afschrikken wanneer je een wachtwoord direct als tekst toont. Maar dat een Toon / Verberg functionaliteit wel wordt gewaardeerd.

Voorkom fouten

8 UI/UX tips about password design - DEV Community
Artikel met tips rondom het ontwerpen van een wachtwoord veld. 1 tip gaat over geven van feedforward dat caps of num loc aanstaat.

Wachtwoord criteria

Avoid Unnecessarily Complex Password-Creation Requirements – Baymard Institute
Artikel van Baymard Institute waarin wordt aangeraden om wachtwoord criteria niet te lastig maken.

Password Creation: 3 Ways To Make It Easier - NN Group
Artikel van NN Group waarin wordt onder andere wordt aangeraden om:

• een indicatie te geven hoe 'sterk' het wachtwoord is.
• wachtwoord criteria direct te tonen.

Vraag: Zou het helpen als wachtwoord criteria niet enkel bij 'Aanmelden' wordt getoond maar ook bij 'Inloggen'? Zie schets.

Designing a better password input field - Medium
Artikel waarin wordt voorgesteld om direct feedback te geven als men aan wachtwoord regel voldoet. GOV.UK is hier nog niet uit

Toon / Verberg functionaliteit

Simple things are complicated: making a show password option - GOV.UK
Artikel van Andy Sellick waarin hij vertelt over het implementeren van een Toon / Verberg functionaliteit voor GOV.UK. En de lessen die ze daar bij leerden.

Show/Hide password accessibility and password hints tutorial - Part of a Whole
Artikel van Nic Steenhout waarin het toegankelijk opzetten van een Toon / Verberg functionaliteit wordt beschreven.

[jeffreylauwers]

DSO

Geen component kunnen vinden voor Password Input maar in de documentatie over 'Inline validatie' wordt er wel iets over geschreven.

Valideer niet na elk getypt teken. Deze aanpak verhoogt niet alleen het aantal onnodige validatiepogingen, maar frustreert gebruikers ook. Er zijn een paar uitzonderingen op deze regel:

• Het is handig om inline te valideren terwijl de gebruiker typt bij het maken van een wachtwoord. Zo controleert u of het wachtwoord voldoet aan de eisen.

[tfrijsewijk]

We documenteren het niet, maar de DSO Toolkit heeft een component "Input Password" (what's in a name). We etaleren dit component als onderdeel van "Form Group: Input".

• https://storybook.dso-toolkit.nl/65.0.2/?path=/docs/html-css-form-groups-input--docs
• https://storybook.dso-toolkit.nl/65.0.2/?path=/story/html-css-form-groups-input--input&args=type:password

Form Groups worden opgebouwd uit andere componenten (Label, Input, Info) en bevat ook eigen onderdelen (de validatie foutmelding, feedback icons, help tekst) en mogen alleen in een Form worden gebruikt.

[tfrijsewijk]

Verder zie ik dat je linkt naar een oude versie (62.8.4). Werk je toevallig met een bookmark naar een fixed version? Beter kan je dso-toolkit.nl openen/bookmarken, dan krijg je een redirect naar de laatste versie.

[jeffreylauwers]

Ah, ja dat klopt Thomas. Ik heb de 'bookmark' aangepast. 👍

[jeffreylauwers]

DUO

Geen component kunnen vinden voor Password Input maar de component wordt wel ingezet voor het patroon 'Inloggen'.

[jeffreylauwers]

OpenGemeenten

Patternlab - Forms & Search

---

Screenshots / Varianten

Patternlab

Default

AdvancedPassword Description

AdvancedPassword Error

AdvancedPassword Placeholder

AdvancedPassword Required

AdvancedPassword Value

Voorbeeld van 1Password icoon bij focus

Voorbeeld van tooltip die getoond wordt wanneer men over 1Password icoon hovert.

[jeffreylauwers]

Utrecht

Als onderdeel van Textbox component.

• Storybook - Textbox --> Wachtwoord
• Storybook - Textbox --> Wachtwoord kiezen
• GitHub

---

Screenshots / Varianten

Storybook

Wachtwoord
Het is belangrijk dat gebruikers een password manager kunnen gebruiken om een wachtwoord in te vullen (WCAG eis 3.3.7). Gebruik nooit autocomplete="off" voor een wachtwoordveld. Gebruikers moeten een wachtwoord uit een password manager kunnen plakken, gebruik daarom nooit code om kopiëren en plakken in dit veld te blokkeren. Gebruik spellCheck="false" zodat het wachtwoord niet wordt gedeeld met browser extensions voor spellingcontrole, en zodat een wachtwoord met opzettelijke spelfouten niet wordt gecorrigeerd.

Wachtwoord kiezen
Het is belangrijk dat gebruikers een password manager kunnen gebruiken om nieuw wachtwoord kiezen en te onthouden (WCAG eis 3.3.7). Gebruik nooit autocomplete="off" voor een wachtwoordveld. Gebruikers moeten een nieuw wachtwoord uit een password manager kunnen plakken, gebruik daarom nooit code om kopiëren en plakken in dit veld te blokkeren. Gebruik spellcheck="false" zodat het wachtwoord niet wordt gedeeld met browser extensions voor spellingcontrole, en zodat een wachtwoord met opzettelijke spelfouten niet wordt gecorrigeerd.

---

Notities

• Als onderdeel van Textbox component.
• Documentatie beschikbaar met handige tips voor implementatie en verwijzing naar WCAG richtlijn.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Password Input op het Community bord