8.

0 STYLE GUIDE
v 1.0 NOVEMBER 2007

U.S. Department of Veterans Affairs My HealtheVet Style Guide Document Status Item Document Title File Name Disposition Author(s) Document Description Description My HealtheVet Style Guide MHV_StyleGuide_v1.doc Initial Version This document contains the style guide information for the My HealtheVet Portal Program.

Document Revision History Version 0.1 1.0 1.1 : Date 12/21/07 02/07/08 02/07/2013 Changed By Description Initial draft for review. Updated Version to 1.0 no changes to content Redacted for FOIA

March 29, 2013

U.S. Department of Veterans Affairs My HealtheVet Style Guide

Introduction ....................................................................................................................................... 1 1.1 Purpose .............................................................................................................................................. 1 1.2 Audience ............................................................................................................................................. 1 1.2.1 Primary Audience ................................................................................................................... 1

General Style Guidelines ................................................................................................................. 2 2.1 Federal Web Standards ...................................................................................................................... 2 2.1.1 Section 508 Accessibility ........................................................................................................ 2 2.1.2 Show U.S. Sponsorship .......................................................................................................... 3 2.1.3 Agency Name ......................................................................................................................... 3 2.1.4 Required and Important Links................................................................................................. 3 2.1.5 Other Required Links .............................................................................................................. 3 2.2 VA Directive 6102 ............................................................................................................................... 4 2.3 Logos and Official Imagery ................................................................................................................. 5 2.3.1 VA Seal and Signature ........................................................................................................... 5 2.3.2 My HealtheVet Logo ............................................................................................................... 5 2.4 Typography and Fonts ........................................................................................................................ 6 2.4.1 Font Families .......................................................................................................................... 6 2.4.2 Font Sizes ............................................................................................................................... 6 2.4.3 Additional Fonts as Design ..................................................................................................... 7 2.4.4 Styles Applied to Fonts ........................................................................................................... 7 2.5 Color Palette ....................................................................................................................................... 8 2.6 Code Formatting (HTML) .................................................................................................................... 9 2.6.1 HTML Code Specifications ..................................................................................................... 9 2.6.2 CSS Template Specifications ................................................................................................. 9 2.7 Metadata Standards ......................................................................................................................... 10

Grid Areas ....................................................................................................................................... 11 3.1 Header .............................................................................................................................................. 11 3.1.1 General Specifications .......................................................................................................... 11 3.1.2 The Masthead ....................................................................................................................... 11 3.1.3 Top Navigation (Level 1)....................................................................................................... 12 3.1.4 Top Navigation (Level 2)....................................................................................................... 12 3.1.5 Seasonal Banner .................................................................................................................. 13 3.1.6 Utility Navigation ................................................................................................................... 13 3.2 Left Column ...................................................................................................................................... 14 3.3 Main Column .................................................................................................................................... 14 3.4 Right Column .................................................................................................................................... 15 3.5 Footer ............................................................................................................................................... 16

Page Elements ................................................................................................................................ 17 4.1 HTML Elements ................................................................................................................................ 17 4.1.1 Headers/Headlines ............................................................................................................... 17 4.1.2 Anchors and Hyperlinks ........................................................................................................ 18 4.1.3 Data Tables .......................................................................................................................... 18 4.1.4 Form Elements ..................................................................................................................... 19

Graphics & Multimedia................................................................................................................... 20

March 29, 2013

ii

U.S. Department of Veterans Affairs My HealtheVet Style Guide 5.1 Images & Photographs ..................................................................................................................... 20 5.1.1 Acceptable Formats .............................................................................................................. 20 5.1.2 File Size Guidelines .............................................................................................................. 20 5.1.3 Other Considerations ............................................................................................................ 20 5.2 Flash Animation ................................................................................................................................ 20 5.2.1 General Guidelines ............................................................................................................... 20 5.3 Video & Audio ................................................................................................................................... 21 5.3.1 General Guidelines ............................................................................................................... 21 5.4 Linked Document Standards ............................................................................................................ 21 5.4.1 Acceptable Formats .............................................................................................................. 21 A1. Additional Resources..................................................................................................................... 22 A1.1. Glossary .................................................................................................................................... 22 A1.1.1. Acronynms ....................................................................................................................... 22 A1.1.2. Common Terms ................................................................................................................ 23 A1.2. Reference Materials .................................................................................................................. 24 A1.2.1. Section 508 Accessibility Resources ................................................................................ 24 A1.2.2. Federal Web Standards Resources ................................................................................. 24 A1.2.3. Web Design/Development Standards and Best Practices ............................................... 24 A2. Sample Page Types........................................................................................................................ 25 Airlock Page .............................................................................................................................. 25 Home Page ............................................................................................................................... 25 Gateway .................................................................................................................................... 26 Unauthenticated Landing Page ................................................................................................. 26 Two-Column Article/Landing Page ........................................................................................... 27 Three-Column Article/Landing Page ......................................................................................... 27 Two-Column Portlet .................................................................................................................. 28 Three-Column Portlet ................................................................................................................ 28 Search Results .......................................................................................................................... 29 Help Content ......................................................................................................................... 29 A2.1. A2.2. A2.3. A2.4. A2.5. A2.6. A2.7. A2.8. A2.9. A2.10.

