Information location

This information is available in the Hennepin County Design System

Web standards

These standards define the required or acceptable quality of Hennepin County  websites and applications.

For questions, fill out a request form (must have network access).

Open all

Governance and maintenance

Governance of standards

We enforce standards based on federal law, leading standards organizations and county policies.

These include:

We also rely on expert research and input of our user experience staff.

Maintenance of standards

The User Experience Community of Practice reviews and gives input to the standards.

Staff can ask for changes or exceptions to the standards:

Complete a request form (must have network access). Include the topic of the change in the request.
The Web Communications staff assists with getting the item on the agenda for an upcoming User Experience Community of Practice.
You must attend a User Experience Community of Practice meeting to make your case for the change.

The Office Digital Experience staff oversees the review process and makes final decisions. This creates a democratic and transparent process for input and decision making.

The Web Communications staff publishes approved changes.

Digital accessibility

Everyone should be able to easily interact with the county online. This includes people with visual, hearing, motor, and cognitive disabilities. These disabilities could be permanent, temporary or situational.

Requirements for all our websites, applications, vendor technology, and third-party tools:

1. Follow version 2.1 of the Web Content Accessibility Guidelines (WCAG), by meeting success criteria for:

Level A and AA
Level AAA where possible and relevant

2. Be validated for accessibility with in-person testing and tools like WAVE

To understand and follow web accessibility laws and best practices we use:

Images, video, and iconography

Photos and images

Useful photos and images help people understand our programs and services. Photos should be professional and useful, in line with our brand standards.

Guidelines

Photos should reflect county services and programs in an authentic way. We should avoid stock photos except where there’s a compelling reason to use them. This can include the need to use a stock photo to protect people’s privacy in the area of sensitive topics.

Photos should support the communication goals of the program or service. Online, photos that carry information are more effective than decorative photos.

Photos should be timely and relevant to our current programs and services. We should remove photos that no longer reflect current staff, programs or buildings.

For help with photos complete a request form (must have network access).

Requirements

Provide descriptive, clear alternative text (alt text).
Use an empty alt tag (alt="") for decorative images.
Choose photos that work well for any screen size.
Size and compress photos for online use. For help complete a request form (must have network access).
Avoid using images of text, use HTML/CSS instead.
Moving images/animations must have controls to stop and start.
Do not use clip art.

Videos

Professional, informative videos help people understand our programs and services. They also help tell stories of our impact on people’s lives.

Embedded videos must use responsive and accessible code. We must host the videos that we produce on our YouTube account.

Videos must meet accessibility guidelines:

Title attribute on the iframe element
Description within the iframe element that includes a link to the video
We must provide controls for audio that automatically plays longer than 3 seconds. Controls should let people pause, stop and control the volume.
Prerecorded video without sound must have an audio description or text transcript available.
Prerecorded video with audio must include synchronized captions. They must also include an audio description or a text transcript.
Prerecorded audio only must have a text transcript available.
Media player functions must be available to keyboard users.
Media player controls must give screen reader users correct names, roles and values.

Iconography

Coming soon

Search, navigation and copyright

Search engine optimization (SEO)

Good search practices make it easy for people to find our online content. Useful metadata and keywords support good search.

We should use keywords in the page title, URL and headings. But avoid this where it would break the rules of grammar.

Required metadata

Title:

Stay within a character limit of 50.
Leave off Hennepin County unless it is critical.

Meta description:

Stay within a character limit of 156.
Use a concise description of the page content.

Optional keyword metadata

Keywords are used by internal search only and don’t affect search engine rankings like Google, Bing and Yahoo.

Use words or phrases not found on the page including misspellings and slang.
Use up to six keywords separated by commas.
If no helpful keywords exist, you can ignore the keyword field in Sitecore.

You can ignore these Sitecore fields:

Audience
Service area
Content type
Department
Page owner email

Navigation

Routing pages

Routing pages are not landing pages. They should get users to details pages with as few clicks as possible.

They should:

Only use the page title as the link label
Avoid any text other than the link label
Display links for all non-hidden details pages
Use only images approved by a CES designer

Modules available for use on routing pages:

