Accessibility guidelines

Accessibility guidelines#

Attention should be paid to improve and maintain accessibility. In documentation, code and filenames you will often see this abbreviated as "a11y".

Clickable elements that have a symbol or icon and no visible text#

If the symbol or icon is clear enough for sighted users, for instance a big "X" to close a dialog, it will still need a text for screen reader users.

You can achieve a 'hidden' label by setting the property "aria-label" on the element. If available, use the translation machinery available to make the label appear in the correct language.

Example:

<button className="cancel" aria-label="Cancel" onClick={() => this.onCancel()}>
  <Icon
    name={clearSVG}
    className="circled"
    size="30px"
    title={this.props.intl.formatMessage(messages.cancel)}
  />
</button>

Do not use <a> tags without href#

If an element has an event listener on it and performs an action, but does not point to a proper URL, use a <button> and style with CSS to style. The reasoning is that the <a></a> HTML tag has specific behavior that screenreaders support and that screenreader users expect.

Make sure form elements have a label#

This is true for one-element forms as well, such as the "Search" form on the folder-contents component. Putting an icon on it does not convey any meaning to screenreader-users, you should clarify it with an aria-label.

Contents