March 29, 2013

iii

U.S. Department of Veterans Affairs My HealtheVet Style Guide

1
1.1

Introduction
Purpose

This document is intended to be a transitional style guide that helps define the acceptable and proper usage of various presentational elements for the My HealtheVet (MHV) Portal. This document is more technical in nature, and is not intended to cover topics such as writing style, voice or reading levels. It is not intended to be a Manual of Style, but rather a set of guideline and standards for the presentation of content within the MHV Portal. It is also intended to provide a framework for future Style Guide revisions that will revolve around design updates and changes. Because of the transitional nature of both this document and the current MHV portal as it appears in production as of December 2007, many details of specific HTML code snippets and a fully documented and unified style-sheet set has not been included in this document. Additionally, current efforts to standardize and update the presentation layer of the portal will require new versions of this guide to be created.

1.2
1.2.1

Audience
Primary Audience

The primary audience for this document includes all User Experience and Content Team members, MHV Development staff and, to a lesser extent, any clinical content owners and stakeholders.

March 29, 2013

U.S. Department of Veterans Affairs My HealtheVet Style Guide

2
2.1
2.1.1

General Style Guidelines

Federal Web Standards
Section 508 Accessibility

All pages within the My HealtheVet (MHV) domain shall comply with all Federal Accessibility regulations Currently falling under Section 508 of the U.S. Rehabilitation Act (29 U.S.C. 794d). Full details on requirements for compliance with Section 508 can be found at www.section508.gov. Below is a list of the most common elements necessary for compliance with Section 508 Accessibility Standards:
n

A text equivalent for every non-text element shall be provided (e.g. via ALT, LONGDESC, or in-element content) 1194.22 (a) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. 1194.22 (b) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. 1194.22 (c) Documents shall be organized so they are readable without requiring an associated style sheet. 1194.22 (d) Redundant text links shall be provided for each active region of a server-side image map. 1194.22 (e) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. 1194.22 (f) Row and column headers shall be identified for data tables. 1194.22 (g) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. 1194.22 (h) Frames shall be titled with text that facilitates frame identification and navigation. 1194.22 (i) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. 1194.22 (j) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. 1194.22 (k) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. 1194.22 (l) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with 1194.21(a) through (l). 1194.22 (m) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. 1194.22 (n) A method shall be provided that permits users to skip repetitive navigation links. 1194.22 (o) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. 1194.22 (p)

n n

n n

n n

March 29, 2013

U.S. Department of Veterans Affairs My HealtheVet Style Guide 2.1.2 Show U.S. Sponsorship

All pages within the My HealtheVet domain shall show official U.S. Government sponsorship by displaying an approved header image, as per VA Directive 6102, and by providing a link to the U.S. Department of Veterans Affairs (VA) home page. The actual presentation of this link shall be controlled by the style guide requirements specified in the sections of this document related to Header and/or Footer navigation 2.1.3 Agency Name

All pages within the My HealtheVet domain shall display the name of the parent agency (VA). This requirement is specified by Section 3.1 of this Style Guide. 2.1.4 Required and Important Links

The following is a list of the required and important links, as defined by the Office of Management and Budget (OMB), which are required within the My HealtheVet domain: 2.1.4.1 Privacy Policy

A link to the approved My HealtheVet privacy policy shall appear on every page contained within the My HealtheVet domain. 2.1.4.2 FOIA

A link to any FOIA required content shall appear on all major entry points to the My HealtheVet domain. This may appear simply as a text link such as: FOIA or Freedom of Information Act 2.1.4.3 Security Protocols

Information about Security Protocols shall be included in the website Privacy Policy. 2.1.4.4 Link to Home Page

A link to the home page of My HealtheVet shall appear on all pages contained within the domain. 2.1.4.5 Link to USA.gov

A link to USA.gov shall appear on pages contained within the My HealtheVet domain. 2.1.4.6 Website Policies and Important Links page

All policies, terms of use, etc. shall be accessible through a Website Policies and Important Links page (title may vary) in addition to being linked from any other appropriate and/or required area of the My HealtheVet domain. This link is only required to appear on the primary entry point into the domain. 2.1.5 Other Required Links

The following is a list of other links required by VA and MHV directives and policies including, but not limited to, VA Directive 6102:

March 29, 2013

U.S. Department of Veterans Affairs My HealtheVet Style Guide 2.1.5.1 Terms and Conditions

A link to the My HealtheVet Terms and Conditions shall appear on every page of the My HealtheVet domain. 2.1.5.2 Accessibility Statement A link to the My HealtheVet Accessibility Statement shall appear on every page of the My HealtheVet domain. 2.1.5.3 Site Map

A link to the My HealtheVet Site Map shall appear on every page of the My HealtheVet domain. 2.1.5.4 Link to The White House