Horizontal sub-navigation (5 or fewer categories)
Vertical sub-navigation (more than 5 categories)
Medium content text box
Small content image box
Small content link box
Three-column content box

It’s okay to link a details page in more than one routing page section. But do this only if you can show that users look in more than one place for that content.

Copyright

Clear copyright ensures we control our creative material. That supports our brand and protects against copyright infringement.

We must have full legal rights to all content before we publish it. Content includes text, photos, video, music, software source code, and other creative material.

Full legal rights include all waivers, permissions and copyrights.

Social media

Web links to our social media accounts connect people to those channels. They make our social media more available.

Social media links must go only to our official county social media accounts.

Text, links, documents, and tables

Text

It is harder to read on screens than on paper. We should make it as easy as possible to read our content online.

Requirements:

Follow our writing guide.
Use correct grammar and spelling.
Aim for a reading level no higher than 8th grade.
Choose information specific to the county over information people can get elsewhere.

You can test how readable your text is. Available tools include Hemingway or Word’s Flesch-Kincaid readability tool.

Quality assurance review

Reviewing content in preview catches errors before they become public. It also ensures the quality of the content.

We should put all content in stage and review it before publishing.

Duplicate content

Having one place for each piece of content reduces the chance of forgetting to update it in a second spot. This benefits us and the people who rely on our content.

Each county website or application should have unique content. They should not duplicate content from our other websites or applications.

For writing help, complete a request form (must have network access).

Headings for online text

Good headings help people scan for the information they need. They also allow people using screen readers to understand the order of information.

Headings should be clear, concise and use keywords toward the front.

Use appropriate HTML heading elements instead of just styling text to look like headings. (Use CSS for styling.)

You will never use <h1> when creating or editing content. It is created automatically with the page title.

Other headings must follow a sequential order and not skip any levels:

Use the <h2> tag as the first heading, followed by <h3> and <h4> as needed
Do not use any other heading sizes since too many sub-headings can make text harder to scan.

Formatting

Consistent formatting helps people scan and read. It also helps avoid reading distractions.

All county websites and applications must follow our web formatting standards.

Links

Useful links help people decide whether to click and visit a page or download a file. They also help people navigate among pages.

Link text must describe destination content.

Link text should avoid vague and unclear labels like “Read more” and “click here.” If those terms are unavoidable, add other descriptive text for context.

Do not use the same link text for links that lead to different destinations.

On rare occasions we can add hidden text to a link. Only assistive technology can pick up on hidden text. The hidden text would help people with visual impairments. We would only do this for links that need a description beyond their visual meaning.

Standard (long) URLs

Useful URLs let people identify the page, screen or file before they click on it. A consistent URL convention also supports the maintenance of our websites and applications.

All URLs for pages, screens and files must:

Display in lowercase
Use a hyphen to separate words (e.g., /human-services/child-support)
Contain no spaces (“%20”) or other special characters
Leave off file extensions with no value (for example, use “path/to/file” instead of “path/to/file.aspx”)

Short URLs

Useful short URLs make it easier for people to see where a link will take them. They also help us promote programs, services and initiatives in print.

Short URLs should be easy to read. One-word short URLs are best. When using more than one word, separate them with a hyphen.

Avoid using more than one short URL per page.

Short URLs must:

Use the website’s domain
Use lowercase letters
Avoid special characters
Reflect the content of the page
Avoid duplicating other short URLs

Example: www.hennepin.us/bike

Example: www.hennepin.us/rent-help

PDFs, Word documents and other downloadable files

Downloadable files are for printable content. But since most people don't print them, they should be useful as online material.

Downloadable files should meet accessibility requirements:

Clear title
Headings in sequential order
Key content in body text, not graphics
Tables for complex data, not layout
Follow county writing standards
Avoid Excel and PowerPoint files unless converted to PDF and follow accessibility standards

Word and PDF have accessibility checkers.

For help making documents accessible:

Tables

Effective tables help people compare items. But they have accessibility issues. When deciding whether to use a table, ask if the content can display as a list with headings outside of a table. If so, use a list rather than a table.

If you use a table make sure:

If at all possible, avoid using tables for layout purposes.
- If you must use a table for layout purposes, specify presentation as the role.
Avoid complex tables whenever possible.
Table markup follows accessibility standards (e.g., tables must contain column or row headers)

