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 Digital Experiences & Accessible Technology; 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:
- About Us
- Statistics (provided by Institutional Research)
- Degrees and Programs
- Program Learning Outcomes
- Advising
- 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.
- About Us
- Statistics
- Departments
- Advising
- 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
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 informDigital Experiences & Accessible Technology 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 Digital Experiences & Accessible Technology 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.1, 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
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