A link to the official White House website shall appear on every page of the My HealtheVet domain. 2.1.5.5 Link to USA Freedom Corps

A link to the USA Freedom Corps website shall appear on every page of the My HealtheVet domain. 2.1.5.6 Link to VA CARES

A link to the VA CARES website shall appear on every page of the My HealtheVet domain. 2.1.5.7 Link to Defense Link

A link to the Defense Link website shall appear on every page of the My HealtheVet domain.

2.2

VA Directive 6102

All pages contained within the My HealtheVet domain are required to comply with VA Directive 6102. All styles, templates, imagery, etc. specified in this document are assumed to be in compliance at the time of this revision. Full details about VA Directive 6102 can be found at the following links:
n

6102 Home The 6102 Handbook (PDF) Full-text of the 6102 Directive

March 29, 2013

U.S. Department of Veterans Affairs My HealtheVet Style Guide

2.3
2.3.1

Logos and Official Imagery

VA Seal and Signature

Acceptable usage of the VA Seal and Signature is governed by Agency-wide policies and regulations. Source files and guidelines for acceptable usage are available through the VA 6102 Office at: 2.3.1.1 Required Placement

The Seal of the VA is required to appear on all pages contained within the MHV domain, and the presentation of the seal is specified in Section 3.1 (Header) of this document. The VA Signature is not used within the MHV domain in any major capacity, although it may appear in documents link to from within the domain. 2.3.2 My HealtheVet Logo

The official My HealtheVet Logo and all major variants are displayed below. This logo shall appear on all pages within the My HealtheVet domain.

My HealtheVet Logo Blue on White

My HealtheVet Logo White on Black

High-resolution versions of the logo are available through the My HealtheVet User Experience Group that may be used for both online and print presentation.

March 29, 2013

U.S. Department of Veterans Affairs My HealtheVet Style Guide 2.3.2.1 Color Logo Color Specifications Number Hex: #003366 RGB: 0 51 102 CMYK: 1.00 0.50 0.00 0.60 Hex: #FFFF66 Color of yellow E RGB: 255 255 102 CMYK: 0.00 0.00 0.60 0.00 Hex: #FF0000 RGB: 255 0 0 CMYK: 0.00 1.00 1.00 0.00 Hex: #FFFFFF RGB: 255 255 255 CMYK: 0.00 0.00 0.00 0.00 Main Logo Color for White on Black/Dark background Eye color of eagle on Blue on White/Light background Eye color of eagle on White on Black/Dark background Common Uses Main Blue for Blue on White/Light background

2.4

Typography and Fonts

Typography and Fonts refers to all typefaces used within the My HealtheVet (MHV) domain. This includes not only HTML/Plain-text fonts, but also fonts used within graphic elements that are not of a decorative nature. 2.4.1 Font Families

The font families used for the MHV domain are: Arial, Verdana, Sans-serif. This font family should be applied to all text objects that appear within any style sheets in use. 2.4.2 Font Sizes

Font sizes for all elements will use either ems or pts. Em font sizes are expressed as a decimal percent (1.0 = 100%) of the base font size for the page. Point sizes are similar to pixel sizes, although actual size varies. The base font size for the MHV domain shall be 12px (equivalent to 11pt).

March 29, 2013

U.S. Department of Veterans Affairs My HealtheVet Style Guide

2.4.2.1

Arial

Arial is the default typeface for My HealtheVet. It is a standard font found on all personal computers. This font is used universally throughout the MHV Domain. Helvetica is the Apple Macintosh equivalent typeface for Arial.

2.4.2.2

Verdana

Verdana is a secondary default typeface for My HealtheVet, and is to be used only when Verdana is unavailable. It is a standard font found on all personal computers.

2.4.3

Additional Fonts as Design

When typographical design elements use fonts other than those identified here, the typography must be reproduced as a graphic. Graphics must meet all image requirements identified in Section 5 (Graphics & Multimedia) of this document. 2.4.4 Styles Applied to Fonts

This section addresses the styles applied to fonts within HTML, not to font images. Specifically, it addresses Bold, Italic and Underlined text. Bold Bold text is primarily used to subdivide areas of content, helping to identify hierarchy. It is also used sporadically to provide emphasis within body text. Italic Italic text is used sparingly within body text, as it is difficult to read. Italic font treatments should generally only be used within design elements. Underline Underlined text is used to indicate a link. Underlining should only be used to indicate links and not to indicate emphasis or importance of text, as that may lead to user confusion.

March 29, 2013

U.S. Department of Veterans Affairs My HealtheVet Style Guide

2.5

Color Palette

The color palette is intended only to represent those elements that are rendered dynamically within the HTML of the MHV portal. This does not specify color schemes for graphical elements, images, or applications/modules with specific color palettes.

Color

Number
Hex: #000000 (BLACK) Hex: #333333 (CHARCOAL) Hex: #DCDCDC (GRAY) Hex: #EFEFEF (LIGHT-GRAY) Hex: #FFFFFF (WHITE) Hex: #FFFFCC (ANTIQUEWHITE) Hex: #990000 (MAROON) Hex: #FF0000 (RED) Hex: #003366
(NAVY)

