Skip to content

Add WCAG 2.1 AA compliance and accessibility tooling #116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
Copilot wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Add WCAG 2.1 AA compliance and accessibility tooling #116

Copilot wants to merge 4 commits into from

Conversation

Copy link
Contributor

Copilot AI commented Nov 23, 2025 •
edited
Loading

Implements WCAG 2.1 Level AA accessibility standards and installs canonical a11y tooling for Vue/Nuxt apps.

Changes

Tooling

  • Installed eslint-plugin-vuejs-accessibility with recommended config
  • Runs in existing CI lint workflow

WCAG Fixes

Form semantics (1.3.1, 3.3.2)

  • Associated labels with inputs via for/id attributes
  • Added type="url" for semantic input validation

Interactive elements (4.1.2, 2.1.1)

  • Added role="button" to all <dt> elements with event handlers
  • Added keyboard support (Enter/Space) for interactive elements
  • Added aria-label attributes for screen readers

Dynamic content (4.1.3)

  • Loading states: role="status" + aria-live="polite"
  • Error messages: role="alert" + aria-live="assertive"

Screen reader support (1.1.1)

  • aria-hidden="true" on decorative emojis (✅, ❌, 🎬, 🏁, 🔗)
  • .sr-only text alternatives ("Yes", "No", "opens in new tab")

Document language (3.1.1)

  • Added lang="en" to <html> via nuxt.config

Example

Before:

<dt tabindex="0" @mouseenter="...">Cache key</dt>

After:

<dt 
  role="button"
  tabindex="0" 
  :aria-label="`Cache key: ${tooltip}`"
  @mouseenter="..."
  @keydown="handleKeyDown">
  Cache key
</dt>

Testing

Added 22 accessibility-specific tests covering ARIA attributes, keyboard navigation, and screen reader support.

Screenshots

Form with proper label associations:
Form accessibility

Error state with ARIA alert role:
Error with alert

Original prompt

This section details on the original issue you should resolve

<issue_title>Accessibility review</issue_title>
<issue_description>Review this app. Identify violations of the WCAG guidelines. Fix any identified issues. Make sure there's test coverage for a11y stuff. If there's canonical a11y tooling I should be using in this nuxt app (e.g. some sort of eslint plugin), install it, configure it appropriately, make sure it runs in CI (if necessary), and make it all green.</issue_description>

Comments on the Issue (you are @copilot in this section)

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI and others added 3 commits November 23, 2025 14:08
@serhalp
Add accessibility improvements: eslint plugin, ARIA attributes, scree…
3b51f15 
…n reader support

Co-authored-by: serhalp <1377702+serhalp@users.noreply.github.com>
@serhalp
Fix lint trailing spaces in accessibility test files
11985a4 
Co-authored-by: serhalp <1377702+serhalp@users.noreply.github.com>
@serhalp
Add keyboard event handlers to all role=button elements per code review
29c50b4 
Co-authored-by: serhalp <1377702+serhalp@users.noreply.github.com>
Copilot AI changed the title [WIP] Review app for WCAG guideline violations Add WCAG 2.1 AA compliance and accessibility tooling Nov 23, 2025
Copilot AI requested a review from serhalp November 23, 2025 14:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@serhalp serhalp Awaiting requested review from serhalp

Assignees

@serhalp serhalp

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Accessibility review

2 participants

@serhalp