Reminder: Web Accessibility Compliance Law in effect

The new Colorado accessibility law, HB21-1110, affects university websites and went into effect July 1, 2024. This means that university website owners/content managers must ensure your website content meets the minimum web accessibility standards.

Learn how to meet accessibility standards

Using Videos


We get a lot of questions about how to use videos on the web. What size they should be? Where to host them? We have a few general recommendations and some tools to help you out!

Accessibility And Usability For Videos


Like with all the content on your website, accessibility and usability is very important. It ensures that all users, including those with disabilities can access your content. There are a few things to keep in mind for accessible videos:

  1. All videos should have captioning and ideally a transcript as well. Transcripts can be thought of as text versions of your video. A transcript should include not only what is spoken in the video, but also descriptions of actions or important information on-screen. If you have already created a caption file, the same file can be edited or added to and used as a transcript.
    1. Youtube has a subtitle/captioning tool
    2. Learn more about video captions
  2. Do not enable auto play - this hinders accessibility and it can make your page load slower too. Let users decide whether or not they want to watch a video.
  3. Videos with text (e.g. slideshows in video form, lecture videos, program highlights etc)
    1. For accessibility purposes, captions are an absolute must for users who have visual disabilities and cannot see the text
    2. If captions are absent, these types of videos should be used minimally. Acceptable only if alternative form is given to users, for example a slideshow or content inside video is replicated on the page in actual text.
    3. These video types are not mobile friendly as they do not translate well on mobile and text can become unreadable for users (especially if placed inside a table or tabs).
  4. Avoid flashing content. Make sure your video, animation, or other multimedia product does not contain flashing, strobing, or flickering elements within a frequency greater than 2 Hz and lower than 55 Hz, as they can cause some people to experience seizures, dizziness, and nausea. 
  5. Consider color and color contrast. Ensure information is not conveyed with colors alone and when colors are used, they are sufficiently distinguishable, especially if being overlayed on a video. Apply this principle to any content that conveys information, like text, links or charts.
  6. Think about placement of videos for mobile/tablet users and preview in mobile before publishing
  7. Do not play videos inside tables/tabs - tables are not very responsive on mobile and causes a horizontal scroll to appear on mobile.

Keyboard Accessibility for Video

Media player controls should receive focus using the Tab key and arrow keys. Depending on the control, the media player should be operated using the Enter key, space bar, and arrow keys. Check for the following to determine keyboard accessibility:

  1. The Enter key or space bar activates the Play/Pause control.
  2. The arrow keys, usually up and down arrow keys, manipulate the Volume control.
  3. The arrow keys, usually left and right keys, manipulate the Forward and Rewind controls.
  4. Depending on their design, other controls like Captions and Full Screen are activated by the keyboard.
  5. Tab order for any content should go from left to right and top to bottom in a line-by-line format. 

Youtube Embeds & Accessibility

YouTube embeds use an iframe to display the video. Since videos are considered a visually distinctive content, they must have a title. Siteimprove and other accessibility checkers will mark your YouTube video's as inaccessible if a title is missing. The title should be short and descriptive, telling screen reader users what the video is displaying. To add a title to your Youtube iframe embed:

Locate the embed code and add title right after "iframe" like so:

<iframe title="short & descriptive title about video" width="560" height="315" src="https://www.youtube.com/embed/...>

Accessible Video Players

  • Ensure the video player supports captions, transcripts, and audio descriptions.
  • Ensure all controls, like volume, play, and pause, can be operated with a keyboard and have accessible labels for assistive technology such as screen readers.
  • Ensure videos do not play automatically when the webpage loads. This can be confusing for many users, and the sound can interfere with assistive technology such as screen readers.
  • DigitalA11Y has provided a great list of accessible media players.

