Performance and accessibility

What Nappa does to load fast and stay accessible, and what you can do to keep your store fast and readable.

What Nappa does for speed

• No heavy library or framework. Styles are plain CSS. Each interactive part, such as the gallery or the cart, has its own small script that loads without blocking the page.
• Some scripts load only when needed. For example, the search code loads when the visitor moves toward the search icon, and the quick order list script loads only on products that use it.
• Images load in the size that fits the screen. Images below the first screen load only when the visitor scrolls near them. The main image of the page loads first.
• Fonts show with a fallback font while they load, so text is readable at once.
• The Featured product section doesn't load Shopify's payment scripts on the home page unless you turn on Show dynamic checkout buttons.
• Browsing, filtering, adding to cart and checking out work without JavaScript. This helps in in-app browsers, such as Instagram or TikTok, and on slow connections.

What Nappa does for accessibility

Nappa is built to meet the Web Content Accessibility Guidelines (WCAG) 2.2, level AA. Your content and settings also affect accessibility, so check the advice below.

• Every page can be used with a keyboard alone. Focus is always visible, and a skip link leads to the main content.
• Buttons and links are large enough to tap.
• Panels, such as the cart drawer, filters and menus, close with the Escape key.
• Images without alternative text are hidden from screen readers instead of being read as file names.
• Visitors who turn on "reduce motion" in their device settings see no animation. Slideshows and scrolling logos stop for them. For everyone else, slideshows, scrolling logos and background videos have a pause button.
• The Pop-up section never opens on arrival and never covers the whole screen on phones. The announcement bar never changes messages on its own.

Keep your store fast

• Images: upload good-quality JPEG or WebP files. Shopify creates smaller versions, but very large files still take longer to process. Avoid images that contain text: the text is hard to read on phones and invisible to screen readers.
• Videos: keep background videos short. A hero video replaces the image and is heavier.
• Apps: each app can add scripts to every page. Remove the apps you don't use, and turn off unused app embeds in the App embeds panel of the theme editor.
• Sections: a long home page with many sliders and videos loads more. Keep the sections that help customers decide.
• Measure: check your store's speed report in your Shopify admin, or test a page with a tool such as PageSpeed Insights.

Check the contrast of your colors

The preset color schemes meet the contrast levels of WCAG 2.2 AA. When you change colors, check each pair:

• Text needs a contrast ratio of at least 4.5:1 with its background, and large headings at least 3:1.
• Icons, field borders and other visual cues need at least 3:1.
• Check these pairs in each color scheme: Background and Text; Primary button and Primary button label; Secondary surface and Secondary surface text; Accent and Text on accent; and Accent on Background, because links use the accent color.
• For text over an image, raise the Image overlay until the text is easy to read on the brightest part of the image.

Use any contrast checker, for example the WebAIM contrast checker.

Write accessible content

• Write alternative text for product images and section images in your Shopify admin. Describe what the image shows in a short sentence. Leave it empty for purely decorative images.
• Keep one main heading per page. Nappa uses the page title as the main heading. In the Heading theme block, use Heading 2 or Heading 3 for the HTML tag.
• Write link and button labels that say where they go, such as "Shop dresses" rather than "Click here".
• Fill in Video title in the Video section and Accessible name in the Slideshow section.
• Add captions to videos that contain speech.
• If your store sells to the European Union, the European Accessibility Act may apply to you. Check your obligations with a qualified advisor.