Footer

The footer provides essential site-wide navigation and branding for all GNWT websites. It creates a consistent experience across the government web presence with the distinctive GNWT curve graphic, key navigation links, and official branding. Use the footer on every page to help users find important information and maintain visual identity.

Do

  • Include all essential navigation links: Phone Directory, Terms of Use, Accessibility, Contact, News, and Social Media Directory.
  • Use the standard GNWT curve graphic to maintain brand consistency across all government sites.
  • Ensure footer navigation is accessible with proper ARIA labels and semantic markup.
  • Place the GNWT logo in the branding area with appropriate sizing (max-width: 12.688rem).
  • Use the dark theme variant (data-bs-theme="dark") for proper contrast and readability.
  • Test keyboard navigation to ensure all footer links are accessible without a mouse.
  • Maintain consistent spacing and layout using the established grid system.
  • Include proper focus indicators for all interactive elements.

Don’t

  • Don’t modify the GNWT curve graphic colors or proportions — maintain brand standards.
  • Don’t add too many navigation links — keep the footer focused on essential site-wide links.
  • Don’t use light text on light backgrounds — always use the dark theme for proper contrast.
  • Don’t make footer links too small — ensure adequate touch targets for mobile users.
  • Don’t forget to include proper alt text and ARIA labels for branding elements.
  • Don’t break the responsive layout — test footer behavior on all screen sizes.
  • Don’t use custom colours that don’t meet accessibility contrast requirements or interfere with the visual identity.
  • Don’t remove the container structure — maintain proper content width and alignment.

When to use

  • On all official GNWT websites and services.
  • To reinforce brand trust and provide users with reliable, secondary navigation options.
  • To provide a consistent way to access cross-site utilities such as accessibility policies, social media directories, and contact directories.

Key Features

  • Navigation Menu: Includes essential footer menu links.
  • GNWT Branding: Official Government of Northwest Territories logo and branding elements.
  • Curve-in-motion Graphic: Distinctive blue wave design that serves as the visual signature for GNWT sites.
  • Responsive Design: Adapts to different screen sizes with appropriate spacing and layout adjustments.
  • Dark Theme: Uses Bootstrap’s dark theme variant for proper contrast and accessibility.

English Footer

The global site footer component is a standard element for the GNWT website. It showcases the footer layout with navigation links, branding, and the signature GNWT curve-in-motion graphic.

This component must be included on every page as the global site footer, providing consistent navigation and branding across the entire GNWT web presence.

Loading preview...
Open example in a new tab

French Footer

French-language version of the site footer, with translated labels and links.

Loading preview...
Open example in a new tab

Accessibility Best Practices

Screen Reader Support

  • Descriptive link text: Use clear, specific text that describes the destination ("Phone Directory" not "Directory").
  • ARIA labels for clarity: Use aria-label to provide additional context when link text alone might be ambiguous.
  • Proper semantic structure: Use <footer> elements with role="contentinfo" and <nav> elements for navigation.
  • Hidden descriptions: Uses visually-hidden class to provide additional context for screen readers when needed.

Keyboard Navigation

  • Logical tab order: Footer links follow natural reading order from left to right, top to bottom.
  • Skip to content: Footer appears after main content in tab order, allowing users to skip if desired.
  • Focus indicators: Clear visual focus states with custom blue focus ring for brand consistency.
  • Graphic exclusion: SVG graphics marked with focusable="false" and tabindex="-1" to prevent keyboard focus.

Visual Accessibility

  • High contrast: White text on dark background meets WCAG AA contrast requirements (4.5:1 minimum).
  • Focus visibility: Custom focus ring color ($blue-400) provides clear indication of keyboard focus.
  • Responsive design: Footer maintains readability and usability across all screen sizes and zoom levels.
  • Touch targets: Navigation links have adequate padding for mobile touch interaction (minimum 44px target area).

Content Guidelines

  • Clear link text: Use descriptive text that explains the destination ("Phone Directory" not "Directory").
  • Consistent terminology: Maintain same link text across all GNWT sites for user familiarity.
  • Essential links only: Limit footer navigation to site-wide, essential links that users expect to find.
  • Proper hierarchy: Use visual hierarchy to distinguish between different types of footer content.

Implementation Considerations

  • Brand consistency: Always use official GNWT curve graphic and logo assets without modification.
  • Dark theme: Footer requires data-bs-theme="dark" for proper styling and contrast.
  • Container structure: Maintain Bootstrap container and grid system for consistent layout.
  • Performance: SVG graphics are optimized and include proper caching headers.

ARIA Attributes in Use

  • role="contentinfo" - Identifies footer as a landmark for screen reader navigation.
  • aria-labelledby - Connects navigation sections to their descriptive headings.
  • aria-describedby - Provides additional context for complex links when needed.
  • aria-hidden="true" - Hides decorative SVG graphics from screen readers.
  • focusable="false" - Prevents SVG elements from receiving keyboard focus.
Mis à jour: 06 mars 2026