Performance and accessibility

Chisel is built to load quickly on a phone and to work with a keyboard and a screen reader. This guide describes what the theme does for speed and access, and what you can do in your images and content to keep those benefits.

What the theme does for speed

• Responsive images. The theme serves each image at several widths, from 240 to 2000 pixels, and the browser picks the size that fits the screen.
• Lazy loading. Images below the first screen load as the shopper scrolls. The first visible image on a page, such as the cover image, loads at once with high priority.
• Preloaded body font. The regular body font loads early. Other font styles load only when the page needs them.
• Critical CSS. The styles needed for the first view load first. The rest of the stylesheet follows.
• Scripts for features. Features such as compare, quick view and recommendations load their scripts with a low priority, so they do not hold up the first page view.
• Quiet defaults. A section such as the countdown renders nothing when it has no content to show.

What the theme does for accessibility

• Skip link. A Skip to content link is the first focusable item on each page. Keyboard users can move past the header with it.
• Language and direction. The page sets its language and text direction from the store's active language.
• Focus styles. Keyboard focus shows a visible outline on links, buttons and fields.
• Reduced motion. When a shopper asks their device to reduce motion, the theme shortens or stops its animations.
• Keyboard menu. The header's All departments panel opens with a button. The arrow keys move between the top-level links, and Escape closes the panel and returns focus to the button.
• Labels on fields. Form fields such as the search box, the order note and the purchase order number have visible labels.
• Alternative text. Images use the alt text you enter in Shopify. The theme uses the image's own alt text unless the block sets another.
• Status messages. Cart and quick order messages are announced to screen readers.

Advice for your images

1. Upload large enough images. The theme serves images up to 2000 pixels wide. Upload product photos at about 2000 pixels on the longest side. Bigger files do not improve what shoppers see, and they slow the upload.
2. Use square or consistent product photos. The default product card ratio is 1 to 1. Photos with the product centered on a plain background look best in the grid.
3. Set the focal point. In the Shopify admin, set the focal point on a product or collection image so that any crop keeps the product in view.
4. Write useful alt text. Describe the product in a short phrase, such as "Cordless drill with two batteries". Leave alt text empty only for decoration.
5. Keep the logo small. Use a logo file with a transparent background. Set Logo width in the theme settings instead of resizing the file to a large size.
6. Avoid text in images. Put product names, prices and codes in the page text, where shoppers can select, search and read them with a screen reader.
7. Check the contrast. Choose color schemes where the text color has enough contrast with the background. Check the highlighter colors too, because they carry sale prices.

Advice for video and content

• Add captions to any video you upload.
• Keep headings in order on each page: one main heading, then section headings.
• Use descriptive link text, such as "Read the drill guide", instead of "Read more".

Check your setup

1. Run a speed test on a product page and on a collection page. Repeat the test after each large batch of new product images.
2. Use the keyboard only. Press Tab from the top of the page and confirm that the skip link and then the header links receive focus.
3. Open All departments with the keyboard. Move with the arrow keys and close with Escape.
4. Check each product image for alt text in the Shopify admin.
5. Use your device's reduced motion setting and check that the page no longer animates.

What the theme does not guarantee

The theme follows accessibility practices, but it cannot check your content. You are responsible for alt text, color choices in your schemes, and the wording of your text. If you need a formal audit, ask an accessibility specialist to review your live store.