Common Uses
Default Text Color

Secondary Text Color used in Right Column navigation on Light Blue background. VA Home Link Background Main Background Gray

Background Gray for help/instructional text in portlets and Left Column Navigation Main Portlet and content area background Text color for dark backgrounds Error Messaging background

Main Navigation Background, Button Background Required and Important links, Error Message borders and text Main Navigation Hover Background

Hex: #041D9E
(MED. NAVY)

Table Header Background color Footer Links Headline Text Color Secondary Headline Text Color Secondary & Active Navigation Text Color Read More link color Left Navigation Hover Background Color Secondary & Active Main Navigation Bar Background Color

Hex: #33688E (STEEL BLUE) Hex: #AEC2D8 (TWILIGHT BLUE) Hex: #BECEE0 (CORNFLOWER BLUE) NOTE:

This palette does not cover element specific or rarely used colors (colors appearing in few grid areas) or browser defaults that may be used without specification.

March 29, 2013

U.S. Department of Veterans Affairs My HealtheVet Style Guide

2.6
2.6.1

Code Formatting (HTML)

HTML Code Specifications

All HTML code will adhere to the World Wide Web Consortium (www.w3.org) XHTML 1.0 Transitional Document Type Definition (Specification available here: http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd ). 2.6.2 CSS Template Specifications

