website-accessibility

Website Accessibility Statement

We want everyone to be able to use moneli.art comfortably — whether you navigate with a keyboard, use a screen reader, or need larger text and clearer contrast.

Our goal

We follow the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA as closely as we can.

Found a problem?

If something on the site is hard to use, please let us know:

Email: contact@moneli.art

It helps to include: the page address, what you were trying to do, your device and browser, and any assistive technology you were using (e.g. a screen reader). We’ll look into it and get back to you.


What we’ve built in

Skip links

At the top of every page there’s a hidden “Skip to content” link that becomes visible when you press Tab — so keyboard users don’t have to tab through the whole header each time. In the artwork catalogue there are also “Skip filters” and “Skip to footer” links for the same reason.

Keyboard navigation

Everything on the site can be used with a keyboard alone — no mouse needed. In the artwork grid you can move between cards using the arrow keys. Filters can be toggled with Enter. On mobile, the filter drawer can be closed by pressing Escape.

Focus indicators

Wherever you tab to, you’ll see a clear double-ring outline (white inner ring, dark outer ring) so it’s always obvious which element is selected. This applies to checkboxes, buttons, cards, pagination, and navigation links.

Filters

Filters are grouped into clearly labelled, collapsible sections. You apply changes intentionally using the Apply button — nothing updates automatically while you’re still choosing. Filtered states are saved in the URL, so you can bookmark or share a specific selection.

Each filter uses a real HTML checkbox under the hood, so screen readers and assistive technologies handle them correctly. The visual indicator (a small circle or gold mark) is decorative only.

Colour and contrast

  • Main text (#181818 on white) has a contrast ratio of around 16.5:1 — far above the required minimum.
  • Muted text (#5f5f5f on white) reaches around 5.9:1, also above the AA minimum of 4.5:1.
  • The Apply button uses a gold background with dark text, achieving approximately 9:1 contrast.
  • Colour filter options always show both a swatch and a text label, so you never rely on colour alone to understand a choice.

Live updates

After you apply filters, the “Showing X of Y artworks” count is announced automatically to screen readers without you having to navigate anywhere.

Reduced motion

If you’ve turned on “reduce motion” in your operating system settings, all animations and transitions on the site are disabled — including the filter drawer slide, card hover effects, and page transitions.

Mobile and touch

On mobile, filters open as a slide-in panel. All tappable elements (buttons, checkboxes, pagination) are large enough to hit comfortably — at least 44×44px. The filter button is positioned where your thumb can reach it.

Page structure

The site uses proper semantic HTML throughout: <article> for each artwork card, <nav> for pagination, <section> with descriptive labels for the filter and results areas, and <details>/<summary> for collapsible filter groups. Labels that aren’t visible on screen are still present for screen readers.

Scrolling

Key sections of the page have scroll margin applied so that when you jump to them via a link or Tab, they don’t end up hidden behind the sticky header.