Components

Footer accessibility tests

Any USWDS footer component should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Footer accessibility status

The USWDS team did 15 tests based on WCAG 2.1 AA success criteria.

Overview of recent accessibility test results:

Total tests	Passed	Passed with exceptions	Conditional	Failed
15	13	0	2	0

Overview of recent accessibility test results:

• Passed: 13
• Passed with exceptions: 0
• Conditional: 2
• Failed: 0

Test the footer in your project

USWDS tests components in isolation. You need to test the footer component in the context of your own site to ensure compliance with Section 508 accessibility standards.

Use the checklist below.

Follow the "how to test" instructions for each type of assistive technology.

Anyone can test for accessibility.

These quick manual tests don't require special equipment.

Footer accessibility checklist

• General tests
• Zoom magnification tests
• Keyboard navigation tests
• Screen reader tests

General tests

Select passing tests

In the big footer variant, the email input field announces its purpose. When you navigate to the email address input field in the big footer variant, you hear that the input expects the user’s email address. Additionally, the input field has the autocomplete="email" attribute.

• WCAG AA
• 1.3.5 Identify input purpose
• USWDS test status: Passed
• Last test: v3.9.0

• USWDS test status:
  Passed
• Last test: v3.9.0

Footer font meets color contrast requirements. When you use a color contrast checker to view the footer, contrast between the font color and background color is at least 4.5:1.

• WCAG AA
• 1.4.3 Contrast (Minimum)
• USWDS test status: Passed
• Last test: v3.8.1

• USWDS test status:
  Passed
• Last test: v3.8.1

Footer icons meet color contrast requirements. When you use a color contrast checker to view the footer, contrast between the icons and adjacent colors is at least 3:1.

• WCAG AA
• 1.4.11 Non-text contrast
• USWDS test status: Passed
• Last test: v3.8.1

• USWDS test status:
  Passed
• Last test: v3.8.1

Links provide direct location description. You can read the text of any link in the footer to understand where the link will take you.

This can only be tested in your implementation of the component. Be sure to test this in your project.

• WCAG A
• 2.4.4 Link purpose (in context)
• USWDS test status: Conditional
• Last test: v3.8.1

• USWDS test status:
  Conditional
• Last test: v3.8.1

Form field instructions are visible in the big footer variant. When viewing a form field in the big footer, instructions for entering text are visible.

• WCAG A
• 3.3.2 Labels or instructions
• USWDS test status: Passed
• Last test: v3.8.1

• USWDS test status:
  Passed
• Last test: v3.8.1

Zoom magnification tests

USWDS performed these tests to check footer accessibility and usability for zoom magnification. For help performing your own zoom magnification tests, check out the resources in the expandable section below.

1. Navigate to a page on your website where the footer component is used.
2. Enlarge the view of your screen to 200%.
3. Once zoomed, use a mouse to complete the tests in the checklist.

---

Use one of the following methods to control screen magnification in your browser:

1. Windows OS: Click ctrl while using the scroll wheel on your mouse until you see "200%" appear in the top right of your screen. Or, click ctrl + + until you see "200%" appear in the top right of your screen. (To reset the zoom to the original value, click ctrl + 0.)
2. Mac OS: Click command + + until you see "200%" appear in the top right of your screen. (To reset the zoom to the original value, click command + 0.)
3. Browser settings: Customize your browser settings to display pages at 200%.

Select passing tests

Footer remains visible and functional when screen is magnified. When you zoom in to 200%, you can still see footer text and it doesn’t overlap with or get cut off by any other content.

• WCAG AA
• 1.4.4 Resize text
• USWDS test status: Passed
• Last test: v3.8.1

• USWDS test status:
  Passed
• Last test: v3.8.1

Footer elements are visible and functional when screen is magnified. When you zoom in to 400%, footer links and elements are stacked and visible. No left-to-right scrolling is required.

• WCAG AA
• 1.4.10 Reflow
• USWDS test status: Passed
• Last test: v3.8.1

