Accessibility | Foundations

Third-party component libraries all offer some basic level of accessibility support, but they all have gaps when trying to meet VistaPrint's accessibility needs. SWAN aims to fully support our accessibility targets.

You can find accessibility guidelines for SWAN components on each component's page. Here are some additional features that SWAN offers for accessibility support:

The Visually Hidden feature on an element hides it on screens, but leaves it visible to screen readers and assistive technologies. Use this when an image's alt text or an aria-label doesn't work for providing a cue to an element's function.

For instance, a paginator might have "previous" and "next" buttons with icons provided via the background-image property, meaning it can't use alt text. In this case, you could put a visually-hidden span inside that button, and the word "Previous" or "Next" as the span's contents.

See the Visually Hidden component for more.

Alt text

All images must have an alt attribute, which typically should be a short description of the image itself. However, sometimes that attribute might be a blank value (alt="").

Use an empty alt attribute if there is nearby HTML text that presents the same content as the image description. For instance, a product tile offers both a product image and the product name, so the image does not also need the product name in its alt attribute, since this would make screen readers say the same thing twice in a row: "Business Cards... Business Cards." In this case, the product image should use an empty alt attribute.
Use an empty alt attribute if the image is purely decorative, such as a page divider, or a > glyph at the end of a link.
If an image should ordinarily have empty alt attribute, but we cannot use an empty string for some reason (e.g. we need the image to have a descriptive string to help boost SEO for image searches), then as long as the image and its accompanying text are both inside the same link, you can put role="presentation" aria-hidden="true" onto the image. This signals to assistive technologies that the image is decorative and should be hidden from assistive technologies.
An empty alt attribute is not the same as an absent alt attribute. If the attribute is absent altogether, a screen reader will announce there is an image but will provide no details about it! By contrast, using an empty attribute will make the screen reader skip the image.
For more information on how to properly use the alt attribute, the WC3 provides a handy flowchart called "An alt Decision Tree".

Keyboard access

The native tags for interactive elements (such as radio buttons, checkboxes, and <button> tags) are inherently clickable and tabbable with the keyboard. However, sometimes a limitation will mean that you must use a semantically-inappropriate tag for an element that still semantically serves as a button or interactive element.

In these cases, you need to make that element clickable and tabbable with the keyboard.

In React

In React, the functions useNonButtonElementAsButton or useNonAnchorElementAsAnchor will return the necessary props to provide the accessibility support to a component.

Neither of these functions have any effect on styling or visuals; they just set things like role, tabindex, and a keypress handler.

In Vanilla

The CSS class .swan-accessibility-keyboard-clickable will make it so that if the element is in focus, and the user hits either the Enter or Space keys, the keypress will act as a click upon the element.

The element with this class will also need the attribute tabindex="0" to put it into the tab order. Without this, the user can't put the element into focus using the keyboard or a screen reader.

The element also needs an appropriate ARIA role to indicate its function; typically this will be role="button" for a clickable element that acts (but doesn't necessary look like!) a button.

Accessible name

An accessible name is the name of a user interface element. It is the text associated with an HTML element that provides users of assistive technology with a label for the element.

When using covering to increase the clickable target a Link to cover a Card or Standard Tile, only wrap the Link around the content that should be included in the accessible name. This is usually the title or call-to-action.