Accessibility and performance

Tenora is built to be usable by everyone and to load quickly on phones. This page explains what the theme does for you and what you can do to keep your store accessible and fast.

What the theme does for accessibility

Tenora was tested against the Web Content Accessibility Guidelines (WCAG) 2.2, level AA, with automated checks and keyboard tests on every template.

Keyboard use

• Every link, button, menu, drawer and form can be used with the keyboard only.
• Drawers (menu, cart, filters, pickup locations, country and language) keep the keyboard focus inside while they are open. The Esc key closes them, and the focus returns to where it was.
• The Shop the room points, the "Will it fit?" form, the image zoom and the cm/in switch all work with the keyboard.
• After a customer removes an item from the cart, the focus moves to the next item or to the cart heading.

Visible focus

When a customer moves through the page with the Tab key, the element in focus has a clear outline. The focus order follows the order of the page.

Skip link

The first time a customer presses Tab, a Skip to content link appears. It jumps past the header to the main content of the page.

Reduced motion

Some people turn on the "reduce motion" setting on their device. For these customers, the theme:

• turns off animations and transitions, such as the fade-in of sections
• stops the automatic rotation of the announcement bar
• turns off smooth scrolling

Color contrast

• All text and background colors in the Tenora, Terrace and Lantern presets meet a contrast ratio of at least 4.5:1 (WCAG AA). Borders and icons meet at least 3:1.
• Error and success messages use the text color of the color scheme with a colored icon. They stay readable on every color scheme.
• If you change the colors, keep a contrast ratio of at least 4.5:1 between text and background. You can check a color pair with any online contrast checker.

Screen readers

• Pages use correct headings and landmarks, such as the header, main content and footer.
• Prices, unit prices, sale prices and stock states have clear labels for screen readers.
• "Will it fit?" results and the number of countries found by the country search are announced.
• Buttons and form fields have labels, including in the 30 translated languages.
• Touch targets are at least 24 x 24 pixels.

Text direction and language

The page language and text direction come from the storefront language. Right-to-left languages are mirrored automatically. See Selling globally.

What you can do: alt text

Alt text (alternative text) describes an image for people who can't see it. Screen readers read it aloud, and search engines use it.

Where to add alt text

• Product images: open a product in the Shopify admin, select an image and select Add alt text.
• Images in sections and files: go to Content → Files, select the image and edit its alt text.
• Collection images: open the collection in the Shopify admin and edit the image.

How to write good alt text

• Describe what the image shows and why it matters. For example: "Oak dining table with six linen chairs in a bright room".
• Keep it short, usually one sentence.
• Don't start with "Image of" or "Photo of".
• Include details that help shoppers choose, such as color, material or size.
• Don't repeat the product title if the image adds nothing new. Describe the view instead, for example "Side view showing the slim oak legs".

What the theme does automatically

• Product images without alt text use the product title in the product gallery.
• Some images are decorative, such as material images in Materials and care cards and the sample image next to its title. The theme hides these from screen readers, because the text next to them already names them.
• The logo uses the store name when the logo image has no alt text.

What the theme does for speed

• Pages are built on the server. The theme uses a small amount of JavaScript, and each section loads its own script only when the section is on the page. For example, the "Will it fit?" script loads only on products with dimensions.
• Page-specific styles, such as product page and filter styles, load only on the pages that use them.
• Images load in several sizes, so each device downloads the size it needs. Images below the first screen load only when the customer scrolls near them.
• The first large image on the page (for example the image banner) loads first, so the page looks ready sooner.
• YouTube and Vimeo videos load only when the customer plays them.
• Related products load when the customer scrolls near them.
• Fonts come from the Shopify font library and show text right away while the font loads.

What you can do: keep your store fast

Use the right image sizes

Shopify resizes images for each device, but a good original image helps. Use these sizes:

Where	Recommended size
Image banner	2400 x 1350px .jpg
Image banner, mobile image (optional)	1080 x 1350px .jpg
Image with text	1500 x 1875px .jpg
Shop the room	3:2 shape, for example 2400 x 1600px .jpg
Mega menu promotion	4:3 shape
Video cover image	16:9 shape
Product images	At least 2000px on the longest side, all in the same shape
Logo list	Transparent .png or .svg
Favicon	32 x 32px .png

Tips

• Use .jpg for photos and .png or .svg for logos.
• Compress photos before you upload them. Aim for less than 500 KB per photo.
• Set a focal point on important images. In the theme editor, select the image and choose the focal point. Tenora uses it when it crops the image.

Install fewer apps

Many apps add their own scripts and styles to every page, even when you don't see them. This can slow down your store.

• Tenora already includes dimensions, "Will it fit?", materials, samples, delivery details and Shop the room. You don't need an app for these features.
• Remove apps that you don't use. After you uninstall an app, check that it didn't leave code in your theme. Contact the app developer if it did.
• Before you install an app, check your store speed. Check it again after installation.

Use videos carefully

• Add a Cover image to the Video section. The cover image is shown until the customer plays the video, and the player loads only then.
• Keep Shopify-hosted videos short and use a reasonable file size.
• Don't use a video as the first element on the home page if an image can do the same job. Images load faster.

Keep the home page focused

Every section adds content to download. Use the sections that help customers most, and remove the ones you don't need.

Check your speed

In your Shopify admin, go to Online Store → Themes and look at the speed report for your store. Check it after big changes, such as new apps or new home page sections.