Calendly is a scheduling platform. I decided to use Calendly on my homepage, giving someone the ability to choose a time and book a call. However after testing I've realised it has quite a few accessibility issues.
Accessibility means that people can do what they need to do in a similar amount of time and effort as someone that does not have a disability.
Firstly, lets take a look at their Voluntary Product Accessibility Template (VPAT). This is basically a document that outlines how accessible their product is, however unlike an accessibility statement references WCAG more.
I don't have a lot of faith in these documents due to prior experience. I was once in a company where the Product Manager copied a VPAT from another company and openly said "I just made up the details, who is going to check this?." However giving the benefit of the doubt, let's give Calendly's VPAT a look.
Off the bat, the VPAT is from 2022, so unless the product has had zero updates since then, it's outdated and not relevant.
That's pretty much the end of the VPAT review as the document doesn't apply, a new document is needed. It would be a bit like proof reading an article from 2022 when it was last updated in 2024.
I used their embed-popuptext option, so you click the link and the calendar loads.
What’s the difference between a Popup, Dialog, and Modal?
These are often used interchangeably, but they are different:
A popup is a small, non-intrusive element used for information like tooltips, dropdowns, or notifications. It doesn’t disrupt the user’s main task, and background content remains accessible. Popups must include a dismissal method, like clicking outside or pressing Esc, and they should be easy to navigate using a keyboard. ARIA roles like role="tooltip" can help if a tooltip.
A dialog is used for displaying information or collecting inputs like confirmation prompts. Like popups, dialogs are typically dismissible and allow access to background content. Focus should move to the dialog when opened but not be trapped within it.
A modal is a more disruptive container that blocks interaction with background content until dismissed. This might be a login screens or payment confirmations. Focus is trapped within the modal until it is closed, with clear dismissal methods like a close button or Esc. Modals also block background content. They follow additional guidelines to ensure no keyboard traps and logical focus order.
Accessibility problems
I would say Calendly in this context is a modal. It is blocking interaction with the rest of the page until interaction with the modal is complete. It loads OK, but as you try and navigate with the keyboard, the user is directed behind the page. So what does this impact?
2.4.3: Focus Order (Level A)
Keyboard focus must follow a logical and intuitive order to ensure operability for keyboard users. If focus moves behind a modal, it disrupts logical navigation.
2.4.7: Focus Visible (Level AA)
This is focusing the backdrop, or behind this modal so it's has a darken black background. Users must be able to see which element currently has focus. If focus goes behind the modal, visibility is often lost. If I test the colour contrast of this text it will fail.
3.2.2: On Input (Level A)
If the modal does not properly restrict focus or maintain user expectations, it fails predictable behaviour criteria. This issue also impacts the "Operable" principle by failing to make interactive elements usable in a predictable manner for assistive technologies.
There's also an issue with their close button
Mainly as it's coded with a div and there's nothing to manage focus so the keyboard cannot interact with it. There's also no additional text to tell the user "Close".
<div class="calendly-popup-close"></div>
The Escape key doesn't work
The inability to close the modal with the Escape key impacts WCAG 2.1.1, you would expect this to close easily.
Choosing something new
These are some simple, easily fixable issues at the moment. There might be more however as a first step, I provided free consulting highlighted these issues to their support team. They might happily welcome the feedback and fix things. Planning for the event they don't, it's worth searching for a new product.
Top comments (0)