Skip to content

Add WCAG accessibility support to front-end and admin UI #233

@akshayurankar48

Description

@akshayurankar48

Problem

The plugin currently lacks proper WCAG accessibility support in several areas:

Critical Issues

  • Star rating radio buttons have no labels — screen readers cannot identify what each radio button represents
  • Images use generic alt text like "1star", "gray", "recipe image", "product image" — not meaningful for assistive technology users

High Priority

  • No focus styles on interactive elements within snippet boxes — keyboard users cannot see which element is focused
  • No screen-reader-only CSS class for visually hidden but accessible text
  • Decorative star images not marked as aria-hidden, causing screen reader noise

Medium Priority

  • Snippet boxes lack ARIA landmark roles — screen readers cannot identify the semantic purpose
  • Admin meta box table used for layout lacks role="presentation"
  • Toggle.js show/hide does not manage aria-hidden state — hidden content may still be announced by screen readers

Expected Behavior

All schema snippet output and admin UI should be accessible to users relying on keyboard navigation and screen readers, following WCAG 2.1 Level AA guidelines.

Files Affected

  • css/style.css — Focus styles, screen-reader-only class
  • functions.php — Star ratings, image alt text, ARIA landmarks
  • init.php — Admin meta box table accessibility
  • js/toggle.js — ARIA state management

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions