Search by keyword

 

E-Subscribe to e-mail updates

Ask the City

Communications activities:

Community Services Divisions:

Related links:

City of Bloomington Web Presentation and Accessibility Standards

  1. Purpose
  2. Introduction
  3. Standards compliance
  4. Definitions
    1. Page width
    2. Page alignment
    3. Page background
    4. Color palette
    5. City branding
    6. Department/office branding
    7. Navigation and menu elements
    8. Basic page layout
    9. Text presentation
      1. Size
      2. Color
      3. Style
      4. Links
      5. Background (colors and images)
      6. Note on text presentation standards
    10. Contact information
    11. Counters
    12. Legal notices and copyright notice
    13. Metatags
    14. Printer-friendly pages
    15. Browsers/versions supported
    16. Advanced Web functionality
    17. Advanced Web presentation technologies
    18. Graphics/images
    19. Frames
    20. Other accessibility standards
    21. Web application user interface
      1. Error messages
      2. City and department branding
      3. Online receipts
      4. Post-transaction user guidance
  5. Exemption process
  6. Changes

1. Purpose

The purpose of this Standard is to document the level and type of consistency required across City of Bloomington websites to synchronize consistent design, usability and accessibility and to properly identify the aggregate group of sites as components of City government.

2. Introduction

The City of Bloomington has a complex environment for web management. The complexity derives from a variety of services, a multitude of audience types, and distributed web management responsibilities.

The complexity of the City's web management environment presents a number of challenges for site users and site managers. Two primary challenges are:

  • Determining the level of consistency required across the City of Bloomington website for usability and accessibility.
  • Balancing the need for line of business, campaign, and/or department branding needs with City branding needs.

The City of Bloomington's set of presentation standards continues to address the above challenges.

3. Standards compliance

Departments are expected to conform to these standards. The Core Web Team (CWT) will work with departments to help them conform to these standards.

It is the policy of the City of Bloomington that these standards account for the diverse abilities, tools and software of all Web users, including people with combinations of visual, auditory, physical, cognitive and neurological disabilities. These standards incorporate the WC3 Priority 1 Accessibility Guidelines and the US Access Board's guidelines for compliance with Section 508 of the US Rehabilitation Act.

4. Definitions

