Accessibility,UX

Improving Link Discoverability & Accessibility with Action Card Refactor

Refactored a mixed set of links and buttons into a unified, accessible action card system using Angular Material, improving link discoverability, keyboard navigation, and visual consistency across the registration confirmation experience.

AngularAngular MaterialAccessibilityWCAGUXSCSSResponsive Design
4Interactive Elements Refactored
WCAG-AlignedAccessibility Improvements
100%Layout Consistency

The Problem

The registration confirmation page contained a mix of anchor links and button elements styled inconsistently, making it difficult for users to visually identify actionable items.

Interactive elements lacked clear affordances such as consistent link styling and hover behavior, reducing discoverability and increasing cognitive load for users.

From an accessibility perspective, the component relied on non-semantic elements with inconsistent keyboard behavior and screen reader output, creating potential usability barriers.

Additionally, layout inconsistencies caused misalignment between tiles, uneven spacing, and unpredictable text wrapping across breakpoints.

What I Did

  • Replaced disparate anchor and button elements with a unified "action card" pattern using Angular Material `mat-card`, ensuring consistent structure and styling.
  • Converted all actionable elements to behave as links, using native anchors where possible and aligning interaction patterns across all tiles.
  • Applied global link color styling and hover underline behavior to improve discoverability and meet accessibility expectations.
  • Refactored layout from flex-based positioning to a responsive CSS grid system, enabling consistent alignment and predictable spacing across breakpoints.
  • Normalized spacing, typography, and line-height to eliminate visual inconsistencies and ensure consistent text wrapping.
  • Adjusted grid constraints and icon spacing to closely match the legacy layout while improving responsiveness.
  • Ensured keyboard accessibility with proper focus states and interaction handling, and improved screen reader behavior through semantic structure and labeling.
  • Removed Angular Material default visual chrome (backgrounds, overlays) to align with link-based interaction design while preserving accessibility affordances.