This page is a template page showing general features available for format of the KB pages and the structure that should be followed when creating new pages. 

The format of this page follows basic accessibility standards and allows for a uniform layout between all SMPH Informatics KB pages. 

Basic Contents Menu - No Icons

• Page Structure
• Video Embedding
• Images & Buttons
• Table Layouts
• Accessibility
• External Link

The Basic Menu is a generic menu.  It is meant as a single row of items using an unordered list of links.  This menu will adapt to sizing of the screen but it is best to avoid putting more than 6-8 items in a single row to avoid page overflow.  If more options are needed it is possible to add a new row to the menu by adding a new menu list below the first.  Keep menu item titles short but clear.  To open links in a new tab include target="_blank" in the <a> parameters.

Basic Menu Code: 

<ul class="kbmenu">
<li><a href="#ref1">Title 1</a></li>
<li><a href="#ref2">Title 2</a></li>
<li><a href="#ref3">Title 3</a></li>
<li><a href="https://link.wisc.edu/" target="_blank" rel="noopener">Link Title</a></li>
</ul>

Vertical Contents Menu - No Icons

• Page Structure
• Video Embedding
• Images & Buttons
• Table Layouts
• Accessibility
• External Link

The Vertical Contents Menu is a generic left hand panel menu.  It is meant as a single column of items using an unordered list of links.  There is no limit to the number of items that can be added to the list of links. 

Paragraph content will be displayed alongside the vertical menu to the right of the page. Any headers used will automatically be snapped to the bottom of the menu and displayed underneath. 

Vertical Menu Code:

<ul class="kbvertmenu">
<li><a href="#ref1">Title 1</a></li>
<li><a href="#ref2">Title 2</a></li>
<li><a href="#ref3">Title 3</a></li>
</ul>

Icon Contents Menu 

Content Menu - Caption for accessbility, will not be displayed

Page Structure	Video Embedding	Images & Buttons	Table Layouts	Accessibility	External Link

The Icon Contents Menu is a modified table to display clickable icons with links.  This table can be useful for illustrating processes or guides for users and/or giving visual feedback for the purpose of the link.  This table will adjust size to fit on a KB page, but it is also recommended to use no more than 6-8 items in the menu row. 

A folder of different icons is included in the Shared Document Folder for all SMPH Informatics KB pages.  Other Icons can be included by uploading the icon image file into the KB Documents attachment folder. 

Icon Contents Menu Code:

<table class="iconmenu"><caption>Caption Text</caption>
<tbody>
<tr>
<th scope="col"><a href="#id1"><img src="/filelocation/img1.png" role="presentation"><br>Title1</a></th>
<td scope="col"><a href="#id2"><img src="/filelocation/img2.png" role="presentation"><br>Title2</a></td>
<td scope="col"><a href="#id3"><img src="/filelocation/img3.png" role="presentation"><br>Title3</a></td>
</tr>
</tbody>
</table>

---

Sections and Styling

If the page is for a user guide, the first paragraph should include a brief overview and introduction of the topic.

Headings in HTML are titles or subtitles that you want to display on a webpage. They provide the overall organization of your website and its content. Assistive technologies, browsers, and plug-ins rely on proper heading structures to accurately relay information to users.  

If a KB page's topic is very broad, it is worth breaking the topic into sub-topics that can be covered in more depth in a clear structure.  Heading formats should always follow numerical order from broadest coverage of the topic to most detailed sub-headings.

Example:

H2: Recipes

H3: My Favorite Recipes

H4: Quick and Easy Recipes

H5: Spaghetti

Recipe for how you make spaghetti.  

H5: Hamburgers

Recipe for how you make a hamburger.

H5: Tacos

• Beef Tacos
• Chicken Tacos
• Fish Tacos

Bullet Points

Numerical Bullet Points (ordered list) 

1. Top bullet example
   
   1.  Tier 2 bullet example
      1. Tier 3 bullet example

Circular Bullet Points (unordered list)

• Top bullet example
  • Tier 2 bullet example
    • Tier 3 bullet example

Bullet points numbering or icons can be changed using the bullet point drop downs in the editor menu if a different format is desired. 

Bold Font

Use bold when emphasizing a single word or specific name of a feature within a sentence. 

For navigation pathway steps, bold the title of the folder for each of the steps.
For example, Regulatory folder > Study Conduct folder > Study Supplies folder (the folder names as they appear within eBinders are in bold).

Highlighting

When using highlighting on text, use highlighter color = yellow.  Other highlighter colors may be used if they denote different features in a passage and it is clearly denoted the meaning of each additional color.

Ensure the color of the highlighter still meets accessibility standards and the text is easily able to be seen through the color. 

Links and Attachments