Adherence to specified STANDARDS is required unless an exemption is approved by the Communications Administrator. While not required, BEST PRACTICES represent generally accepted principles of good web design and are therefore strongly encouraged. OPTIONAL elements are left to the discretion of the department.

  1. Page width
    • STANDARD: The standard width of City web pages will be 760 pixels. Exception: as required by certain types of content (forms, tables, graphs, maps, etc.) the page width may be set to 100% of the browser window.
  2. Page alignment
    • STANDARD: All City web pages will be left justified in the browser window.
  3. Page background
    • STANDARD: All City web pages will use the same standard background provided by the Core Web Team.
  4. Color palette
    • STANDARD: The color ensemble developed for each City of Bloomington website will be selected from a central palette of colors. Elements of the overall site design that will use this color ensemble include the department header, all navigation menu graphical elements, column backgrounds, department logos, highlight boxes and all other graphical elements that contribute to the site's design presentation.
  5. City branding
    • STANDARD:
      • For consistency and ease of user navigation across the City website, a City of Bloomington top header and text-based bottom footer are required on all City web pages.
      • The header will include the City logo, the clear identification of the City of Bloomington and/or the City's website, navigation buttons/menus developed by the Core Web Team, and a Search toolbar.
      • The City footer will include text-based navigation links developed by the Core Web Team.
      • There will be only one City footer used throughout the City of Bloomington website.
      • The City footer will include links to the City home page, Contact information, Site map and the City Web Policy page.
      • These headers and footers must be called from server-side includes so that changes made by the Core Web Team are implemented immediately on all websites.
  6. Department/office branding
    • STANDARD:
      • The width, height, design, font and color of all banners will be consistent. The banners will include global navigation buttons.
      • All City department/office web pages will have a Contact Us section with contact information for that department or office.
  7. Navigation menu elements
    • STANDARD:
      • Each City website must include a consistent standard navigation menu or menus, required on all pages of each website.
      • The standard navigation menu on each City website may be a top menu, left menu, or both top menu and left menu.
      • On all standard navigation menus throughout the City of Bloomington website, the menus (including dropdown and fly-out menus) will have a consistent appearance, which will include the visual design of the menu buttons, text links, fonts and decorations. The optional dropdown and fly-out elements will be Javascript-driven from scripts created by the Core Web Team.
  8. Basic page layout
    • STANDARD: All City web pages should use a basic web page design layout that is consistent in placement and width sizing, and will include the following elements:
      • City header
      • City footer
      A combination of the following page elements should be used:
      • Top bar navigation menu and/or left column navigation menu
      • The center column will be used for main page content.
      • A right column section may be used, for highlights, contact info or miscellaneous content elements.
      • All left, center and right column widths will be a standard size across the entire City of Bloomington website. The standard size will be determined by the Core Web Team.
  9. Text presentation
    1. Size
      • STANDARD: The minimum font size for basic page body text will be or appear equal to Arial 10 points.
    2. Color
      • STANDARD: All page body text will be black.
    3. Style
      • STANDARD: All page body text will be presented in Arial font.
    4. Links
      • STANDARD: Links are controlled by the website’s cascading style sheet.
    5. Background (colors and images)
      • STANDARD: The center column background color for text will be white.
    6. NOTE ON TEXT PRESENTATION STANDARDS: It is recognized that it may be desirable to vary the appearance of text and background to elevate or highlight certain elements or sections of a page. In these cases the overriding principle is readability. For example, when non-standard colors are used, the contrast between text and background must be sufficient to allow the text to be easily read by a variety of users.
  10. Contact information
    • STANDARD: All City website pages should contain visible information, and/or links to information on how a citizen can contact the appropriate City department, agency and/or program for the page's specific topic.
  11. Counters
    • STANDARD: Counters are not allowed on City web pages. Web statistics are available by contacting Communications staff.
  12. Legal notices and copyright notice
    • STANDARD: The required City of Bloomington text footer will contain a link to the Web Policies and other appropriate legal notices and disclaimers.
  13. Metatags
    • STANDARD: At a minimum, the following metatags will be used for page identification and to promote search-engine functionality:
      • <title>Page Title</title>
         Specific title of the page, to be displayed when a page is found by a search.
    • BEST PRACTICE: The following metatags are optional but recommended by the Core Web Team:
      • <META http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      • <META name="description" content="Up to a paragraph of description">
         Specific description of the page, to be displayed when a page is found by a search. To avoid being truncated by search engines, the description should be brief -- no more than 200 characters.
      • <!DOCTYPE [Top Element] [Availability] “Registration]//[Organization]//[Type] [Label]//Language]” “[URL]”>
         The !DOCTYPE declaration is a top-level tag-like reference known as a Public Text Identifier. It should appear at the very beginning of an HTML/XHTML document in order to identify the content of the document as conforming (theoretically) to a particular HTML DTD specification. These two metatags are useful in identifying the ownership and creation/revision date of the document.
      • <META name="author" content="authorName">
        For the document creator.
      • <META name="publication_date" content="date">
        For the dates of the initial publication and any substantive revisions.
  14. Printer-friendly pages
    • BEST PRACTICE: As a best practice, City website pages should present alternate, printer-friendly versions of pages, particularly for pages such as online forms, using the same standard methodology, which will be provided by the Core Web Team.
  15. Browsers/versions supported
    • STANDARD: The City's standard is not to disable normal browser functionality, including but not limited to right-click menu usage and back button usage. Pages will be designed to function with:
      • On the Windows platform:
        • Internet Explorer versions 6.0 or higher.
        • Firefox, latest version.
      • On the Mac OS platform:
        • Safari, latest version.
        • Firefox, latest version.
        Impacts on other versions and browsers should be considered and minimized, and wherever possible, text alternatives to advance features should be employed.
  16. Advanced Web functionality
    • STANDARD: Covers web functionality such as RSS, podcast, video (embedded and posted), blogging, social networking and others that may emerge in the future. There is increasing demand to implement services with advanced web functionalities on www.ci.bloomington.mn.us and perhaps on external, hosted platforms.These kinds of services should be implemented consistently over the entirety of the City’s web presence. At this writing some policies and guidelines have been published and others are being developed.
    • Those planning to implement any services with advanced web tools should contact the Core Web Team for the latest City policies and guidelines governing their use.
  17. Advanced Web presentation technologies
    • STANDARD: Covers technologies such as DHTML, CSS, Javascript, Flash, AJAX and those that may emerge in the future. The use of advanced web presentation technologies is allowed under controlled and well-supported conditions, and as long as the use adheres to the following principles:
      • Expert development and troubleshooting support for the technologies used must be identified and available
      • Components must be tested thoroughly for cross-browser compatibility and usability (see above)
      • Alternative presentation of content must be provided as necessary to meet accessibility requirements
    • BEST PRACTICE: Before implementation contact the Core Web Team for the latest City guidelines for the use of these technologies.
  18. Graphics/images
    • STANDARD: The use of descriptive "alt=" parameters within <img> tags is required for all graphics. For any graphic that is a hyperlink, the alt tag should be a meaningful description of the destination site, with the phrase "Link to Web Page Name", where Web Page Name is the title of the destination web page for that link.
    • BEST PRACTICE: The file size of an image should be considerate of users accessing the City's website via dial-up connections. A single graphic limit of 30 kb is recommended. Photographs should be optimized for faster download speeds. Sites designed for specific users should take the needs and capabilities of these users in mind. The use of links or linked thumbnails, appropriately labeled (indicating file size) to larger graphics is a good alternative.
  19. Frames
    • STANDARD: Frames are not permitted except where specialized software requires them. In such cases, departments should contact the Core Web Team for consultation on options before proceeding or purchasing the solution in question. If no non-frame alternatives equal in cost and benefit are found, departments may request, and will be granted, an exemption from this standard. If frames are used, they should be designed in a way that allows branding of the site, the inclusion of standard City of Bloomington and departmental navigation, and if at all possible, an alternative non-frames method to browse the site which also includes those elements.
    • iframes may provide a viable alternative to standard frames. Care should be taken to ensure that the standard City and department web page experience (functionality, branding, navigation, etc) is preserved.
  20. Other accessibility standards
    • For design elements not specifically described in this document, such as data tables, flicker rate, image maps, form design, standards shall include Section 508 external link and/or W3C Accessibility Guidelines external link accessibility guidelines.
  21. Web application user interface
    • STANDARD: Web applications will conform to the Web Presentation and Accessibility Standards.
    1. Error messages
      • Web application error messages should not be cryptic. Provide users with information they can use to correct the situation and to hide information that hackers may use to identify weaknesses in City applications.
      • Handle errors appropriately based on the type of error.
      • Error messages resulting from data input by user or incorrect action performed by the user should be meaningful to the user and clearly communicate what action is needed from the user to correct the error.
      • Any other errors that are not resulted from user input such as system related errors should be handled using a generic user-friendly page, which should include a message stating system or page unavailable and provide alternative options or links.
      • Do not display system-generated messages to the user.
    2. City and Department Branding
    3. Online receipts
      • To give users a record of their online transaction, web applications should provide a receipt of the transaction, preferably with a unique identifier that will allow the user to initiate later follow-ups specific for that transaction.
    4. Post transaction user guidance
      • Web application interfaces should identify for users any follow-up steps necessary after completing the online part of the transaction. Let them know how and when they can expect service to be delivered. Give them a telephone number with which they can follow up if they have any questions.

