We treat WCAG 2.2 Level AA as our engineering target for public pages. The DJ Calendar is partially conformant: core discovery flows (homepage grid, search, calendar, artist/city/venue/show pages, articles, FAQ, and member login) are designed with accessibility in mind, but we have not completed a formal third-party audit of every URL. Known gaps are listed under Known limitations below.

We prioritize fixes that block access to tour listings, ticket links, search, or account sign-in.

• WCAG 2.2 Level AA — reference standard for new and refreshed templates
• Semantic HTML — <main>, <nav>, headings, lists, tables, and native controls before custom widgets
• WAI-ARIA 1.2 — combobox search, dialogs, tab lists, toggle buttons, and live regions only where HTML alone is insufficient
• Plain language — show facts, FAQ answers, and hub intros written for humans first; machine-readable JSON-LD is additive
• Progressive enhancement — crawlable HTML lists and feeds remain available when JavaScript is disabled or fails

• Skip links — on major public pages, a skip link moves focus to #main-content (or page-specific targets such as #account-main on login)
• Document language — lang="en" on the root element
• Page titles — unique, descriptive <title> values via our SEO layer
• Heading structure — one primary <h1> per page; sections use h2 / h3 in order
• Visible focus — :focus-visible rings on links, buttons, pills, cards, calendar days, and search results; high-contrast mode respected via forced-colors rules in a11y.css
• Touch targets — mobile styles target at least 44 px tap areas on primary controls
• Live announcements — a visually hidden aria-live="polite" region (#a11y-live) reports search results, grid filter changes, FAQ expansions, favorites, and reactions
• Reduced motion — hover audio previews and non-essential motion respect prefers-reduced-motion: reduce
• Breadcrumbs — aria-label="Breadcrumb"; current page marked aria-current="page"
• Link purpose — ticket, artist, city, and venue links use descriptive text; sponsored outbound ticket links include rel="noopener noreferrer sponsored"

All primary actions are reachable with Tab / Shift+Tab. Interactive patterns also support the keys below.

Header artist search

The unified search field on the homepage and sticky header uses the combobox pattern:

• Visible label (screen-reader text: “Search artists, cities, and venues”)
• role="combobox" with aria-expanded, aria-controls, and aria-activedescendant while browsing results
• Results exposed as role="option" with aria-selected on the active row
• Result counts announced via the live region after each query

City & venue directory search

The cities and venues hubs reuse the same keyboard-friendly dropdown pattern for filtering long directories.

Mobile navigation

• Menu button exposes aria-controls and aria-expanded
• Backdrop click and Escape close the panel
• Login / register entry points remain reachable inside the mobile nav

Homepage view modes

Rank, Near Me, and Calendar views sync aria-hidden on panels so assistive technologies focus on the active view only. Filter changes are announced with the number of visible artists.

• Artist cards — entire card is a single link with rank, name, and location text; preview audio on hover is disabled when reduced motion is requested
• Favorites (star) — toggle announces when an artist is added or removed from favorites (members)
• Reaction bar — Fire / Love / Hype buttons use aria-pressed; successful toggles are announced
• Weekend schedule — collapsible block with aria-expanded on the toggle; show rows are plain links to artist and venue pages
• Homepage FAQ — native <details> / <summary> elements
• Featured articles — linked headlines with readable excerpts

Calendar & date hubs

• Month grid — days are focusable controls (role="button") with arrow-key navigation
• Plain-text crawl list — below the visual grid, a semantic HTML list of shows by date supports assistive tech and search engines
• Tonight & This week — grouped show lists with the same crawl-friendly HTML pattern
• Full calendar — month navigation controls are buttons with visible labels

Show pages

• Structured facts list: artist, date, venue, city, and status
• Ticket buttons and vendor links appear only when tickets are available; sold-out shows are not presented as active purchase links
• Multi-vendor ticket picker opens as an accessible dialog when needed
• FAQ block on show pages uses native <details> elements
• Breadcrumbs end at the venue (or city/artist) — no redundant “Show” crumb

• Cities directory — searchable A–Z list with show counts; each city page lists upcoming shows in HTML
• Venues directory — same searchable pattern; invalid placeholder venue names are filtered out
• Artists A–Z — full roster index with jump links and search
• Genre hubs — curated tag pages (techno, house, trance, etc.) with intro text and linked show listings
• Maps on entity pages — map markers supplement list views; see Maps for limitations

• Profile hero with artist name, rank, genres, and social links where available
• Upcoming shows listed as readable rows with date, venue, city, and ticket actions
• “Add to calendar” and email-alert calls-to-action use labeled buttons
• Similar-artist suggestions are standard text links
• On-page FAQ and entity-tagged editorial links where published

• Articles index — list of published stories with titles, dates, and excerpts
• Article pages — article body uses heading hierarchy; images include alt text when editorially meaningful
• Artist, city, and venue names in copy link to entity pages where tagged
• Related articles block at the foot of long-form pieces

• Login & registration — labeled fields, autocomplete hints, and visible error messages
• Login / register modals — opened from the header; focus moves into the dialog, traps inside, and returns on close
• Member dashboard — skip link to #dashboard-main; profile save status uses role="status"
• Password and email flows follow the same labeling conventions

Shared a11y.js helpers power consistent dialog behavior:

• Login & register — aria-hidden toggling, focus trap, backdrop dismiss, Escape to close
• Ticket picker — choose among ticket vendors when more than one is available
• Newsletter & subscription modals — same focus management pattern
• Media lightbox — keyboard-dismissible where deployed on gallery images
• FAQ accordions — prefer native <details> over custom accordion widgets

Leaflet maps on city and venue pages are visual discovery tools. We provide alternatives:

• Linked show lists on the same page as each map
• Text-based calendar, tonight, and this week hubs
• Search and directory pages that do not require map interaction

Map tiles come from third-party providers; marker density can still be difficult for some assistive technologies.

• Alt text — content images include descriptions; decorative images use empty alt or aria-hidden
• Artist preview clips — optional hover audio; skipped when prefers-reduced-motion: reduce is set
• Video / embeds — rare; when present, prefer platform captions where supplied by the host
• Ads — promotional drawer and banners are separate from main content; ad network creatives are not fully controlled by us

• Color contrast — body text, links, and focus rings checked against the dark theme; neon accent (#00d2ff) used for links and focus, not for long passages alone
• Zoom & reflow — responsive layouts; mobile inputs use at least 16 px font size to reduce iOS zoom-on-focus
• Typography — Rajdhani for body copy, Orbitron for headings; uppercase styling is visual — screen readers read normal spelling
• Motion — scroll behavior and hover effects toned down when reduced motion is requested

If a visual page is hard to use, these machine-readable endpoints may help:

• RSS feed — latest shows and updates
• JSON Feed — same content in JSON
• Atom feed
• iCal calendar — subscribe in Apple Calendar, Outlook, and other calendar apps
• XML sitemap — complete URL index for crawlers
• HTML site map — human-readable index of hubs and directories
• llms.txt — concise site guide for assistive AI tools (alias ai.txt)
• Directory export (JSON)

Public pages emit schema.org JSON-LD (artists, venues, events, articles, breadcrumbs, and organization info) so search engines and compatible tools can surface tour facts without scraping layout tables. Show pages include MusicEvent data with offers when ticket URLs exist.

Some experiences leave our site or embed external UI:

• Ticket vendors (Ticketmaster, etc.) — accessibility varies by vendor checkout
• Map tiles & analytics — third-party scripts may not meet our internal bar
• Advertising — creatives served by ad networks are not authored by The DJ Calendar

We develop and test primarily in current versions of:

• Chrome, Firefox, Safari, and Edge on desktop and mobile
• VoiceOver on macOS and iOS
• NVDA on Windows (spot checks)

Older browsers may lack full :focus-visible or combobox support; we still aim for usable keyboard fallbacks.

• Keyboard-only passes on homepage, search, calendar, artist, city, venue, show, article, account, and dashboard flows
• Screen reader spot checks on search comboboxes, modals, FAQ blocks, and live-region announcements
• Automated scans (WAVE, Lighthouse accessibility, browser DevTools) on representative templates after major releases
• Contrast review on text, links, buttons, and focus indicators against dark backgrounds
• Regression checks when upgrading map, auth, or search JavaScript

• Interactive maps — marker clusters and tile layers remain difficult for some users; use list and calendar views instead
• Third-party checkout — not fully under our control
• Advertising & embeds — may introduce motion, autoplay, or focus traps we do not author
• Legacy templates — older pages may lag until refreshed
• Coverage — we do not audit every artist URL on every deploy; report gaps and we will queue fixes