Skip to main content

Advanced Website: Accessibility

The information in this article is relevant only for Pro users at this time. For information about booking websites for Lite users, refer to the Guesty Booking Engine

Guesty takes accessibility seriously and we are actively investing in making the sites developed with the Guesty Websites Platform more accessibility friendly. While we enable you to build accessible sites and are continuously adding features to make it even easier, it is ultimately up to you to ensure your site is accessible, similar to SEO or site performance. Learn more about accessibility at Guesty Websites below.

What is accessibility?

Accessibility in terms of a website is a site that can be used by users with auditory, visual or cognitive disabilities, as well as those who must navigate by voice, screen readers or other assistive technologies. According to the World Wide Web Consortium (W3C), an organization that provides international web standards, an accessible website must be perceivable, operable, understandable and robust for these users.

Built-In features for accessible sites

Here are some of the built-in features that you can use to create more accessible sites with Guesty Websites.

Correct semantics by default

Where possible, Guesty Websites leverages semantic HTML5 elements. This is the best practice for accessibility, as the standards of HTML implement a lot of good UX out of the box for assistive tools. The foundation of Guesty Websites accessibility strategy is to rely on the standard HTML functionality. For example, headers use header tags (<h1>). This ensures the best accessibility functionality, as it’s already baked into browsers and supported by screen readers.

Heading tags

By using heading tags, you help visitors who use screen readers understand your website and how it's organized. Heading tags (h1, h2, h3, and so on) break the content on a page up into related chunks of information. Keep the following in mind:

  • Heading tags should be used to introduce content
  • Use only one h1 tag per page or view
  • Heading tags should be written in a logical sequence
  • Do not skip heading levels

Alt text

Ensure all image elements have an alt tag or attribute. Adding alt text to your images helps visually impaired visitors better understand the context of the photos on your site. When an alt tag is not present on an image, a screen reader may announce the image’s file name or path instead. This fails to communicate the image’s content. For images that include text, ensure the alt description includes the image’s text.

You can add alt text to widgets with images, media, icons, or blog post thumbnails. In most cases, you can add alt text by right clicking the widget and selecting Edit Content. On the Content tab, there is a field for alt text. You can either type your own alt text or click the Sparkle () icon to use the AI Assistant to generate alt text. The alt text will be generated in the language the page is currently in.

It is important to note that the Sparkle icon will be disabled if there is no image selected. In addition, you must be on a Team plan or higher with AI permissions to use the AI Assistant.

Note:

  • There is an 80-character limit for alt text fields.

  • Background images do not have a space to enter alt text because when the page source is scanned or crawled by a search engine the background design is not recorded as content.
Was this article helpful?
0 out of 0 found this helpful