For help making a table accessible, visit https://webaim.org/techniques/tables/.

When deciding whether to use a table, ask if the content can display as a list with headings outside of a table. If so, use a list rather than a table.

Anchor tags

Effective anchor tags help people navigate long scrolling content. But we should avoid using them as a workaround for content that is longer than needed.

For help with anchor tags, fill out a request form (must have network access).

Development and design

Doctype

A valid doctype tells the browser what type of HTML version our pages use. That tells the browser how to correctly render our pages.

The doctype must meet specifications for the version of HTML, found at the Worldwide Web Consortium.

Example: <!DOCTYPE html>

Secure URLs

Secure URLs protects the connection between a user’s browser and the county’s web server. This protects the user’s data when interacting with a county website or application.

All websites and applications should have a valid ssl/tls certificate. If they have a valid ssl/tls certificate, each page must have a redirect to force the https protocol.

Character encodings

Character encodings allow our websites and applications to render characters. This includes text, punctuation marks, and symbols.

These must follow the requirements of the Worldwide Web Consortium.

Example: <meta charset="utf-8">

Language declaration

This attribute tells screen readers which language the page or page element is in. It also helps search engines and browsers identify the language of the content on the page.

We must place a language declaration on the HTML tag element. We also must place it on any other page element whose language differs from the rest of the page.

Example: <html lang="en">

Error pages

Meaningful error pages help people recover from errors. They let people find out what to do if they can’t find what they need.

All our websites and applications must follow the HTTP specification of the Worldwide Web Consortium.

Error pages must include:

A plain language description of the error
Website navigation or a search box to help people find what they need
Information about how people can ask for help
A design that matches the domain. For example, do not use the Hennepin.us error page for other county websites.

Indexing for search

Search indexing allows people to find our websites and applications with search engines. This creates a key doorway to interact with the county online.

Indexing:

Index all public content for search engines like Google and Bing.
Do not index non-public content.
Where possible include all indexable content in an XML sitemap. We should use search engines' stated process to submit and get validation for sitemaps.

Text links

Link styles let people understand the state of the links they interact with. This helps links be more clear and useful.

Use CSS to differentiate the different states of a link. This includes visited and unvisited links, and the hover, focus, and active states.

Favicon (shortcut icon)

Favicons label our websites and applications in browser tabs and bookmarks. They let people identify our websites and applications before visiting.

All our websites and applications must use a county favicon. It can either be the standard version or a customized version in line with our brand standards.
Download the current version from https://www.hennepin.us/favicon.ico.
Example: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Account creation and log-in screens

People should have a consistent experience on our websites and applications. This includes accessing and using gated content by signing in.

All account creation and sign-in interfaces must follow our web standards.

Content delivery network for common libraries

A content delivery network (CDN) lets us improve the performance of our applications. We rely on a commonly-used CDN.

Our websites and applications should use trustworthy CDNs for common code libraries like jQuery. These CDNs offer speed and reliability.
CDN content must use the integrity attribute so the browser can check the file source. This makes sure the code doesn't load if the file source has been manipulated.
CDN content must use the cross origin attribute when a request is loaded using 'CORS.' This is now a requirement of SRI checking when not loaded from the 'same-origin.’

Progressive disclosure

Progressive disclosure lets people gradually access content. It lets them focus only on the content they need.

Place advanced or rarely used features lower on the page or on a secondary screen.

Supported software and file types

People should be able to interact with us online using modern and widely-available software. They should also be able to rely on secure networks.

We must not publish any content that requires unsupported or outdated systems. Those include Flash or plug-ins that only work with unsupported browsers.
We must not allow any insecure or unsupported filetypes like scripts or zip files.
We must limit or filter files we receive or distribute to what is necessary and secured. For example, an application asking for document uploads should only allow modern image or photo filetypes or PDFs. We should also scan those files for viruses in transit to final storage.

Plugins

Plugins create roadblocks to accessing content. They also create security risks.

We don’t allow plugins like Adobe Flash and Microsoft Silverlight.

We only allow open and standards-based technology like HTML5 and JavaScript.

Print style sheets (h2)

People may need help remembering content after their online visit. Or they may have cognitive issues making it harder for them to read online. So a printable version of web pages should be available.

Web pages must use CSS style declarations to optimize page content for printing.

Examples:

@media print { …}
<link media="print" rel="stylesheet" type="text/css" href="mystyle.css">

iframes

People should be able to access and understand all elements of a page including embedded items like iframes. They must meet certain standards so people who use assistive technology can interact with the iframe's content.

iframes must follow these standards:

iframes that convey content to users must have a non-empty title attribute.
The iframe title must be accurate and descriptive.
iframes must have a unique title in the context of the page.
The source page of an iframe should have a valid, meaningful <title>.
The source page of an iframe should make use of semantic elements and landmarks.
If possible we should design the heading hierarchy to fit within the heading hierarchy of the parent document.
We should hide hidden iframes or those that do not convey content, from assistive technologies. Use aria-hidden="true".

Animation and interactivity (h2)

Moving elements on a page should support getting information or doing a task. They should also not make it harder for people with motion sensitivity.

Requirements:

Animation or interactivity must enhance a person's ability to access and understand content.
A page must not contain content that flashes more than 3 times per second. Exceptions are for flashing content that is small enough, flashes are low contrast and stay within general flash thresholds. For information on keeping the flash area small enough see https://www.w3.org/TR/WCAG20-TECHS/G176.
Parallax effects: use minimum in total effects, amount within each effect, and size of area affected.
For background videos or animations that start playing automatically and last 5 seconds or more, provide a method to pause, stop, or hide.

Browser, device and assistive technology testing

People should be able to interact with us online regardless of browser, device or assistive technology. Testing website or application performance before launch catches errors specific to these items.

We must test new websites and applications on all devices and supported browsers before launch. We must also test for any accessibility issues.

Brand

A consistent look and feel supports the credibility and integrity of our information. It also helps people tell the difference between our websites and other websites.

Requirements:

All our websites and applications must follow our brand standards as applied to digital content. Brand standards
When ready, our pattern and component library will provide new standards.

Collaborative websites with partners:

Where we are the fiscal or administrative agent, these must follow our brand standards.
Otherwise they must display our logo. Logo placements should follow our brand standards.

Official web fonts:

Myriad Pro
Segoe UI
Arial

Supported browsers

We must make sure we support the newest and most popular browsers that most people use. This ensures people can access our websites and applications.

Requirements:

We must regularly update our list of supported browsers. Supported browsers
Websites and applications that don’t support these browsers must include a disclaimer on their home page.

User privacy policy

A published policy lets web visitors know what data we collect from them. It also creates confidence in our promise not to exploit data for commercial use.

Web visitors must be able to access our user privacy policy.

A user privacy policy must:

Link from the footer of every website and application
Describe the nature and purpose of cookies set by the website or application
Tell what features or functions people will not have access to if they do not accept cookies

Home pages and footers

Good home pages make it clear that someone is on a county website or application. They also help people decide which main section to visit and let them search the site.

Home pages must:

Display the county logo, the words Hennepin County, and the name of the website or application
Show clearly visible navigation to other sections, pages or screens

Footers must:

Display consistently across all pages

Carousels (rotating promotional slides on home pages)

Carousels have usability and accessibility problems. People have also learned to ignore them as unhelpful promotional content. So it’s best to avoid them.

But if you use a carousel, you can reduce problems for the user:

Save carousel space for priority content
Let people advance the slides themselves (avoid automatically advancing them)
Show clear controls for how to advance the slides
Use clear descriptive text for the slide headline

Domains and subdomains

Consistent domain names support a unified digital experience. It helps people know a county website or application belongs to the county.

Requirements:

Use our primary domain name hennepin.us. or use hennepin in the domain name.
Put subdomain in lowercase without spaces or hyphens.
Use specific names for subdomains that come before Hennepin.us (e.g., someapplication.hennepin.us).
For externally hosted websites or applications, use subdomains (www.newsite.hennepin.us). Exceptions are for when we must use a vendor domain (www.hennepin.vendorname.com).
Use parallel names for all environments, For example, dev.newsite.us, stg.newsite.us, newsite.us

Open all