Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @shopify/theme-a11y with all npm packages installed. Try it out:

var themeA11y = require("@shopify/theme-a11y")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@shopify/theme-a11y v3.1.0

A library of useful functions that help make your theme more accessible.

@shopify/theme-a11y

Getting Started

Theme Scripts can be used in any theme project. To take advantage of semantic versioning and easy updates, we recommend using NPM or Yarn to include them in your project:

yarn add @shopify/theme-a11y

and then import the functions you wish to use through ES6 imports:

import * as a11y from '@shopify/theme-a11y';

If you prefer not to use a package manager, you can download the latest version of Theme A11y and include it in your project manually from the following links:

These files make Theme A11y accessible via the Shopify.theme.a11y global variable.


Browser Support

Theme A11y uses a method not available in legacy browsers: Element.matches(). If you wish to support legacy browsers, make sure you add the following dependencies to your project:

yarn add element-matches

and then import them before you import Theme A11y:

// Only need to import these once
import 'element-matches';

// Import @shopify/theme-a11y anywhere you need it
import * as a11y from '@shopify/theme-a11y';

Methods

accessibleLinks(elements, options)

Add a descriptive message to external links and links that open to a new window.

  • elements - Specific elements to be targeted
  • options.messages - Custom messages object to overwrite with keys: newWindow, external, newWindowExternal
  • options.messages.newWindow - When the link opens in a new window (e.g. target="_blank")
  • options.messages.external - When the link is to a different host domain.
  • options.messages.newWindowExternal - When the link is to a different host domain and opens in a new window.
  • options.prefix - Prefix to namespace "id" of the messages
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free