Links to other external pages outside of UW pages or other internal KB pages should be set to open in a new tab.

• External links  - new tab
• Internal, temp links - new tab
• Internal to internal - current window

<p>Check out <a href="https://kb.wisc.edu/smph/informatics/96709 target="_blank" rel="noopener noreferrer"" target="_blank" rel="noopener noreferrer">UW KB Pages</a>.</p>


Linking in Attachments

In lists, format links to attachments and/or surveys like this: [Title of Document] ([Type of Document]) 

• Type of Document: DOC, PDF, XLS, VSD, REDCap
• Examples: Florence Monitor Access Request Form (REDCap); Time Tracker (XLS)

Linking to External Resources

Naming convention for links to external resources in a list form (not paragraph form): [Website owning entity name]: [Document/resource/website name]

Examples:

• UW Health: Cloudfax for Consent Forms in Health Link
• Advarra: Institutional Review Board (IRB)
• UWCCC: Data & Safety Monitoring Committee Membership

Footer

At the end of the KB document include a footer with contact information for SMPH support relavent to the topic.  This should provide resources to users if they still need guidance for questions not found within the KB pages. 

Document Linking

If KB page is developed for topic that is related to additional KB pages, the document should be linked to the other relavent pages.  At the bottom of the KB page editor there is an option to insert the document numbers (e.g. 122913) for related documents.  Documents linked will display links at the bottom of the KB page for users to click on and travel to the next page. 

The formatting on this page is using a standardized SMPH Informatics KB CSS Stylesheet.  New documents when created do not use the SMPH Informatics stylesheet by default.  To include the style, either copy a document that has the style (such as this template) or add the style in the Additional Fields section of the KB editor by inserting <link rel="stylesheet" type="text/css" href="/images/group461/shared/css/smph_kb_settings.css"> into the JavaScript/CSS field. 

Much of the CSS formatting will not display within the KB Editor.  To see how the display will look to users, you can select "Preview" at the bottom of the editor window and change the preview from "KB Admin View" to "Internal" or "External" view. 

Items using Javascript will not function in the preview (such as accordion buttons).  Check that accordion buttons are working by either internally publishing the page to view in the SMPH KB or saving the draft and viewing the preview of the page in the KB Admin tools prior to clicking into the editor. 

Additional notes on section formatting:

• Heading 2 should not be used in the body of this page.  This heading is used for the page title only. 
• Within these headings other visual or detail elements can be included such as Figures, Screenshots, Bullet lists and Tables.  
• A "To the top" button can be included to send a user back to the top of the page where they will be able to see the navigation menu again.  If a particular page is long, it is highly recommended to include the button within each section for user friendliness.  

To the Top button:  <a class="top" href="#">To the top</a>

• End each section with a horizontal ruler <hr> tag.
• A summary is required in the KB editor.  If a summary is not needed add a space ' ' to the summary box to remove the warning
  
  
  

To the top

---

Video Embedding

Videos are useful tools for displaying and walking through content to a user.  Custom mp4 videos, webpage videos, and even webpages themselves can be embedded into the KB page to be viewed.  

Transcripts should be provided when possible for video content that requires important audio information that is not otherwise noted or described on the page.  A transcript can be added by uploading a document to the KB attachment folder and placing the link near the video it transcribes.  When this link is clicked a copy of the file will be downloaded to the user's device.  Some content, like YouTube videos, create their own auto-generated captions to allow users to read as the video plays but these are not always completely accurate.  For custom videos, applications like Adobe Premiere can generate transcription documents that can be reviewed and edited for accuracy as needed. 

Internal video example using mp4 file and <video>

Used for displaying video files using .mp4 or .ogg formatting.  Video files are uploaded to the document attachment folder then linked to the video player.  File size limit for uploaded files is 125mb. 

Download Example Video Transcript

 Internal Video File Code:

<p><video class="kbvideo" controls="controls"><source src="/images/group461/122913/ExampleDemonstrationVideo.mp4" type="video/mp4" />


Transcript Code:

<a class="transcript" href="/images/group461/122913/Documents/TranscriptDocumentPlaceholder.docx">Link Description Here</a>

External video example using <iframe> with a youtube link

Used for linked a video that is hosted on an external site such as YouTube.  Video URL is linked and displayed within KB page.  Player controls will use controls of linked video which includes any captions, playback speed, and other settings that the external player offers. 

External Video Link Code:

<p><iframe class="kbvideo" src="https://www.youtube.com/embed/RjpvOqZigao" title="YouTube video player" allowfullscreen="allowfullscreen"></iframe></p>


Embedded Website Page

Used for inserting a functional webpage viewer inside of the KB document.  In the example below, it is used to display a request form within the page rather than redirecting by link.  If the linked page has an auto active element (i.e. a search bar that you can type into without clicking into the box upon loading the page) then the KB page will snap down to the viewer upon load.

