Visa Product Design System

Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.

Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.

Best practices

Ensure the following best practices are met when implementing this component during development.

Note: VPDS treats a element like an input. See the examples for “multiline” inputs.

Ensure all inputs have an and a label with a matching attribute.
Link additional text using .
Always indicate required fields in the label text or with an asterisk per usage guidelines. Additionally, it may have a attribute.

Keyboard controls

Keyboard shortcuts commonly for editing text should be maintained unless uniquely specified.

Moving cursor

Keyboard actions and their corresponding behaviors for moving cursor
Key	Behavior
`↑` `↓` `→` `←`	Navigates and moves the cursor within the text field.
`Ctrl` + `→`	Moves cursor to the next word.
`Ctrl` + `←`	Moves cursor to the previous word.
`Ctrl` + `↑`	Scrolls text area up or moves cursor to the start of the line (depends on app).
`Ctrl` + `↓`	Scrolls text area down or moves cursor to the end of the line (depends on app).
`End`	Moves cursor to the end of the line.
`Home`	Moves cursor to the start of the line.

Cut, paste, & undo

Keyboard actions and their corresponding behaviors for cut, paste, and undo
Key	Behavior
`Ctrl` + `x`	Cuts selected text.
`Ctrl` + `Del`	Cuts selected text.
`Ctrl` + `c`	Copies selected text.
`Ctrl` + `Ins`	Copies selected text.
`Ctrl` + `v`	Pastes selected text.
`Shift` + `Ins`	Pastes selected text.
`Ctrl` + `z`	Un-does last text.
`Ctrl` + `y`	Re-does last text.
`Ctrl` + `Shift` + `z`	Re-does last text.

Delete

Keyboard actions and their corresponding behaviors for delete
Key	Behavior
`Ctrl` + `Del`	Deletes forward to word break.
`Ctrl` + `Backspace`	Delete back to word break.

Selecting text

Keyboard actions and their corresponding behaviors for selecting text
Key	Behavior
`Ctrl` + `a`	Selects all text.
`Shift` + `→`	Extends selection one character to the right.
`Shift` + `←`	Extends selection one character to the left.
`Shift` + `↓`	Extends selection down one line (in multi-line use case).
`Shift` + `↑`	Extends selection up one line.
`Shift` + `Home`	Extends selection to the beginning of the line.
`Shift` + `End`	Extends selection to the end of the line.
`Ctrl` + `Shift` + `→`	Extends selection to the next word break.
`Ctrl` + `Shift` + `←`	Extends selection to the previous word break.
`Ctrl` + `Shift` + `↓`	Extends selection to below paragraph.
`Ctrl` + `Shift` + `↑`	Extends selection to above paragraph.
`Ctrl` + `Shift` + `Home`	Extends selection to the top of the text.
`Ctrl` + `Shift` + `End`	Extends selection to the bottom of the text.

Navigation

Keyboard actions and their corresponding behaviors for navigation
Key	Behavior
`Tab`	Moves to next input field.
`Shift` + `Tab`	Moves to previous input field.

Other

Keyboard actions and their corresponding behaviors for manual line break (in multi-line use case)
Key	Behavior
`Shift` + `Enter`	Adds manual line break (in multi-line use case).

VGAR (internal only)

Find links to the Visa Global Accessibility Requirements (VGAR) for this component.

Input

Best practices

Keyboard controls

Moving cursor

Cut, paste, & undo

Delete

Selecting text

Navigation

Other

VGAR (internal only)