Accessibility

While we don't always nail it, we always strive to meet or exceed modern accessibility standards. Before opening a PR, please make sure you're familiar with W3C accessibility standards .

Some basic guidelines:

Images

Use alt-text in images as long as it's not duplicating adjacent text content.

Icons

When using icons, always include the sr-only and aria-hidden tags. For example:

<i class="fa fa-trash icon-white" aria-hidden="true"></i>
<span class="sr-only">{{ trans('general.delete') }}</span>

The aria-hidden will hide the icon from screen readers , as it's a non-interactive, decorative element.

The sr-only tag should always be used in combination with an icon, to explain in text what the icon is trying to indicate. This text will not show up on the screen, but will be read aloud to users utilizing a screen reader. The text strings should always be translated into localized strings.

Avoid using icons that use English as an assumed abbreviation, for example an i icon to indicate an information hover. While it is a widely accepted symbol, the word for "information" does not start with an "i" in all languages. A better choice would be a question mark (which also doesn't apply to all languages) or the "life ring" icon to imply additional help information is available.