Accessibility as Craft, Not Compliance Theater

Accessibility on a brand site is not a PDF audit sticker and a hastily added “skip to content” that jumps into a broken focus order. It is craft: can a keyboard user finish the job, can the type be read on the actual photograph, can motion be refused, can the film carry meaning without sound or sight alone. Compliance theater produces reports. Craft produces usable cinema. This spoke deepens the standard in Websites That Feel Like Films.

I do not sell fear. I sell competence. A beautiful fold that traps keyboard focus in a mega-menu is unfinished. A case-study carousel that only works on swipe-without-buttons is unfinished. A hero film with no captions and no still fallback is unfinished. WCAG 2.2 is the shared language I use as a floor. It is not a personality, and it is not a lawsuit script.

The short answer

• Use WCAG 2.2 Level AA as the default acceptance bar for marketing sites: contrast, keyboard, names, captions, target size, focus that stays visible.
• Design focus, error, and reduced-motion states in the same pass as hover. If they are missing from the file, they will be missing from the build.
• Check contrast on the live composite — type over video, type over grain, type over a busy still — not on a flat swatch.
• Give every custom widget a non-pointer path: buttons, keys, and an accessible name. Drag-only is not a product.
• Treat overlays, auto-scanners, and a green CI badge as smoke alarms. Manual keyboard and screen-reader passes catch the bugs those tools miss.

What does accessibility as craft mean on a brand site?

Marketing sites ask people to understand an offer and take an action. Accessibility means that job stays possible across vision, motor, hearing, and cognitive differences — including temporary ones: a broken arm, bright sun on a phone, a noisy room, an exhausted brain.

The W3C Web Accessibility Initiative frames this as perceivable, operable, understandable, and compatible with user agents. On a cinematic brand site those four ideas show up as composition problems, not as a separate “a11y sprint” after the art direction is locked.

Job on the page	Craft question	Fail that looks pretty
Understand the brand	Is the name and offer in real text, in a logical heading order?	Logo-only hero with type burned into a still
Watch the film	Can the clip be paused, captioned, and replaced by a poster?	Autoplay sound and no controls
Browse the work	Can every card be reached and activated without a pointer?	Hover-only titles, swipe-only rails
Start a conversation	Can the form be completed with a keyboard and announced errors?	Placeholder-only fields, color-only invalid states
Leave	Can focus escape the cookie banner and the chat widget?	First twenty tabs eaten by a consent wall

Craft checklist I run on brand and studio sites:

• Logical heading order and landmarks (header, nav, main, footer)
• Visible :focus-visible styles that belong to the brand system
• Keyboard paths for nav, dialogs, sliders, and forms
• Contrast that holds for text and essential UI on the real background
• Alt text that describes function or content, not “image”
• Captions or transcripts for meaningful audio and video
• Forms with labels, errors, and a clear submit outcome
• prefers-reduced-motion respected for non-essential animation
• Hit targets that work on phones and for motor impairment
• Skip link that lands in main, not in a hidden off-canvas drawer

If a item is “later,” it is not in the film. Later means never.

How should brand teams use WCAG 2.2 without costume theater?

WCAG 2.2 is a W3C Recommendation. Content that meets 2.2 also meets 2.1 and 2.0. W3C advises using the current version when you update a policy; I do the same on brand work. The Understanding WCAG 2.2 documents are the commentary I actually open during QA. The How to Meet WCAG 2.2 quickref is the filterable checklist.

AA is the default floor I write into scopes. AAA is a design choice on specific surfaces (focus appearance, enhanced contrast), not a promise I print on a homepage badge.

Hitting AA on a contrast checker while shipping a mouse-only gallery is still a fail in practice. That is costume theater: the report is dressed; the journey is not.

