Widgets and Accessibility
At the latest through the requirements of the German laws of Barrierefreiheitsstärkungsgesetz (BFSG, Accessibility Enhancement Act) and the Behindertengleichstellungsgesetz (BGG, Equal Opportunities for Persons with Disabilities Act), digital accessibility has become an important goal in the provision of websites, web content, and digital services.
doo continuously works on making its booking interfaces such as widgets and the event website accessible. Our widgets, in their standard configuration, have been tested for accessibility by a certified tester according to BITV 2.0 and are continuously checked for accessibility during development. However, accessibility is not simply a status that is achieved once and then maintained—it is an ongoing process. Since our booking process offers high adaptability and many configuration options to reflect the diverse use cases of our customers, we rely on your attentiveness and cooperation to provide the most accessible registration process possible. Below you will find a collection of tips and guidance on what you can and should pay attention to in order to offer your customers an accessible booking experience.
If you come across a case where you believe our interfaces can be improved in terms of accessibility, we welcome your feedback to our customer support team.
Headings
A key requirement for accessible websites is consistent and semantically correct markup of headings. Assistive technologies such as screen readers allow users to navigate between headings to find the content they are looking for, since scrolling or skimming through content is not possible without visual perception. Technically, headings are marked as H1, H2, H3, etc., with the number indicating the heading level (similar to formatting styles in Word). Therefore, it is important that headings are correctly marked:
- Every page has at least one title marked as an H1 heading.
- No heading levels are skipped. After H1 comes H2, not H3.
- Content that functions as a heading must be formatted as such.
- Content that does not function as a heading must not be formatted as one. From an accessibility perspective, for example, a paragraph must not be formatted as a heading just to achieve a specific appearance like larger text or other emphasis. Only if content logically serves as a heading should it be marked accordingly. You can use the following test: If you were to create a table of contents for the page, would the text appear as an item in it? Then it should be formatted as a heading.
The widgets already contain formatted headings. When embedding them, it is therefore important to place the widget under a heading with the correct heading level.
- For the calendar and table widget as well as the booking widget with event information, the first heading level is H2. Ideally, the widget should be embedded on a page after an H1.
- For the booking widget without event information, the first heading level is H3. Ideally, the widget should be embedded on a page after an H2.
- If you format headings in the event description, we recommend starting from H3.
Colors and Contrast
To ensure that content is clearly distinguishable from the background, color selection should always take into account the contrast with the background or with adjacent content colors. In general, a minimum contrast ratio of 4.5:1 applies to text (for large text and non-text visual elements, 3:1). There are various tools available online to determine contrast ratios.
If you change the highlight color in the widget, you should consider the contrast ratio accordingly. Since the widget has a white background, darker colors are preferable. Keep this in mind as well when highlighting text with color in the event description.
Images
Images are not accessible to people who are blind or have limited vision. Therefore, it is important that visual content is provided with a text alternative (alt_text) that summarizes the content of the image. If images contain text, this text should either be included in the text alternative or otherwise represented on the page.
For images that you insert into the event description, you can add this text directly in the editor when uploading. For the cover image in the booking widget with event information, a general text is provided by default. You can adjust this for all events if needed via the translation file (see article Adjusting standard labels and texts in the doo booking process). If your cover image contains text, we recommend repeating the content in the event description—unless it is already covered by the standard information.