Manually Testing Video Content for Accessibility

  • Use your keyboard to navigate through the multimedia player: Use the tab, enter, and spacebar keys to start, stop, fast forward, rewind, turn on/off captions, maximize/minimize the window, and raise/lower the volume, in addition to any other controls your player uses. When testing with the tab key, be sure the tabbing order makes sense
  • Use a screen reader to review your pages, media player’s controls, etc. Check all of the items you reviewed with your keyboard, plus listen to any directions and cues; make sure there’s nothing like “1 button; 2 button” (make sure the buttons are “labeled” with commonly used terms); listen to the entire page/window: listen to the links as list (out of their written context, to make sure they make sense), open lists of graphics and headings; listen to any synchronized audio description tracks); turn off your monitor while you listen to the screen reader and compare it to a script of the exact content that should be heard from the screen reader.
  • Make sure your transcripts read exactly as the audio from your media; check the transcripts for proper punctuation; and, if the person speaking uses any acronyms, define them.
  • Watch your video to confirm that the captions are visually clear and not “pixelated,” especially if you’ve used open captions; review the captions for spelling, proper grammar, and punctuation.
  • Document testing with screen shots, reports from testing tools, etc.

    • File types

    Sitefinity accepts the following file types: .mp4, .webm, .ogv. Keep in mind, .mp4 is the best format  because it can pack high quality into small file size.

    Optimize your videos 


    When optimizing videos, the goal is to make the video as small as possible in file weight, while sacrificing as little playback quality as possible. Optimized videos equate to better website speed and performance. There are two main tools we currently recommend.

    Converterpoint

    Converterpoint is a free tool. It is fast and easy to use. Because it auto optimizes, it is suitable for those who are not familiar with video editing. 

    Handbrake

    Handbrake is also free. It is more suitable for people who know specifically what they want to accomplish and are also familiar with video editing. 

    Use recommended video sizes


    The recommendation for video size in Sitefinity is 50MB or less. You will receive an error when trying to upload if your videos are larger. We do not allow large video file uploads in Sitefinity for a few reasons.

    • They take longer to load (especially on mobile) and require a higher internet speed. This not only affects your website's performance but also usability for mobile users and people with lower internet speeds. 
    • Large videos do not translate well to mobile and can cause horizontal scroll to appear. Again, effecting usability of your website.
    • If multiple people upload multiple large videos to Sitefinity directly, it can cause the servers to be slow. This could cause more server issues overtime.

    Keep in mind, 50MB is the maximum size limit. You should keep your videos as small as possible, since videos smaller than the recommended size will load faster.

    Other hosting options

    Videos bigger than 50MB? We advise you to try hosting your videos in Panopto or Youtube. Both have benefits like:

    • Faster load times since the video will be embedded on the page
    • Auto-captioning for accessibility
    • You can show bigger videos without usability issues
    • Easy to display on your pages using a content block

    Panopto 

    Panopto is the enterprise solution for creating and hosting videos at CU Denver and CU Anschutz. Visit http://ucdenver.hosted.panopto.com/ and login with university credentials.

    The following training resources are available from Panopto:

    You can learn more about Panopto here.

    YouTube

    This is video hosting and social media platform available to university and non-university users. You can host your own original content by uploading your videos to you or your department's own Youtube channel. Learn how to create a YouTube channel and upload content!

    Upload Videos


    To upload videos in Sitefinity, please do the following: 

    1. Go to the Content in your dashboard.
    2. Select Videos.
    3. Click Upload Videos.
    4. Select the video(s) from your computer or drag and drop them from your computer.
    5. Choose the Sitefinity library you would like to store the video(s) in. 
    6. Publish.

    Libraries are like folders for your videos and should be used to organize your video content. Learn more about libraries.

    Learn how to upload videos into YouTube.

    Display Videos


    Once your video(s) are uploaded, you are ready to use them on your pages! In order to display them, open the page in edit mode and choose the media widget you would like to use. If you are not sure which widget to use, the video widget is a good place to start. 


    Youtube

    If you are using a YouTube video, you should use a content block to display your video but first you'll need the embed code from your video. Find your video in Youtube and select the option to share and copy the embed code.

    Before you use the code in Sitefinity, you'll want to be sure your video is fully responsive for mobile display. To do this:

    1. Go to embedresponsively.com and paste your code in one of the applicable source option (in this case YouTube)
    2. Hit Embed and you will be provided with a mobile friendly code
    3. Copy the code and go back to your page in Sitefinity
    4. Drag and drop the content block on your page and click Edit
    5. Click the HTML button in the top right and paste your code
    6. Save your changes

    General Recommendations


    Ask yourself: Do I really need to use this video?

    Many times, it might seem like a great idea to create videos for everything in order to save on space, but it can be overwhelming to users to see a page full of videos that cover a variety of different topics (e.g. videos on program overview, welcome video, faculty/staff videos, etc all on one page). Be strategic about which videos you choose to create and how you choose to display them to your site visitors. Also, remember that many videos on a single page could also cause the page and/or videos to load slowly. 


    Another thing to think about is if you can keep the viewers attention with the video.

    A video is only helpful if users watch it. To catch viewers attention, present important details during the initial 30 seconds of the video. Statistics have shown that 33% of viewers lose interest after the first 30 seconds. Student engagement videos should be no longer than 6 minutes as engagement decreases as video lengthens. Informational videos should be anywhere from 30 seconds to 60 seconds; anything longer than 3 minutes and your audience will start losing interest. 

    Steps to using videos

    @Web site sponsors
    Resources
    Support
    Tools
    CMS Login