VGAR Page Requirements

VGAR Overview Requirements Test Procedures PDF Tools

Page

Navigation
Interaction
Content
Visual

IFrames (PAG-WEB-005)

Give good titles to all iframes and hide system iframes from users

Content presented in an iFrame can be problematic for screen reader and keyboard only users and their use is discouraged at Visa to avoid these issues. When iFrame must be used, it is essential that iFrames are identified with good titles. If iFrames are used to house system only content they need to be hidden correctly so that screen reader users do not encounter them.

Requirements

IFrame Use (PAG-WEB-005-01)

iframes SHOULD only be used if absolutely necessary due to potential confusion for screen reader users.

IFrame Titles (PAG-WEB-005-02)

Iframes intended for user interaction MUST have a unique, descriptive, and consistent 'title' so users can identify it easily.

System IFrames (PAG-WEB-005-03)

"System" iframes, such as iframes used for analytics MUST be hidden from all users by using the following:

  • Set CSS style to display:none
  • Set aria-hidden attribute to true for the iframe (i.e. aria-hidden="true")
<iframe style="display:none;" aria-hidden="true" src="[page source]"></iframe>

Test Procedures

FAE > Navigation > IFrames (PAG-WEB-005-01-T)

Confirm that iframes are only used when no reasonable alternative exists.

Screen Reader > IFrames (PAG-WEB-005-02-T)

Bring up the list of iframes (or cycle through each if a list is not available) and confirm that each iframe designed for user interaction has a unique, descriptive, and consistent title.

Screen Reader > IFrames (PAG-WEB-005-03-T)

Bring up the list of iframes (or cycle through each if a list is not available) and confirm that each Frame designed for “system use” are not in the list. Confirm that iframes that users SHOULD not interact with are hidden from all users by:

  • Set CSS style to display:none
  • Set aria-hidden attribute to true for the iframe

Related Content

WCAG Success Criteria

W3C Techniques

Common Failures

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.