Criterion I actually test on brand sites	Level	Why it shows up on cinema sites
1.4.3 Contrast (Minimum)	AA	Type on photography and video
1.4.11 Non-text Contrast	AA	Icons, input borders, focus rings
2.1.1 Keyboard	A	Custom nav, rails, tabs
2.2.2 Pause, Stop, Hide	A	Looping hero films and marquees
2.4.7 Focus Visible	AA	Dark sections, light sections
2.4.11 Focus Not Obscured (Minimum)	AA	Sticky nav, cookie bars, chat
2.5.7 Dragging Movements	AA	Horizontal product scrollers
2.5.8 Target Size (Minimum)	AA	Mobile CTAs and icon clusters
1.2.2 Captions (Prerecorded)	A	Spoken brand films
4.1.2 Name, Role, Value	A	Custom controls
4.1.3 Status Messages	AA	Form errors and “sent” states

What’s new in WCAG 2.2 is the short list I walk designers through when a file still thinks 2.0 is current: focus not obscured, dragging movements, 24×24 CSS-pixel target size (or the spacing exception), consistent help, redundant entry, and accessible authentication.

How I use the spec on brand work:

1. Write AA into the acceptance criteria before the first mood frame.
2. Map custom components to ARIA Authoring Practices patterns — carousel, tabs, disclosure, dialog — instead of inventing roles.
3. Require name, role, and value on every custom control.
4. Require a status message that assistive tech can announce when a form fails or succeeds.
5. Measure target size on primary actions, especially mobile CTAs. 24×24 CSS pixels is the AA floor; I usually design larger.

When legal or procurement asks for a VPAT or a formal audit, bring in specialists and budget time. Do not fake an audit with a browser-extension screenshot. When the goal is a high-craft marketing site, bake the practices into design and QA from week one so the audit is confirmation, not archaeology.

I am not your counsel. ADA.gov’s web guidance points at WCAG as a technical reference and is explicit that the page is informal guidance. A later Title II fact sheet covers state and local government web content. Section508.gov is the federal ICT reference. If any of that is your lane, read the primary pages and talk to the people who own legal posture. My lane is making the site operable.

Why is the keyboard the truth serum?

If I can tab through the homepage and complete Contact without a mouse, the information architecture is usually honest. If focus disappears, jumps randomly, or lands inside off-screen mobile nav, the site is lying about being done.

SC 2.1.1 Keyboard is Level A: all functionality is operable through a keyboard interface, except path-dependent input like freehand drawing. A marketing site is not a watercolor simulator. Mega-menus, carousels, filters, and booking widgets are not exceptions.

Keyboard QA I actually run:

1. Unplug the trackpad. Start at the top of the document.
2. Tab through every interactive control on the homepage. Note traps, skips, and invisible focus.
3. Open mobile nav, a cookie banner, and any modal. Confirm you can reach every action and leave with Escape where a dialog pattern is used.
4. Complete the contact form, including an intentional error, using only keys.
5. Operate every custom rail, tab set, and lightbox with keys. If you cannot, it is not shipped.

Symptom	Usual cause	Fix
Focus vanishes on a dark plate	Outline removed “for aesthetics”	Brand :focus-visible on every theme
Tab order jumps to the footer then back	DOM order does not match visual order	Reorder markup; stop using positive tabindex
Focus lands in hidden mobile nav	Off-canvas stays in tab order when closed	inert or hidden until open
Cannot leave a slider	Pointer-only handlers	Buttons plus arrow keys
First twenty tabs are a consent wall	Banner is a pile of links, not a short dialog	Two actions, then dismiss

A keyboard trap is a hard fail of SC 2.1.2. Cookie banners that eat the first twenty tabs before you reach the CTA are a conversion bug and an accessibility bug. Same root: the chrome stole the scene.

How do you design focus, menus, and dialogs that stay branded?

Focus styles are brand. Design :focus-visible in the same pass as hover. A thick ring in the brand accent, an underline offset, or an inverted plate — pick something that fits the world and stays visible on both light and dark sections. Removing focus outlines “for aesthetics” is vandalism.

