Motion & accessibility

Opaline moves with the page, never against the visitor, and stays usable with a keyboard and a screen reader.

Motion#

Animation in Opaline follows the scroll rather than timers: headings rise into place, sections reveal as they enter the screen, some images drift. Turn the reveal off under Theme settings > Animations.

Visitors who ask their device to reduce motion get the same content without the movement, whatever the setting. Visitors who ask for reduced transparency get solid panels instead of glass.

Keyboard and screen readers#

Every interactive element can be reached with Tab and shows a visible focus ring.
Panels — the cart drawer, the quick view, the menu, the popup — close with Esc and return focus where it was.
Sliders and carousels can be moved with the arrow keys.
Form fields have labels, and error messages are announced.

What depends on you#

Add alternative text to your images in the Shopify admin.
Keep text readable on its background: 4.5:1 contrast for text, 3:1 for large headings and icons. This matters most for text set on photographs.
Use descriptive button labels, such as “Shop the tagines” rather than “Click here”.