Do all iFrames have unique titles?

Goal

Make it easy for people using assistive technology (AT) to bypass blocks of content inside of iFrames.

Why this matters

People using screen readers and other AT can use an iframe’s title to determine whether it’s a block of content they want to explore. If the iframe doesn’t have a title, the screen reader can’t read out the name of the iframe. If the iframe’s title is generic or if two iframes have the same title, the user won’t have enough information to understand what’s in the block of content and will be forced to explore it to understand what it is. This damages the “scanability” of the page.

How to implement

Writer

Read iFrame titles.

Developer

• Ensure that every <iframe> element has a title attribute that is unique to the page.
• Ensure that the source file of every <iframe> element has a <title> element.
  • This applies for HTML source files. Obviously you can’t add a <title> to a sound or video file directly.
• Ensure that the title attribute or <title> element accurately and descriptively describes the contents.

How to test

Manual testing

• Inspect the code for each iframe on the page and ensure that it has a title attribute that accurately and descriptively describes the iframe’s contents, without repeating the same title as other iFrames on the page.
• If the code indicates that the iframe’s source file is HTML, inspect the code for that file to ensure that it has a <title> attribute that accurately and descriptively describes the iframe’s content.

Screen reader testing

• Test with JAWS and NVDA to ensure that the correct title is being read in both screen readers.