SC 2.4.7 Focus Visible is AA. SC 2.4.11 Focus Not Obscured (Minimum) is the 2.2 addition that sticky headers, cookie bars, and chat widgets keep failing: when an item gets keyboard focus, it must not be entirely hidden by author-created content.

Surface	Focus craft	Common miss
Text links	Offset underline or ring that clears the photo	1px outline that disappears on navy
Buttons	Inverted plate or 3:1 ring against the button and the page	Hover-only fill change
Cards	Whole-card focus that does not clip in overflow hidden	Focus on a nested “View” that is opacity: 0
Icon buttons	Visible ring plus an accessible name	Title tooltip, no name
Sticky CTA	Extra bottom padding so focused fields clear the bar	Bar covers the focused submit

Dialog and menu procedure:

1. Use a real button to open. Use a real a for destinations. Do not make a div clickable and call it a day.
2. When a dialog opens, move focus to it. When it closes, return focus to the trigger.
3. Trap focus only while the dialog is open. Do not trap focus in a non-modal cookie toast that should be skippable.
4. Escape closes expected dialogs. Background scroll is locked only while a true modal is open — then test with VoiceOver, because lock patterns can strand users mid-page.
5. Announce expanded/collapsed state on menus. Hidden panels must leave the tab order.

Mobile nav, cookie banners, and booking modals are the three places brand sites most often fail this. If the pattern is in the ARIA APG dialog or disclosure notes, follow the pattern. Copy-pasting ARIA from a random article creates false confidence.

• Focus ring designed for light and dark sections
• Sticky chrome does not bury focused controls
• Menu trigger is a button; destinations are links
• Closed panels are not in the tab order
• Escape and return-focus tested on every modal

How do you keep contrast cinematic without failing 1.4.3?

Cinematic brand sites love low-contrast type on photography. That look often fails real eyes. SC 1.4.3 Contrast (Minimum) sets 4.5:1 for normal text and 3:1 for large text (18pt / 24px, or 14pt / ~18.5px bold). W3C is explicit: do not round 4.499 up to a pass. Logo type is exempt. Body copy pretending to be a whisper is not.

SC 1.4.11 Non-text Contrast adds 3:1 for UI components and meaningful graphics — input borders, icon-only controls, focus indicators against adjacent colors.

Craft solutions that keep the film:

Move	What it does	When I use it
Scrim or gradient behind type	Puts words on a controlled surface	Full-bleed stills and video
Type plate	A branded panel with known hex values	Long headlines on chaotic photos
Crop the busy region	Moves the face or texture out from under the words	Editorial photography
HTML text, not burned-in type	Lets users zoom and lets you restyle	Almost always
Check the composite	Measures the actual pixels behind the glyphs	Every hero, every card overlay

Large display type can pass at 3:1. Still verify. Thin display faces anti-alias into a fainter color than the CSS hex; W3C calls this out. If the brand insists on whisper type, reserve it for decorative labels that are not required to understand the offer.

Contrast QA I will not skip:

1. Sample the real hero at the headline, the dek, and the CTA — three points, not one.
2. Repeat on a mid-tone still and a bright still. One passing frame is not a system.
3. Check input borders and error icons at 3:1, not only the paragraph text.
4. Zoom the page to 200%. If the plate collapses and type falls onto the photo, the plate was decoration.
5. Do not trust a Figma contrast plugin on a detached swatch. The photograph is the background.

Body text on marketing pages should not be a grey whisper. If you cannot read the offer in sunlight, neither can half the audience you just called “visual.”

What does film-quality media need besides a pretty poster?

Full-bleed video can stay. It needs manners. SC 1.2.2 Captions (Prerecorded) is Level A for synchronized captions on spoken prerecorded video. WAI’s captions page is the practical briefing I send when a director says “we’ll add them later.” Later is a launch bug.

SC 2.2.2 Pause, Stop, Hide covers moving, blinking, scrolling, or auto-updating content that lasts more than five seconds and is not the only thing on the page. A looping hero that cannot be paused fails this. A marquee of logos that never stops fails this.

Media manners for brand films:

• No autoplay sound
• Pause or stop control when motion is continuous
• Captions for spoken content; transcripts when the audio is the point
• A still poster that carries the brand if video never loads
• Decorative motion marked so it can be ignored; meaningful motion described
• Third-party players tested after load — or linked out if the embed is a trap

Images need alt text written for the job of the image. W3C’s alt decision tree is the short version: functional, informative, or decorative. A work plate showing a musician site might be “Homepage of Arkayla with night photography and tour CTA” — not “screenshot” and not a novel. Purely decorative rules and textures get empty alt="".

Media	Required alternative	Decorative path
Spoken hero film	Captions; pause control; poster	Do not mark spoken film decorative
Ambient texture loop	Pause or reduced-motion collapse	aria-hidden if it communicates nothing
Work still	Short functional alt	Empty alt only if adjacent text already names it
Chart or metric graphic	Text equivalent of the numbers	Not decorative if the number is the claim
Icon-only control	Accessible name	Never empty if it is the only label

Embedded players vary wildly. Prefer a facade that loads on interaction, then verify keyboard controls after the iframe arrives. If a player is inaccessible, link out to the platform instead of trapping people in a broken embed.

How should motion respect prefers-reduced-motion?

prefers-reduced-motion is not optional. The query lives in CSS Media Queries Level 5. When the user asks for less motion, entrance animations should collapse to the final state. Scroll-scrubbed scenes should offer a static alternate. Parallax on every section is a nausea machine; budget motion like you budget JS.

SC 2.3.3 Animation from Interactions is AAA: motion triggered by interaction can be disabled unless it is essential. I still treat it as a craft requirement on marketing sites because vestibular harm does not wait for a AAA badge.

Motion type	Default	Reduced-motion path
Fade / rise on enter	Short transform + opacity	Instant final state
Scroll-scrubbed scene	Pinned timeline	Static frame, no pin
Parallax layers	Small range, few sections	No secondary layer motion
Looping background	Pause control	Stopped poster
Page transitions	Opacity / transform only	Hard cut
Cursor-follow / tilt	Off unless it explains something	Off

Pair this with performance. Heavy motion that janks also harms people who need stability. Accessibility and Lighthouse are not rival religions on a serious brand build — see Lighthouse without killing the design. If the animation plan hides LCP text until a JS timeline runs, the plan is wrong on both axes.

Reduced-motion checklist:

• Global query wired once, not per-component folklore
• GSAP / Framer / Webflow timelines respect the query
• Autoplay video honors the query or offers an obvious pause
• No essential information lives only inside the motion
• Vestibular-risk effects (zoom, spin, large parallax) default off under the query

Why do custom carousels and drag-only galleries fail?

This is the failure mode I keep buying back on otherwise gorgeous sites. A horizontal product scroller that only yields to a pointer drag fails SC 2.5.7 Dragging Movements: any function that uses a dragging movement must have a single-pointer alternative that does not require a drag. Buttons that nudge the rail count. A hidden scrollbar that only appears on hover does not.

SC 2.5.8 Target Size (Minimum) is the sibling: pointer targets at least 24×24 CSS pixels, or enough spacing that a 24px-diameter circle around each undersized target does not collide. Inline links in a sentence are excepted. Icon clusters in a footer are not.

If you build a fancy horizontal scroller, provide buttons, keyboard controls, and a non-drag path. If you build tabs, arrow-key patterns and ARIA roles are part of the component, not a backlog ticket. The ARIA APG carousel and tabs patterns exist so you do not invent a third dialect.

Widget	Minimum operable path	Theater that still ships
Testimonial slider	Prev/next buttons, pause, keyboard	Swipe-only, no pause, auto-rotate
Work rail	Buttons + focusable cards	Drag-only, titles on hover
Tabs	Arrow keys, role="tablist"	Click-only divs
Lightbox	Close, next, prev, return focus	Click the dim overlay or nothing
Filter chips	Keyboard toggle, announced state	Pointer-only, no name

