Agriculture Design System
Design System for import and export services

Password input

The password input component allows users to securely enter a password. The text is obscured by default, but can be revealed by pressing the ‘Show password’ checkbox.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/password-input';

Learn more about how to meet WCAG success criteria when implementing password inputs. This makes them accessible and inclusive for users of all abilities and situations.

The password input component passed accessibility testing in 2024.

Clear labels and instructions

Requirements

  • Labels and hint text are clear and succinct.
  • The purpose of the password input is understood and conveyed by assistive technology.
  • Hint text is provided when it’s helpful – for example, when creating a new password, include any format or length requirements.

Benefits

  • Assistive technology users have equal access to labels and instructions.
  • Helps all users avoid submitting an incorrect password.
  • Reduces the cognitive load for all users.
  • Makes it easier for people with cognitive and learning disabilities.
  • Clear labelling supports users with English as a second language.
  • Clear guidance reduces anxiety about making mistakes.
  • Helps users understand password requirements.

WCAG references

Error identification

Requirements

  • Input errors are detected and communicated to the user.
  • Error messages are accessible to all users, including those with disabilities.
  • Error messages clearly identify the error.
  • Error messages provide sufficient information for users to locate and fix the problem.
  • Error messages are understood and conveyed by assistive technology.

Benefits

  • Assistive technology users have equal access to error messages.
  • Reduces user frustration by clearly explaining what went wrong.
  • Helps users with cognitive disabilities understand and fix problems.
  • Saves time by preventing repeated unsuccessful attempts.
  • Enables users to solve errors themselves without having to contact tech support.

WCAG references

Error prevention

Requirements

  • Hint text is provided when it’s helpful.
  • Labels and hint text are clear and succinct.
  • Users can check, reverse or confirm their input on forms with legal commitments, financial transactions or data modifications.

Benefits

  • Clear guidance reduces anxiety about making mistakes.
  • Helps users understand form requirements.
  • Saves time by preventing the entry of incorrect information.
  • Particularly valuable for users with cognitive or motor impairments.
  • Provides safeguards against critical errors with significant consequences.

WCAG references

Name, role, value

Requirements

  • All components have appropriate names, roles and values that are understood and conveyed by assistive technology.
  • Clear label identifying the password field.
  • ARIA roles and states where needed – for example, aria-invalid, aria-required.

Benefits

  • Assistive technology users have equal access to information on the state of the component.
  • Improves usability for voice control software users.
  • Helps users with cognitive challenges understand component functionality.
  • Makes automation and testing more reliable.

WCAG references