Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Task marked complete
Section
Column
width80%
Panel
bgColor#f6f6f6
titleBGColor#333333
borderStylesolid
titleModals
borderColor#cccccc
titleColorwhite

Purpose: Provides guidelines for using the document header.

Category: Header, Navigation

Related jiras:

JIRA
columnskey,summary,type,created,updated,due,assignee,reporter,priority,status,resolution
serverKuali: Jira
serverIdbe3acfec-fcc2-335b-8051-b2b053a39956
keyUXI-406

Process Phase:

  •  UXI JIRA Created (insert link above)
  •  Component Specification draft complete
  •  UXI code review complete
  •  Reconcile with UIM and KRAD existing designs
  •  Conduct user testing (if needed)
  •  Routed for review with Kuali UX Working Group and UX/KRAD Working Group
  •  Reviewed with KAI
  •  Rice JIRA Created (in KULRICE Project)
  •  KRAD Implementation complete
  •  Component released (insert rice release version below)

Version: 1.0

 


Description

The document header is present on Kuali documents to help the user easily identify the document that they are currently viewing.  When choosing which information to display in the document header, consider only the essential information used to identify a document, or information that a user may need to know quickly when opening a document.

Deck of Cards
idcomponent_details
Card
idusage
defaulttrue
labelUsage

Usage

Application header

Document header on a desktop showing all options.

Document header on mobile. The meta information has been collapsed into a single menu here.

When scrolling (mobile or desktop) the document header collapses to show just the application section and document title. In some cases it may also show the current action or task.

Quick summary of features:

  • The document header contains information relevant to the application, document and current task.
  • Pertinent and necessary information - usually information that's needed throughout a document or is often referenced - is shown.
  • If the document is a child of another document, the relationship can be displayed in the document header by providing a breadcrumb like link to the parent document. For example, see KC budget versions which are children of proposal documents.

When to use this component:

  • This component is enabled be default.
Card
iddemos
labelDemos

Demos

Document header

The document header for each individual application should be located in the includes/ folder within the application folder. Since the file is included, all of the necessary markup and styles will be pulled in as well.

Code Block
languagephp
<?php include ('/prototypes/{application-folder}/includes/uif-docHeader.php') ?>

See an example on JSFiddle

Card
idaccessibility
labelAccessibility Considerations
nextAfter0
Section

Accessibility Considerations

There are no special accessibility considerations required for the document header. Follow best practices for markup and ensure the structure is valid and semantic which will help ensure the content is readable by assistive technology.

When activating buttons or links that open up additional panels with more information, focus should be sent to the panel when it's opened so the contents can be read immediately. Additionally, the use of ARIA should be used to indicate whether or not a panel is open or closed, unless the panel closes automatically when focus is lost.

Accessibility Resources:

As always, use valid, semantic, proper HTML markup to optimize accessibility and usability of information in the document header.

W3 HTML Validator
WebAim WAVE 

Card
idkeyboard-shortcuts
labelKeyboard Shortcuts

Keyboard Shortcuts

Tabbing, as per normal navigational movement, should also work here. Nothing out of the ordinary.

Card
idcomponent_discussion
titleResearch and Discussion
labelResearch & Discussion

Research and Discussion

None at this time.