named and framed – HTML Accessibility

Garish 70's bedroom decor with added Patrick (barbells man), David (video man) and Jonny the CYRK (Hairy face tuke person).

I asked 3 of the industries most trusted accessibility gurus the question:

Is the `title` attribute still the most reliable method to provide an accessible name for an `iframe`?

Their collective response *^assumed
Alan Partridge shrugs repeatedly

Expectations

Use of aria-label results in the same output as title as both, in this case, can provide an accessible name for the iframe element. If both are present the aria-label will override the title as accessible name.

To testing it must be

Using this test file: iframe tests

Big Up to Jonny James and Brian Elton for help with testing.

See the Pen
iframe accname tests by steve faulkner (@stevef)
on CodePen.

The results are in

test results
Tests	Expected acc name mapping	JAWS says	NVDA says	Narrator says	VO/OSX says	VO/iOS says	Talkback/Android says
Test 1.`iframe` with `title` attribute and `title` element in source document	`title` attribute	title provides name frame	title provides name, frame	title provides name, Document title provides name	Entering title provides name, frame	nothing	Two focus stops: nothing Document title provides name
Test 2. `iframe` with no `title` attribute and `title` element in source document	none	Document title provides name, frame	frame	Document title provides name	Entering frame	nothing	Document title provides name
Test 3. `iframe` with `aria-label` attribute, no `title` attribute and empty `title` element in source document	`aria-label` attribute	aria-label provides name, frame	aria-label provides name, frame	aria-label provides name	Entering frame	nothing	nothing
Test 4. `iframe` with with `aria-label` attribute, no `title` attribute, and `title` element in source document	`aria-label` attribute	Chrome: document title provides name, frame FireFox: aria-label provides name, frame	aria-label provides name, frame	aria-label provides name, Document title provides name	Entering frame	nothing	Two focus stops: nothing Document title provides name
Test 5. `iframe` with with `aria-label` attribute, and `title` attribute, and `title` element in source document	`aria-label` attribute	Chrome: title provides name, frame FireFox: aria-label provides name, frame	aria-label provides name, frame	aria-label provides name , Document title provides name	Entering title provides name, frame	nothing	Two focus stops: title provides name Document title provides name

Fun Fact: Use of the title attribute on an iframe does not result in display of a tooltip when the mouse cursor is over the iframe.

What??

JAWS/Windows/Firefox & Chrome

Works mostly as expected: Announces frame presence, it employs some heuristics for the case (test 2) where there is no accessible name, announcing the iframe document title instead. Some funkyness when both title and aria-label attributes are present in Chrome; announces title attribute instead of aria-label

NVDA/Windows/Firefox

Works as expected: Announces iframe presence, doesn’t employ any heuristics to make up for lack of accessible name (test 2).

Narrator/Windows/Edge

Works mostly as expected: Does not announce iframe presence, wherever present announces the iframe document title along with accessible name.

VoiceOver/OSX/Safari

Works with title attribute only. Announces iframe presence.

VoiceOver/iOS/Safari

Does not announce presence of iframe or accessible name.

Talkback/Android/Chrome

Consistently announces the iframe document title when present, when focused on document in iframe, inconsistent announcement of title attribute, no announcement of aria-label. Does not announce presence of iframe.

In Conclusion

Yes, title is still the most reliable method of providing an announced accessible name for an iframe. Although support is solid in browsers (Safari being odd one out), screen readers are surprisingly divergent on how and what they convey to users.