Visa Accessibility - Hidden Content (PAG-008)

VGAR Page Requirements

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.

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.

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")

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.