Procedure for a custom rail:

1. Native buttons for previous and next. Visible. 24×24 CSS pixels minimum, larger on touch.
2. Cards are links or buttons with an accessible name that matches the visible title.
3. Auto-rotate pauses on hover, focus, and prefers-reduced-motion. Provide a pause control either way.
4. Drag can stay as a bonus. It cannot be the only path.
5. Test with a keyboard and with one finger. If either path dies, the widget dies.

Hover-only reveals that hide titles fail touch and keyboard users alike. Show the essential name without hover.

How do forms and conversion paths stay usable?

Accessible forms convert better for everyone. Placeholders are not labels. Color-alone errors are not errors. Clearing the whole form on one mistake is hostility dressed as validation.

SC 4.1.3 Status Messages is AA: when a status message appears without a focus change, it can be determined through role or properties so assistive tech can announce it. “Sent” that only turns the button green is a miss. SC 3.3 is the input-assistance family: labels, error identification, suggestions, and (in 2.2) redundant entry so people are not asked to retype data the site already has.

Rule	Do	Do not
Labels	Visible <label> tied to the control	Placeholder-only, or a div that looks like a label
Required	Text plus aria-required or required	Red asterisk with no legend
Errors	Field-level text + a summary at the top	Color outline only
Memory	Keep the values the user already typed	Wipe the form on one bad field
Submit	Name the action (“Send project brief”)	Generic “Submit” on a 15-field wall
Time	Avoid limits; if they exist, make them extendable	Hidden session death mid-type

Form QA:

• Every control has a visible label
• Related fields use fieldset / legend where the group is the meaning (address, budget)
• Failed submit moves focus to an error summary and announces it
• Each invalid field is described in text, not only in red
• Success is a status message, not a silent route change
• Primary submit meets target-size and contrast on mobile

Contact paths with fifteen fields punish everyone. Ask for what you need to route the lead. The rest can live in a follow-up call. That is conversion craft and cognitive accessibility in the same cut.

Is cognitive load an accessibility issue on marketing pages?

Yes. Marketing teams love badge clouds, rotating testimonials, chat widgets, and announcement bars stacked on announcement bars. Each layer taxes attention. Accessible marketing websites keep one job per section and one primary action at the fold — the same composition rules as the film model. Clarity is accessibility.

This is not a soft preference. Predictable navigation, consistent help, and one thing happening at a time are how people with attention, memory, and language differences finish the job. They are also how everyone else finishes the job on a phone in a parking lot.

Layer	Keep	Cut or demote
Fold	One offer, one primary CTA	Badge cloud, two popups, a slider, and a chat
Proof	Two or three named receipts	Infinite auto-rotating quotes
Nav	Short, stable, keyboardable	Mega-menu of every service plus a promo
Chrome	One utility bar max	Cookie + promo + chat + sticky CTA + exit intent
Copy	Short sentences, concrete nouns	Jargon stacked on synonym stacks

Cognitive checklist:

• One primary action in the first viewport
• Headings that match the visual hierarchy — no styled paragraphs pretending to be h2
• No essential content that appears only on hover or after a timed animation
• Language of the page set; names of controls match what they do
• Help (email, booking, phone) findable in a consistent place — SC 3.2.6 Consistent Help is Level A in 2.2

If you remove the motion and the chrome and the page still reads, you are close. If the page only makes sense while things are flying, you built a trailer, not a site.

What process and tools bake this in without theater?

Designers who never show focus states hand engineers a guessing game. Engineers who “will do a11y later” ship debt. Tooling that only produces a green badge is theater.

Phase	Accessibility work
Discovery	Note audience needs, media-heavy risks, and whether counsel or procurement will want a formal artifact
Design	Focus, contrast, type sizes, component states, reduced-motion frames in the file
Build	Semantics first; ARIA only when HTML is not enough
QA	Keyboard pass, screen-reader smoke, zoom to 200%, mobile VoiceOver / TalkBack sample
Launch	Captions, alt, skip link verified on production
After	New campaign pages and marketing widgets get the same pass

