Altwise

Vacation rental direct booking pages: accessible calendars, dates, guests and prices

How to make a vacation rental, cabin or inn direct booking page accessible: availability in words not colours, typed date fields, clear date errors, named guest buttons, a text price breakdown with announced totals, a plain payment line, detailed access info, platform notes and a 5-minute check.

More guests are booking cabins, cottages, inns and vacation rentals straight from the owner's own website, to skip platform fees or because a search tool sent them there. That makes your direct booking page your front desk. It's also where small sites lose people: an availability calendar that shows booked nights only in grey, a date picker that only works with a mouse, a "+" button with no name for guests, and fees that appear only at the last step. A guest who uses a screen reader, a magnifier, a keyboard or voice control can't book if they can't tell which nights are free. Here's how to make each part work for everyone.

1. Show availability in words, not just colours

A month grid where booked nights are grey and free nights are white tells a screen reader user nothing, and it's hard for many people with low vision or colour blindness. Add the status as text for each night (a word, or hidden text a screen reader reads), give the month a caption, and use real table markup so each date is announced with its weekday. (WCAG 1.4.1, WCAG 1.3.1)

<table class="avail">
  <caption>December 2026 availability</caption>
  <thead>
    <tr><th scope="col" abbr="Sunday">Sun</th><th scope="col" abbr="Monday">Mon</th> ...</tr>
  </thead>
  <tbody>
    <tr>
      <td>13 <span class="st booked">Booked</span></td>
      <td>14 <span class="st free">Available</span></td>
      ...
    </tr>
  </tbody>
</table>
<p>Minimum stay: 2 nights. Check-in 4 PM, check-out 11 AM (Central time).</p>
<!-- example month, rules and times, use your own -->
.avail .st { display: block; font-size: .8rem; }
.avail .booked { text-decoration: line-through; }  /* a second cue, not only grey */

A plain list of open dates ("Available: Dec 14 to 17, Dec 20 to 22") under the calendar is just as good and often easier for everyone. For more on table markup, see accessible tables and colour-only meaning.

2. Let people type their dates

Custom date pickers are one of the hardest widgets to get right with a keyboard and screen reader. The simplest fix is to offer labelled date fields people can type into, with the calendar as an extra, not the only way. Native date fields work with the keyboard on all modern browsers. If you keep a pop-up calendar, it must work with arrow keys, Escape and Enter, and return focus to the field when it closes; the W3C date picker example shows the expected keys. (WCAG 2.1.1, WCAG 3.3.2, WCAG 2.5.7)

<fieldset>
  <legend>Your dates</legend>
  <label for="ci">Check-in</label>
  <input id="ci" name="checkin" type="date" min="2026-11-03" aria-describedby="stay-hint" required>
  <label for="co">Check-out</label>
  <input id="co" name="checkout" type="date" min="2026-11-04" aria-describedby="stay-hint" required>
  <p id="stay-hint">Minimum stay 2 nights. Fridays and Saturdays book together.</p>
</fieldset>
<!-- example dates and stay rules, use your own -->

Don't make "drag across the calendar to pick your nights" the only way to choose a range.

3. Explain date problems in words

When the dates don't work, say why and what would: "Dec 19 is booked. The nearest open 2-night stay is Dec 20 to 22." Don't just turn the field red or clear it. (WCAG 3.3.1, WCAG 3.3.3) See accessible form error messages.

4. Guests, pets and requests

Use labelled number fields or select menus for adults, children and pets. If you use "-" and "+" buttons, give each a name ("Remove one adult", "Add one adult"), make them at least 24 by 24 pixels, and announce the new count. Add an optional text box for access needs, such as step-free entry or a ground-floor bedroom. (WCAG 4.1.2, WCAG 2.5.8, WCAG 4.1.3)

<div class="stepper">
  <span id="adults-l">Adults</span>
  <button type="button" aria-label="Remove one adult" aria-describedby="adults-l">-</button>
  <output id="adults" aria-live="polite">2</output>
  <button type="button" aria-label="Add one adult" aria-describedby="adults-l">+</button>
</div>
<label for="needs">Anything we should know about access? (optional)</label>
<textarea id="needs" name="needs" rows="3"></textarea>

5. Show the full price as text before payment

Guests want the total, not a nightly rate that grows at checkout. List the nights, cleaning fee, taxes and any deposit as text (a small table or list), and when the dates or guests change, announce the new total in a status message so screen reader users hear it. Then show a review step with the dates, guests, total and cancellation terms before you take payment. (WCAG 1.3.1, WCAG 4.1.3, WCAG 3.3.4)

<dl class="price">
  <dt>3 nights at $180</dt><dd>$540</dd>
  <dt>Cleaning fee</dt><dd>$85</dd>
  <dt>Lodging tax</dt><dd>$56.25</dd>
  <dt>Total</dt><dd>$681.25</dd>
</dl>
<p role="status" id="total-msg"></p>
<script>
  // after recalculating: one short message, not every keystroke
  document.getElementById('total-msg').textContent = 'Total for 3 nights: $681.25';
</script>
<!-- example prices and fees, use your own -->

6. Say how you take payment, in plain text

Booking scams that send fake payment links by text or WhatsApp are in the news, and careful guests now look for reassurance. Put a short line near the booking button and on the confirmation page saying how you take payment, for example "We only take payment on this website. We'll never ask you to pay by text message, WhatsApp or gift card," and put your phone number and email in the same place on every page. This helps everyone, and it's especially clear for people who use screen readers and can't check a padlock icon or logo at a glance. (WCAG 3.2.6)

7. Describe the place in detail

Guests with disabilities need facts to decide whether a rental works for them: steps to the entrance, door widths, bed heights, the shower type, grab bars, parking distance and lighting. Write these as text, with alt text on the photos that show them, and be specific rather than saying "accessible". Our hotel and B&B guide has a fuller list. (WCAG 1.1.1)

8. Platform notes

Common mistakes

A 5-minute check you can do today

  1. Open your booking page and put the mouse away.
  2. Press Tab. Can you reach the date fields, open and close any calendar, and see where the focus is?
  3. Type or choose dates that include a booked night. Does the page say, in words, what's wrong?
  4. Change the number of guests with the keyboard. Does the total update in text?
  5. Zoom to 200% on a phone-width window. Can you still read the calendar and the price without sideways scrolling? (WCAG 1.4.10)
  6. Find the line that says how you take payment. If there isn't one, add it.

What a scan can and can't check here

An automated scan finds only part of the barriers on the pages it visits. It can flag unlabelled date and guest fields, unnamed buttons, low contrast and missing table headers. It can't tell whether a calendar works with arrow keys, whether booked nights are clear without colour, or whether the total is announced, which is why the 5-minute check matters. Booking widgets in iframes on another domain may not be scanned at all.

Related: online booking widgets, hotels and B&Bs, tour and activity booking, checkout accessibility.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.