Accessibility review of Service List Item component proposal #38
Description
This issue will be considered done once a full accessibility audit/review and evaluation have been completed for the proposed "service list item" component.
Discussed in uswds/uswds#6439
Originally posted by bellepx0 March 12, 2025
Component name
Service List Item
Component description
Related Resources
- Help users to...Manage benefits and tools pattern proposal
- Design: Figma
- Veterans Affairs Design System Documentation on Service List Item
- Veterans Affairs Design System Documentation on "Help users to…Manage benefits and tools" pattern
The Service List Item component provides a structured, scannable way for Veterans to track and manage their VA benefits and services. As part of the "Help users to… Manage benefits and tools" pattern, this component ensures that critical benefit details, statuses, and next steps are presented clearly, consistently, and accessibly across VA digital products.
By summarizing key benefit information in a concise, interactive format, the Service List Item:
- Consolidates benefits information into a structured, easy-to-scan format, reducing the need to search across multiple sources.
- Improves usability and navigation by standardizing how services are presented across different VA systems.
- Reduces cognitive load with clear, actionable service descriptions that help Veterans quickly understand their benefits.
- Encourages engagement by making it easier for Veterans to find and act on relevant benefits.
When multiple Service List Items are displayed together, they form a Service List, allowing users to easily compare different benefits and track their statuses in one place. This structured approach reduces the time and effort required to manage VA benefits, making the process more intuitive and efficient.
Please see the Help users to...Manage benefits and tools pattern proposal for more information.
Why USWDS needs this component
The Service List Item component is a crucial tool in improving user navigation, service discovery, and engagement across federal agencies. While originally developed to help Veterans navigate VA benefits, its potential extends far beyond the VA, offering a scalable, adaptable solution for other government agencies facing similar challenges.
Key Interactions and Gaps in USWDS
USWDS provides many fundamental components, but it lacks a standardized, reusable pattern specifically designed to help users discover, understand, and take action on available services. The Service List Item component addresses these gaps by:
- Providing structured service presentation – Many federal agencies struggle with disorganized, difficult-to-navigate service/benefit listings. This component ensures consistency in how services are displayed.
- Reducing cognitive load – Government benefits and services can be complex. This component simplifies information delivery using clear, user-centered design principles.
- Improving discoverability and engagement – A common issue across agencies is that users don’t know what services they are eligible for. This component enhances visibility and encourages action.
- Standardizing across agencies – Many agencies reinvent the wheel, creating custom solutions for service listings. A USWDS-backed component would reduce duplication of effort and ensure best practices are applied consistently.
Additional federal agencies that could use the Service List Item component
- Social Security Administration (SSA) – To help citizens understand available retirement, disability, and survivor benefits.
- IRS – To guide taxpayers through filing status, deductions, and refund tracking.
- U.S. Citizenship and Immigration Services (USCIS) – To simplify access to immigration benefits and processing updates.
- Department of Education (DOE) – To assist students in navigating federal financial aid and loan forgiveness programs.
- Centers for Medicare & Medicaid Services (CMS) – To enhance Medicare and Medicaid enrollment guidance.
How Service List Item Supports Federal Laws and Policies
- 21st Century Integrated Digital Experience Act (IDEA) – Ensures government websites are modern, easy to navigate, and user-friendly. This component improves service accessibility and usability in line with IDEA’s requirements.
- OMB Circular A-11, Section 280 (Customer Experience Guidance) – Aligns with best practices in digital service delivery, focusing on clarity, simplicity, and user-centered design.
- Executive Order on Transforming Federal Customer Experience (CX) and Service Delivery – This component supports the White House's initiative to improve public trust in government services by making service information more accessible, actionable, and user-friendly.
How the component works
The Service List Item is a reusable UI component designed to summarize and present key information about a benefit, tool, or service in a structured, easy-to-scan list format. It enhances user experience by providing clear, actionable insights into services while ensuring accessibility and consistency.
Each Service List Item includes key elements that help users quickly understand their status, required actions, and next steps. The component also is part of a list-based pattern, where multiple Service List Items are vertically stacked to create a cohesive "Service List."
Component Structure & Key Elements
A Service List Item consists of the following elements:
1) Header (Required)
- Displays the main title of the service or tool.
- Includes a chevron indicating that it links to more details.
- Can optionally include an icon to visually represent the service.
- Consistency is key: if one item in the list includes an icon, all should.
- States include:
- Default: The link and chevron are the standard vads-color-link.
- Hover: The link becomes underlined and both the link and chevron turn to vads-color-link-active. There is no background shading.
- Focus: Similar to the default state, but with a yellow outline. The outline is similar to the focus state of action links.
- Active: Similar to the default state, but underlined and with a yellow outline. The outline is similar to the focus state of action links.
- Visited: Similar to the default state, but the color of the link and chevron turn to vads-color-link-visited once the link has been visited.
2) Status (Required)
- Displayed as a gray Tag component.
- Communicates the service/tool's current state (e.g., Active, Pending, In Progress).
- Statuses simplify complex internal state changes, ensuring clarity for users.
3) Critical Information (Under Development-Team will be working on this next)
- Highlights urgent or important updates about the service.
- Directs the user to immediate action paths.
- Future enhancements will improve color contrast, focus states, and accessibility.
4) Details (Required)
- Provides contextual information in a "Label: Value" format, such as:
"Approved on: May 5, 2011"
"Next appointment: March 10, 2025" - Can display 1 to 5 pieces of key information per item.
5) Additional Link (Optional)
- Some items may include a supplemental link for further actions.
- States include:
- Default – Standard hyperlink styling.
- Hover, Focus, Active, and Visited states to ensure accessibility.
Real-world examples
No response
When to use this component and when to consider something else
When to use Service list item
When you want to show benefits or tools the user is currently enrolled in or has access to.
When not to use Service list item
- When you are representing items that are neither a benefit nor a tool. Do not use the same visual appearance or structured data to represent items that are not a benefit nor a tool. If you want to group short, related pieces of information that are not benefits or tools, consider using the Card component.
- When you want to put links, radio buttons, or checkboxes in a container. There are some components that have variations with containers around them. These might look like Service list items, but they are distinct. Service list items are exclusively for benefits and tools, offer a brief snapshot of information, and link to another page with more details. The guidance within the Not a card section of the Card component also applies to the Service list item.
- When you want to show benefits within a form. Do not use this component to show benefits or services in an interactive list with checkboxes or other selection methods.
- When you want to display content in an unordered list. Content that can be shared with bullet points should use an unordered list. Find more information in the List component and the Bulleted list style guide.
Usability considerations
Teams used the Card component before this component existed. When evaluating if your team needs to use Service list items instead of cards, consider if your content is either a “benefit” or “tool,” as defined in the Usage section.
Statuses should be normalized with CAIA so that the same terms are used when the same meanings are intended (for example, “pending” versus “in-progress”). CAIA will define which of those is correct across benefits and tools.
Accessibility considerations
No response
Who’s involved
VA Authenticated Experience Design Pattern team
Adam Whitlock @adamwhitlock1 - Engineering Lead
Belle Poopongpanit @bellepx0 - Engineer
Christine Rose Steiffer @ChristineRoseSteiffer - Design Lead
Lynn Stahl @msbtterswrth - Product Manager
Becky Phung @beckyphung - Product Owner