University of Massachusetts Amherst

Search Google Appliance

Links

Websites

The website guidelines apply to all sites representing UMass Amherst schools, colleges, departments, programs, research centers, and administrative offices.
 
Personal web sites, UMass blogs, and Google sites are NOT required to adhere to this policy.

Learn more about the following guidelines:

 

Top Banner

The top banner is a branded strip which offers a simple way to connect all of our sites and lets users know where they are at all times.

UMass Amherst website top banner example

The top banner also provides access to campus links and the UMass Amherst site wide search function.

UMass Amherst website top banner with campus links

The top banner must appear at the top of all official UMass Amherst websites and pages.

The top banner must NOT be replaced with the individual website header when scrolling down the page.

The top banner:

  • Brands your page as part of UMass Amherst.
  • Links your page to the UMass Amherst home page.
  • Provides access to the UMass Amherst site wide search.

 

No content of any kind may appear above this bar. No links to information on the website should be added to the top banner, such as 'Admissions'. Site search functions are not allowed in the top banner; these may appear elsewhere on the website.

Please contact University Relations at 413-545-0123 or by email at urcommunications@umass.edu if you have questions about implementing the top banner on your website. 

Favicon Usage

UMass Amherst provides a favicon by default on all websites on the umass.edu domain.  The favicon appears in the top border of your web browser to the left of the page title.  See the example below:

UMass Amherst favicon example

If your site is on another domain, you will need to define the favicon in the head section of your HTML code or place the favicon in the website’s root.

You can find the UMass Amherst favicon at www.umass.edu/favicon.ico.

Page Title

The page title displays in the top border of your web browser and is an additional way to identify your site.  It also helps with search optimization to make the site identifiable in search results. 

Title tags must exist on every page. Title tags should contain the unit name, department, or program followed by "UMass Amherst." The following format is highly recommended:

Page Title | Site Name | UMass Amherst

See an example below:

UMass Amherst page title format example

NOTE:  Outside of the page title, you may include other relevant keywords  important for your specific department. Keep in mind, however, that Google search results will only display up to about 66 characters. It is recommended to adhere to meta keyword tags only.

Standard Footer

The page footer shows site ownership, both as part of UMass Amherst and within the specific department or group within the university.

All UMass Amherst websites should have the official UMass Amherst footer, which includes the copyright year and links to University of Massachusetts Amherst, Site Policies, and Site Contact. 

The recommended format is:

©2017 University of Massachusetts Amherst • Site Policies • Site Contact

The footer text should be centered at the bottom of each page.  No other content may appear below the footer.

Footer Requirements: 

  • Whether or not they are developed and/or hosted at UMass Amherst, the footer requirement applies to all UMass Amherst websites.
  • "University of Massachusetts Amherst" should link to www.umass.edu.
  • "Site Policies" should link to www.umass.edu/site-policies.
  • "Site Contact" should link to an email address of the person responsible for the content of the website, or to a specific webpage from which it should be obvious who is responsible for the site content.
  • No other graphics or text should be included in the footer. This includes wordmarks or text crediting site designers or hosts.    

Accessibility

In order to meet its values of diversity and inclusiveness, the University of Massachusetts Amherst is committed to making its website accessible to all.

Our website, www.umass.edu, complies with best practices and standards as defined by Section 508 of the U.S. Rehabilitation Act, located here; www.section508.gov, and the Web Content Accessibility Guidelines (WCAG) of the World Wide Web Consortium Web Accessibility Initiative (W3C WAI) for HTML/XHTML, CSS, and web content accessibility, located here: www.w3.org/TR/WCAG20.

Accessibility and SEO (Search Engine Optimization)
In addition to making content accessible by improving usability, the accessibility guidelines also work to improve our rankings in top search engine results.

The following quote is from webaim.org/blog/web-accessibility-and-seo:

"Search engines and assistive technologies (screen readers) are quite similar. In many ways, search engines are deaf, blind, use only a keyboard, and have limited technical abilities."

Providing Equal Access
All UMass Amherst websites are required to make best efforts to ensure that information is equally accessible for everyone. Websites must comply with the below easy checks to ensure equal access.