• USWDS test status:
  Passed
• Last test: v3.8.1

Keyboard navigation tests

USWDS performed these tests to check footer accessibility and usability for keyboard navigation. For help performing your own keyboard navigation tests, check out the resources in the expandable section below.

1. Navigate to a page on your website where the footer component is used.
2. Using only your keyboard, press tab to navigate forward or shift + tab to navigate backwards until focus is on the footer.
3. Use the testing checklist to make sure all functionality works with keyboard navigation.

---

For instruction for using keyboard navigation, use this resource from WebAIM.

Select passing tests

Keyboard navigates through all elements in the footer. When you navigate through the footer with a keyboard, you can interact with every element inside the footer.

• WCAG A
• 2.1.1 Keyboard
• USWDS test status: Passed
• Last test: v3.8.1

• USWDS test status:
  Passed
• Last test: v3.8.1

Footer does not trap keyboard focus. When you navigate with a keyboard, you can easily move into and out of the footer.

• WCAG A
• 2.1.2 No keyboard trap
• USWDS test status: Passed
• Last test: v3.8.1

• USWDS test status:
  Passed
• Last test: v3.8.1

Focus indicator is clearly visible. When you use a keyboard to focus on footer elements, there will be a visible outline or other clear indication of focus.

• WCAG AA
• 2.4.7 Focus visible
• USWDS test status: Passed
• Last test: v3.8.1

• USWDS test status:
  Passed
• Last test: v3.8.1

Screen reader tests

USWDS performed these tests to check footer accessibility and usability for screen readers. For help performing your own screen reader tests, check out the resources in the expandable section below.

1. Navigate to a page on your website where the footer component is used.
2. Open a dedicated screen reading app or your operating system screen reader.
3. Test with both a keyboard and a mouse to complete the tests in the checklist.

---

Instructions for setting up the screen reader on your operating system:

1. VoiceOver for Mac: Getting started guide
2. Narrator for Windows: Complete guide to Narrator

Select passing tests

Screen reader announces image alt text. When you navigate through the footer using a screen reader, you hear descriptions for the logos and other meaningful images.

This can only be tested in your implementation of the component. Be sure to test this in your project.

• WCAG A
• 1.1.1 Non-text content
• USWDS test status: Conditional
• Last test: v3.8.1

• USWDS test status:
  Conditional
• Last test: v3.8.1

Screen reader announces footer navigation and region. When using a screen reader to navigate the footer, you hear “footer navigation” when focusing on the link list and “footer” when focusing on the outer region of the component.

• WCAG A
• 1.3.1 Info and relationships
• USWDS test status: Passed
• Last test: v3.8.1

• USWDS test status:
  Passed
• Last test: v3.8.1

In the big footer variant, screen reader announces cue to enter email. When using a screen reader to access the sign up form field in the big footer, you hear a prompt to enter your email address.

• WCAG A
• 1.3.1 Info and relationships
• USWDS test status: Passed
• Last test: v3.8.1

• USWDS test status:
  Passed
• Last test: v3.8.1

Screen reader focus follows logical content order. When you navigate through the footer with a screen reader, you hear the content announced in the same order that it appears on the page.

• WCAG A
• 1.3.2 Meaningful sequence
• USWDS test status: Passed
• Last test: v3.8.1

• USWDS test status:
  Passed
• Last test: v3.8.1

In the big footer variant, the screen reader announces the button role. When using a screen reader in the footer to access a sign up form, the button label announces as “button”.

• WCAG A
• 4.1.2 Name, role, value
• USWDS test status: Passed
• Last test: v3.8.1

• USWDS test status:
  Passed
• Last test: v3.8.1

Share your feedback

• Propose a new test
• Report an error

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date	USWDS version	Affects	Breaking	Description
2024-10-04	3.9.0	Guidance	No	Updated the status of the WCAG 1.3.5 test to “pass”. The reported issue was fixed in the USWDS 3.9.0 release. More information: uswds-site#2765
2024-08-13	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#2760