Images & Media

This issue occurs when embedded third-party content—such as YouTube videos, Canva slide decks, or interactive Google Maps—is added to a page without a descriptive title attribute. Assistive technologies, like screen readers, rely on this hidden text descriptor to explain to visually impaired users what the embedded application actually contains.

How to Fix: Embedded Videos (YouTube and Vimeo)

The basic text editor video embed feature does not allow you to add a title. Moving forward, all videos must be added using the Media Library. When you use the Media Library, Drupal automatically pulls the video's name from YouTube/Vimeo and uses it as the required title attribute—no manual HTML coding needed.

Step-by-Step Instructions:

1. Get the Link: Go to YouTube or Vimeo and copy the video link from the "Share" button.
2. Add to Media Library: * In Drupal, go to Content > Media > Add Media > Remote Video.
   • Paste your video link into the Add Remote video via URL field.
   • Crucial: Click the blue Add button directly next to the text field first. Once the video thumbnail and title preview load underneath, scroll down and click Save.
3. Insert Into Your Page: Go to your FAQ page, edit the content, and use the Insert Media button (the small musical note/camera icon in the toolbar) to select and embed your newly uploaded video.
4. (Optional) If an old video is already on the page displaying the error, delete it from the text box before inserting the new Media Library version.

Learn More: Inline frame without a text alternative, explained

If Siteimprove flags an existing page for a "missing inline frame text alternative" on an Instagram embed, you can fix it by swapping out the native embed code for a clean, accessible HTML iframe.

How to Fix:

1. Get the Post URL: Look at the bottom of the flagged embed in your editor and copy the standard Instagram link (e.g., https://www.instagram.com/reel/DR231fBADsO/).
2. Edit the Drupal Page: Navigate to the page in Drupal and open the text editor for the body field containing the embed.
   • Switch to Source View: Click the Source (or HTML) button in your Drupal text editor toolbar to view the raw code.
   • Delete the Old Code: Locate and completely delete the Instagram blockquote element and its accompanying tag.
   • Paste the Accessible Iframe: In its place, paste the following template:

     <iframe title="[Insert descriptive title here]" src="[Insert Instagram URL here]embed/" frameborder="0" scrolling="no" allowtransparency="true" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5), 0 1px 10px 0 rgba(0,0,0,0.15); margin: 10px auto; max-width: 540px; min-width: 326px; padding: 0; width: calc(100% - 2px); display: block; height: 620px;"> <iframe>

3. Customize the Attributes: * Update the src attribute with your copied Instagram URL, ensuring it ends in /embed/.
   • Update the title attribute with a unique, descriptive sentence explaining what the embed is (e.g., title="Instagram video reel by Rice University showing a campus student study session").
4. Save: Save and publish your Drupal page.

Learn More: Inline frame without a text alternative, explained

This issue occurs when embedded third-party content—such as YouTube videos, Canva slide decks, or interactive Google Maps—is added to a page without a descriptive title attribute. Assistive technologies, like screen readers, rely on this hidden text descriptor to explain to visually impaired users what the embedded application actually contains.

How to Fix: Canva Slides and Other Custom Embeds

If you are manually pasting an <iframe> code snippet into the text editor, you must ensure it contains a title attribute.

Step-by-Step Instructions:

1. Navigate to Drupal > Content and find your content item.
2. Click Edit and locate the text editor field containing the embed.
3. Switch the editor into Source mode (click the "Source" or " </>" button).
4. Locate the opening <iframe> tag and insert a clear, descriptive title attribute inside it.
   • Example: <iframe title="Interactive Map of Main Campus" src="..."></iframe>
5. Save the page.

Learn More: Inline frame without a text alternative, explained