Best practices for an accessible booking page

YouCanBookMe is committed to accessibility. You can read our Accessibility statement here, related to booking pages on the new experience.

As we continue to make improvements to the booking experience for those on-screen readers, there are a few things you can consider when setting up your booking pages.

What is a screen reader?

A screen reader is a form of assistive technology that renders text and image content as speech or braille output. Screen readers are essential to people who are blind, and are useful to people who are visually impaired, illiterate, or have a learning disability.

Using Markdown

It seems obvious but, while Markdown lets you visually style your booking pages, it can also make the page more or less accessible for a screen reader, depending on how you use it.

Headings

Headings are useful for screen reader users as they can quickly jump between headings with shortcuts.

However, they can lead to problems when it is used purely for visual formatting. As such, if you make use of a Markdown heading to add emphasis, bear in mind to a screen reader this will just be treated like any other page heading. This may be confusing for screen reader users if you're using it only for visual formatting. Instead, you should try and use bold and italics to add emphasis to your text.

Links

If you want to include a link in your text it is best to wrap it in the markdown tags for a link. This way the screen reader can avoid reading out the entire URL and instead read a more descriptive link text.

Images

It is best to use actual text on your booking forms so that screen readers can read the text. Text contained in an image cannot be read by assistive technology. 

Booking Forms

Our booking forms are accessible out of the box, however, if you are creating a complicated form there are some extra steps you can consider to make the form more accessible.

Long forms

When creating a longer form, it can be beneficial to add extra headings into the form so the user can jump around more easily. You can use the Block of Text form element to add in extra text, including Markdown.

Text after the question

We include an option to add extra text after the field to give users hints on how to fill it in. However, bear in mind for screen readers this text is read out along with the label of the field in question. As such it should not be used for appending extra information at the end of the form that could instead be a separate block of text.