Send Message A11Y Audit - Make the Delivery status area accessible

[jonathanbobel]

Issue: Redesign Delivery Status Section for Improved Accessibility and Usability

Problem:
The current Delivery Status section uses what appears to be a tabbed interface with buttons labeled "Total," "Pending," "Delivered," and "Failed." However:

1. Clicking these buttons navigates to separate pages instead of behaving like a tabbed interface.
2. The visual design suggests a tabbed interface, creating a mismatch between user expectations and functionality.
3. For screen reader users and keyboard users, the interaction is confusing because:
   • Focus moves to the "Skip to Content" link instead of the content area for the selected status.
   • The experience feels disjointed due to page reloads.
4. This design hinders the ability to quickly compare statuses and lacks accessibility best practices for navigation.
5. Additionally, if a user lands on this page after sending a message there should be a "what's next" link area. Maybe return to ... Dashboard? Send Message? All of the above?

---

Proposed Solution:

Rework the Delivery Status section to either:

1. Convert the section to a true tabbed interface.
2. Redesign the section as a single page with data visualizations and download options.

---

Implementation Details:

Option 1: Convert to a Proper Tabbed Interface

1. Use WAI-ARIA roles to implement an accessible tabbed interface:
   • role="tablist" for the container of the tabs.
   • role="tab" for each tab button (e.g., Total, Pending, Delivered, Failed).
   • role="tabpanel" for the content area of each tab.
2. Ensure keyboard accessibility:
   • Use arrow keys to navigate between tabs.
   • Use the Tab key to move into the content of the selected tab.
3. Dynamically load and update content in the tab panels without a full page reload.

4. Add download buttons inside each tab to allow users to download reports for that specific status.

   Example Markup:

   
   <div role="tablist" aria-label="Delivery Status">
    <button role="tab" aria-selected="true" aria-controls="panel-total">Total</button>
    <button role="tab" aria-selected="false" aria-controls="panel-pending">Pending</button>
    <button role="tab" aria-selected="false" aria-controls="panel-delivered">Delivered</button>
    <button role="tab" aria-selected="false" aria-controls="panel-failed">Failed</button>
   </div>
   <div id="panel-total" role="tabpanel">Content for Total</div>
   <div id="panel-pending" role="tabpanel" hidden>Content for Pending</div>
   <div id="panel-delivered" role="tabpanel" hidden>Content for Delivered</div>
   <div id="panel-failed" role="tabpanel" hidden>Content for Failed</div>

Option 2: Redesign as a Single Page with Data Visualization

There has been exploration already in wireframe form on what a redesigned Delivery Status page might look like. Below is the latest iteration of the design:

This design consolidates the "Total," "Pending," "Delivered," and "Failed" statuses into a single page, replacing the current separate pages with a streamlined overview that uses data visualization.

---

Key Features of the Redesigned Page:

1. Data Visualization

   • A primary bar chart visually represents the breakdown of delivery statuses (Total, Pending, Delivered, and Failed).
   • The chart is accessible and includes a textual summary describing the data (e.g., "The chart shows 80% Delivered, 10% Failed, and 10% Pending").

2. Table of Detailed Data

   • Below the chart, a table presents the status data in a structured, accessible format for users who prefer text-based information or need more granular detail.
   • Example table:

     | Status    | Count | Percentage |
     |-----------|-------|------------|
     | Delivered | 800   | 80%        |
     | Failed    | 100   | 10%        |
     | Pending   | 100   | 10%        |

3. Message Example

   • Show the template that was used in the sending of this message

4. Downloadable Report

   • Download report button (CSV)

5. Responsiveness

   • The page layout adapts gracefully to different screen sizes, ensuring mobile, tablet, and desktop users can access the information easily.

---

Further Design Considerations:

If this option is chosen, additional thought should be put into refining the design to ensure it aligns with the rest of the site's visual and interaction patterns. Key considerations include:

• Consistency: Maintain alignment with the site's typography, color palette, and UI components to provide a cohesive experience.
• Scalability: Account for potential growth in data complexity, such as adding filters or pagination for larger datasets.
• Accessibility: Ensure all visual elements (charts, tables, buttons) are fully navigable and usable with assistive technologies.

---

Implementation Plan:

1. Design Refinement

   • Collaborate with stakeholders to finalize the visual design.
   • Ensure the design reflects the latest site-wide standards and guidelines.

2. Development

   • Implement the primary chart using an accessible charting library (e.g., D3.js with ARIA roles and labels).
   • Create downloadable report functionality for each status.
   • Develop the responsive layout, including the table for detailed data.

3. Accessibility Testing

   • Validate the chart’s accessibility with screen readers (e.g., VoiceOver, NVDA, JAWS).
   • Ensure keyboard navigation works seamlessly for all interactive elements.
   • Confirm compliance with WCAG 2.1 Level AA standards.

4. QA Testing and Feedback

   • Conduct usability testing to gather feedback from real users.
   • Make iterative improvements based on findings.

By consolidating the information into a single page with clear visualizations and structured data, this redesign will enhance usability and accessibility, providing a more cohesive and user-friendly experience for all.

---

Acceptance Criteria:

• [ ] The interface no longer uses misleading tab-like buttons that navigate to separate pages.
• [ ] Focus moves to the relevant content area after interaction, avoiding confusion for screen reader users.
• [ ] Create links to return to common actions in the account area (Dashboard, Send Message etc)
• [ ] If tabs are implemented:
  • Tabs follow WAI-ARIA guidelines and are fully keyboard accessible.
  • Content loads dynamically without full page reloads.
• [ ] If data visualizations are implemented:
  • Charts and graphs are accessible and include a text alternative.
  • Reports are downloadable via clearly labeled buttons.
• [ ] The design is tested with screen readers (VoiceOver, NVDA, JAWS) and keyboard navigation.
• [ ] The design provides a seamless and intuitive experience for all users.