Skip to content

[A11y] Add aria-labels to pagination and icon buttons for screen readers #59

@knoxiboy

Description

@knoxiboy

Problem

The current pagination controls and various icon buttons (like edit, delete, and navigation icons) do not feature aria-label descriptors. For visually impaired users relying on screen readers, these elements are voiced as generic "button" or "clickable", rendering the interface difficult to navigate.

Expected Behavior

Every button featuring strictly icon representations (without text children) should contain an explicit, descriptive aria-label (e.g., aria-label="Previous page", aria-label="Delete entry").

Target Files

  • Files inside src/app/resume-builder/components/ (specifically pagination panels and icon-based action buttons)
  • SVG wrap elements or layout icon components in src/app/components/

Suggested Steps

  1. Audit icon-only buttons across the interactive workspace pages.
  2. Inject descriptive aria-label properties.
  3. Validate using a browser accessibility scanner (like Lighthouse or axe-core) to ensure zero accessibility warnings on clickable elements.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions