Main navigation elements on all pages

1. Primary nav remains consistent, as do the drop-downs. None of the tabs is highlighted. This element identifies this page as part of a special facility-specific area Left side nav is specific to the facility area, and can include links relevant to a facility, either hosted by Tridion or by kp.org base platform Goal is to provide kp.org search on top of page, and facility-specific search near facility nav/content Left side nav items expand to show next level of facility nav Main navigation elements on all pages

2. Four Page Types These are the four page types. Body content is the same for each one. Entry Page Index Page Basic Content Deep Content

3. Facility-specific graphics and headings, along with color schemes from the std palette, tell the user they’re on a facility site Lots of room in the body for facility-specific content and links Option for facility-specific searches. This search box is between the facility heading and the facility nav, to communicate that the search is about the facility Highlighted area for special announcements and promotions Center Entry Page Template • Use this as the home page for a Facility Site • Main Facility Site URLs (e.g., kp.org/santaclara) point to this page Shortcuts to high-value features, even if they aren’t “facility site” features

4. “More info” boxes are optional. Highlighted area for special announcements and promotions Basic Content Template • Use this for content that is not particularly complex, e.g. • Personal welcome to facility • Local newsletter article • a single recipe

5. Text introduces the feature Bullets and columns list all the sub-topics Index Page Template Use this when you need to branch users off to multiple other pages within this section or feature, e.g., • Parking directions for multiple locations • departments • upcoming events • list of Health and patient information videos • list of recipes • introduction to Interpreter services, with links to multiple languages

6. Deep Content Template • Use this for detailed content, or when you want to display many links to other features Right side used for related links to content that isn’t part of this feature, and for “push” messages

7. Data tables – coding for accessibility • Please see the next slide for coding guidelines.

8. When coding the data table, please follow these accessibility instructions for users of screen readers. Table tag: Must include a summary attribute of what the table is about. Currently, there is a place holder for summary: summary="place holder for summary of what table is about" Make sure to replace the content between the quotations. A) The first row of the table is for title headings. Unique id are required for all headings. The three table column headings place holders are as follows: A1) id="table_heading_tag" (insert actual id between quotes) A2) id="column_heading1" (insert actual id between quotes) A3) id="column_heading2" (insert actual id between quotes) B) The second row of the table is also used as a heading. id="table_subhead1" headers="table_heading_tag" C1) Third row, first column is used as a heading. This must have an id: id="standard_row1" headers="table_subhead1 table_heading_tag" C2) Third row, second column holds data. Indicate all headings related to this cell: headers="column_heading1 table_subhead1 standard_row1 C3) Third row, third column holds data. Indicate all headings related to this cell: headers="column_heading2 table_subhead1 standard_row1 Note: The content in each cell has been populated in the above headers and id. This tells screen reader users where they are located. This is especially important for long and complex tables, therefore this information should always be included.