Web Guidelines

Content

Required

Accessibility Guidelines

Some visitors to the University’s Web site may have difficulty using the site due to visual, auditory, learning or mobility impairments. These users may rely on adaptive technology on their computer to access the Web. An example is a speech output system that reads the text on a screen. In order to provide access to the University Web site for a wide spectrum of potential users, certain accessibility guidelines should be followed. These guidelines are based on WC3 Web Accessibility (WAI) Initiatives.

Page Design

  • Avoid using backgrounds that interfere with the text on the page. The text should contrast strongly with any pattern or color of background. Pattern backgrounds should be used sparingly if at all.
  • Use header tags appropriately. For example, use header 1 for the main heading and subsequently smaller header tags for sub headings. Do not use header tags to color or enlarge non-heading text.
  • Make links descriptive so they can be understood out of context. For example, rather than "click here” for a list of staff, use ‘list of staff" as a link. Too many words make the link ineffective; don’t link entire sentences.
  • Do not rely on color of text to provide information. For example, do not say "All new dates are in red text".
  • Use cascading style sheets to define the look of the page, such as font face and heading colors. Use of the style sheets provided by the University is strongly encouraged.
  • If you use audio, video or animation on a page, provide as a minimum a text transcription of video and audio along with a text description of the action. Multimedia that are properly captioned and provided with audio descriptors are the ideal standard.
  • Do not use frames. Not only do they present bookmarking and printing problems for users, they also interfere with accessibility.
  • Provide a tab order for each form element to allow keyboard access and contact information for those who cannot view the form or database.
  • Only those Java applets compiled with Sun accessibility class should be used on Web pages. Test the pages with JavaScript turned off if you are unsure of accessibility.

Images

  • Provide alt tags for all images to describe their graphical content. This is a crucial element to accessibility design. Flash files must be made accessible.
  • Information presented in an image format, such as an image of a manuscript, should include a link to a text description of the information. If you are unsure of the importance of an image, remove it from the page to assess the impact.
  • Avoid the use of image maps when possible. If an image map must be used, insert alt tags for the regions of the map or provide the same text links on the same page.

Accuracy

All punctuation, grammar and spelling must be correct and information must be accurate and timely.

Affirmative Action ,EEO, Title IX Statement

Affirmative Action/Equal Employment Opportunity/Title IX Policy and Coordinator

This statement must be, at a minimum, listed in the footer of home page of a site and linked to the appropriate page, see the UNC home page for the link.

Applicable laws

Applicable laws protecting the rights of students (FERPA), patients (HIPAA) and owners of pictures (copyright) must be followed.

Single sourcing

  • In the interest of accuracy of information, certain University-wide information must not be reproduced on individual pages but rather "single sourced" by linking to the official document.
  • The defined single sources are the Catalog, Schedule of Classes, three year calendar, financial aid information and cost of attendance. Catalog information includes program requirements and course descriptions.
  • In general, it is advisable to link to, rather than recreate, any information not developed specifically by the area owning the Web site.

Recommended 

Writing for the Web

The majority of users scans Web pages rather than reads word-for-word . To create effective pages, content writers must understand how to write for the Web. The first thing a user wants to see is the salient point is and the supporting information should follow. The proper physical presentation, such as font, white space and bullets, is critical.

User focus

Organize sections and content according to users’ needs, not by departmental organization or hierarchy. Try to think like a user and identify which items a user would logically want, even if it means grouping functions from different areas together.  

Clear words

Words must be clear to the target audience. Users will likely have difficulty understanding vague, university-specific or generalized links or headings, but will find specific, common words easier to understand and follow.

Jargon

Many university terms are familiar to designers, Web authors and content writers, but not to users. If acronyms are used, make sure they are defined clearly in the page and use descriptive phrases to clarify references to processes, forms or offices that may not be easily recognized by users.

PDF documents

PDF documents are not required to meet Official Page content or graphic standards, such as the university header at the top of the page, but must minimally indicate University of Northern Colorado in the title of the document pages. PDF documents can use the university print logo if desired.

Consistent navigation

The main navigation list should look the same and be included on each page. For example, if a horizontal navigation is used, each page should have the same navigation area with the same words, organization and layout. Subsections can have individual navigation links but those navigation links should also have consistent placement and layout.

Consistent link styles

Be consistent in your use of color, underline or no underline style, bullets, arrows, and other methods to indicate a clickable links. Do not use underline for any text wording that is not a link since it indicates a link on many Web pages.

Proper content and layout of the Homepage

Users have come to expect certain information on the homepage, specifically news, events and updates to information. Do not use the mission statement as the homepage text. The most important information should be visible “above the fold” which means visible without scrolling down on the page.

Text for links

Users no longer need large, graphic buttons to realize a clickable area exists. In general, text links are now more easily recognized as clickable. Text links download faster and should change colors when hovered over and after being selected. Text links are easier to change than graphic links. 

List length

Users can generally easily comprehend a list of about seven items. Longer lists can be divided with headers or spaces. Bullets or numbers make lists easier to read. 

Standard fonts

A browser will only display the fonts available on the user’s machine. The Arial, Helvetica or Verdana (sans serif fonts) combination of fonts is preferable for reading on a screen since the smooth edges are easier to display. Times New Roman or Georgia (serif fonts) should be the only other fonts used in text content. Most browsers support resizing of fonts. Fonts should be set via style sheets rather than through inline styles. When setting font size, the use of relative percentage values is recommended over fixed point sizes to allow users to resize their browser text to suit their needs.

Content alignment

Readability of a site is improved by consistent alignments for items such as text, rows, columns, form fields, etc. The preferred alignment is left although headings can occasionally be centered. Limit the number of different alignments on a site and be consistent with the use (all headers the same, etc.).

Page length

The length of the page depends on whether it is important for the user to see all content on one page. If a page contains a lot of content and scrolls for more than one screen height, it is advisable to use section headings and named anchors (sometimes called "jump to" links) at the top of the page to allow a user to jump directly to a section of the page. Include Back to Top links, allowing users to return to the main portion of the page, after each section of a long page. A preferable method is to break long content into individual pages.

Under Construction

Under construction messages or image signs may not be used. As pages are created, they can be added to the site and linked at that time.

Continue to graphic requirements