Why focus in embedding content?
Inline frames allow you to embed distinct web documents (and even entire web sites) into a web page. Screen readers read the content of the inline frame at the point it is encountered (based on markup order) as if it were content within the parent page. While the content visually distinctive, accessibility helps communicate that iframes are present and help users navigating them.
Accessibility checklist for embedding content
Your goals for creating accessible embedded content:
Provide useful titles
When an iframe presents content that is a distinct document, such as a Google map, PDF document or video player, then a title must be provided.
<iframe src=”maps.api.htm” title=”Map of Campus” />
Avoid disabling scrolling
Do not disable scrolling. Many users enlarge fonts and other page elements to improve readability and accessibility, which may create the need for the content to scroll.
<iframe src=”maps.api.htm” title=”Map of Campus” scrolling=”auto” />
Use relative measurements
When possible, use relative measurements, such as percent rather than pixels, when setting the width of the iframe so that it will scale as the page and its contents are resized.
<iframe src=”maps.api.htm” title=”Map of Campus” scrolling=”auto” width=”100%” />
Examples of good and bad practices
| Good practice | Bad practice |
|---|---|
| Example of an embedded website with a scrollbar and width set to 100%.
|
Example of an embedded website with the scrollbar disabled and width set to 100px.
|
Additional resources
For more information on embedding accessible content, review: