Governance of standards

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

These include:

• World Wide Web Consortium
• Web Content Accessibility Guidelines (WCAG) 
• Web Accessibility in Mind
• Plain Writing Act
• Section 508 of the Rehabilitation Act of 1973
• Americans with Disabilities Act
• Minnesota Human Rights Act
• Minnesota Statutes Section 363A.42 Public Records; Accessibility

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

Maintenance of standards

The digital experience staff manages updates and changes.

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).
• You must attend a meeting of the User Experience Community of Practice to make your case for the change. This creates a democratic and transparent process for input and decision-making.
• The digital experience staff makes the final decision and publishes approved changes.

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:

• How to meet WCAG (quick reference)
• Americans with Disabilities Act technical help and guidance
• Section508.gov
• Minnesota Human Rights Act
• Minnesota Statutes Section 363A.42 Public Records; Accessibility

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

Effective icons help users scan and identify content. They help users understand the content when text alone may not be enough.

Guidelines

• Use the branding guidelines.
• It's acceptable to add icons from third-party libraries.
• Use icons to support the content.
• Use simple, recognizable icons.
• Use friendly, rounded shapes with large amounts of solid space for color.
• Use just one brand color on any given page to avoid the 'rainbow' effect.

Online surveys and customer feedback loops

Effective online surveys and feedback loops support good customer service. They allow meaningful input about a person's online experience with the county, 

Guidelines

• Use plain language for text, link labels and screens including clear instructions.
• Follow accessibility guidelines.
• Use Hennepin County branding.
• Provide a clear success statement (thank you, next steps, etc.).
• Data storage should follow county data security practices and policies.

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

• 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

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.

Limiting non-county content

Don't use content people can find elsewhere online. Focus on content people exclusively rely on the county for. 

Limit non-county content and links to those that:

• Support a user need or business goal
• Relate to other government organizations, trusted partners or contracted providers

Readability tools

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.

• Write clear, concise headings and use keywords toward the front.
• Use HTML heading elements. Avoid styling text to make it look like headings. Use CSS for styling.
• Never use <h1> when creating or editing content. The content management system creates it 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 read and understand text. Special formatting increases clarity.

Use these sparingly, but where they can call out critical words:

• Bold to clarify key information, for example: "Walk-ins are no longer available. You must make an appointment."
• Italics to describe a name, title or label, for example: "When you arrive, push the Call button outside the main door."

Do not use these text formats:

• Underline
• Highlight
• Color other than the standard black text color
• All caps other than acronyms

Numbers

For digital spaces, use numerals, unless at the beginning of a sentence:

• 5,000 (not five thousand)
• 3 or 4 (not three or four)

Translation

People with limited English proficiency need vital information in their own language. This allows them to use essential county programs and services.

For translated content to be published on a county website or application:

• A person skilled in translation must be the person who either translates the content or reviews it for accuracy. At minimum this person should be proficient in both languages.
• The source material should be written at no higher than an 8th grade reading level or the reading level required by your service area.
• All versions of digital content should be updated at the same time: the English and the translated version.
• Do not use Google translate or any automated translation service. Automation can mistranslate information. That can have a serious impact on someone’s understanding and use of county programs and services.

Entire websites or applications do not have to be translated.

Use the county's translation style guide to write translatable communication.

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

• Effective short URLs make it easier to read a link, by replacing some of the URL path:
  
  Before: hennepin.us/your-government/facilities/service-center-info
  
  After: hennepin.us/service-centers
  
  
• They also help promote programs, services and initiatives in print and digital channels.

Guidelines:

• Use no more than 3 words.
• Use simple words.
• Avoid abbreviations unless your audience understands them.

Requirements:

• Create short URLs that reflect the content of the page.
• Use hyphens to separate multiple words.
• Use lowercase letters.
• Avoid special characters.
• Avoid duplicating other short URLs.
• Use just one short URL per page.
• Use the website’s domain (for example, do not use a URL shortening service).

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:

• PDF techniques
• Word techniques

Tables

Effective tables help people compare items. Because they have accessibility issues we should use them sparingly.

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:

• Avoid using it for layout if possible.
• Specify presentation as the role if you must use a table for layout.
• Avoid complex tables whenever possible.
• Follow accessibility standards. For example, tables must have column or row headers.

Get help making a table accessible.

Usability testing

Testing with real users reveals how people interact with websites and applications. It allows for changes before going live and for continuous improvement afterwards.

Guidelines:

• It’s best to test early in the design and development process so you can address usability issues with navigation, text, calls-to-action and images before finalizing code.
• Testing with 5–8 people typically reveals most usability issues. Testing with one is better than testing with none.
• We strongly encourage including mobile in your testing.
• Schedule a separate session for each participant.
• It’s best for stakeholders to observe and debrief all usability sessions.
• Avoid leading questions in the usability script.
• When asking participants to rank an item, a scale of 1–6 is most effective.
• Offering incentives creates goodwill (like gift cards).
• It’s best to recruit users with a range of disabilities affecting sight, movement, hearing, reading, and learning.
• We also recommend diverse participants (age, gender, race or ethnicity, range in how familiar they are with the topic, range in technology use).

Requirements:

• Usability testing is done separately from quality assurance testing or user acceptance testing.
• Participants are representative end users of the website and application.
• Their participation in no way affects their use of county programs or services.
• Keep participant names and other identifying details anonymous in all usability reports and recommendations.
• Only record a usability session with permission from the participant. Delete recordings within 30 days.

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, complete a request form (must have network access).

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.

Animation and interactivity

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.

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:

• Flashing content is small enough.
• Flashes are low contrast.
• Flashes stay within general flash thresholds.

See how to keep the flash area small enough.

For parallax effects, use the minimum in:

• Total effects
• Amount within each effect
• Size of affected area

Provide a way to pause, stop or hide videos or animations that start playing right away and last 5 seconds or more.

Browser, device and assistive technology testing

People should be able to interact with us online regardless of the software or hardware they use. That includes modern browsers, device types and assistive technology.

We must test new websites and applications for browser or device issues. We must also test for any accessibility issues. We must test before launch.

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.

All our websites and applications must follow our brand standards, applied to digital content.

Our pattern and component library has our brand standards.

Official web fonts:

• Myriad Pro
• Segoe UI
• Arial

In some cases collaborative websites must follow our brand standards. This applies to sites where we serve as the fiscal or administrative agent. Other collaborative sites must display our logo. Logo placement should follow our brand standards.

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 use several methods to reduce problems for the user:

• Save carousel space for priority content.
• Let people advance the slides themselves. Avoid auto-advancing the slides.
• Show clear controls for how to advance the slides. Ensure the controls are accessible with a keyboard.
• Make sure assistive technology can perceive when the slides advance.
• Use clear descriptive text for the slide headline.
• Advancing images must not move too fast or “flash" (see photo section).

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">

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.

• We should use trustworthy CDNs for common code libraries. These would include 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 loads using 'CORS.' When not loaded from the 'same-origin' SRI checking now requires this.

Content slide outs

Effective content slide outs let users find and read additional content while staying on the page. That makes their tasks simpler and less taxing.

Slide outs are like drawers. We use them to house content on the same page rather than creating a new page. Unlike drawers that expand vertically, slide outs overlay content on top of the page.

When using slide outs create clear headings for each topic area. This lets people know what to expect when clicking.

Some county websites may not have the option to add content slide outs due to technical limits.

Our pattern and component library will eventually provide content slide out specifications for developers.

Doctype

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

The doctype must meet the specifications of the Worldwide Web Consortium.

Example: <!DOCTYPE html>

Domains and subdomains

Consistent domain names support a unified digital experience. They help people know that a 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 (for example, newapplication.hennepin.us).
• Use subdomains where a vendor is the host (for example, www.newsite.hennepin.us). Exceptions are 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.

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.

We 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.

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 of the county favicon.

Example: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Homepages and footers

Good homepages 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 clear navigation to other sections, pages or screens

Footers must display their content in a consistent way across all pages.

iframes

People should be able to access and understand embedded items on a page. Iframes must be used to embed items (newsletter sign-up widget, dashboards, maps) on a page. The iframe must be accessible so people using assistive technology can interact with the embedded items.

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.
• Headings should fit within the same hierarchy as the parent page.
• We should hide hidden certain iframes from assistive technologies. Those include hidden iframes and those without content. Use aria-hidden="true".

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. Search engines have a stated process for submitting and getting validation for sitemaps. We should follow their process.

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">

Modal dialogs

Effective modal dialogs let users take an action that moves them forward in their task.

Modal dialogs overlay content on top of the page. They require the user to take an action. They are used to direct a user’s attention to important information.

When creating modal dialogs, avoid overwhelming the user with too many tasks per modal. For example, a modal could ask a user to enter all their contact details. But you would not reveal more tasks within that modal when the user completes that task. Instead you would create a new modal with new tasks.

Our pattern and component library has modal dialog specifications for developers.

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

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.

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

Requirements:

• Show the words Hennepin County at the top.
• Show copyright and logo from the footer at the bottom.
• Show the page URL.
• Ensure breakpoints do not interfere with images or text.
• Allow all text content from the page to print (include collapsed and tabbed content).

Examples:

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

Progressive disclosure

Progressive disclosure lets people access content a little at a time. It lets them focus only on the content they need.

Place lower on the page or on a secondary screen advanced features or ones we rarely use.

Secure URLs protect 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 or TLS certificate. If they have a valid SSL or TLS certificate, each page must have a redirect to force the https protocol.

Secure URL

Secure URLs protect 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 or TLS certificate. If they have a valid SSL or TLS certificate, each page must have a redirect to force the https protocol.

Session timeouts

Limiting the time a user’s session is available helps protect data.

We don't recommend any particular number of minutes for session timeouts but keep in mind:

• A person’s state of mind while using the application: People under more stress may need more time.
• Complexity of tasks: People who must check email or other documents for an access code or any other information may need more time.
• Physical setting: Public computers have different security needs than private or employee computers. Set different time limits based on who accesses the application and from where.
• WCAG guidelines for giving users enough time to read and use content
• Session expiration recommendations (Open Web Application Security Project)
• Reauthentication recommendations (section 4.3.3) (National Institute of Standards and Technology Digital Identity Guidelines)

For critical or time-sensitive sessions consider giving the user a warning message before closing the session.

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 update our list of supported browsers on a regular basis. View our supported browsers.
• Websites and applications that don’t support these browsers must include a disclaimer. The disclaimer must appear on the homepage.

Supported software and file types

People should be able to visit 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, document uploads should only allow modern image filetypes or PDFs. We should also scan those files for viruses in transit to final storage.

Tables

Useful tables help people compare items. But they have accessibility issues.

Only use tables for multidimensional content, not layout.

Table requirements:

• Specify the presentation role.
• Follow accessibility standards for table markup.

Get help making a table accessible.

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.
• We can only style text to look like a link if it functions like a link. Styling uses the distinct bright blue color and underlining text when mousing over.
• Internal and external links should open in a new tab.

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

Web forms

Usable web forms let people enter and submit information with ease. They create confidence in our ability to receive and manage information well.

Web forms must follow our writing guide, brand standards and the rest of the web standards.

They should have the same design as bottom-level pages.

Forms should be as concise as possible. This includes using conditional formatting where possible.

Form title and headings should follow the sequence of Hennepin.us (H1, H2, etc.).

Avoid a “clear” button.

Form fields:

• Avoid placeholder text.
• Where a visual label is not possible, use an Aria label.
• Where possible and practical use (required) instead of an asterisk for required fields.
• Where applicable provide instructions and contact information.
• Make formatting inside the form field automatic.
• Make fields wide and long enough to accommodate responses.

Button text:

• Use a word that describes the actual user action, for example, Apply, Register, Search, Log in, Order, Submit, Create account, etc.

Success pages:

• Make the message clear and succinct (for example, “We have received your submission.").
• Where relevant include next steps (for example, “We will call you in 2 to 3 business days.”).
• Where relevant include a contact.

Error messages:

• Display the message as soon as possible after the error happens.
• Make clear which field the error applies to.
• Make the error message concise and meaningful.
• Remove the error message once the form user corrects the error.
• Styling of the error message needs to be different from normal fields and help text.

Developer guidelines:

• Divide long forms into multiple pages with shorter steps.
• Avoid adding a time-out.
• Put help text under the field label.
• Avoid using tables for layout of form fields.
• Radio buttons and date pickers should be useable by screen readers.
• Avoid using color as the only characteristic that distinguishes an item.

For help creating a form, contact the Web Forms team (must have network access).