Skip to content

feat: improve accessibility - ARIA labels, keyboard nav, screen reade…#138

Open
shresthbhargava wants to merge 1 commit into
Mrinalray:mainfrom
shresthbhargava:fix/accessibility-improvements
Open

feat: improve accessibility - ARIA labels, keyboard nav, screen reade…#138
shresthbhargava wants to merge 1 commit into
Mrinalray:mainfrom
shresthbhargava:fix/accessibility-improvements

Conversation

@shresthbhargava

Copy link
Copy Markdown

Closes #123

What's Changed

script.js

  • Added role="region" and aria-label to all result cards so screen readers announce scan outcomes
  • Focus is moved to the result div after every scan — screen readers immediately read the result
  • Scan button now uses aria-busy="true" while scanning and updates its aria-label to "Scanning URL, please wait..."
  • Theme toggle now uses aria-pressed and descriptive labels ("Switch to light/dark mode")
  • All decorative SVG icons marked aria-hidden="true" so screen readers skip them
  • Emoji status indicators wrapped with aria-hidden="true" + adjacent .sr-only text for screen reader meaning
  • Breakdown lists use role="list" + role="listitem" for proper screen reader navigation
  • Risk meter uses role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
  • Team grid gets role="list" with each card as role="listitem"
  • fillExample() updates aria-label on input to reflect filled value

index.html

  • Added type="button" to all buttons to prevent accidental form submission
  • Loader div gets role="alert" and aria-live="assertive"
  • Decorative SVGs marked aria-hidden="true"
  • Result div has aria-live="polite", aria-atomic="true", role="status"

style.css

  • Added :focus-visible outline using brand color #00ffb4 for keyboard users
  • Added :focus:not(:focus-visible) to remove outline for mouse users only
  • Added .sr-only utility class for screen-reader-only text

Testing

  • Tabbed through all interactive elements — logical focus order confirmed
  • Scan button, example chips, theme toggle, team toggle all keyboard accessible
  • Screen reader announces scan result immediately after completion

@Mrinalray

Mrinalray commented Jun 8, 2026

Copy link
Copy Markdown
Owner

@shresthbhargava add some screenshot & resolve the script.js conflict

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve Accessibility

2 participants