LIVE
DE / EU  ·  UTC+1
clever.legal
BFSG · EN 301 549 · WCAG 2.1 AA

Accessibility Statement

Scope

This accessibility statement applies to the publicly accessible website clever.legal of clever.legal GmbH (in formation), Florianweg 1, 88677 Markdorf.

We are committed to making our digital offerings accessible in accordance with the Accessibility Strengthening Act (BFSG), the European standard EN 301 549, and the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA.

Accessibility status

This website is largely conformant with WCAG 2.1 Level AA. In April 2026, we conducted a comprehensive review and revision of all public pages. The following measures have been implemented.

Implemented measures

01

Language & basic structure

  • The HTML document is marked with lang="de" so that screen readers use the correct speech output.
  • The page uses semantic HTML5 landmarks: header, main, nav, and footer. Screen readers can navigate directly between page sections.
  • A skip link ('Skip to content') is implemented as the first interactive element. It becomes visible on focus and bypasses the navigation.
02

Navigation & keyboard accessibility

  • All interactive elements (links, buttons, form fields, sliders) are fully keyboard operable.
  • The global focus indicator is defined as a 2px outline in the accent color (:focus-visible) and visible on all elements.
  • The main navigation and mobile navigation each have aria-label attributes.
  • The mobile menu button includes aria-expanded and aria-controls. The menu closes with the Escape key and focus is automatically moved into the menu when opened.
03

Colors & contrasts

  • All text-background combinations meet the WCAG minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
  • Color is never used as the sole information carrier — severity levels in the alerts table are additionally labeled with text.
  • The accent color (green) on dark background achieves a contrast ratio of approximately 5.8:1.
04

Animations & motion

  • All animations (ticker marquee, cursor blinking, bell pulse, transitions) are completely disabled when the prefers-reduced-motion system setting is active.
  • The typewriter animation in the hero section is displayed immediately as complete text when reduced motion is enabled — with no delay.
  • The ticker is described with role="marquee" and aria-label. The scrolling content is hidden from screen readers via aria-hidden to avoid unnecessary repetition.
05

Forms & error messages

  • All form fields in the contact form are associated with visible label elements.
  • The alert subscription modal uses visible labels, aria-required, and aria-describedby to associate fields with error messages.
  • Error messages are marked with role="alert" so screen readers announce them immediately.
  • The subscription modal uses the native dialog element with built-in focus trap and is linked to its title via aria-labelledby.
06

Images & icons

  • All informative images (team photos, blog covers) carry descriptive alt texts with name and role.
  • Decorative SVG icons are marked with aria-hidden="true" and ignored by screen readers.
  • The logo is implemented as a link with aria-label="clever.legal – Home".
07

Semantic structure & ARIA

  • The heading hierarchy is consistent: one H1 per page, followed by H2 for sections and H3 for subsections.
  • The audience tabs (cluster selection) are implemented with the complete WAI-ARIA Tabs pattern: role="tablist", role="tab" with aria-selected and aria-controls, and role="tabpanel" with aria-labelledby.
  • Comparison tables (status quo vs. clever.legal, alerts overview) are marked up with ARIA table roles (role="table", role="row", role="columnheader", role="cell").
  • The footer is structured with multiple <nav> elements, each with an aria-label for the category.
08

Links & interactive elements

  • Recurring links (e.g., 'Open' in the alerts table) have individual aria-label attributes containing the respective context.
  • Blog article links carry aria-label with the article title.
  • Range sliders in the cost calculator use aria-valuetext to read out the current value with unit (e.g., '80 cases').
Known limitations

Despite our efforts, some areas may have limitations:

  • Third-party embedded content (e.g., external widgets) is beyond our control.
  • Older blog posts may occasionally contain suboptimal alt texts — we are working on updating them.
  • PDF documents offered for download may not yet be fully accessible.
Testing methodology

Accessibility was verified through a combination of the following methods:

  • Static code analysis of all public components
  • Automated tests with ESLint jsx-a11y ruleset
  • Manual testing against WCAG 2.1 Level AA success criteria
  • Contrast ratio verification of all color combinations
Feedback & contact

If you encounter any barriers or have suggestions for improvement, we welcome your feedback:

clever.legal GmbH (in formation)

Attorney Marc Ellerbrock

Florianweg 1, 88677 Markdorf

E-Mail: barrierefreiheit@clever.legal

We will endeavor to respond to your inquiry within 14 days and to remedy any deficiencies promptly.

Enforcement procedure

If no satisfactory solution is found after contacting us, you may contact the responsible enforcement body. The competent market surveillance authority of the respective federal state pursuant to § 3 BFSG is responsible.

This statement was created on April 22, 2026, and last updated on April 22, 2026.