Visa Accessibility - Hidden Content (PAG-008)

Page

Hidden Content (PAG-WEB-008)

Hide content for the right audience

If visual content should only be presented to screen reader users, the content should be hidden off screen using CSS. An example of this might be a header element that is used to provide context to an element that is implied visually but not provided for screen reader users.

Other content may need to be hidden from screen reader users but not sighted users. In this case, the content should be wrapped in a div with role="presentation" and aria-hidden="true" applied. The tabindex should also be set to -1.

When content should be hidden from both screen readers and sighted users it should be removed from the DOM. If not possible, it should be hidden with CSS using display:none and visibility:hidden.

Requirements

Hide From Sighted Users (PAG-WEB-008-01)

To hide content from sighted users (but not screen-readers) the content MUST be moved off screen using CSS.

.for-screen-readers-only {
	position: absolute;
	top:-9999px;
	left:-9999px;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

Hide From Screen Readers (PAG-WEB-008-02)

To hide content from screen readers (but not sighted users) the following attributes MUST be used:

aria-hidden="true"
Set the tabindex="-1"

Note: These attributes can be added to any HTML element.

<div id="hideScrReader" aria-hidden="true" tabindex="-1">
	For Sighted Users Only
</div>

Hide From All Users (PAG-WEB-008-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")

.hide-from-everyone {
	display:none;
	visibility:hidden;
}

<div class="hide-from-everyone" aria-hidden="true">Hidden Info</div>

Test Procedures

Screen Reader (PAG-WEB-008-01-T)

Run through the page with a screen reader, confirm that content included for screen readers but to be hidden visually (e.g., hidden Headings to provide content structure that is visually implied) is read for screen readers but not onscreen.

Screen Reader (PAG-WEB-008-02-T)

Run through the page with a screen reader, confirm that content that SHOULD be hidden from screen readers (but not sighted users) is shown on screen but not showing up for screen readers.

Screen Reader (PAG-WEB-008-03-T)

Run through the page with a screen reader, confirm that content that SHOULD be hidden from all users is neither available onscreen or to a screen reader.

Related Content

WCAG Success Criteria

W3C Techniques

Common Failures

F92: Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information

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.

VGAR Page Requirements