Send Message A11Y Audit - Redesign Send Message Flow to Use USWDS Step Indicator

[jonathanbobel]

Issue: Redesign Send Message Flow to Use USWDS Step Indicator

Problem:
Currently, the Send Message flow relies on "Back" buttons for navigation. These buttons:

1. Lack clear context about the user's current location in the process.
2. Require linear navigation, making it difficult to review or jump back to a specific step.

This design can create frustration and confusion, particularly for users who need to confirm earlier steps or understand where they are in the flow.

---

Proposed Solution:

Replace the "Back" buttons throughout the Send Message flow with the USWDS Step Indicator component. This will:

1. Provide a clear visual indicator of the user’s progress.
2. Allow the user to clearly see what page is considered "back" in the navigation process.

---

Implementation Details:

1. Introduce the Step Indicator

• Add the USWDS Step Indicator at the top of the Send Message flow pages.
• Use a sequential or step-tracker format, depending on the flow structure.
• Example:

   <nav aria-label="Progress">
     <ol class="usa-step-indicator">
       <li class="usa-step-indicator__segment usa-step-indicator__segment--current" aria-current="true">
         Step 1: Start
       </li>
       <li class="usa-step-indicator__segment">
         Step 2: Select Template
       </li>
       <li class="usa-step-indicator__segment">
         Step 3: Review
       </li>
       <li class="usa-step-indicator__segment">
         Step 4: Send Message
       </li>
     </ol>
   </nav>

2. Replace Back Buttons

• Remove "Back" buttons on all steps.
• Provide navigation separately. Use navigation like a button group to step forward and backward through a form. (USWDS-recommended pattern)

3. Maintain Accessibility

• Ensure the Step Indicator is keyboard and screen-reader accessible:
  • Use semantic HTML and proper ARIA attributes (e.g., aria-current="true" for the current step).
  • Ensure focus management properly moves users to the selected step content.
• Example with focus management:

   document.getElementById('step-content').focus();

4. Highlight Current Step

• Visually and programmatically indicate the user’s current step with the usa-step-indicator__segment--current class and aria-current="true".

5. Test for Usability and Accessibility

• Validate that:
  • Users can easily identify their current step.
  • Users can navigate through specific steps without confusion.
  • All navigation works with assistive technologies (screen readers, keyboard navigation).

---

Steps to Implement:

1. Add the USWDS Step Indicator to the Send Message flow pages.
2. Remove the "Back" buttons and replace them with a button group with forward and backward navigation.
3. Update styles as necessary to match the application’s visual design while adhering to USWDS guidelines.
4. Test thoroughly for accessibility and usability.

---

Acceptance Criteria:

• [ ] A USWDS Step Indicator is implemented across all steps of the Send Message flow.
• [ ] The current step is visually and programmatically highlighted using aria-current="true".
• [ ] Users can navigate to previous steps directly by clicking on a related back button.
• [ ] Focus is managed properly when users navigate to a new step (e.g., focus moves to the step's heading or content).
• [ ] The Step Indicator is fully keyboard and screen-reader accessible.
• [ ] The design is visually aligned with USWDS standards and integrates seamlessly with the application.
• [ ] The entire flow is tested for usability with users and accessibility with tools like VoiceOver, NVDA, and JAWS.

---

References:

• USWDS Step Indicator Component
• WAI-ARIA Authoring Practices for Step Indicators
• USWDS Accessibility Guidance

---

This redesign will improve the user experience by providing clearer navigation and flexibility, while