Accessibility

Works without JavaScript

Every page is server-rendered. Every link is a real anchor element with a real href, so navigation works with scripting disabled. The main menu is driven by a checkbox and CSS sibling selectors rather than a script, so it opens and closes without JavaScript. Drop-down sections use native <details> elements, as do the accordions throughout the site.

The lead form posts to the server and validates there, so it submits and returns errors with scripting off. The floating quote button is an ordinary link to /quote; with JavaScript it intercepts the click and opens a full-screen dialog instead, which is an enhancement rather than a requirement.

Keyboard

A skip link is the first focusable element on every page. Focus styles are visible and high-contrast everywhere, including on the menu button when its underlying control has focus. The quote dialog moves focus to its close button on open, closes on Escape, and returns focus to the button that opened it. The main menu also closes on Escape.

Screen readers

Headings are properly nested and used for structure rather than size. Every form field has a programmatically associated label, required fields are marked with required, and invalid fields carry aria-invalid with the error text adjacent. Form results are announced through a polite live region. Tables use real header cells with captions. Decorative elements — the rotating tote render, the scrolling ticker, the cage grid, the side rail — are hidden from assistive technology.

Motion

All animation respects prefers-reduced-motion. With that setting enabled, the rotating render, the scroll-reveal transitions, the marquee and the fluid animation all stop, and content appears immediately rather than on scroll.

Colour and contrast

The palette is deliberately two colours — periwinkle and blush — with body text held at high contrast against its background in both the light and dark sections. No information is conveyed by colour alone; grades, states and emphasis all carry text labels.

Zoom and reflow

Layouts use relative units and reflow to a single column on narrow viewports. Wide content — specification tables, which are unavoidable in this business — scrolls horizontally inside its own container rather than forcing the page sideways.

What is still imperfect

• Some specification tables are genuinely wide. They scroll rather than reflow, which is workable but not elegant on a small screen.
• The Tote Passport lookup and the impact calculator are interactive and therefore need JavaScript. Both render with default values without it, so no information is hidden.
• The scroll-depth rail is decorative and desktop-only; it is hidden from assistive technology entirely.

Tell us

If any part of this site blocks you, email sales@ibc-recycle.com and describe what happened. We will fix it and reply. If you would rather not use the website at all, write to us at 11966 Brookfield St, Livonia, MI 48150 and we will quote by email or post.