Accessibility and performance
Accessibility
Section titled “Accessibility”Casella aims for WCAG 2.1 AA.
- Text and button colors pass contrast checks in every preset and scheme.
- Every control is at least 44 px tall.
- Menus, hotspots, drawers, filters and the units switch work with a keyboard.
- Focus is always visible.
- Dialogs trap focus and return it when they close.
- Screen readers hear measurements in words, such as “Width 84 inches”.
- Sale and sold-out states never rely on color alone.
- Forms show errors in text and mark the field.
- Reduced motion is respected. Movement becomes a short fade.
Turn all motion off under Theme settings, Motion. The same group turns page transitions and the add-to-cart animation on or off. Page transitions also stand down on low-power devices.
Room changes that run on their own and looping videos have a pause button. They never start under reduced motion; a video shows its poster image instead.
Your part
Section titled “Your part”- Write alt text for photos.
- Keep headings in order.
- Test long product names. Text wraps.
- Keep the theme’s color pairs so contrast holds.
Performance
Section titled “Performance”- Core pages use no WebGL.
- Sections load their own CSS only when used.
- Scripts are deferred.
- The first images on a page load first. Later images load lazily.
- Product pages load recommendations only as they near the screen.
- Images use Shopify’s CDN with the right size for each screen.
- Upload images at the sizes in the sections guide. Do not upload huge files.
- Limit apps. Each one adds scripts.
- Keep the number of home page sections modest.
- Compress photos before upload.