Accessibility

Accessibility is important for users who use screen readers or rely on keyboard-only functionality to ensure they have an equivalent experience to sighted mouse users.

Linting for accessibility defects

You can enable linting for accessibility defects with a free VS Code plugin - axe Accessibility Linter. We strongly recommend that to everyone contributing to GitLab that use VS Code.

1. Open VS Code editor
2. Go to Extensions
3. Search for axe Accessibility Linter and install the plugin

Axe Accessibility Linter works in HTML, Markdown and Vue files. As for this moment, there is no support for HAML files. You will get immediate feedback, while writing your code.

GitLab repository contains axe-linter.yml file that adds additional configuration to the plugin. It enables the linter to analyze some of the Pajamas components by mapping them and their attributes to native HTML elements.

Automated accessibility testing

Uncover accessibility problems and ensure that your features stay accessible over time by implementing automated A11Y tests.

• Accessibility Storybook tests
• Accessibility feature tests

Accessibility best practices

Follow these best practices to implement accessible web applications. These are some of the topics covered in that guide:

• Quick checklist
• Accessible names for screen readers
• Icons
• When to use ARIA

Other resources

Use these tools and learning resources to improve your web accessibility workflow and skills.

Viewing the browser accessibility tree

• Firefox DevTools guide
• Chrome DevTools guide

Browser extensions

We have two options for Web accessibility testing:

• axe for Firefox
• axe for Chrome

Other links

• The A11Y Project is a good resource for accessibility
• Awesome Accessibility is a compilation of accessibility-related material