When creating digital content, we follow the “Web Accessibility Easy Checks” guidelines. These include:

  • Page Title is the first thing a screen reader says upon loading a web page, the description visible in browser windows and tabs, and the title that appears in search engine results.
    • The title should briefly describe the content of the page and should be unique within the site.
    • Best practice is for titles to be "front-loaded" with the important and unique identifying information first.
    • Example: Page Title | Site Name | UMass Amherst
       
  • Alt Text (Image text alternative) conveys the purpose of images and are used when an image cannot be seen or does not load.
    • Image's conveying useful information need alternative text.
    • Decorative images alt text can be left empty.
    • Example: <img src="magnifying-glass.jpg" alt="search">
       
  • Headings contain sections of similar information on a page and visually break up the sections with bigger and bolder text.
    • Headings must be marked up accordingly so all users can benefit equally.
    • Heading levels must have a meaningful hierarchy of conceptual content beginning at Heading Level 1 and cascading down.
    • Example: <h1> comes first, followed by <h2> then <h3> etc.
       
  • Color Contrast defines the contrast ratio between text and background color, text and link color, etc.
    • High contrast is required by some people with visual impairments (dark text on a light background).
    • A contrast ratio of 4.5:1 is required for normal text (14 point and larger) and 3:1 for text 18 point and larger.
    • Example: Use the Web Aim Color Contrast Checker.
       
  • Resize Text allows users the ability to change the text on a page in order to better read it. This includes changing the font, line height, line spacing etc.
    • Modern browsers allow manipulation of text size, text zoom, and page zoom but all websites should start at font size 100%.
    • Web page should be designed so they are usable when text size is increased. Generally, images should not be used to convey text.
    • Example: Use text-only zoom on your browser (200%) and ensure that text doesn't disappear, cut off, or include horizontal scroll bars.
       
  • Keyboard Access and Visual Focus are important to users that cannot rely on a mouse to navigate a website.
    • All content and functionality must be accessible through a keyboard.
    • Keyboard focus must be visible and should follow a logical order through the page elements.
    • Example: Check that you can tab to all the elements, including links, form fields, buttons, and media player controls.
       
  • Forms, Labels and Errors: Labels, keyboard access, clear instructions, and effective error handling are important for the accessibility of forms.
    • When done correctly, people can interact with forms using only the keyboard, voice input, and screen readers.
    • Check that every form control has a label associated with it using 'label', 'for', and 'id'.
    • Check that the errors are easy to find. Error messages should be displayed before the form, rather than after the form.
    • Example: Use the WAI Labels Checks found on the W3.org website.
       
  • Multimedia Alternatives are necessary to make content accessible to everyone.
    • Auditory and Visual media should be provided in alternative forms such as subtitles (captions) and transcripts.
    • PDF documents should always be accessible with alt text for images and rich text for information (do not flatten text into images).
    • Audio should not start automatically (including video's with sound) when a page loads.
    • Example: Auto captioning on YouTube video's is not adequate, a complete transcript should be uploaded along with the any video.
       
  • Basic Structure Check is necessary to see the site how users of assistive technology may see it; you look at a page without images, styles, or layout.
    • Columns, sections, colors, and other visual aspects that organize a page's information are only available to users who can see them.
    • Check that the information on a page makes sense when images and style sheets are removed.
    • Check that blocks of information have clear headings.

For a more comprehensive approach, please refer to Techniques for WCAG 2.0

Site Validation

Site validation is an important tool to use when designing a website. Having valid code means your site is much more likely to work as you intended in different browsers and on different computers. By validating your site, you can check the HTML, XHTML and CSS for syntax errors and compliance to established standards.

Resources that can be used for validating your site:
 
W3C Markup Validation Service:
A free online service that validates HTML or XHTML in one of three ways: you can enter a page URL, upload a file or paste code directly in the validator.
 
W3C CSS Validation Service:
A free online service that validates CSS.
 
Feed Validation:
A free site to validate your RSS feeds.

Responsive Design

All websites deployed to UMass servers after March, 2015 need to have fully responsive design across device breakpoints ranging from standard desktop down to smartphone dimensions.