Accessibility

Pawsome handles the parts of accessibility that live in the theme code: keyboard access, focus, motion and the contrast of the colors the theme works out for you. Your content decides the rest. A photo without alt text or a pale heading on a pale image is something only you can fix.

Pawsome isn’t certified against WCAG, and no theme can make a store accessible on its own.

What the theme does

Every link, button and form field in Pawsome can be reached with the Tab key, in the order it appears on the page.

The first Tab press on any page, the password page included, shows a Skip to content link that jumps past the header to the main content.
Top-level menu items with sub-links open with Enter or Space, and Escape closes an open menu and puts focus back on its item. Mega menus work the same way. Links that don’t fit move into a More menu, which opens the same way.
The mobile menu, cart drawer, search, quick view, filter drawer, size chart, image zoom and pickup details open as dialogs. While one is open, the page behind it can’t be reached with Tab or the mouse. Escape closes it, and focus goes back to the button that opened it. The newsletter popup works the same way, except in the Corner card layout, which leaves the page usable and doesn’t take focus.
In the Tabs section, the arrow keys, Home and End move between tabs. Predictive search results move with the up and down arrows. The before-and-after slider moves with the arrow keys.
Screen readers hear cart updates, and when a shopper changes slides, the slideshow announces which slide is showing, such as “Slide 2 of 4”.

Visible focus

Every link, button, menu toggle and form field shows a focus ring when it is reached from the keyboard. The ring takes the text color of the band it sits on, so it changes with your colors. Over a photo, a control rings in its own text color.

Motion

Pawsome turns motion off for shoppers who ask their device to reduce it, with Reduce motion on iPhone and Mac or with Animation effects turned off on Windows. For them:

entrance and scroll animations don’t play, and content shows in place
slideshows, testimonials and the announcement bar don’t rotate on their own
scrolling text and logo marquees stand still
background videos show their poster image instead of playing
a header set to Show when scrolling up stays in view

Setting Animation style to None in Theme settings > Animations does the same for every shopper.

Pause controls

Show pause button lets shoppers stop anything that moves on its own. Without it, moving sections hold or stop as follows.

Rotating sections hold while the pointer is over them, while something inside them has keyboard focus, and while they are off screen. A Slideshow or Testimonials section with Rotate automatically on, and a Multiple images with text section with Rotate through images automatically on, keep rotating after the shopper picks a slide with a tap, swipe, arrow, dot or arrow key, and give that slide its full time first. An announcement bar set to Rotate one at a time stops for good at the shopper’s first tap or arrow press when no pause button shows.
Marquees hold while something inside them has keyboard focus and while they are off screen. Without a pause button, the shopper’s first tap stops them for good. That covers a Logo list with the Marquee layout, an announcement bar set to Scroll continuously, and Scrolling text with Movement set to Automatic. The pointer holds a logo list or scrolling text when Pause on hover is on, and always holds the announcement bar. With Movement set to On scroll, the text moves only while the shopper scrolls.
Show pause button adds a visible pause button to any of these six sections. It is off by default. On a rotating announcement bar the button shows from tablet width up, and on phones the first tap still stops the rotation. In a slideshow, the button stops slide videos too. With it off, each video slide shows its own pause button.
Videos that play on their own on a loop show a pause button.

Color contrast the theme works out

You choose a background and a text color for each role in Theme settings > Colors. Pawsome mixes the softer colors from them: the gray of secondary text such as captions, and the outline of form fields.

On a section whose Color setting is Muted, Primary, Accent, or Custom with a Background color set, Pawsome checks those mixes against the section’s background:

Secondary text keeps a contrast ratio of at least 4.5:1. If no mix reaches it, the text uses the section’s full text color.
Form field outlines keep at least 3:1 against the field.
If your Primary or Accent color nearly disappears into the section’s background, buttons and badges in that section switch to its text color.
With Custom and Text color left blank, the section gets near-black text on a light Background and white text on a dark one.

On sections set to Default, the mixes use fixed amounts with no check, so their contrast follows from your Background and Text colors.

Pawsome doesn’t check your Text color against your Background, or any other pair you pick. Those are yours to check, as the next part explains.

What you control

Alt text

Alt text tells screen reader users what an image shows. Pawsome uses the alt text you add to each image in Shopify, so write it where the image lives:

Product photos: open the product in your Shopify admin and add alt text to each media item. Shopify’s guide: Adding alt text to media.
Images you pick in the theme editor: they come from Content > Files in your admin, where you can add alt text to each file. See Shopify’s guide to uploading and managing files.

Describe what matters about the picture in a short sentence. Skip “image of” and leave alt text empty only for images that are pure decoration.

A few settings ask for text in the editor too:

Alt text on the Featured video and Media with text sections describes the video.
Name on each logo in the Logo list names the logo for screen readers, even when Show names below logos is off.
An Image link blocks tile with no Label is named by its image’s alt text, so give that image alt text.

Your color choices

Check every pair you set in Theme settings > Colors: Text on Background, Text on primary on Primary, and so on. Body text needs a contrast ratio of at least 4.5:1, and large headings, icons and borders need 3:1. Any online contrast checker will give you the ratio for two hex codes. The same goes for custom section colors and for a Button block with a custom background.

Text over images and video

Pawsome can’t see your photos, so it can’t tell whether white text lands on a bright sky. In sections that put text over an image or video, such as the Slideshow, Image with text overlay, Featured video and Collection banner, use these settings:

Text color scheme: Light for dark images, Dark for light ones. If Automatic leaves the text hard to read on a Slideshow or Image with text overlay, choose one of the two yourself.
Overlay style: Gradient darkens or lightens the image behind the text and fades out across the rest. Solid covers the whole image.
Overlay opacity: raise it until the text reads clearly over the busiest part of the image.

The Collection banner has only Overlay opacity.

Check the result on a phone as well. On small screens the text covers more of the image. In Image with text overlay, Content on mobile set to Below the image moves the text off the photo on phones.

Video captions

Background videos play muted, so they shouldn’t carry information shoppers need to hear. Pawsome’s video settings have no place for a caption file. For a video with speech, host it on YouTube or Vimeo and add captions there, where shoppers can turn them on in the player, or put a transcript on the page. Shopify’s accessibility guide recommends both.

Headings

Use headings to name what each part of the page is about, not to make text big. The Heading block has a Heading level setting separate from Size, so you can keep the outline in order and still pick the look you want. A page needs one Heading 1, then a Heading 2 for each part. Pawsome already uses Heading 1 for product titles, collection titles and article titles.

Link and button labels

Write labels that make sense on their own. A screen reader user often hears a list of links with nothing around them, so “Shop dog beds” beats “Click here”. Settings such as Link label on the Icon block and the Scrolling text section name links that have no visible text, so fill them in when you add a link there.

Use Open in new tab on the Button block sparingly. A new tab breaks the back button, and the button doesn’t tell screen reader users that a new tab will open.