Skip to content
Tickets Please

Accessibility

Accessibility

Your event calendar must be usable by everyone, including visitors who navigate with keyboards, use screen readers, or have low vision. Tickets Please targets WCAG AA compliance across all front-end views and admin screens.

ARIA Landmarks

Tickets Please uses ARIA landmark roles to help assistive technologies identify page regions:

  • role="main" on the primary event content area.
  • role="navigation" on calendar navigation controls (month/list/day view switcher, pagination).
  • aria-label attributes on navigation elements to distinguish them from your theme’s own navigation (e.g., aria-label="Calendar navigation").

These landmarks allow screen reader users to jump directly to event content without tabbing through the entire page header and sidebar.

Skip Navigation

A skip navigation link renders before the calendar content area. It is visually hidden by default and becomes visible on keyboard focus. Activating it moves focus past the calendar navigation directly to the event listing or calendar grid.

This is critical for month view, where the calendar grid can contain 30+ focusable cells. Without skip navigation, keyboard users would need to tab through every cell to reach content below the calendar.

Keyboard Navigation

All interactive elements in Tickets Please are keyboard accessible:

Month View

  • Arrow keys navigate between calendar day cells.
  • Enter or Space activates the focused day cell, expanding its event list or navigating to the day view.
  • Tab moves focus between the calendar grid, navigation controls, and events bar.

List View

  • Tab moves between event cards.
  • Enter activates the focused event link.

Events Bar (Search and Filters)

  • Tab moves through search input, date filters, and category dropdowns.
  • Enter submits the search form.
  • Escape closes open dropdowns.

RSVP and Ticket Forms

  • Tab moves between form fields and buttons.
  • Enter or Space activates buttons and checkboxes.
  • Form validation errors are announced to screen readers via aria-describedby linking.

Focus Management

When dynamic content updates occur (AJAX loads, form submissions, filter changes), Tickets Please moves focus to the relevant result area:

  • After submitting a search or applying a filter, focus moves to the first result in the updated event list.
  • After submitting an RSVP form, focus moves to the confirmation message.
  • After adding a ticket to the cart, focus moves to the cart update notification.

This prevents keyboard users from losing their place in the page after dynamic updates.

Color Contrast

Tickets Please provides utility methods for checking color contrast ratios. These are used internally for:

  • Ensuring event category colors meet WCAG AA contrast requirements (4.5:1 for normal text, 3:1 for large text) against their backgrounds.
  • Validating that custom template color choices remain accessible.

If you assign custom colors to event categories, verify that text over those colors meets contrast requirements. Tools like the WebAIM Contrast Checker can help.

Screen Reader Support

Visually Hidden Text

The .screen-reader-text CSS class hides content visually while keeping it accessible to screen readers. Tickets Please uses this for:

  • Labels on icon-only buttons (e.g., “Previous month”, “Next month” on navigation arrows).
  • Descriptive text for status indicators (e.g., “Sold out” on a ticket that only shows a visual badge).
  • Table column headers in compact views where visual headers are omitted.

Live Regions

Dynamic content updates use aria-live="polite" to announce changes without interrupting the screen reader’s current output:

  • RSVP submission confirmations.
  • Cart quantity updates.
  • Filter result counts (e.g., “Showing 5 events”).

The polite setting ensures announcements wait until the screen reader finishes its current speech, preventing a jarring experience.

Admin Screen Accessibility

Admin screens follow WordPress’s built-in accessibility patterns:

  • List tables use proper <th scope="col"> headers.
  • Bulk action checkboxes have associated labels.
  • Meta boxes use <fieldset> and <legend> for grouped fields.
  • Form validation errors include aria-invalid="true" on affected fields.

The Check-in and Attendees admin pages use the same WP_List_Table markup that core WordPress uses, inheriting its keyboard accessibility.

Common Questions

Does Tickets Please pass automated accessibility audits? Tickets Please targets WCAG AA compliance. Run automated tools like axe or Lighthouse on your site to verify. Note that automated tools catch approximately 30-40% of accessibility issues — manual keyboard and screen reader testing is also recommended.

Can I disable the skip navigation link? The skip link is visually hidden and only appears on keyboard focus. It does not affect your visual design. Removing it would harm keyboard accessibility, so no setting exists to disable it.

Do embedded Google Maps meet accessibility requirements? Google Maps embeds have limited keyboard accessibility. Tickets Please includes descriptive text (venue name and address) alongside the map so that screen reader users have access to the location information even if the map itself is not fully navigable.

Are email notifications accessible? Ticket confirmation and stock alert emails use semantic HTML with proper heading hierarchy and alt text on images. They are compatible with major email clients’ screen reader support.

How do AJAX-loaded events affect screen readers? The aria-live="polite" region announces when new events load. Screen reader users hear a summary of the update (e.g., “6 events loaded”) without losing their current focus position.

Does the month view calendar work with screen readers? Yes. Each day cell includes screen reader text with the full date and event count. The grid uses role="grid" with role="gridcell" on individual cells, following the WAI-ARIA grid pattern.

Next Steps

  • Display Settings — Configure event templates that inherit accessibility markup.
  • Timezone Management — Visitor timezone display includes accessible markup for time conversions.
  • Hooks Reference — Use tickets_please_frontend_event_details to add custom accessible content.