Website // Accessibility as the brief
The Grayson DTLA
An accessible bar site for Downtown LA
A Downtown LA bar site built to WCAG 2.1 AA, with an eleven-preference accessibility panel, a public conformance statement, and a signed client acknowledgment.
- Year:
- 2026
- Role:
- Designer and engineer
- Org:
- Axlecore

- Conformance target
- WCAG 2.1 AA
- User-adjustable accessibility preferences
- 11
Accessibility implementation summary, the-grayson/docs
ADAWidget, the-grayson/app/components
The room, translated
01
Grayson is low and warm where the Slipper Clutch is loud and vintage: controlled energy, glass and metal, a room that has already decided what it is. The design problem was translating a material feeling onto a screen that has neither material nor light.
The palette is warm-neutral rather than cool: a stone ramp running from near-black to bone, with a single amber accent. That one choice carries most of it. The same layout in cool greys reads as a software product; in warm greys it reads as a room with lamps in it.
Four typefaces, each with one job. Bebas Neue, condensed, for the headline weight a venue needs. Allura, a script, for the moments the brand wants to feel handwritten rather than set. Plus Jakarta Sans for body copy that stays legible at length, and Quicksand where a softer edge suits. Four families is more than a site usually earns; a venue is a brand before it is a website, and each one is doing work the others cannot.
Texture does the rest: framing elements, a topographic pattern, a wall surface behind the sections. A bar sells a physical space, and flat panels sell nothing. The frames are doing digitally what moulding does in the room: telling you where one thing ends and another begins without drawing a hard line.
There is a press section because a Time Out feature is worth more to someone deciding where to go on a Friday than anything the venue can say about itself.
All of it is atmosphere for a room that anyone can walk into off Broadway. The site had to work the same way, and that turned out to be the harder half of the job.
Why a bar site needed this
02
A venue open to the public is a place of public accommodation, and in the United States its website is treated as an extension of it. ADA Title III suits over inaccessible hospitality sites are routine and cheap to file. For a single-location bar, one demand letter costs more than the site did.
So accessibility was not a polish pass at the end. It was the brief, and it shaped what got built.
The panel
03
Most accessibility widgets are a third-party script that overlays the page and, fairly often, makes things worse. This one is a component in the codebase, so it manipulates the site's own styles rather than fighting them.
It carries eleven preferences: text size, high contrast, reduced motion, link highlighting, text spacing, line height, text alignment, visible tooltips, hide images, an oversized panel mode for people who struggle with the panel itself, and a reset. Every choice persists to localStorage and applies without a reload.
The oversized mode is the one I would not have thought of unprompted. An accessibility panel that is itself hard to operate is a joke at the user's expense, so the panel can enlarge itself and move to the left for desktop users who need that.
What conformance actually took
04
A skip link to main content. Full keyboard operation of every menu, button and interactive element, the panel and back-to-top button included. Visible high-contrast focus indicators, strengthened to a 3px amber outline when high-contrast mode is on. Semantic landmarks and a real heading order. ARIA labels on the compound controls. Descriptive alt text where an image carries meaning, and `alt=""` where it does not.
Verification was manual as well as automated: screen reader passes with NVDA and VoiceOver, keyboard-only navigation, contrast tooling, and semantic validation.
The site publishes an accessibility statement at /accessibility covering conformance status, known limitations and how to report a problem, because a conformance claim nobody can question is not a conformance claim. That page, and a signed client acknowledgment recording what was implemented and what remains the client's ongoing responsibility, are the part that actually reduces legal exposure.
Built on the previous engagement
05
Grayson came from the same client relationship as The Slipper Clutch, and five components carried across: the age gate, the events table, the CTA section, the footer and the preloader. That is a real saving, and it is also the honest size of it. The two sites are separately styled, and Grayson roughly doubled the component surface with the accessibility panel, full navigation, scroll reveal and a card linking back to its sister venue.
The reuse that mattered was not code. It was knowing what a venue site has to do: that events are the reason anyone visits, that an age gate cannot be an afterthought, and that the people updating it are not technical.
At three widths
Desktop

Decisions
01Accessibility as the brief
Built to WCAG 2.1 AA from the first commit, not audited into it at the end.
02The panel is a component
Eleven preferences in the codebase, manipulating the site's own styles rather than overlaying them.
03Warm neutrals, one accent
A stone ramp from near-black to bone with a single amber, so the layout reads as a room rather than a product.
04Conformance you can question
A public accessibility statement and a signed client acknowledgment, because a claim nobody can check is not a claim.
How it ships
- Events carried overThe events table came across from Slipper Clutch, and the page arranged itself around it.
- ComponentsFive carried over from Slipper Clutch, the rest built new.
- Accessibility panelEleven preferences, persisted to localStorage.
- Static outputPrerendered and shipped on Vercel.
// An accessibility panel that is itself hard to operate is a joke at the user's expense. Build the panel to enlarge itself.
Checked for
Accessibility
Performance
Tested on
- NVDA
- VoiceOver
- Keyboard only
- Contrast tooling
Built with
- Next.js
- React
- TypeScript
- WCAG 2.1 AA
- ARIA
- NVDA
- VoiceOver
- Vercel