5. Exemption process

This section outlines criteria and process for evaluating requests for exemptions to the City's Web Presentation Standards. All of the criteria would not need to be present for the exemption to be granted. Conversely, a request identifying one or a few of the stated criteria would not automatically be approved. Rather, each request should be viewed from the totality of the circumstances as guided by the criteria below. Further, requestors should feel free to suggest additional criteria they feel are appropriate to their particular exemption request.

Requests for exemptions should be initially submitted to the Communications Administrator in written form.

  1. Requests for exemptions from these standards should be made in writing and signed by the department director.
  2. Requests for exemptions shall state the circumstances that compel an exemption.
  3. Among the criteria to be considered for exemptions are:
    • Business requirements.
    • Pre-existing exemptions and/or past practices.
    • Technical requirements.
    • Legal requirements or mandates.
    • Limited target audience.
  4. Where appropriate, requests for exemptions shall explain how the exempted website will remain a clearly recognizable and functional part of the greater City of Bloomington website. Issues such as branding and cross-linking (navigation) should be addressed.
  5. Exemptions should be submitted to the City's Core Web Team(CWT) who will make the preliminary decision of whether an exemption will be granted. If the CWT determines that the request should not be granted, the CWT shall give the applying department options as to how they might achieve their purpose without the exemption.
  6. Appeals of the preliminary decision may be made in writing to the Communications Administrator. The City Manager is the final step in the appellate process.

6. Changes

Departments may suggest permanent changes to the City's Web Presentation Standards. Proposed changes should be presented in writing as amendments to this document, and submitted to the Core Web Team (CWT). Appeals of the preliminary decision by the CWT may be made in writing directly to the Communications Administrator. The City Manageris the final step in the appellate process.

 

For more information, contact:

Janine Hill, Communications Administrator
PH: 952-563-8819; TTY: 952-563-8740, FAX: 952-563-8715
E-mail: jhill@ci.bloomington.mn.us

Social Media Policies HOME | Social Media Use Policy 

Data Practices Act | Employee Use of Social Media | Facebook | HIPPA | Internet–Based Collaboration Tools | Online Privacy and Security | Photos | Single Domain Name | Twitter | Video | Web Presentation and Accessibility

 

Quality Services - Affordable Price

Home | Contact us | Site map | Search
Web and accessibility policies | Website feedback