8 min read
Salon Website Accessibility: Booking and Galleries
Salon website accessibility: keyboard booking, gallery alt text that states the service, phone links in text, and contrast on price lists.
- salon website accessibility
- salon booking
- gallery alt text
- phone links
- colour contrast
- service prices
Opening answer
A salon visitor usually comes to a website with a service in mind, a photo that shows the result, and a wish to book. Salon website accessibility means that visitor can tell services apart from gallery photos, read prices in text, reach a booking form by keyboard, and call the salon from a phone link that actually dials. Start with the booking page, then the gallery pages, then the price list, and test the whole path on a phone, because most salon visits start there.
Booking first, because booking is the task
A salon booking flow often hides behind a widget: pick a service, pick a stylist or therapist in general terms, pick a date, pick a time, enter a name and phone number, confirm. Each step needs a label a screen reader can announce, and a keyboard path that does not trap focus inside a calendar. If the service list is a set of tiles with no text label, a screen reader user hears a row of unnamed buttons. If the date picker only works with a mouse, a keyboard user cannot finish the booking at all. Test the flow end to end with the tab key, enter, and space, and note where focus goes at each step. A focus outline that disappears under a sticky header is a fault to log, not a detail to ignore, because a visitor who cannot see focus cannot tell which field is active.
Error messages on a booking form should speak plainly. "That time is already taken, pick another time" helps. A red outline with no words does not. The Department of Justice guidance lists labels, clear instructions, and error indicators as parts of an accessible online form: ADA guidance on web accessibility Where a suggestion is known, give it: a nearby time, a different day, or a phone number to call for help with booking. Keep that phone route on the booking page itself, as text and as a phone link, so a visitor who hits a widget fault can still book by calling. Do not make the phone icon alone the link. An icon without text, and without a proper accessible name, gives a screen reader user nothing useful to act on.
Tap size matters on a booking page more than on most pages, because time slots sit close together. WCAG 2.2 success criterion 2.5.8 asks for pointer targets of at least 24 by 24 CSS pixels, or enough spacing for undersized targets: W3C target size guidance A row of small time buttons with no gap invites a wrong tap, and a wrong tap on a booking page can mean a wrong appointment. Space time slots apart, keep the selected slot clearly marked by more than colour alone, and show the selected service, date, and time in text on the confirmation step, so a visitor can check the booking before submitting.
Galleries that describe a service
Salon galleries do real work. A visitor compares a haircut, a colour service, a facial, or a nail service by looking at results, and then picks a service to book. Alt text for a gallery photo should state the service and the result in context, such as "Shoulder length haircut with layered ends" or "Manicure with a plain dark polish finish", rather than a file name, a string of keywords, or a generic phrase like "salon photo". A photo that only decorates a page, with the same information already in nearby text, should carry empty alt text so a screen reader skips it. WebAIM explains both rules, and adds that an image inside a link must carry alt text stating the link function: WebAIM alt text guidance
Gallery structure matters as much as alt text. If gallery photos link to service pages, the link purpose should be clear from the photo alt text plus nearby text, such as a service name and price under the photo. If a gallery opens a larger view, that larger view needs a keyboard path in and out, a close control with a clear name, and a way back to the gallery without a mouse. A gallery that traps keyboard focus inside a lightbox, or that shows a larger photo with no close control a keyboard user can reach, blocks the very visitor who wanted a closer look. Test one gallery on each service page with a keyboard only, and log any trap with the page URL and date.
Prices, contrast, and text over photos
Price lists are where salon sites often go faint. Light grey prices on white, script headings over busy photos, and service names in pale colour over a gallery image all read badly for a visitor with low vision. WCAG success criterion 1.4.3 asks for a contrast ratio of at least 4.5:1 for normal text, and at least 3:1 for large text: W3C contrast guidance Check price text, service descriptions, booking button text, and footer text against that bar. Check text over photos separately, because a photo background can drop contrast even when the same colours pass on a plain background. A solid background strip behind text over a photo is a simple fix that keeps the photo and keeps the text readable.
Controls need contrast too. WCAG success criterion 1.4.11 asks for at least 3:1 for visual information needed to identify a control and its state, such as a field border, a selected time slot, or a focus outline: W3C non-text contrast guidance A selected service tile that changes only by a faint colour shift will not read as selected to a visitor who cannot tell those colours apart. Pair colour with a text label, a border change, or a check mark in text, so selection is clear without colour alone. A short contrast quiz can help a salon owner judge new price list colours before they go live: Contrast quiz
Phone links, hours, and location in text
Many salon visitors skip booking online and call instead. Make that path easy. Show the phone number as text, and make it a phone link. Show opening hours as text, not only inside an image or a widget. Show the address as text, with parking or public transport notes in words beside any map. Keep the same phone number, hours, and address in the footer and on the contact page, written the same way, so a visitor does not have to reconcile two versions.
What a scan can check on a salon site
A free scan gives a salon owner a first list without a signup step. Axeazy offers a free homepage scan that takes about 60 seconds, with no signup and no card, and paid plans show price at checkout with annual saving of 20 to 25 percent: Axeazy pricing That scan can surface missing alt text on gallery photos, missing labels on a booking form, unclear link names on service pages, and heading order problems on a price list. Those findings sit inside 14 fix categories, covering alt text, skip navigation, language attributes, form labels, link names, button names, ARIA labels on custom widgets, ARIA attribute validity, keyboard tab order, pinch to zoom restrictions, iframe titles, table header structure, landmark structure, and heading structure: Axeazy capabilities A free scan guide can help set expectations for that first check: Free website accessibility scan in 60 seconds
FAQ
What alt text should a salon gallery photo carry?
The service and the result in context, in a short phrase. A decorative photo that adds nothing beyond nearby text should carry empty alt text, so a screen reader skips it instead of reading a file name.
What if a booking widget cannot be used with a keyboard?
Keep a phone link on the booking page, log the widget fault with a date and page URL, and ask the widget provider or developer for a keyboard fix. Do not leave booking only inside the broken widget while waiting.
Should prices live in text or in an image?
In text, with service name, description, and price together. Text can be enlarged, searched, and read aloud, while text inside an image cannot be handled the same way.
Does this article give legal advice?
This is general information, not legal advice. If you received a demand letter or were sued, talk to a qualified attorney, and take the scan report and fix log to that meeting.
Last checked: October 31, 2026
Sources
- W3C contrast guidance
- W3C non-text contrast guidance
- W3C target size guidance
- WebAIM alt text guidance
- ADA guidance on web accessibility
- Axeazy pricing page
- Axeazy capabilities page
Book the fix order the same way a visitor books a service, starting with a free scan at Axeazy