Keep Up to Date - Research Guides at University of Northern Colorado

Alt Tags are important for visually impaired students using a website. A screen reader will read the Alt Tag to the user, so make it as descriptive as possible, while keeping it as concise as possible. Easy, right? Well...

Use the WAVE (Web Accessibility Evaluation Tool) http://wave.webaim.org/ to determine if the images in your LibGuides already have Alt Tags.
If you have images without Alt Tags, add them. See instructions.

LibGuide Rich Text/HTML Image Editor for Alt Tags

Recent Posts

Autoplay Embed Code for YouTube Videos

Would you like a video to begin playing as soon as a viewer clicks on a guide homepage or other page within your guide? Autoplay may be attention getting, but it can also be annoying to viewers, so it should be used sparingly. If you believe a viewer will be returning to this page over and over, they will likely become more annoyed with it over time, so you may only want to use autoplay on pages you think have information that will only be need once. Also consider whether you want the sound to play or for the video to be mute. The movement of the video will get attention in and of itself, and it gives the option to the viewer of whether to turn on the sound. First, find the embed URL for a YouTube video by selecting Share. Copy the URL. If the embed URL ends with a question mark (?), add the following code to the end of the URL For autoplay only: autoplay=1 For autoplay + mute: autoplay=1&mute=1 If the embed URL does not end with a question mark (?), add the following code to the end of the URL For autoplay only: ?autoplay=1 For autoplay + mute: ?autoplay=1&mute=1 Example <div class="embed-responsive embed-responsive-16by9"> <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/BYgPi5SFudg?autoplay=1&mute=1" title="YouTube video player"></iframe> </div> ...

Embed Responsive Videos

If you would like to make your embedded videos responsive to the screen size your viewers are watching the video on, the code to add is fairly simple, but it is based on the aspect ratio of the video. For YouTube videos, this information can be found under Share >> Embed code. For example, this What Is OER video has a embed code that indicates the video is 560 wide and 315 high has a 16 by 9 aspect ratio. Below is the code for responsive videos of the most common aspect ratios. Below is also an example of code for a video that has additional playing code for a video. To translate and width and height to an aspect ratio, use an aspect ratio calculator.  <div class="embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div>  <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div>  <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div>  <div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="..."></iframe> </div> Example <div class="embed-responsive embed-responsive-16by9"> <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/VjGflXu6FSk" title="YouTube video player"></iframe> </div> ...

Use a Single-Cell Table to Add Emphasis to Text

Adding emphasis to specific text in a LibGuide can draw the user's eye to important information they might otherwise overlook. Using a single-cell table with a colored background or with a colored border can further emphasize and grab attention. Using a single-cell table has the added benefit of being accessible without alt text (as opposed to images). For example: Personal Communications Emails • Text Messages • Private Letters • Online Chats • Direct Messages • Memos • Telephone Conversations • Unrecorded Classroom Lectures • Personal Conference Notes • Live Speeches Personal communications are only cited with an In-Text Citation. Do not give a Reference Citation. Personal Communications are unpublished information sources that are not recoverable by the greater population (readers). For published communications, use the corresponding published format for citation examples (i.e., for letters published in a book, cite a book; personal communications may be published in journal articles, books, book chapters, blogs, websites, et cetera). This video demonstrates creating single-cell tables in a LibGuide. ...

Block Quotes

Typographers and graphic designers use block quotes to emphasize information within a text. The academic community uses block quotes to indicate a quotation of length. Block quotes can be achieved a couple of ways, as explained below. A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away. -- Antoine de Saint-Exupéry, French writer and poet To achieve the above design, this is the code that was used: <p style="padding-left: 60px; padding-right: 60px;"> <span style="font-size:16px;"> <span style="font-family:georgia,serif;"> <em> A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away. Antoine de Saint-Exupéry, French writer and poet </em> </span> </span> </p> Another option for creating a block quote is to use the HTML blockquote command. The drawback of using this command is that you have less control over the style of the block quote. In a badly designed book, the letters mill and stand like starving horses in a field. In a book designed by rote, they sit like stale bread and mutton on the page. In a well-made book, where designer, compositor and printer have all done their jobs, no matter how many thousands of lines and pages, the letters are alive. They dance in their seats. Sometimes they rise and dance in the margins and aisles. --Robert Bringhurst, The Elements of Typographic Style To achieve the above design, this is the code that was used: <blockquote> <p> <strong> <span style="font-size:16px;"> <span style="font-family:lucida sans unicode,lucida grande,sans-serif;"> In a badly designed book, the letters mill and stand like starving horses in a field. In a book designed by rote, they sit like stale bread and mutton on the page. In a well-made book, where designer, compositor and printer have all done their jobs, no matter how many thousands of lines and pages, the letters are alive. They dance in their seats. Sometimes they rise and dance in the margins and aisles.    --Robert Bringhurst, <em>The Elements of Typographic Style</em> </span> </span> </strong> </p> </blockquote> ...

Add Alt Tags to Your Images!

Leave a comment

Commenting on blog posts requires an account.

Login is required to interact with this comment. Please and try again.

If you do not have an account, Register Now.

Add Alt Tags to Your Images!

Leave a comment

Commenting on blog posts requires an account.

Login is required to interact with this comment. Please login here and try again.

If you do not have an account, Register Now.

Login is required to interact with this comment. Please and try again.