WiscWeb - Embed a Google Doc
- Before you begin
- Step 1: Publish to web
- Step 2: Paste in the Google Doc URL
- Accessibility and usability barriers
Before you begin
Use a Shared Drive for setup
We recommend that you set up your Google Doc within a Shared Drive. Shared Drives accommodate many editors. Also, if the original owner leaves the University, someone can still have access.
Technical support and resources
Google Docs is covered by the UW-Madison Google Workspace team’s rules and terms of service: UW-Madison Google Workspace - Terms of Service/Use and Privacy Policy.
For help and support using these tools, we recommend the following official Google support documentation:
Step 1: Publish to web
Before you embed your Google Doc link, you will need to make sure it is set up to publish to the web.
- Open the file in Google Docs
- At the top, click File > Share > Publish to web
- In the window that appears, keep the Link tab selected and click Publish
- After selecting Publish, you should see a new pop-up window with a URL of your doc. Copy that URL and save it for the next step.
Step 2: Paste Google Doc URL into text block
- With the Google Doc URL copied, log in to your WiscWeb site and access the page or post that you want to paste this into
- In a Text Area, paste the code that you have copied into the Visual Editor. Your doc should display within a few seconds
Accessibility and usability barriers
Content is embedded on the page using an <iframe> HTML element (inline frame), which displays HTML content from another page into the current one. Inline frames can pose accessibility barriers when...
- the HTML content within the iframe is not accessible.
- scrolling is disabled for the iframe.
- the iframe does not scale when the page and its contents are resized.
- a descriptive title attribute value is not provided for iframes that display content visually different from the rest of the page (like a Google Doc, video player, or survey).
- Example:
<iframe src="docs.google.com/document/id..." title="Google Docs">
- Example:
The Google Doc embed feature automatically includes a title attribute and enables scrolling. The ability to scroll help users who enlarge fonts and other page elements for better visibility. Learn more about these accessibility barriers on WebAim's Creating Accessible Frames and Iframes article.
Check that your document content is accessible
It's crucial that your Google Doc follows the rules and best practices for creating accessible content (proper headings, alt text, color contrast, etc). Visit UW-Madison's guide on creating accessible documents and Google's guide on how to make your document or presentation more accessible for detailed information.
Include a link directly to the Google Doc
We recommend putting a direct link to the Google Doc in addition to embedding it. This way, users can choose to see the full content in a wider view within the Google Docs app for a better experience. When zoomed in at 200% or higher, content in an iframe becomes narrow and hard to read.
Embedded content is also narrow on smaller screens like mobile devices and tablets. Including a direct link to the Google Doc will assist users on smaller screens and those who use screen magnification to read and access the content.
Do not embed documents that contain more complex visual elements
Only embed Google Docs that contain simple content and images. Documents that contain complex visual elements like tables, charts, or videos are more difficult to read and navigate within the limited view of an iframe. Link directly to these documents instead.