User stories
- As a user, I want external links in the footer to open in a new tab (when appropriate) so that I don’t lose my current page.
- As a keyboard user, I want to navigate through all footer links using the Tab key so that I don’t need a mouse.
- As a user, I want social media icons in the footer to be interactive and provide alt text so that I can access them with assistive technology.
- As a screen reader user, I want descriptive link text so that I understand where each link leads.
Test steps
Use these steps to check that the footer component has been implemented correctly:
- Verify visibility and structure:
- Ensure the footer is present on all pages and is positioned at the bottom of the page.
- Check that links are grouped under clear headings (e.g. Company, Support, Legal).
- Keyboard navigation:
- Use the Tab key to navigate through all footer links and interactive elements.
- Confirm that the tab order is logical and that focus indicators are visible.
- Screen reader compatibility:
- Turn on a screen reader (e.g., NVDA or VoiceOver).
- Navigate through the footer and verify that link text and section headings are announced correctly.
- Ensure that external links are announced as "opens in a new tab" if applicable.
- Accessibility checks:
- Verify that the text meets WCAG contrast standards.
- Check that all icons (e.g. social media) have appropriate alt text.
- Ensure that focus states are clearly visible.
- Responsiveness and functionality:
- Test on different screen sizes and devices to confirm the footer adapts properly.
- Click each link to ensure they lead to the correct destination.
- Verify that external links open in a new tab when expected.
|
Accessibility checklist |
|
|---|---|
|
User stories |
✅ |