University of Hawaiʻi at Hilo Website Style Guide

Updated October 7, 2021.

The key words “must”, “must not”, “required”, “shall”, “shall not”, “should”, “should not”, “recommended”, “may”, and “optional” in this document are to be interpreted as described in RFC 2119.

This document complements the University of Hawai‘i at Hilo Brand Print Guide found on the Graphics Services website.

Contents:

• I. Policies and Statements
  • A. Privacy, Usage, and Disclaimer Policies
  • B. EEO/AA Policy Statement
  • C. Title IX Information
• II. Institutional Branding
  • A. Institution Name
  • B. Logos
  • C. Secondary Marks
  • D. Language
    • 1. Hawaiian Language
    • 2. Website URLs
• III. Accessibility
• IV. Web Technologies
  • A. Structure
  • B. HTML Tags
    • 1. Heading Tags
    • 2. The i Tag
    • 3. Images
  • C. WAI-ARIA
  • D. Content Hiding Methods
• V. Pattern Library
  • A. Website Colors
    • 1. Notification Colors
  • B. Fonts
  • C. Website Patterns and Textures
  • D. Website Templates

I. Policies and Statements

University-wide policies and practices for the use of all University of Hawaiʻi website resources are intended to define and provide protection, access and guidelines to supplement existing laws and regulations. View the full Executive Policy, EP 2.210, Use and Management of Information Technology Resources.

A. Privacy, Usage, and Disclaimer Policies

Websites which do not publish their own disclaimers may link or refer to the UH Hilo Website Privacy, Usage, and Disclaimer Policies.

B. EEO/AA Policy Statement

Websites should indicate that UH Hilo is an Equal Employment Opportunity/Affirmative Action institution. The following statement with link to the UH Hilo EEO/AA and Title IX websites is recommended.

UH Hilo is an Equal Employment Opportunity/Affirmative Action and Title IX institution.

C. Title IX Information

Websites must include a link to the Title IX contact information. The following statement with link to the UH Hilo EEO/AA and Title IX websites is recommended.

UH Hilo is an Equal Employment Opportunity/Affirmative Action and Title IX institution.

II. Institutional Branding

Official academic departments, divisions, and schools, and core university functional units must have a look consistent with the main UH Hilo website. Visitors should be able to instantly tell, when landing on any page within the website, that they are on a UH Hilo property.

