Components
Footer - Minimal
Use with caution: Candidate
The minimal footer can be used when navigating away would prevent the user from easily accomplishing their main task.
- Contributors
- Ben Brasso (Agile 6)
- Ya-ching Tsao (CivicActions)
- Zach Park (Agile 6)
- Kristen McConnell (Ad Hoc)
Examples
Default
View va-minimal-footer in Storybook
Usage
When to use Footer - Minimal
- Reduce the chance of a user leaving a form, process, or task before completing the required steps. The minimal footer retains VA branding so that users still know they are on VA.gov. However, it removes elements of the standard footer, such additional navigation, in order to reduce the chances of users leaving a form or process before completing all the required steps and accomplishing their goal. While most forms support finishing the form later, we still prefer to keep users focused on the task at hand.
- A tasks that is time-sensitive. The minimal footer is also appropriate when a user must complete a task in a timely fashion and thus navigating away would put task completion at risk.
- An experience outside of the VA.gov site-wide information architecture. Some experiences do not exist within the information architecture of VA.gov or have already implemented a distinct navigation pattern and thus can also use the minimal footer.
How this component works
- Use with the Header - Minimal. The minimal footer should be used in conjunction with the minimal header.
Placement
- At the bottom of the page. The minimal footer appears at the bottom of the page.
Component checklist
Maturity
- Guidance
- Examples, usage, code usage, content considerations, and accessibility considerations are all complete.
- Research
- VFS team conducted research on this component which is linked from this page.
- Stability
- Component has been in production for more than 3 months with no significant issues found.
- Adoption
- Multiple teams have adopted this component.
Accessibility
- Accessible use of color
- Color is not used as the only visual means of conveying information (WCAG 2.2 1.4.1).
- Accessible contrast
- Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.2 1.4.3). Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.2 1.4.11).
- Keyboard interactions
- Follows WCAG 2.2 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions. All interactive elements can be selected and activated using the keyboard.
- Content zoom tested
- Component has been tested with the display set to 400% at 1280px viewport width to ensure that the component does not have overlapping text or elements and all interactive elements still operate.
- Tested in screen readers
- Tested with screen readers to ensure there are no issues with reading order, spelling, dynamic content, and interactive elements.
Code assets
- Variations
- Storybook includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
- Responsive
- Component depicted in all responsive breakpoints.
- Interactive states
- Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
- Tokens
- All design attributes (color, typography, layout, etc.) are available as tokens.
- Internationalization
- Describes i18n attributes.
Visual assets
- Variations
- Sketch library includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
- Responsive
- Component designed to work in all responsive breakpoints.
- Interactive states
- Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
- Tokens
- All design attributes (color, typography, layout, etc.) are available as tokens.
75% complete (12 of 16)
Legend:
- Complete
- Incomplete
- Not applicable