Updated August 7, 2017.
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.
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 red presence in the header with a UH Hilo logo hyperlinked to the UH Hilo homepage (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.
The University shall be referred to with one of the following names:
Improper names include “UH-Hilo,” “UHH,” and “University of Hawaii-Hilo” and shall not be used.
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
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.
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, email@example.com 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 can supplement the design and should not replace or overshadow the UH Hilo logo.
See the UH System Style Guide for a complete list, but here are a few highlights and additions.
|login (as a noun)||log in|
|log in (as a verb)||login|
|log out (as a verb)||logout|
|sign up (as a verb)||sign-up; signup|
|UH Hilo||UHH; UH-Hilo|
|University of Hawaiʻi at Hilo||University of Hawaiʻi-Hilo; University of Hawaiʻi, Hilo|
Normal text shall not be presented in all caps except abbreviations and when appropriately honoring brand names.
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.
jquery.komohua is an optional jQuery plugin which will add buttons allowing users to inject these characters into an input field or textarea tag. See the jquery.komohua demo.
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.
All UH Hilo sites 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. While not accurate, the Section 508 Standards may sometimes be referred to as A.D.A. (Americans with Disabilities Act) for websites.
Some of the guidelines and standards for accessibility are highlighted below as they are particularly noteworthy.
1194.22 (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). (See also WCAG2 1.1.1.)
All non-text content must have a text equivalent.
Pictures and photos must have
alt="...", hereinafter referred to as alt text, which roughly and briefly describes the image as one would to someone over the phone.
If the image is purely decorative, blank alt text,
alt="", must be included along with
1194.22 (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. (See also WCAG2 1.2.1-1.2.9.)
Videos and live audio must either have synchronized captions. The captions must match the actual content and not the script as performances often vary from scripts.
1194.22 (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. (See also WCAG2 1.4.1.)
Information cannot be conveyed solely with color. For example, instead of saying “required fields are red,” use, “required fields are indicated with a red (required).” People who cannot see the red color can still see the “(required)” marker.
Text must also have a minimum contrast ratio with its background. There are many online tools available, such as Lea Verou’s Contrast Ratio calculator, which determine ratios and indicates if they meet accessibility guidelines.
1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links. (See also WCAG2 2.4.1.)
Add an in-page anchor before or as the first element of repetitive links such as header and sidebar navigation such as a “jump to content” link. See this technique for building skip navigation links.
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).
Pages shall be coded using proper HTML hierarchy (
H6). In most cases, the content of the first
H1 should be the same as the content of the page
Headings should not end with a colon
In accordance to the HTML5 specification, the
i tag should be used in the following cases.
ielement 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
Welcome to our ʻohana (family).
Images should be optimized using the following methods and formats where applicable.
Some recommended opitmization tools are:
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
Studies show that utilizing icon-only menu triggers such as the hamburger button decrease usability and engagement and should be avoided; or, at the very least, include the word “Menu” on or next to it.
University-wide polices 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.
Websites which do not publish their own disclaimers may link or refer to the UH Hilo Website Privacy, Usage, and Disclaimer Policies.
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 website is recommended.
UH Hilo is an Equal Employment Opportunity/Affirmative Action Institution.
||UH Hilo Red, PMS 485C|
||Alternative UH Hilo Red|
||Light tan/alternate tan|
||Light tan for element borders|
||Light tan for element backgrounds|
||Alice blue for alternating table rows|
||Pale canary yellow for highlighted table rows|
||Blue element borders|
||Light blue for element backgrounds|
Several website templates are available for use. Please contact the UH Hilo Web Office for more information.