Accessibility as Craft, Not Compliance Theater

Accessibility on brand sites 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 complete the job, can text be read, can motion be refused, can media 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.

Accessible marketing websites — the real job

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

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.

Craft checklist for brand and studio sites:

• Logical heading order and landmarks
• Visible focus styles that match the brand system
• Keyboard paths for nav, dialogs, sliders, and forms
• Contrast that holds for text and essential UI
• Alt text that describes function or content, not “image”
• Captions or transcripts for meaningful audio/video
• Forms with labels, errors, and clear submit outcomes
• Reduced-motion respect for non-essential animation
• Hit targets that work on phones and for motor impairment

WCAG for brand sites — use it as a floor, not a costume

WCAG (currently aiming teams at 2.2 AA in most marketing contexts I see) is a shared language for “good enough to defend.” It is not a personality. Hitting AA on a contrast checker while shipping a mouse-only gallery is still a fail in practice.

How I use WCAG on brand work:

• AA as the default acceptance bar for text and UI contrast
• Name, Role, Value for custom controls (carousels, tabs, disclosure)
• Status messages that assistive tech can announce when forms fail
• Target size awareness on primary actions (especially mobile CTAs)

When legal or procurement demands a VPAT or 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 for a brand that cares about humans, bake the practices into design and QA from week one so the audit is confirmation, not archaeology.

Keyboard is 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.”

Focus styles are brand

Design focus-visible states 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.

Dialogs and menus

Mobile nav, cookie banners, and booking modals must trap focus appropriately, return focus on close, and be escapable with Escape where expected. Cookie banners that eat the first twenty tabs before you reach the CTA are a conversion and accessibility bug.

Custom components

If you build a fancy horizontal product 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.

Contrast and type without killing the film

Cinematic brand sites love low-contrast type on photography. That look often fails real eyes. Craft solutions:

• Scrims and gradients behind type so the words sit on a controlled surface
• Separate text from the busiest region of the image
• Prefer HTML text over type burned into images
• Check contrast on the actual composite, not on a flat Figma swatch

Large display type can sometimes pass with different thresholds than body copy — still verify. Body text on marketing pages should not be a grey whisper. If the brand insists on whisper type, reserve it for decorative labels that are not required to understand the offer.

Media: film craft includes alternatives

Full-bleed video can stay. It needs manners:

• No autoplay sound
• Pause/stop control when motion is continuous
• Captions for spoken content
• A still poster that carries the brand if video never loads
• Decorative motion marked so it can be ignored; meaningful motion described

Images need alt text written for the job of the image. 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.

Motion and vestibular respect

prefers-reduced-motion is not optional. Entrance animations should collapse to the final state. Scroll-scrubbed scenes should offer a static alternate or reduced path. Parallax on every section is a nausea machine; budget motion like you budget JS.

Pair with performance: heavy motion that janks also harms users who need stability. Accessibility and Lighthouse are not rival religions on a serious brand build.

Forms and conversion paths

Accessible forms convert better for everyone:

• Visible labels (placeholders are not labels)
• Clear required indicators
• Error text tied to fields
• Do not clear the whole form on one mistake
• Submit buttons that say the action (“Send project brief”) not only “Submit”
• Time limits avoided; if they exist, extendable

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.

Cognitive load is an a11y issue

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.

Process: bake in, do not bolt on

Phase	Accessibility work
Discovery	Note legal requirements, audience needs, media-heavy risks
Design	Focus, contrast, type sizes, component states 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	Check new campaign pages; widgets added by marketing get reviewed

Designers who never show focus states hand engineers a guessing game. Engineers who “will do a11y later” ship debt. Later means never.

Tooling without theater

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.

Common brand-site failures I fix

• Mega-menus that cannot be operated with a keyboard
• Slider testimonials with no buttons and no pause
• Text over video without scrim
• Icon-only controls without accessible names
• Color-alone error states on forms
• Infinite animating backgrounds with no reduced-motion path
• Footer link forests with no headings structure above

Business framing for stakeholders

Accessibility expands who can hire you, buy tickets, book installs, or trust your studio. It also reduces legal risk in jurisdictions that care. Lead with craft and audience, not with scare tactics — but do not pretend lawsuits and procurement checklists are imaginary. Budget for captions, audits when required, and the engineering time for custom widgets.

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.

Relationship to SEO and AI visibility

Clean headings, meaningful text (not only images), transcripts, and usable navigation help humans and machines parse 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.

Explore /websites or book a sprint at /contact?intent=websites-sprint when you want brand cinema that still works with a keyboard and a conscience.

Implementation notes by surface

Homepages: ensure the brand and primary heading are in a logical heading order. Decorative motion plates should be aria-hidden when they do not communicate information. 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, prevent background scroll when menus are open if that pattern traps users mid-page unexpectedly — test with VoiceOver and keyboard.

Work grids: each project card should have a clear accessible name. If the visual title is in an image, provide text. Hover-only reveals that hide titles fail touch and keyboard users alike — show essential names without hover.

Case studies: long pages need 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 accessible error summaries at the top of the form on failed submit, plus field-level messages. Do not clear user input on error without cause.

Footers: link lists are fine; ensure focus order is sane. Avoid tiny paired icons without text for critical actions like email and phone — include visible text or aria-labels that match visible intent.

Embedded players: third-party players vary wildly. Prefer facades that load on interaction, and verify keyboard controls after load. If a player is inaccessible, link out to the platform instead of trapping users in a broken embed.

Documentation for designers: include focus states in Figma, not as an afterthought. Specify reduced-motion frames. Specify contrast on photo backgrounds. Designers who never see these states will not invent them correctly under deadline pressure.

Documentation for engineers: prefer native elements first. When custom widgets are required, follow established ARIA authoring practices and test with real assistive tech. Copy-pasting ARIA from random articles creates false confidence.

When access, performance, and motion are specified together, you get closer to the standard in Websites That Feel Like Films without last-week panic. Explore /websites or book a sprint at /contact?intent=websites-sprint.

FAQ

What makes marketing websites accessible in practice?

Keyboard-complete journeys, readable contrast, labeled forms, media alternatives, focus styles, and reduced-motion paths — verified manually, not only by a green automated score.

How should we apply WCAG for brand sites?

Treat WCAG 2.2 AA as the default floor for contrast and operable UI. Use it to prioritize fixes, not as a costume for 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.

Do we need a formal audit before launch?

If procurement or regulation demands it, yes — budget a specialist. If you are shipping a standard brand site, bake practices into design/QA and audit when risk or scale warrants.

Are overlays and widgets enough?

No. Overlays that redesign the page at runtime often break and do not replace semantic HTML, keyboard paths, and real captions.

What should designers deliver for a11y?

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