Preview modes: iframes

On this page:

• Why should I use iframe preview mode?
• How does iframe preview mode work?
• How do I use iframe preview mode?

Why use iframe preview mode?

Assistive technology users can have difficulty understanding the contents of an iframe unless an accessible name that summarizes the iframe's destination is specified.This preview mode allows testers to easily identify iframes on a page and determine whether or not the iframe has a useful accessible name that accurately conveys the contents of the iframe.

How does iframe preview mode work?

This preview mode identifies all iframes on the page, and lists them and their details in the Access Assistant window. For each iframe, the title and scrolling attributes are displayed, and the component is highlighted on the page being reviewed. Access Assistant will highlight all iframe elements that:

1. Do not have an aria-assigned role.
2. Are not intentionally hidden in the DOM.
3. Are available to assistive technologies with an accessible name value.

Testers have a Highlight All Iframes option that will highlight all iframes on the page at once. Users can also select each item individually to view its details.

How do I use iframe preview mode?

For every page being tested, evaluate the contents of the page with iFrames highlighted and verify that there is an informative accessible name for the iframe. This can be done with this Preview Mode as follows:

1. Launch Access Assistant from the site that is being tested and navigate to a page.
2. In Access Assistant, navigate to the project and report where violation instances will be reported and find the module for the page being tested OR create the module if the page has not yet been tested at all.
3. In Access Assistant, select the Preview Modes button in the toolbar header bar.
4. Select the iFrames link on the subsequent page.
5. To highlight all iframes, select the Highlight All iFrames button, or select an iframe in the grid to inspect it. The selected iframe(s) will be highlighted on the page along with their title and scrolling attributes.

   

6. Evaluate the page and determine whether the corresponding accessible name value is sufficient to convey meaning to the reader. If not, close the Preview Modes window and add an instance:
   1. Select the Manual Test button in the module toolbar.
   2. Filter the Best Practices to those of Media Type, Lists.
   3. Select the appropriate Best Practice. Possible Best Practices include:

1. Ensure blank frames set text appropriately
2. Ensure frame titles are meaningful

4. On the subsequent screen, select the Add Instance button and complete the form to create a violation instance for the page or elements on the page that are in violation.