Accessibility
For site administrators ensuring events are accessible to all visitors.
NetterTech Events has been tested against all WCAG 2.2 Level AA success criteria and is conformant. Several features are built into the plugin templates. Others depend on choices you make as a site administrator.
What’s built in
ARIA labels and roles. Navigation regions, filter forms, date sections, check-in statistics, and pagination all carry aria-label attributes. Interactive elements use role="region", role="search", role="checkbox", and role="status" where appropriate. Decorative icons carry aria-hidden="true" to suppress them from screen reader output.
Live regions. Status updates – ticket quantity changes, check-in counter increments, filter results, waitlist confirmations, and scan results – are announced automatically via aria-live="polite" or aria-live="assertive". Assistive technologies receive these updates without requiring focus movement.
Keyboard navigation. The ticket quantity form uses labeled inputs with aria-describedby tied to stock status. Check-in toggle buttons carry aria-checked state. The scanner panel toggle uses aria-expanded and aria-controls. The export menu uses the menu/menuitem pattern. All interactive controls are reachable and operable by keyboard.
aria-current for navigation context. Archive navigation (Upcoming / Past), date filter tabs, occurrence sibling lists, and pagination mark the current page or selection with aria-current.
Reduced motion support. Event card transitions, button transitions, and archive navigation transitions are suppressed when a visitor’s OS is set to Reduce Motion (prefers-reduced-motion: reduce). The calendar, carousel, and grid layouts respect this preference as well.
Screen reader utility class. nte-sr-only is available for visually hiding content that should remain accessible to screen readers – ticket form status messages use this by default.
Atkinson Hyperlegible font. Where your theme supports it, the plugin inherits the Atkinson Hyperlegible typeface, designed by the Braille Institute for maximum legibility. The plugin enforces a minimum rendered font size of 12px across all text.
Your responsibilities
Color contrast. The --nte-color-primary default (#2563eb on white) passes WCAG AA for normal text. If you change the primary color via Settings or CSS, verify the new combination meets a 4.5:1 contrast ratio for normal text and 3:1 for large text. Use WebAIM Contrast Checker or Colour Contrast Analyser before publishing.
Event images. The plugin renders event featured images with the event title as the alt text fallback. If your event image conveys information beyond the title, add descriptive alt text to the media library attachment.
Event descriptions. Descriptions are rendered as-is from the WordPress editor. Use proper heading hierarchy within the description, and avoid conveying information through color alone.
Keyboard navigation reference
| Interface | Keyboard behavior |
|---|---|
| Event archive | Tab through event cards; Enter on card link |
| Filters | Tab to search input and category select; Enter to apply |
| Pagination | Tab to Previous/Next buttons; Enter to navigate |
| Ticket form | Tab through quantity inputs; Enter to add to cart |
| Waitlist panel | Tab to Join Waitlist button; Enter to expand form |
| Check-in list | Tab to attendee toggle buttons; Space to check in |
| Scanner panel | Tab to Open Scanner button; Escape to close |
Testing recommendations
- Chrome DevTools Accessibility panel – inspect ARIA tree and check for missing labels
- WAVE (wave.webaim.org) – identifies missing alt text, contrast failures, and structural issues
- axe DevTools (browser extension) – WCAG-mapped rule violations with remediation guidance
- Keyboard-only walkthrough – tab through each major view and confirm all controls are reachable and operable