Gym and Fitness Studio Website Accessibility

Opening answer

Fitness studio website accessibility is mostly about the booking path. A visitor checks the class schedule, picks a class, books a place and watches a short video about the studio. Each step has one common fault: schedules built as visual grids with no table headers, booking buttons as small icons with no text name, videos without captions, and carousels that move without a pause control. Fix the schedule table first, then booking controls, then video and motion.

Class schedules are tables, so mark them as tables

A class schedule looks like a grid, but a grid drawn with div elements and bold text is not a table to a screen reader. The WAI Tables Tutorial is direct on this point: header cells must be marked with th, data cells with td, and complex tables need explicit associations through scope, id and headers attributes. For a weekly schedule, days of the week are column headers with scope col, and times down the side are row headers with scope row.

Merged cells need care. When one class spans two time slots, or one header covers a group of columns such as morning classes, use scope colgroup or rowgroup on the group header, or id and headers pairs when a cell needs more than one header from the same direction. Give the schedule a caption, such as "Class schedule for this week".

On a phone, keep the table itself, and let the layout handle the narrow screen by stacking or scrolling it in a way that keeps headers tied to data cells. Do not split one schedule into seven separate day pages with no link back to the full week. Keep one schedule page, with filters that change the view without breaking the table structure underneath.

Booking widgets: names, sizes and keyboard order

A booking widget is where a studio site earns its keep, and it is also where third party code causes the most trouble. Start with names. Every book button needs a name that states the class and the time, not only the word "Book". A screen reader user pulling up a list of buttons hears "Book" repeated if the names are generic. "Book Tuesday 6 pm strength class" works alone.

Next, check target size. WCAG 2.2 criterion 2.5.8 asks for pointer targets of at least 24 by 24 CSS pixels, with stated exceptions for spacing, inline targets, user agent controls and cases where a particular presentation is required. Padding counts toward the target size, so a small icon inside a well padded button can pass, while the same icon with no padding fails. Practice judging target size with the target size quiz, then measure the real widget on a phone, not only on a desktop screen.

Keyboard order comes third. Tab through the booking flow with the mouse put away. Focus should move from class selection to date to time to booking details to confirmation, in the same order a sighted visitor reads the page. If focus jumps to a footer link mid-flow, or a date picker opens and focus stays behind it, the widget needs a provider fix or a different widget. A scan can flag missing button names and labels, but it cannot fix the deep behavior of a complex custom widget such as a custom date picker.

Video and photos: captions first, alt text by purpose

Studio sites rely on video to show a class, a coach and a room. A video without captions leaves out visitors who are deaf or hard of hearing, and anyone watching with sound off. WCAG 2.2 criterion 1.2.2 asks for captions on prerecorded audio content in synchronized media, except when the media is a labeled alternative for text. Captions must carry dialogue and meaningful sound information, stay in sync, and sit beside a transcript option.

Photos need a different test, because the right alt text depends on purpose. The WAI Images Tutorial sorts images by purpose: informative images get a short description, decorative images get an empty alt value so assistive technology skips them, and functional images name the action or destination. A photo of a class in progress is informative when it shows room layout or equipment. A gallery thumbnail that opens a larger photo is functional, and its alt text should name the photo it opens.

Do not write alt text that claims a result for a person in a photo, and do not use a photo as the only place where a class level, room feature or booking detail lives. Put that detail in text beside the photo, so a visitor who cannot see the photo still gets it.

Motion: give visitors a way to stop it

Gyms love motion on a homepage: a looping hero video, a scrolling class carousel, an animated counter. Motion can distract, and for some visitors it can trigger dizziness, nausea or headaches. WCAG 2.2 criterion 2.2.2 covers moving content that starts on its own, and criterion 2.3.3 covers motion triggered by interaction, such as parallax scrolling. The W3C understanding page for 2.3.3 lists three practical routes: avoid unnecessary animation, provide a control to turn off non-essential animation, or respect the reduce motion preference in the browser or operating system.

Apply that in order. First, stop autoplay on hero video, or keep it muted with a visible pause control that a keyboard user can reach. Second, give every auto advancing carousel a pause button with a clear name and a target size that meets 2.5.8. Third, respect prefers-reduced-motion for scroll triggered effects. A sticky class filter bar can stay, but test it with a keyboard: a focused booking button must not disappear entirely behind it when the page scrolls to it.

Colour choices sit beside motion in the same visual review. WCAG 2.2 criterion 1.4.3 asks for at least 4.5 to 1 for normal text and 3 to 1 for large text, and criterion 1.4.11 asks for 3 to 1 for interface components and meaningful graphics. A light grey class time on a white card may look clean and still fail. Axeazy detects contrast problems and calculates a correct colour, but a visible colour change is never applied without owner approval.

What Axeazy helps with on a studio site

Axeazy scans with 98 automated checks and fixes code in 14 categories, including table header structure, form labels, link names and button names, per WCAG 2.2 and ADA guidance on web accessibility. That covers the schedule table and the booking buttons, the two places a studio site most often fails. For a site with a GitHub repo, fixes arrive as a real pull request with a visible diff for the owner or developer to review and merge. For a WordPress site, the free plugin applies 3 instant render time fixes, and paid plans add weekly scans.

Start with the free scan on Axeazy homepage, which takes about 60 seconds, is homepage only and needs no signup and no card. Then compare plans on Axeazy pricing, remembering that paid prices are shown at checkout and annual billing saves 20 to 25 percent. For a wider read, see best accessibility tools for small business and how to choose an accessibility tool, 10 criteria.

FAQ

Why does a class schedule need th cells if it already looks like a table?

Because looks do not carry structure. A screen reader announces th cells as headers and ties each data cell to its row and column headers. Without th cells, a visitor hears class names and times with no labels.

How big should a booking button be?

Aim for at least 24 by 24 CSS pixels under WCAG 2.2 criterion 2.5.8, and treat that as a floor, not a target for comfort. Padding counts, so a small icon inside a padded button can pass. Measure the rendered button on a phone.

Do all studio videos need captions?

Prerecorded video with audio needs captions under WCAG 2.2 criterion 1.2.2, except when the media is a labeled alternative for text already on the page. Captions should carry dialogue and meaningful sounds, stay in sync, and sit beside a transcript option.

Should a homepage hero video autoplay?

Only with a visible, keyboard reachable pause control, and with motion reduced for visitors who set a reduce motion preference. If the video adds no information beyond the text beside it, a still image with the same text is simpler, and it removes the motion problem entirely.

Last checked and sources

Last checked: October 31, 2026.

Sources: WCAG 2.2 from the World Wide Web Consortium, W3C understanding page for animation from interactions, ADA guidance on web accessibility from the Department of Justice, WAI Tables Tutorial, WAI Images Tutorial, Axeazy pricing page.

If the schedule table and booking buttons are the first fixes, run the free scan on Axeazy capabilities to see the full list of scanned categories before choosing a plan.

Related reading

• Hotel Website Accessibility: Booking and Rooms