VGAR Interaction Requirements

VGAR Overview Requirements Test Procedures PDF Tools
Page
Navigation

Interaction

Content
Visual

Buttons and Links (INT-006)

Use buttons for actions and links to navigate

Generally speaking, buttons should only be used for actions that are taken on the page that do not take the user to a new page or location. Examples of button actions are expanding or collapsing an element, submitting a form, saving information, or an edit action.

Links should be used when the user is being taken to a new location but not as a result of submitting information. Links should have unique, descriptive link text that tells the user where the link goes in a clear way.

Requirements

Links vs. Buttons (INT-WEB-006-01)

     

  1. Links and buttons have accurately defined roles through correct use of native elements or ARIA role.
  2. User interface elements defined as links (anchor elements) SHOULD behave as links and user interface elements defined as buttons SHOULD behave as buttons:
  • Links reference or move the user to another location
  • Buttons trigger an action or event

     

<div class="looks-like-button" role="button">I'm a button, really!</div>

Descriptive Link Text (INT-WEB-006-02)

Links MUST indicate where they go in a unique and descriptive way to give users an understanding of and confidence in their destination.

Valid Link href Attribute (INT-WEB-006-03)

Links Must contain a valid href attribute value and MUST NOT point to "javascript:void(0):" nor "#".

 

Links Opening in New Tabs (INT-WEB-006-04)

If a link opens in a new browser tab or window an aria-label AND visual cue MUST be added to inform users of this interaction.

Click and Drag Movements (INT-WEB-006-05)

An action that relies on clicking and dragging of content can also be achieved by a single pointer without dragging unless dragging is essential to the activity.

  • Example of single pointer Pass: A quiz relies on users clicking and dragging information into the correct bucket. Users are also able to click once to select an option, then click on the correct bucket.
  • Example of essential activity: A medical app requires clicking and dragging an object to a target to accurately measure the user’s precision.

Test Procedures

Screen reader (INT-WEB-006-01-T)

Confirm that all elements that look like and behave like a button (causing an action) are described as buttons by all supported screen readers. Confirm that all elements that look like and behave like a link are described as links by all supported screen readers.

Screen reader > Links (INT-WEB-006-02-T)

Bring up the list of links with each supported screen reader if available and confirm link text is unique and descriptive.

Screen reader > Links (INT-WEB-006-03-T)

Bring up the list of links with each supported screen reader if available and confirm no links HREF points to "javascript:void(0);" nor "#".

Browser Inspection/Screen Reader (INT-WEB-006-04-T)

For each link that opens automatically in a new window or tab:

  1. Confirm that there is an aria-label informing users that this link opens to a new window.
  2. Check that there is a visual cue in text that this link opens to a new window.

Visual Inspection (INT-WEB-006-05-T)

Visually inspect the page to determine whether any functionality requires a user to click and move their mouse to access content.

Related Content

WCAG Success Criteria

W3C Techniques

These materials and steps outlined on this website are provided “AS IS” and are intended for illustrative purposes only. They should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. You are responsible for the legal aspects of any implementation of the concepts illustrated herein. Further, Visa neither makes any warranty or representation as to the completeness or accuracy of this information, nor assumes any liability or responsibility that may result from reliance on such information.  You should not act or rely on such content without seeking the advice of a professional.  All brand names, logos and/or trademarks are the property of their respective owners, are used for identification purposes only, and do not necessarily imply product endorsement or affiliation with Visa.