Page embedding will not work for all webpages and should be throughly tested before use.

Webpage Embedding Code:

<p><iframe class="kbvideo" src="https://it.med.wisc.edu/documents/general-it-support-request/" title="Webpage" allowfullscreen="allowfullscreen"></iframe></p>


To the top

---

Images and Buttons

Images

Below is an example of adding an image to the KB page.  Images should be added as "figures" with a figure caption added beneath the image.  Organize added images into sub-folders in the document's attachment folder to sort content and images into easily found groups.  Create brief but descriptive image titles.

Most full-size images should be inserted within a <figure> element. The shared CSS settings have styling for a figure and figure caption, and also an optional class that embeds a small figure floating on the right of the page.

Image Code:

<figure><img class="fig" src="/images/group461/122913/name.jpg" alt="alt text"><figcaption>"Caption"</figcaption></figure>

Additional notes on embedding images in a figure element:

• If you do not want the drop-shadow included, leave the class="fig" out of the img tag.
• Use the figure caption within a figure element with the tag <figcaption> - don't forget to close the figcaption tag and the figure tag.
• Unless an image is strictly decorative, include alt text that describes the image succinctly.  This is the text a screen reader will read when it is focused on an image.
• When using screenshot editors like SnagIt, do not include a shadow border on the saved image.  Shadows will be handled by the CSS settings with the class="fig" class. 
  
  
  

Additional notes on styling images:

• Refer to the KB User Guide – Imaging Guidelines (https://kb.wisc.edu/kbGuide/4643)
• What to blur/remove
  • If a real person’s full or last name is listed blur/remove entire name
  • If a real study number is listed, blur/remove entire number, including letter(s) that precede the number
  • Any PHI or other identifying information
    
    
• What to replace
  • To be consistent, may replace study team member names with mock information

Buttons

Buttons are useful tools for easy visual redirection to other links or resources.  When using the button for a link, the button will open the link in a new tab in the browser. 

SMPH REDCap

SMPH REDCap KB

Button Code:

<button class="kbbutton" type="button" onclick="window.open('http://google.com','_blank')"<Button Text</button>


Accordion Buttons

Accordions are clickable buttons that show and hide content after each click to help condense otherwise long list content.

Accordion panels are added by selecting the +/- button in the editor menu.  They will be automatically formatted.

  Expand All Collapse All  

Linked Document

Accordion 2

Accordion 3

Using the +/- button to add accordions will automatically add any necessary references to JS provided by the KB automatically to the additional fields box below.  

To the top

---

Table Layouts

There are several table classes that can be used to create different table designs in the CSS styling for this page. Below are examples of each and a description for how they might be used. 

Add class to table: <table class="classname">

Basic Table

Table Caption:
General table to list columns of information without row categorization

Table Header 1	Table Header 2	Table Header 3
Content 1.1	Content 2.1	Content 3.1
Content 1.2	Content 2.2	Content 3.2
Content 1.3	Content 2.3	Content 3.3

class='basictable'

Basic Table with Row and Column Headers

Caption: Table for both Row and Column Separated Comparisons

	Column Header 1	Column Header 2 Link in Table Header
Row Header 1	Content 1.1	Content 2.1
Row Header 2	Content 1.2	Content 2.2
Row Header 3	Content 1.3	Content 3.3

class='rctable'

Comparison Table

Caption: Table meant for comparisons between items

	Item 1	Item 2
Comparison 1
Comparison 2
Comparison 3

class='comparison'

 

To the top

---

Decision Tree

To the top

---

Accessibility

Website accessibility standards break down to four basic principles: Perceivable, Operable, Understandable, Robust.

Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
This means that users must be able to perceive the information being presented.

• Provide text alternatives for non-text content. (<figcaptions> for figures)
• Provide captions and other alternatives for multimedia. (Accessible transcripts for training or other videos embedded in the page)
• Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
• Make it easier for users to see and hear content.

Operable - User interface components and navigation must be operable.
This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)

• Make all functionality available from a keyboard.
• Give users enough time to read and use content.
• Do not use content that causes seizures.
• Help users navigate and find content.

Understandable - Information and the operation of user interface must be understandable.
This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)

• Make text readable and understandable.
• Make content appear and operate in predictable ways.
• Help users avoid and correct mistakes.

Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)

• Maximize compatibility with current and future user tools.

Before moving a page to Active status, select "Tools" in the editor menu and run the "Accessibility Checker" for a quick overview on any remaining accessibility issues. 

If you have a UW-Madison REDCap project and have questions about [insert topic of page here], please send them to [supportemail]@wisc.edu

To the top