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:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
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.
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';
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.
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