Use axe, Lighthouse accessibility scores, and contrast checkers as smoke alarms — not as certificates of virtue. Manual keyboard and screen-reader passes catch the bugs automation misses: focus order, dialog behavior, meaningful alt. If your process is only green CI checks, you are performing compliance theater.

Tool	What it is good for	What it will not catch
axe / automated CI	Missing names, some contrast, some ARIA mistakes	Whether the alt is true, whether the journey works
Lighthouse a11y	A second smoke pass next to performance	See Lighthouse without killing the design — score is not craft
Contrast checker	Hex-on-hex math	Type over a photograph
Screen reader smoke	Names, landmarks, live regions	Every AT / browser pair
Keyboard pass	The truth serum	Color and caption quality

Overlays that rewrite the page at runtime are not a strategy. They often break the very paths they claim to fix, and they do not replace semantic HTML, real captions, or a keyboard-complete journey. A clean overlay report is still a costume.

Documentation I require before build:

• Designers: focus and error states, contrast-checked type on real imagery, heading hierarchy, notes for non-text content, reduced-motion frames.
• Engineers: native elements first; when a custom widget is required, follow APG and test with real assistive tech.

“We’ll fix it in QA” is not a design deliverable.

What brand-site failures keep shipping as done?

These are the ones I keep opening on otherwise expensive marketing sites. Each one is a craft miss with a named WCAG hook. None of them require a lawsuit story to justify the fix.

Failure	What breaks	What I do instead
Mega-menus that cannot be operated with a keyboard	2.1.1	Button + disclosure or dialog pattern, focus return
Slider testimonials with no buttons and no pause	2.2.2, 2.5.7	Buttons, pause, no drag-only path
Text over video without a scrim	1.4.3	Plate or gradient; re-check the composite
Icon-only controls without names	4.1.2	Visible text or an accessible name that matches intent
Color-alone error states	3.3 + 1.4.1	Text, icon, and color together
Infinite animating backgrounds	2.2.2, reduced-motion	Pause + static fallback
Footer icon forests	2.5.8	Text labels, spacing, 24×24 minimum
Skip link into a broken order	2.4.1	Skip to main, then prove the order
Chat widget covering focused fields	2.4.11	Delay load, smaller dock, extra padding
Type burned into images	1.4.5 / zoom	HTML text on a plate

I have shipped hundreds of production sites. The pattern is boring: the art direction is strong, the custom widget was treated as decoration, and nobody tabbed through before launch. The fix is not a new aesthetic. The fix is finishing the component.

If you only have time for one pass this week, do the keyboard journey from logo to submitted form. It will surface half the table.

How do you brief stakeholders, and how does this sit with the film model?

Accessibility expands who can hire you, buy tickets, book installs, or trust your studio. Lead with craft and audience, not with scare tactics. Do not pretend procurement checklists and published government guidance are imaginary either. Budget for captions, for engineering time on custom widgets, and for a specialist audit when someone with actual legal ownership asks for one.

When stakeholders say “our audience is young and visual,” remind them young people break wrists, watch without sound, and use phones in sunlight. Inclusive craft is not a different aesthetic. It is the same aesthetic made operable.

Stakeholder line	Craft answer
“It will look like a government site.”	Focus rings and scrims are brandable. Unreadable type on chaotic video was never good craft.
“We will add a11y after launch.”	After launch the widget is sacred and the budget is gone. Spec it in the file.
“The overlay will handle it.”	Overlays do not write captions, labels, or keyboard paths. They perform a report.
“Our audience does not use keyboards.”	Plenty of people do, including people who look like your audience. Keyboard is also how I QA honesty.
“WCAG will kill the film.”	WCAG 2.2 AA is a floor for contrast and operation. The film stays. The manners get added.
“Just tell us the legal minimum.”	I am not counsel. I will ship AA craft. Your counsel reads ADA.gov and Section508.gov.

Clean headings, meaningful text (not only images), transcripts, and usable navigation help humans and machines read the page. Accessibility work often improves crawl clarity as a side effect. Do not chase SEO tricks as a substitute for semantics; do the semantics.

This is the same standard as the pillar: one fold job, motion that earns its keep, a conversion path that respects attention. Accessibility is how that standard survives contact with a keyboard, a cheap phone, and a quiet-room caption file. When access, performance, and motion are specified together, you get closer to Websites That Feel Like Films without last-week panic.

What should each surface on a brand site actually do?

Homepages: put the brand and the primary heading in a logical heading order. Decorative motion plates should be aria-hidden when they do not communicate information. The primary CTA must be reachable without wading through dozens of social links.

Navigation: buttons for menus, links for destinations. Do not make divs clickable without keyboard support. Announce menu state. On mobile, test background-scroll lock with VoiceOver and a keyboard before you keep it.

Work grids: each project card needs a clear accessible name. If the visual title is in an image, provide text. Hover-only titles fail. Show the name.

Case studies: long pages need a heading hierarchy so assistive-tech users can jump. Do not style paragraphs to look like headings. Image galleries need controls that work without a pointer.

Forms: group related fields with fieldset / legend where it helps. Provide an accessible error summary at the top of a failed submit, plus field-level messages. Do not clear user input on error without cause.

Footers: link lists are fine; keep focus order sane. Avoid tiny paired icons without text for email and phone — include visible text or names that match visible intent.

Embedded players: facade first, keyboard after load, link out if the embed is a trap.

Designer file: focus states, reduced-motion frames, contrast on photo backgrounds. If the state is not in the file, it will not be in the build.

Engineer file: native elements first. Custom widgets follow APG. Test with real assistive tech.

Surface acceptance table:

Surface	Keyboard	Contrast	Media	Motion
Home fold	CTA in first handful of tabs	Headline and dek pass on the composite	Poster + pause if video	Reduced-motion final state
Nav	Full tree without a pointer	3:1 on icons and rings	n/a	Open/close without a spin
Work	Every card activatable	Titles not hover-only	Alt names the project	No drag-only rail
Case study	Gallery controls	Body 4.5:1	Captions if a film is the proof	Scrub has a static path
Contact	Full submit + errors	Labels and errors in text	n/a	No timed expiry
Footer	Sane order, sized targets	Icon+text for critical actions	n/a	n/a

When those four columns are true, the site is closer to finished than any badge in a slide deck.

FAQ

What makes marketing websites accessible in practice?

Keyboard-complete journeys, readable contrast on the real composite, labeled forms, media alternatives, visible focus, and reduced-motion paths. Verify those by hand. A green automated score is a smoke alarm, not a certificate.

How should we apply WCAG for brand sites?

Treat WCAG 2.2 AA as the default floor for contrast and operable UI. Use the Understanding docs to prioritize fixes. Do not wear the spec as a costume on a mouse-only experience.

Will accessibility ruin our cinematic design?

No. Scrims, controlled type plates, pause controls, and motion budgets preserve the world while making it operable. Unreadable type on chaotic video was never good craft. The film stays. The manners get added.

Do we need a formal audit before launch?

If procurement or regulation demands a VPAT or a specialist report, budget that as its own workstream. If you are shipping a standard brand site, bake the practices into design and QA and audit when risk or scale warrants. I do not diagnose legal exposure.

Are overlays and widgets enough?

No. Overlays that redesign the page at runtime often break and do not replace semantic HTML, keyboard paths, or real captions. Use scanners as smoke alarms. Ship the craft in the source.

What should designers deliver for a11y?

Focus and error states, contrast-checked type on real imagery, heading hierarchy, reduced-motion frames, and notes for non-text content. “We’ll fix it in QA” is not a design deliverable.

CTA

Brand cinema that still works with a keyboard and a conscience is the job.

Explore /websites or book a sprint at /contact?intent=websites-sprint.