Quick Links
Quick Links provide fast access to popular services, important pages, and frequently used resources. Use them to highlight key actions users need to take, create navigation shortcuts, and improve discoverability of essential content. The component supports various layouts including grids, sidebars, and can include icons and descriptions to enhance usability and visual hierarchy.
Do
- Use clear, descriptive titles that immediately communicate the destination or action (e.g., "Forms & Documents", "Online Services").
- Group related links logically to help users find what they’re looking for quickly.
- Include helpful descriptions when the title alone might not provide enough context.
- Use meaningful icons that reinforce the link’s purpose and improve visual scanning.
- Maintain consistent styling across all quick links within the same section or page.
- Prioritize the most important links by placing them first or using visual hierarchy.
- Test with real users to ensure the links match their mental models and expectations.
- Keep descriptions concise but informative to avoid overwhelming users.
Don’t
- Don’t use generic titles like "Click Here", "More Info", or "Link" without context.
- Don’t overcrowd sections — limit to
6items per group for optimal usability. - Don’t use icons that don’t clearly relate to the content or action.
- Don’t mix different visual styles within the same quick link group.
- Don’t forget mobile users — ensure touch targets are adequate and layouts work on small screens.
- Don’t use outdated or broken links — regularly audit and maintain quick link destinations.
- Don’t rely solely on icons to convey meaning — always include descriptive text.
- Don’t make descriptions too long — keep them to one or two sentences maximum.
Grid Layout
Multiple quick links arranged in a responsive grid pattern. Use a grid layout to present several related links in a clear, scannable format. This pattern helps people quickly find common services or information, especially on pages with service directories, without needing to read long lists.
Government Services Quick Links
Easily find and access popular Government of the Northwest Territories services and information.
Grid with Title Only
Multiple quick links arranged in a clean grid layout with titles only. Use this layout to display a list of related links using titles only. It works well when link text is clear on its own and when you need to show many options without adding descriptions.
Popular Links
Accessibility Best Practices
Screen Reader Support
- Descriptive link text: Use clear, specific titles that make sense when read out of context by screen readers.
- Meaningful descriptions: Provide additional context through body text that helps users understand the destination.
- Proper link semantics: Use semantic HTML with appropriate link elements and ARIA attributes when needed.
- Icon accessibility: Ensure icons have proper alt text or are marked as decorative when they don’t add meaning.
Keyboard Navigation
- Full keyboard access: All quick links are accessible via Tab key navigation and activated with Enter.
- Logical tab order: Links follow the natural reading order and visual layout of the page.
- Focus indicators: Clear visual focus states help keyboard users identify their current position.
- Skip navigation: Consider skip links for large groups of quick links to improve navigation efficiency.
Visual Accessibility
- High contrast ratios: All text meets WCAG AA contrast requirements against background colors.
- Multiple visual cues: Information is conveyed through text, icons, and layout, not color alone.
- Adequate sizing: Touch targets meet minimum size requirements (44px) for mobile accessibility.
- Clear visual hierarchy: Different quick link styles are visually distinct and purposeful.
Content Guidelines
- Action-oriented language: Use clear, specific titles that describe the destination or service.
- Consistent terminology: Use the same words for the same services throughout your site.
- Appropriate context: Provide enough information so users can make informed decisions about where to navigate.
- Scannable content: Structure text so users can quickly identify relevant links through visual scanning.
Implementation Considerations
- Responsive design: Quick links adapt gracefully to different screen sizes and orientations.
- Maintenance planning: Establish processes for regularly reviewing and updating quick link destinations.
- Analytics integration: Track quick link usage to optimize placement and content based on user behavior.