Website designs shall have a significant “Hilo red” presence in the header with a UH Hilo logo hyperlinked to the UH Hilo homepage (https://hilo.hawaii.edu/) in a consistent position, above the fold, across all of the site’s pages.

See the Pattern Library below for specific colors used.

This requirement may be relaxed for affiliate and grant programs.

UH units and affiliated units must include a link to the UH Hilo home page (https://hilo.hawaii.edu/) in their site template as either a linked UH Hilo logo or text.

Please contact Institutional Marketing at University Relations for approval of any proposed designs.

A. Institution Name

The University shall be referred to with one of the following names:

• University of Hawaiʻi at Hilo (The ʻokina is optional but preferred, and the word “at” shall not be omitted.)
• UH Hilo (non-hypenated)
• Kulanui O Hawaiʻi Ma Hilo

Improper names include “UH-Hilo,” “UHH,” and “University of Hawaii-Hilo” and shall not be used.

B. Logos

There are only two official logo groups for UH Hilo: the seal with wordmark set and the Vulcan Athletics set.

See the UH System Graphics Standards for the seal logo downloads and usage requirements.

Contact the Vulcan Athletics Sports Information Director for logos and usage of the Vulcan Athletics logos.

Images, including logos, must have appropriate alt text (alt="University of Hawaii at Hilo"). The word “logo” shall not be used in a logo’s alt text. E.g., alt="University of Hawaii at Hilo Vulcan Athletics" is the proper alt text for the Vulcans logo, not alt="Vulcans logo".

Logos may only be scaled proportionally. Logos may not be cropped, truncated, stylized, or otherwise distorted unless being used purely as a design element and after other branding requirements are met.

C. Secondary Marks

As stated in the UH System Graphics Standards,

Individual unit logos are not allowed. Although the drive to “have our own identity” is pervasive, proliferation of such marks dilutes the university’s integrity and creates confusion on the part of the public.

This doesn’t mean everything has to look alike. Schools, colleges, departments and programs may develop design themes and elements, including use of color and graphic images, to provide continuity to their print and electronic communication. Media Production, ur@hawaii.edu or (808) 956–8856, can assist units in developing and implementing appropriate design elements in conjunction with the official seal and/or signature.

This means that the UH Hilo logo should be the primary identifying mark on each website. Secondary graphic elements may supplement the design but should not replace or overshadow the UH Hilo logo.

D. Language

See the UH System Style Guide for a complete list, but here are a few highlights and additions.

Normal text shall not be presented in all caps except abbreviations and when appropriately honoring brand names.

1. Hawaiian Language

Use of proper diacritical marks and letters for Hawaiian words is strongly recommended, particularly in graphic elements. It is recognized that not all technology, such as screen readers, are compatible with extended unicode characters, often the ʻokina, so alternatives may be used or diacritics dropped when greater compatibility is warranted.

While UTF–8 encoding should be used along with using the actual UTF–8 encoded characters or HTML entities, alternatives may be used.

Komohua is an optional vanilla JavaScript which will add buttons allowing users to inject these characters into <input> or <textarea> tags. See the Komohua demo.

2. Website URLs

Website URLs should not be used at the link text unless explicitly stating the URL. Link text should instead contain the context of the link so the visitor knows what the link leads to without the surrounding text. This is particularly helpful for people using accessibility technologies. Also, when read aloud, such as by screen readers, URLs are very difficult to understand.

Do: Visit UH Hilo for more information.
Do not: Visit UH Hilo at https://hilo.hawaii.edu/ for more information.

The correct full URL for UH Hilo is https://hilo.hawaii.edu/. The old URL, http://www.uhh.hawaii.edu/ shall not be used, nor shall http://www.hilo.hawaii.edu/ be used, but the URL may be shortened to just hilo.hawaii.edu for legibility.

III. Accessibility

All UH Hilo content must adhere to the requirements set forth in Section 508 of the Rehabilitation Act. You may refer to this helpful WebAIM Section 508 Checklist. Note that on January 18, 2017, Section 508 adopted the WCAG 2.0 levels A and AA standards, henceforth referred to as WCAG2. The Section 508 Standards may sometimes be referred to as A.D.A. (Americans with Disabilities Act) for websites, but this is technically inaccurate.

See Accessibility at UH and the Accessibility Guidelines for the Web sections of the UH Hilo Search and Help for details on why and how to meet the required standards.

Some of the most common compliance issues are highlighted below.

• All non-text content, such as images or photos, must have a text equivalent.
• Videos and live audio with spoken words must either have synchronized captions, a time-based transcript, or similar alternatives such as a sign language interpreter in the video. Captions must match the actual content and not the script as performances often vary from scripts.
• Information cannot be conveyed solely with color. This includes hyperlinks; keep the underline as an indicator other than link color (and don’t underline non-links).
• Text must also have a minimum contrast ratio with its background.
• Repetitive navigation elements must be skippable.

IV. Web Technologies

A. Structure

Pages should use the HTML5 Doctype and UTF–8 encoding.

Styling shall be done with CSS and pages should be responsive (natively supported by multiple screen widths).

B. HTML Tags

1. Heading Tags

Pages shall be coded using proper HTML hierarchy (H1-H6). In most cases, the content of the first H1 should be the same as the content of the page <title>.

Headings should not end with a colon :.

2. The <i> Tag

In accordance to the HTML5 specification, the i tag should be used in the following cases.

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

For example, when including non-English words or phrases in an English sentence, use the i tag.

Welcome to our ʻohana (family).

3. Images

Images should be optimized using the following methods and formats where applicable.

• JPG for photos (progressive scan format preferred)
• SVG for vector graphics
• PNG for images where image quality is paramount and SVG is inappropriate
• GIF for animations (used sparingly)

C. WAI-ARIA

Pages shall be coded with WAI-ARIA landmark roles roles when semantic HTML5 tags with built-in landmarks are not used.

• role="banner" for the header unless the <header> tag is used
• role="complementary" for sidebar/aside content unless the <aside> tag is used
• role="contentinfo" for the footer unless the <footer> tag is used
• role="form" for non-search forms
• role="main" for the main content area unless the <main> tag is used
• role="navigation" for navigation unless the <nav> tag is used (include skip links per accessibility recommendations)
• role="search" for search forms

When using multiple elements with the same ARIA role, or intrinsic role, each element shall utilize aria-label="…" or aria-labelledby="…" as appropriate.

D. Content Hiding Methods

In general, content hiding methods reduce usability by removing content that usually requires additional interaction to reach. Such features may also interfere with browsers’ built-in systems such in-page searching and in-page hyperlink anchors. Examples of such methods include hamburger buttons, accordions, tabbed panes, pull-down menus, image sliders/carousels, floating/sticky menus, and more.

While not strictly forbidden, they should be only be used if all required accessibility requirements can be met and with the understanding that such features reduce usability and engagement.

V. Pattern Library

A. Website Colors

Use the contrasting color as the background or text color for the highest contrast ratio, as required for WCAG 2 standards.

1. Notification Colors

B. Fonts

Headings shall use Raleway and body text shall use Source Sans Pro. Note that Quicksand may be used as an alternative to match printed materials.

C. Website Patterns and Textures

A number of approved patterns and textures approved by Institutional Marketing at University Relations may be used.

D. Website Templates

Website templates are, by-and-large, predetermined by the type of unit the site represents. Deviating from the template must be approved by Institutional Marketing at University Relations.

University of Hawaiʻi at Hilo, 200 W. Kāwili St., Hilo, HI 96720-4091. Tel: (808) 932-7000 or 1-800-897-4456. hilo.hawaii.edu