IFrames (PAG-WEB-005)

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

Displaying content in iframes can introduce accessibility challenges. If possible, avoid using iframes to display content unless they are absolutely necessary. If iframes are used intentionally, they must have unique titles that are descriptive of their content. Screen reader users will encounter iframes and if they are not properly titled and given sufficient context within the page they can be confusing. If system iframes are used, such as those used for analytics, and are hidden from view they should also be hidden from screen reader users.

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.