Links, Images, and Video

Links, Images, and Video jls164

To add a link, highlight the text you want to link, click the Link icon link icon, add the URL, and choose the green Insert button.

  • Use relative links when linking to pages within the same course. (A relative link specifies the location of a target relative to the address of the page where it is situated.)
    • Use the following relative link format: ../node/###
  • Use absolute links for links to external resources. An absolute link includes the entire URL: https://www.google.com/
  • Avoid linking directly to content in other courses. Linking to other courses creates unnecessary dependencies that you can't control. Instead:
    • Recreate the content in the current course and give credit to the course author, or
    • Link to public resources like the sample syllabus, ROAM, or the Geospatial website.
  • Do not link images or graphics. Drupal will strip them out to maintain accessibility and semantic correctness. Instead, put the link in the image caption.

Best Practices

  • Always use link text on the page, not the full URL.
  • Use clear, descriptive link text so users know what to expect. 
  • Avoid phrases like "click here" or "link." This is an especially important consideration for those using screen readers.
  • Make link text long enough to be selected easily without a mouse, but not too long.
  • Links will open in the same tab for accessibility purposes. Talk to your learning designer if you have a reason to modify this.

Back to top

Images

To ensure all courses meet current federal accessibility requirements and follow pedagogical best practices, only the learning design team can add images. Do NOT copy and paste images directly into the editor. In many cases, this breaks the page, and you can no longer edit it.

To include an image, please provide your learning designer with:

  • The image file. The image should be the largest size and resolution available and should not be embedded in Word or PowerPoint.
  • A caption.
    • For complex images, include the key details students must understand.
    • The caption appears directly below the image
  • A complete credit, including author, title, URL, date accessed, and license information (if known).
  • The desired placement on the page.
  • Accessibility requirements. Providing accessible images is more of an art than a science. The requirements are listed below, but we strongly recommend discussing with your learning designer before attempting this on your own. They can provide guidance and tools to help.
    • An alt tag (short description for screen readers)
      • Be descriptive: Describe what the image shows, not just its type
      • Be concise: 120 to 140 characters is ideal
      • Be relevant to the purpose of the image
      • Avoid redundancy: Don't repeat information that's already in the surrounding text or caption
      • Help: Get help with alt-tags:
    • A long text description for complex images. 
      • Your learning designer can provide guidance and tools to help you draft effective alt tags and text descriptions.
      • The long description will appear on the webpage as a toggler below the image. A toggler is an expandable button that students can click to reveal additional content. 
        • When expanded, the full long text description becomes visible. 
        • When collapsed, it remains hidden.

Consider Color Contrast when using or creating images.

Color contrast affects usability and accessibility for learners, especially learners with low vision or colorblindness. To help ensure compliance with federal guidelines:

  • Consult with our learning designers or multimedia specialists before creating your own charts, diagrams, or graphics.
  • Avoid investing significant time in visuals until we've confirmed they meet accessibility standards.
  • We may reach out if existing images or graphics need adjustments to meet required contrast levels.

We're here to guide you so materials remain both accessible and instructionally effective.

Best Practices

  • Avoid decorative images. They don’t support learning and create unnecessary barriers for students using assistive technology.
  • Always include alt text (see guidelines above).
  • Use a long text description for complex visuals.
  • Credit images properly. (see requirements above).
  • Use appropriate image sizes: Up to 1200px wide, or 900px tall. Choose the largest version that remains clear and readable.
  • Use appropriate file formats:
    • JPEG,  best for photos
    • PNG, best for infographics, charts, graphs, and simple images
    • GIF, acceptable but generally replaced by PNG
  • Avoid animated GIFs. They are inaccessible because the learner cannot pause or stop them.

Back to top

Videos

To ensure all courses meet current federal accessibility requirements and follow pedagogical best practices, only a learning design team member should embed videos in course pages.

To include a video, provide your learning designer with:

  • A link to the video, or the embed code (if available).
  • A caption for the video.
  • A complete credit (author/creator, title, URL, date accessed, and license information, if known).
  • The desired placement on the page.

Your learning designer can assist with uploading, captioning, and ensuring the video meets accessibility standards. For reference, the DOJ requires that all videos be captioned with at least 99% accuracy. Dutton also requires a transcript for any video not hosted in Kaltura.

Back to top

Getting help

Your learning designer is your partner in building effective and engaging online courses. Whether it’s navigating Drupal or refining your content, we’re here to assist. Please don’t hesitate to contact us with questions.

Back to top