Accessibility and performance

Masthead is built to be usable by everyone and quick to load. A theme can only do half the work, though: the images, text and apps you add decide the rest. This page explains what the theme does for you, and what to look after yourself.

What the theme does for you

• Keyboard and screen reader support. Every menu, drawer, slider, tab and form can be used with a keyboard alone, with a visible focus outline. A "skip to content" link lets keyboard users jump past the header.
• Readable colors. Muted text and borders are drawn from each color scheme's text color, and the theme strengthens them automatically when a scheme needs it to stay readable.
• Responsive images. Every image is offered in several sizes, and each customer's browser downloads the one that fits their screen. Images below the first screen load only as customers approach them.
• Light pages. Each section loads only its own styles and scripts, so a page carries nothing for sections it doesn't use. Videos from YouTube and Vimeo are not requested until a customer presses play.
• Works without JavaScript. Filters, sorting, pagination and the country and language selectors are real forms and links, so they still work if a script fails to load.

Image sizes

Upload images large enough to look sharp on a big, high-density screen, and let Shopify do the rest. Shopify resizes and compresses every image and serves it in a modern format, so you never need to make smaller copies.

• Don't go much larger. Shopify accepts very large images, but a 6000 px photo gains nothing over a 3000 px one and takes longer to upload and process.
• Save photos as JPG. Use PNG only for logos and graphics that need a transparent background. A photo saved as PNG is many times larger.
• Set a focal point on images that will be cropped. In your Shopify admin, open the image in Content > Files and mark the part that must stay in view.

Each section's page lists the best size for its own images.

Alt text

Alt text is a short description of an image. Screen readers read it aloud to customers who can't see the image, it is shown if an image fails to load, and search engines use it to understand your pictures.

• Product images: in your Shopify admin, open the product, click an image and add alt text.
• Other images: open the image in Content > Files and add alt text there. It follows the image wherever the theme uses it.

Write what the image shows, as you would describe it to someone on the phone:

• Good: "Model wearing the camel wool overcoat, belted, with black ankle boots."
• Not useful: "image1", "coat", or a list of keywords.
• Leave alt text empty for images that are purely decorative, such as a texture behind a heading.

Never put important information only in an image. A sale banner whose only text is baked into the picture can't be read by screen readers, translated, or resized. Put the words in the section's text settings instead.

Motion and reduced motion

Some customers get dizzy or distracted by movement, and tell their device to reduce it. This is a system setting on phones and computers, usually under Accessibility. Masthead respects it everywhere. For those customers:

• the scroll animations from Reveal content on scroll are not shown
• background videos in the cover hero, image banner and slideshow are paused
• slideshows do not change slides by themselves
• scrolling text stands still

Everyone else also gets a pause button on anything that moves by itself: background videos, automatic slideshows, a rotating announcement bar and scrolling text.

To turn the scroll animations off for all customers, go to theme settings, open Animations and turn off Reveal content on scroll.

Colors and contrast

• When you edit a color scheme, check that the text color stands out clearly from the background, and the button label from the button. Aim for a contrast ratio of at least 4.5 to 1; free contrast checkers online will measure it for you.
• Text over a photo needs a dark enough overlay. Raise Overlay opacity until the heading is easy to read over the lightest part of the image.
• If you give a Buttons block its own colors, the theme editor shows a note when the label is hard to read on the button.
• Don't rely on color alone. "Items in red are on sale" means nothing to a customer who can't tell red from green; the theme's sale badge says it in words as well.

Headings and text

• Each page should have one main heading. The theme makes the heading of a page's first section the main heading automatically, so keep heading blocks on Automatic unless you have a reason not to.
• Write links and buttons that make sense on their own: "Shop knitwear", not "Click here".
• Fill in Video description on videos and Brand name on logos. Both are read aloud by screen readers.
• Add captions to videos that have speech.

Keeping your store fast

• Apps are the usual cause of a slow store. Each app can add its own scripts to every page. Remove apps you no longer use, and check their app embeds are turned off in the theme editor under App embeds.
• Keep the first screen simple. One hero image loads faster than a six-slide slideshow or a video.
• Use video sparingly. One short background video on a page is plenty.
• Limit fonts. Masthead loads three typefaces at most: heading, body and accent. If you don't use the accent font, set it to the same family as your headings.
• Don't overfill the home page. Eight to ten sections is a comfortable length.

To measure, use the web performance reports in your Shopify admin, or Google's PageSpeed Insights. Test a product page and a collection page as well as the home page, and compare before and after installing an app.