This page has some tips for better incorporating images, videos, tutorials, widgets, and forms into your LibGuides.

Have questions? Email us at librarywebservices@furman.edu.

Images are a great way to convey information and break up a "wall of text" on the website. Here are some tips for using images.

• Adhere to copyright standards when using images.
• When sizing images, use percentages. Your content box is 100% width, so set your image's percentage to reflect how much of the box width you need. Common widths for images are 30%, 50%, and 100%.
• Whenever possible, upload the image into LibGuides. If you are linking to an image outside of LibGuides, use a source that begins with HTTPS.
• Always add Alternate Text to images to ensure accessibility (see below).

Alternative Text

Screen reader software tells users about the presence of images on a website, but it can’t provide descriptive or context information about the image unless you provide that information in the form of alternative text.  Most commonly, you’d add this as Alternative Text for the image, but if very detailed information is needed (e.g., to describe the information in a diagram) you’d add it to the page’s narrative text.

You can add Alternative Text in the Image Properties pop-up in LibGuides.

Well-crafted Alternative Text should:

• Represent the content and function of the image.
• Be as short and accurate as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence may be appropriate.
• Avoid redundancy. Don’t simply duplicate text that is already written in the text of the web page.  In situations like this, the very briefest of descriptive Alternative Text is needed.
• Don’t use "image of ..." or "graphic of ..." to describe the image. Screen readers automatically add the word “image” to the Alternative Text you provide, so including it would be redundant.

Additional Guidelines:

• If the image the only content in a link or button, the Alternative Text should describe the purpose of that link or button, and not the content of the image.
• If the image is predominantly text, the Alternative Text should be that text written out. For example, an image of the Library’s mission statement, as in the footer of our website, might simply read “Engage. Enlighten. Empower”.

When to leave the Alternative Text field empty:

Leaving an Alternative Text field empty (e.g., alt="") signals to screen readers that the corresponding image should be ignored.  There are several situations in which this is desirable (and required by accessibility standards).

• If the image conveys no real information (for example a decorative image used as a list item “bullet” marker).
• If the image repeats information that is already present as text (for example, a YouTube icon that is adjacent to a text link to YouTube). 

Here a couple quick tips for improving the usability of embedded media:

• Embedded media must include a URL that begins with HTTPS. URLs beginning with HTTP will not function properly.
• When you insert the embed code, change the width in pixels to a width in percentages. This will ensure the media will display regardless of your screen's size. In the screenshot, you can see that this YouTube video in LibGuides is set to a width of 95% which means the video will always be 95% of the width of the content box it is in regardless of the size device it is being used on.
• Embedded media with audio requires captioning to be accessible to students who are Deaf or hard-of-hearing. YouTube generates captions of videos as part of their upload process. Camtasia can also be used to generate captions. For longer files, we can outsource captioning.

Need help with embedded media or captioning? Contact librarywebservices@furman.edu

Making widgets HTTPS compliant, responsive, and accessible can get very complicated, and in some cases, we may not have enough control to update them to our standards.  If you are using a widget that needs to be updated, please contact us at librarywebservices@furman.edu, and we’ll work with you to figure out how best to proceed.

Making web forms HTTPS compliant, responsive, and accessible can get very complicated, and in some cases, we may not have enough control to update them to our standards.  If you are using a web form that needs to be updated, please contact us at librarywebservices@furman.edu, and we’ll work with you to figure out how best to proceed.