Accessibility

In general components in Palette are built with accessibility best-practices in mind, however they may still have some issues. When encountering problems of any kind please file bugs with the Design System Working Group or (if external to Artsy) leave an issue on Github.

Click handlers

When adding click handlers to UI that aren't explicitly Palette Buttons or anchor tags with valid hrefs, utilize the Clickable component. Clickable is a stripped down button tag which implements Box.

Do

<Clickable onClick={handleClick}>Example</Clickable>

Don't

<Box onClick={handleClick}>Example</Box>

Alternative Text

When using inserting images ensure they have an alt attribute. The alt attribute should typically:

- Be accurate and equivalent in presenting the same content and function of the image.

- Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.

- NOT be redundant or provide the same information as text within the context of the image.

- NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

(Via WebAIM guide.)

A common problem throughout Artsy's codebase is the existence of redundant alt text for images which are used more as large anchor surfaces which are described by the text underneath them. In situations like this a blank alt tag (alt="") is acceptable.

On this page
Click handlers
Alternative Text