Skip to main content Red Hat Design System logo Contribute on Github

Footer

Overview Style Guidelines Code Demos Accessibility

Keyboard interactions

Most elements in a footer are links, so users can press Tab to navigate from region to region.

Key Result
Tab Moves the focus to the next interactive element or section
Shift+Tab Moves the focus to the previous interactive element or section
Enter Opens or closes the language selector menu
Esc Closes the language selector menu if a language has focus

Focus order

A logical focus order helps keyboard users operate our websites. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly. The focus moves across regions of a footer from left to right and top to bottom.

Helpful tip

Users can skip opening the language selector menu, but the trigger still receives focus.

 Image of a footer showing groups of focus indicators in different regions with annotation numbers

Language selector

Users can open the language selector menu by pressing Enter if the trigger has focus. If they do, they can press Tab to move focus to the first language. Each language can receive focus from left to right and top to bottom.

Image of a footer with the language selector menu open showing the focus order of languages

When the focus is moved outside of the menu, the menu closes.

Image of a footer with the language selector menu open showing the menu closing when focus is moved

Additional guidelines

  • Content outside of a dialog cannot be interacted with or navigated to while the dialog is open
  • The Escape key should close the dialog
  • There should be at least one clickable button that closes the dialog
  • Long dialog content can still receive focus via keyboard if it overflows and a scrollbar appears
  • When a dialog closes, focus should return to the last focused item before the dialog was opened

ARIA Authoring Practices Guide (APG)

Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences.

View APG resources

Web Content Accessibility Guidelines

Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria.

© 2021-2024 Red Hat, Inc. Deploys by Netlify