While the specific CSS templates along with classes are yet to be defined, all style sheets that are generated will adhere to CSS Level 1 (Specification available here: http://www.w3.org/TR/CSS1) CSS Level 2, Revision 1 is not to be used, as it is not as widely supported as Level 1, and is not yet a W3C Recommendation.

March 29, 2013

U.S. Department of Veterans Affairs My HealtheVet Style Guide

2.7

Metadata Standards

The metadata standard that will be used with the My HealtheVet domain is a subset of the VA 6102 Metadata set. The tags to be implemented are listed below. All elements are required, although optional elements from the VA 6102 Metadata set may be used as necessary. Element <TITLE></TITLE> Definition Not part of the Dublin Core, but an HTML element. The actual title of the document Usage: <title>THE DOCUMENT TITLE</title> Title The actual title and/or name of the document Short text less than 255 characters. Context based. Values Short text less than 255 characters. Context based.

Usage: <meta name=Title content=THEDOCUMENTTITLE> Creator The person, people or organization primarily responsible for making the content of the resource. Controlled Vocabulary and/or creator name.

Usage: <meta name=Creator content=THEDOCUMENTCREATOR> Subject A topic of the content of the resource. Typically expressed as keywords. Comma delimited set of keywords and/or categories

Usage: <meta name=Subject content=keyword,keyword,keyword> Description A text abstract that describes the content contained within the document. Long text description.

Usage: <meta name=Description content=DESCRIPTIONTEXT> Keywords A comma separated list of the most relevant keywords for the document. Context based and Controlled Vocabulary (VA Web Thesaurus)

Usage: <meta name=Keywords content=KEWORDLIST> Type The category that the document falls into. Controlled Vocabulary

Usage: <meta name=Type content=CATEGORYNAME> Language The primary language of the document. All documents shall be composed in English (en-US) or Spanish (es)

Usage: <meta name=Language content=en-US> or <meta name= Language content=es> DateCreated The date that the document was created. Date format shall follow VA standard complete date format: YYYYMMDD

Usage: <meta name=DateCreated content=20060101> DateReviewed The date that the document was modified. Only used as necessary. Date format shall follow VA standard complete date format: YYYYMMDD

Usage: <meta name=DateReviewed content=20060101>

March 29, 2013

10

U.S. Department of Veterans Affairs My HealtheVet Style Guide

3
3.1

Grid Areas
Header

All pages within the My HealtheVet (MHV) domain shall use the standard MHV header, described below. The header consists of five (5) main elements illustrated in Figure 4.1: 1. Masthead [A] 2. Top Navigation (Level 1) [B] 3. Top Navigation (Level 2) [C] 4. Seasonal Banner [D] 5. Utility Navigation [E] Of these elements only the Top Navigation elements are dynamic, based upon the page location within the portal. All other elements are essentially static, with the Seasonal Banner changing across all pages within the domain according to UX/Content Team guidelines and updates.

Figure 3.1 - Header Elements

3.1.1

General Specifications

The Header Grid Area measures 185 pixels (px) in height, and extends the full width of the page. When maximized, the Masthead and Top Navigation (Level 1 & 2) float to the left margin, while the Seasonal Banner and Utility Navigation float to the right margin. The specific requirements for each element of the Header Grid Area are described in Sections 4.1.2 through 4.1.6, below. 3.1.2 The Masthead

Figure 3.2 - The Masthead

The masthead is an area within the Header (outlined in Figure 4.2 in Green) measuring 760 pixels wide by 120 pixels high. It includes the 6102 required header banner with the VA Seal and agency name, a link to the main VA home page and the My HealtheVet logo, which shall link to the MHV Home Page.

March 29, 2013

11

U.S. Department of Veterans Affairs My HealtheVet Style Guide The 6102 Header measures 760 pixels wide by 55 pixels high. The VA Home link appears on a #333333 (CHARCOAL) background with #FFFFFF (WHITE) text at the default font-size (1em/12px). Currently, this is achieve through the use of a GIF image as opposed to HTML text. The MHV Logo is currently rendered as a background image with a transparent GIF overlay. 3.1.3 Top Navigation (Level 1)

The Top Navigation (Level 1), shown above, shall only contain links to the following sections/pages: Home, Personal Information, Pharmacy, Research Health, Get Care, Track Health, MHV Community. This element spans the full width of the page and measures 22 pixels in height with an 8 pixel white margin between this element and the other elements that display above it (Masthead, Utility navigation and Seasonal Banner). By default, navigation tabs shall appear with a 1 pixel left and right border, with a #990000 (MAROON) background and text in Arial Narrow, Bold, Uppercase styles at 1em size colored #FFFFFF (WHITE). Active navigation tabs shall appear with a 1 pixel left and right border colored #FFFFFF (WHITE), with a #BECEE0 (CORNFLOWER BLUE) background and text in Arial Narrow, Bold, Uppercase styles at 1em size colored #33688E (STEEL BLUE). On Hover, navigation tabs shall appear with a 1 pixel left and right border colored #FFFFFF (WHITE), with a #003366 (NAVY) background and text in Arial Narrow, Bold, Uppercase styles at 1em size colored #FFFFFF (WHITE). 3.1.4 Top Navigation (Level 2)

The Top Navigation (Level 2), shown above, shall contain links for all second level pages as approved by the UX/Content team that are related to the active Level 1 tab. This element spans the full width of the page and measures 22 pixels in height. By default, navigation tabs shall appear with a 1 pixel left and right border colored #33688E (STEEL BLUE), and a #BECEE0 (CORNFLOWER BLUE) background with text in Arial Narrow, Bold, Uppercase styles at 1em size colored #33688E (STEEL BLUE). Active navigation tabs shall appear with a 1 pixel left and right border colored #33688E (STEEL BLUE)., with a #FFFFFF (WHITE) background and text in Arial Narrow, Bold, Uppercase styles at 1em size colored #33688E (STEEL BLUE). On Hover, navigation tabs shall appear with a 1 pixel left and right border colored #FFFFFF (WHITE), with a #003366 (NAVY) background and text in Arial Narrow, Bold, Uppercase styles at 1em size colored #FFFFFF (WHITE).

March 29, 2013

12

U.S. Department of Veterans Affairs My HealtheVet Style Guide

3.1.5

Seasonal Banner

Figure 3.3 - Seasonal Banner

The Seasonal Banner is an image that is rotated monthly by the UX/Content team for various events, observances and holidays. This image measures 310 pixels wide by 59 pixels high, and is located at the right hand side of the header, as shown in Figure 4.3. 3.1.6 Utility Navigation

The Utility Navigation is located immediately below the Seasonal Banner and immediately above the Top Navigation (Level 1) elements of the Header Grid Area. The Utility Navigation only contains links to the following: VA Facility Locator, About MHV, Help, FAQs, and Contact MHV. It also contains a Search form in the right-hand portion of the element. By default, the text shall be sized to .9em using Arial as the typeface with a Normal weight and having no Text-decoration colored #003366 (NAVY). The background color is #FFFFFF (WHITE), with a #003366 (NAVY) left and right 1px border for each Utility Navigation element. On Hover, the font shall be #FFFFFF (WHITE), with a #003366 (NAVY) background. Active elements shall keep the same font color, but the background color shall be #BECEE0 (CORNFLOWER BLUE). The Search Form elements, other than the label Search:, are governed by Section 4.1.4 (Form Elements) of this document.

March 29, 2013

13

U.S. Department of Veterans Affairs My HealtheVet Style Guide

3.2

Left Column
The Left Column navigation appears in all Three-Column layouts. This item varies in width, maintaining 20% of the total available space. The remaining 80% are used by the Main Column and Right Column. The Left Column navigation has a 1px #FFFFFF (WHITE) right border running the full length of the element (see Figure 4.5). By Default, Left Column/Navigation elements appear with a #EFEFEF (LIGHT-GRAY) background with a 1px #FFFFFF (WHITE) border. The font is the default font for the MHV portal in #003366 (NAVY) at 1em. On Hover, Left Column/Navigation elements appear with a #AEC2D8 (TWILIGHT BLUE) background with a 1px #FFFFFF (WHITE) border. The font is the default font for the MHV portal in #FFFFFF (WHITE) at 1em.

Figure 3.4 - Sample Left Column

Active Left Column/Navigation elements appear with a #FFFFFF (WHITE) background with a 1px #FFFFFF (WHITE) border and a 1px #9ABDDC (TWILIGHT BLUE) bottom border. The font is Arial, Bold in #003366 (NAVY) at 1em. Each Left Column element has a 5px top and bottom margin, with 2px top and bottom padding and 8px left and right padding.

3.3

Main Column

Figure 3.5 - Main Column

The main column comprises between 60% and 80% of the width of the main body of the page, depending on whether it appears in a Three-Column or Two-Column layout, respectively. All fonts adhere to the

March 29, 2013

14

U.S. Department of Veterans Affairs My HealtheVet Style Guide base styles outlined in other areas of this Style Guide. The Main Column may be comprised of one (1) or more content cells with the following styles: 5px padding and 5px margin Background Gradient image as shown in Figure 4.5 A 1px GRAY right and bottom border

All core content for a particular page shall appear in the Main Column e.g. Article text, SEI portlets, search results, et al.

3.4

Right Column
The Right Column is reserved for 2 primary elements: The Login/Logout box and Quick Links/Related Links box. The right column retains 20% of the width of the entire width of the main content area of the page. The Login/Logout box appears at the top of the right column, with a 1px #FFFFFF (WHITE) border, #AEC2D8 (TWILIGHT BLUE) background, with 5px margin and padding. Text and form elements following the default Form Element styles outlined elsewhere in this document. The font color in this box is #333333 (CHARCOAL). The Quick Links/Related Links box is made up of 2 nested boxes. The outermost box uses the same styles as the Login/Logout box, with an inner box having a #FFFFFF (WHITE) background.

Figure 3.6 - Sample Right Column

March 29, 2013 15

U.S. Department of Veterans Affairs My HealtheVet Style Guide

3.5

Footer

Figure 3.7 Footer

The MHV footer (shown above in Figure 4.7) appears at the bottom of all pages within the MHV domain, with the exception of the Airlock page. The footer uses a #FFFFFF (WHITE) background and has a 5px #FFFFFF (WHITE) margin at the top of the element followed by a 3px #999999 (MED. GRAY) horizontal rule. The footer links appear 10px from this horizontal rule with a font-size of 1em and a typeface of Arial. The base font color is #333333 (CHARCOAL) with the first row links colored #041D9E (MED. NAVY) and the second row links colored #999999 (MED. GRAY). Each row has a 5px top and bottom margin.

March 29, 2013

16

U.S. Department of Veterans Affairs My HealtheVet Style Guide

4
4.1
4.1.1

Page Elements
HTML Elements
Headers/Headlines

Headers and Headlines are used to indicate sections, article titles and other areas of special importance within the page. All headers use the default Arial, Verdana, Sans-Serif font-family with sizes and colors varying according to usage. The styles described below are for use within the MHV Portal, excluding the Airlock/Landing page which has unique styles associated with it. 4.1.1.1 H1 Header

The Top-Level Header (H1) is used to indicate all page titles, article titles or other top-level content. The following CSS extract indicates the styles associated with the top level headers:
DIV.bea-portal-window-content-grey H1 { font-family:Arial, Verdana, Sans-Serif; font-size:16pt; font-weight:bold; color:# 738aa5; margin:15px 0px 0px 0px; } DIV.bea-portal-window-content-grey H1 SUP { font-size:13pt; }

4.1.1.2

H2 Header

The Second-Level Header (H2) is used to indicate all major section headers, article section or subsection titles or other second-level content. The following CSS extract indicates the styles associated with the H2 headers:
DIV.bea-portal-window-content-grey H2 { font-family:Arial, Verdana, Sans-Serif; font-size:13pt; font-weight:bold; color:# 738aa5; margin:15px 0px 0px 0px; } DIV.bea-portal-window-content-grey H2 SUP { font-size:11pt; } DIV.bea-portal-window-content-grey H2 A:LINK, DIV.bea-portal-window-content-grey H2 A:VISITED { color:#33688e; text-decoration:none;

March 29, 2013

17

U.S. Department of Veterans Affairs My HealtheVet Style Guide 4.1.1.3 H3 Header

The Tertiary Header (H3) is used to indicate sub-section headers, many table header and other tertiary-level content. The usage is currently dictated more by presentation than by content hierarchy The following CSS extract indicates the styles associated with the H3 headers:
DIV.bea-portal-window-content-grey H3 { font-family:Arial, Verdana, Sans-Serif; font-size:11pt; font-weight:bold; color:# 738aa5; margin:15px 0px 0px 0px; } DIV.bea-portal-window-content-grey H3 SUP { font-size:11pt; } DIV.bea-portal-window-content-grey H3 A:LINK, DIV.bea-portal-window-content-grey H3 A:VISITED { color:#33688e; text-decoration:none; } DIV.bea-portal-window-content-grey H3 A:HOVER, DIV.bea-portal-window-content-grey H3 A:ACTIVE { color:#738aa5; text-decoration:underline; }

4.1.1.4

H4 & H5 Headers

Fourth and Fifth level headers (H4, H5) are not widely used within the MHV Portal. They should retain the same coloring as the higher-level headers, however should be scaled down in visual size as appropriate. Fifth level headers should be sized the same as the default text size, with Fourth level fonts approximately 1 Pt (or 0.1 em) larger. 4.1.2 Anchors and Hyperlinks

All links within Header elements (H1, H2, etc.) are specified in Section 4.1.1 of this style guide. All other links will either appear in the browser default style, or using styles as indicated in Section 3 (Grid Areas) of this style guide. 4.1.3 Data Tables

The styles covered by this section are related to Data Tables that display Self-Entered Information or other clinical data within the User Facing sections of the MHV Portal, and are not intended to cover any other tables used solely for layout or any data tables used for other areas of the MHV portal.

March 29, 2013

18

U.S. Department of Veterans Affairs My HealtheVet Style Guide

4.1.3.1

Table Headers

Table Headers are used to provide information and labels for the columns below them that contain the actual data to be displayed. All Data Table Headers in the MHV Portal shall use the default font size with an Arial, Verdana, Sans-Serif font-family in bold font-weight in #FFFFFF (WHITE). The background color for the table headers shall be #041D9E (MED. NAVY). Table Headers that can be clicked for sort ordering shall use a two-triangle graphic to indicate they can be sorted and text within the cell shall become underlined onHover. All cells will have a center text-alignment with a middle vertical alignment. 4.1.3.2 Table Cells Table cells will have no background or border colors, and all fonts will use the default colors and sizes for text. 4.1.4 Form Elements

Beyond presentation, all form elements that require user input shall make appropriate use of labels. Hidden form elements should also be properly labeled and placed toward the end of the form, rather than at the beginning. Tab indexing should be used to allow for easy keyboard based navigation within a form. When multiple forms appear on a page, each should be explicitly labeled and not overlap or nest within the page. NOTE: Form elements must not use the onChange event handler in javascripts to change the form or submit the form. This is of particular importance with drop-down selections. Keyboard based navigation is not possible with this event handler

All form elements will follow browser default settings for presentation with the exception of buttons. This does not refer to a specific graphic or text button (e.g. a button styled to appear as if it is plain text). All buttons, including submit and reset types, shall appear with a 1-pixel #FFFFFF (WHITE) top and left border, 1-pixel #333333 (CHARCOAL) bottom and right border and #990000 (MAROON) background. The text shall have the default font sizing in #FFFFFF (WHITE). The following CSS extract shows an example of the styles to be applied to Button elements within forms. .mhv-input-button { background-color: #990000; border-top: 1px solid #FFFFFF; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #FFFFFF; color: #FFFFFF; cursor: hand; font-size: 1.0em; margin: 5px 10px 0px 0px; padding: 0px 3px; text-align: center; }

March 29, 2013

19

U.S. Department of Veterans Affairs My HealtheVet Style Guide

5
5.1
5.1.1

Graphics & Multimedia

Images & Photographs
Acceptable Formats

The current standard images in use across the MHV portal shall be in one of three primary formats: JPEG, GIF or PNG. For images that require a transparent background, a matted transparent GIF will be used. This is due to the current lack of support for PNG transparency by Microsoft IE 6.0. 5.1.2 File Size Guidelines

Industry best practices are to insure that images comprising the framework of a page (Header, navigational elements, background images, et al) should not raise the K-weight (total download size) of the page beyond approximately 110Kb. This is to optimize download times and site performance. It is not a firm requirement, but strictly a guideline. When images are inserted as part of the page content (photographs within an article, for example) a relatively low-resolution (JPEG at 80%) image that should generally not exceed 300x250 pixels on the page except where specifically required. Should a full-resolution version be available, it should be linked to from the low-resolution image or from a text-link in the caption for the image indicating that a larger version is available. 5.1.3 Other Considerations

All images that contain any textual or visual content must include descriptive Alt text that includes any text content and/or a description of the image itself. LONGDESC should be used for highly detailed images requiring longer explanations. NOTE: Graphics should not be used as the sole method for conveying information, in accordance with Section 508 of the Rehabilitation Act.

5.2
5.2.1

Flash Animation
General Guidelines

Flash animation is used in only one instance on the MHV Portal for the Virtual Tour. However, in any instance where Flash will be used, a link must be readily available for users to download Macromedia Flash, and indicate that it is a free download. Additionally, a full transcript of any dynamic content (animation/video) must be provided in the event that the Flash animation itself is not accessible or strictly 508 compliant. For video, closed captioning should also be provided whenever possible. NOTE: No major component of the site relating to navigation or major functionality should use Flash as the sole method for implementation wherever alternatives are available unless the entire implementation can be made truly accessible.

March 29, 2013

20

U.S. Department of Veterans Affairs My HealtheVet Style Guide

5.3
5.3.1

Video & Audio

General Guidelines

All Audio content shall have a text transcript available for download in tandem with the audio. In the event of live broadcasts of audio, a transcript should be made available in accordance with agency-wide guidelines. All Video content shall have a text transcript available for download as well. Additionally, captioning must be provided for any instructional video through the use of a SMIL file, or other technology that is deployed with the video. An alternative to this is to Open Caption the video. All captioning must be synchronized with the video.

5.4
5.4.1

Linked Document Standards

Acceptable Formats

The MHV Portal may have documents available for download either directly from the portal or from links to documents on externally hosted sites. The most widely available formats that are acceptable for use are Adobe Portable Document Format (PDF), HTML, Plain Text (TXT) and Comma-Separated Values (CSV). Microsoft (MS) Word Documents (DOC) are also acceptable, however a second format must be provided along with the MS Word document. Critical documents should not be provided exclusively in MS Word format. Links to documents shall be formatted as follows: LINK [ICON - EXTENSION FILESIZE]

The links to any documents for download (e.g. not links to web-based content) must also contain a TITLE attribute in the anchor/hyperlink tag. Examples of how to indicate links to the most common document formats are provided in the following sub-sections.
n

Microsoft Word Documents Document Link [ DOC 999Kb] Adobe PDF Documents Document Link [ PDF 999Kb] Plain Text Documents Document Link [ TXT 999Kb] OR Document Link [TXT 999Kb]

HTML Documents (for download) Document Link [ HTML 999Kb] OR Document Link [HTML 999Kb]

March 29, 2013

21

U.S. Department of Veterans Affairs My HealtheVet Style Guide

A1. Additional Resources

A1.1. Glossary
A1.1.1. Acronynms CHIO Chief Health Informatics Officer CSS Cascading Style Sheets HTML Hypertext Markup Language MHV My HealtheVet OMB The Office of Management and Budget OIFO Office of Information Field Offices VA The U.S. Department of Veterans Affairs VHIT The Office for Veterans Health IT W3C The World Wide Web Consortium The W3C is the current governing body for recommendations as to code standards that should be used in web design/development. XML eXtensible Markup Language

March 29, 2013

22

U.S. Department of Veterans Affairs My HealtheVet Style Guide

A1.1.2. Common Terms Header This does not refer to any technical/HTML headers, but rather refers to the visual element that appears at the top of any page. Content Area This refers to the main body of the pages. For this guide, this area is bordered on the top by the Header and Top Navigation, by the Left Navigation on the left, and the Footer at the bottom. When right-hand elements are included, such as a Login Box, these items may appear either within the content area, or as a right-hand column outside of the content area, at the discretion of the developer/designer. Footer This does not refer to any technical/HTML footer information, but rather the last content appearing at the bottom of the page. px Also written as pixels refers to actual screen pixel sizing. A pixel is one point of resolution on a screen. It is only to be used to size items that will be displayed on a screen, and not in printed formats. em A relative unit of measurement for sizing fonts using Cascading Style Sheets (CSS). This is expressed as a percentage (with 1.0 being 100%) thus to size something to 200% of the default font size of the page, you would specify 2em RGB Short for Red, Green, Blue. A standard for coloring specifications. CMYK Short for Cyan, Magenta, Yellow, Black. A standard for coloring specifications, typically used in print. Hexadecimal or Hex Typically used to express colors for the web, hexadecimal numbering is a base-16 numbering system that goes from 0 to 9 and then from A to F. All sixteen numbers would then be: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

March 29, 2013

23

U.S. Department of Veterans Affairs My HealtheVet Style Guide

A1.2. Reference Materials

A1.2.1. Section 508 Accessibility Resources www.section508.gov Section508.gov is a resource for information on Section 508 of the Disabilities Act. The website also contains a searchable database of accessible products by supporting vendors. This portion of the site, called Buy Accessible, offers an online resource for vendors to post information on accessible products and for buyers to research accessible products. www.w3.org/TR/WAI-WEBCONTENT/ These are the World Wide Web Consortium (W3C) guidelines explaining how to make Web content accessible to people with disabilities. www.accessibilityforum.org/docs/papertools/papertool_v1.0%20web%20version.doc This Quick Reference Guide is intended to assist government officials in making informed decisions about Section 508 related procurement. This document is recommended by www.section508.gov. A1.2.2. Federal Web Standards Resources www.webcontent.gov Official OMB website providing information on the OMB Federal Web Standards as well as information about best practices and recommendations for Web Content Managers. A1.2.3. Web Design/Development Standards and Best Practices www.w3.org Official website of the World Wide Web Consortium (W3C). This site contains all the latest specifications for HTML, CSS, and other web languages in use.

March 29, 2013

24

U.S. Department of Veterans Affairs My HealtheVet Style Guide

A2. Sample Page Types

A2.1. Airlock Page

A2.2. Home Page

March 29, 2013

25

U.S. Department of Veterans Affairs My HealtheVet Style Guide

A2.3. Gateway

A2.4. Unauthenticated Landing Page

March 29, 2013

26

U.S. Department of Veterans Affairs My HealtheVet Style Guide

A2.5. Two-Column Article/Landing Page

A2.6. Three-Column Article/Landing Page

March 29, 2013

27

U.S. Department of Veterans Affairs My HealtheVet Style Guide

A2.7. Two-Column Portlet

A2.8. Three-Column Portlet

March 29, 2013

28

U.S. Department of Veterans Affairs My HealtheVet Style Guide

A2.9. Search Results

A2.10. Help Content

March 29, 2013

29