Global University Header
Top-most UMD site header that contains global branding and may have additional navigation. All official University of Maryland websites, not including student sites, must be identified with the university header.
Dos
Must be used on all official university sites.
Additional links are optional. Avoid duplicating links or content in the main navigation.
Don'ts
Minimize the use of additional links. Balance out the number of navigation links to not overwhelm users. A maximum of 3 is recommended.
Variations
Accessibility
Built in accessibility
Link
SVGs are hidden from assistive technologies and effective alt text is used on the link itself. Effective text is used to describe what the link is and where it is taking the user. This is clear, descriptive text that conveys the link content succinctly and the purpose and destination of the link. WCAG 2.4.9: Link Purpose (Link Only)
- Example of effective text: Visit the Instagram page of the University of Maryland
Meaningful Sequence
Content in the header follows a logical reading order that makes sense when read by assistive technologies WCAG 1.3.2
Info and Relationships
The structure of the header (e.g., logo, navigation list) is conveyed through appropriate semantic HTML elements WCAG 1.3.1
Input Purpose
If there is a search input field, the purpose of the search field can be programmatically determined. WCAG 1.3.5
Orientation
The header is usable in both portrait and landscape orientations WCAG 1.3.4
Keyboard Accessible
Users are able to use the keyboard to navigate through the menu using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ to activate.WCAG 2.1.1: Keyboard This navigation is done in sequential and logical order WCAG 2.4.3: Focus Order and focus can move away from the component as needed. WCAG 2.1.2: No Keyboard Trap
Hover and Focus State
The actionable items each have distinctive styling on hover/focus to provide a visual cue to the user that the element is focused and there is an action that can be taken. WCAG 1.4.13: Content on hover or focus
Color Contrast
A contrast ratio of at least 4:5:1 between text and background color is ensured to enhance readability. WCAG 1.4.3: Contrast (minimum)
Responsive Design
The component scales in relation to the to the screen size to prevent truncating content and reflows properly when zoomed up to 200% without horizontal scrolling WCAG 1.4.10: Reflow
Consistent
Styles are applied consistently including line height, font style, weight, spacing and color of text. WCAG 1.4.12: Text Spacing
Layout
Guidelines
Standard links may be turned off and on, but new ones can't be added.