The public web at UVU is a centralized system guided by standards and procedures to maintain our brand, our image, and our content at the highest standards. The standards and suggestions on this page can help guide the development of your site.

UVU strives to promote web best practices and provide a consistent, intuitive, responsive, and accessible web presence. In order to facilitate these efforts, the following standards have been determined. All UVU websites should meet these standards and may be subject to review.

These standards were adopted by SWAT on November 28, 2018. SWAT reviewed in spring 2023.

Page headers

• Image sliders may be used on pages, but should not be in page headers.
• Video background page headers should only be used on college- or school-level sites and should be implemented by Web & Mobile Solutions; video background page headers should only use videos that have been approved by Studios & Broadcast Services; video background page headers are meant for decoration only and should not include audio or text.
• Parallax scrolling effect should only be used on page headers, and preferably should only be used once per site.

Department headers and footers

• The only content permitted in the department title area is the title of the department, in text. No images are allowed in the department title area of the page.

Department navigation

• Up to eight items are allowed in department navigation, as long as those items do not wrap/disappear at tablet width.
• Department navigation must include at least one item.

• The navigation for academic departments must include the following four navigation items (and related content) in this particular order as the first navigation items listed:

  1. About Us
     1. Statistics (provided by Institutional Research)
  2. Degrees and Programs
     1. Program Learning Outcomes
  3. Advising
  4. Faculty & Staff

• The navigation for Academic Colleges and Schools must include the following four navigation items:
  The first two items should appear as the first and second items on the navigation. The last two items may appear anywhere within the navigation.
  *"Make a Gift" is optional; If a school does decide to have a '"Make a Gift" link, it must be tightly coordinated with the Development Office. 

  1. About Us
     1. Statistics
  2. Departments
  3. Advising
  4. Make a Gift*

Tables

• Pages shouldn't be designed using tables. Tables are not meant to align different pieces of content in a site. Tables don't allow for sites to adapt properly for mobile devices, and, if used improperly, are not accessibility friendly.
• Tables may be used to display tabular data in rows and columns.

Images

• Copyrighted images should not be used, unless it is with permission of the copyright holder.
• Images should be appropriately sized for use on the web.
• Stock images may be used if the department has purchased them, though photos provided through University Marketing are preferred.
• Images should not be used as a replacement for in-page text, and text on images should be limited. Text on images must be represented elsewhere on the page, or as an alt tag.

Documents

• Because PDFs can be large files, and may take a long time and a lot of bandwidth to download, they should be used judiciously. PDFs should only be used when they are the best format for the content, and not as a replacement for content that could be reasonably displayed on a web page.
• Any documents (PDF, Word doc, Excel spreadsheet, etc.) being used on a site should be appropriately structured, tagged, and accessible.

Logos, sponsors, branding

• Secondary logos (school/college/department) should be created and/or approved by University Marketing & Communications. Request a secondary logo.

• Do not modify UVU marks or logos. Follow the guidelines for UVU marks and logos.

• Do not modify the logos of social media icons, etc. in an effort to match them to your site.

Forms

• Standard web forms should not collect protected information such as birthdays or social security numbers.

Displaying content

• Modals (lightboxes) should not be used for content that scrolls. Modals are primarily intended for use with photos and videos.
• iframes may be used where an alternate option is not available, however, all iframes should include a descriptive title attribute.

Links

• When contextually appropriate, links that point to documents (PDF, Word, Excel, PowerPoint, etc.) should include the appropriate icon.
• Links that point outside of the current site should open in a new tab or window.
• When contextually appropriate, links that point outside the current site should use an icon to indicate that the link is external.

Supplementary code

• While JavaScript, jQuery, and other languages are supported on uvu.edu, it is important to inform Web & Mobile Solutions of your intent to use them on your department site. Notifying WMS is important because there may already be a solution or tool to accomplish your goal; additionally, the code you plan to implement may result in conflicts with existing code, present security concerns, or cause problems with accessibility. Be sure to contact Web and Mobile Solutions before implementing any code beyond standard HTML and CSS to make sure supplementary code is approved.

Adaptability and mobile friendliness

• Mobile friendliness (i.e., making content easily available to mobile devices) should be kept in mind while building sites. On mobile devices, all site content should be visible and/or accessible and should function properly. Sites may be subject to review for mobile friendliness and adaptability.
• Take mobile visitors into consideration as you organize and build the content on your site. Important information should be near the top of your pages, and pages should be easy for mobile visitors to "digest."
• Page load time should be taken into consideration, as not all visitors have the bandwidth on mobile devices to download a large amount of images, documents, etc.

Accessibility

UVU strives to ensure compliance with AA standards according to WCAG 2.0, as recommended by W3C. In order to facilitate these efforts, the following standards have been determined. All UVU websites should strive to meet these standards and may be subject to review.

General

• All pages must have descriptive/information page title. Page titles are edited in the page properties.
• Heading tags, list tags, emphasis tags, etc., should be used appropriately. Heading tags should be used only to identify headings and sub-headings, and should be used in the correct order (for example, do not use H3 without previously using  H2 to label a parent section).
• The page must be readable and functional when the text size is doubled. This can be checked by using your browser's zoom functionality.
• HTML/XHTML code must be valid and used properly.

Images

• Background images must be decorative (should not convey information or include text).
• On-page images must have alt attributes, which are descriptive. Learn how to add alt tags to images.
• Images can be used to supplement text, but not in place of text. Any words or information on the image must be represented as text on the page as well.

• Images that are used to convey complex information, such as flow charts, graphs, infographics, etc., should provide an alternate text version of the information. This information may be included via a link with a descriptive title. See an example from Penn State.

Videos

• Embedded videos (including those embedded from YouTube, Vimeo, etc.), iframes, and other embedded content must include descriptive title attribute.
• All videos must be captioned (use Kaltura if needed).
• Video without audio tracks must include a text description via “long description” attribute.
• When a video file with audio includes information that is not related via audio (such as background information), an audio description must be provided.

Audio

• Audio files must include link to TXT or HTML with transcript.

Color

• Color must not be the only method of conveying content or distinguishing visual elements.
• The contrast of text and background colors should pass WCAG 2.0 AA: a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px and larger). Use the WebAIM Color Contrast checker to ensure colors meet AA standards.

Navigating Pages

• Instructions should not rely on size, shape, or visual location (e.g., “click square icon” or “instructions are in right hand column”).
• Instructions should not rely on sound (e.g., “a beeping sound indicates that you may continue").
• Instructions should not rely on color (e.g., “click the blue icon").
• All elements on a page must be in correct tab order; navigation order and content tabbing must be logical. This can be tested by using the "tab" key on your keyboard to ensure that the page is traversed in a logical, expected order.
• Interactive elements are intuitive or have clear instructions or labels or examples.
• Elements that have the same functionality across multiple pages are consistently identified.
• All content on the page must be able to function via keyboard alone, including snippets, iframes, etc. No keyboard traps (i.e., visitors should not get stuck in one spot while using keyboard to navigate). This can be tested by using the "tab" key on your keyboard to ensure that you are able to access all of the page's content.

Tables

• Tables must only be used for tabular data, and must include table heading tags
• Tables must have descriptive table caption tag