Add axe linter as recommended extension for VS Code

Adds custom mapping for Pajamas components and documentation
about using the linter.

.vscode/extensions.json

 {
   "recommendations": [
     "gitlab.gitlab-workflow",
-    "shopify.ruby-lsp"
+    "shopify.ruby-lsp",
+    "deque-systems.vscode-axe-linter"
   ]
 }

axe-linter.yml

+global-components:
+  gl-button:
+    element: button
+    attributes:
+    - aria-*
+  gl-avatar:
+    element: img
+  gl-avatar-link:
+    element: a
+  gl-avatar-labeled:
+    element: img
+    attributes:
+    - label: alt
+  gl-toggle:
+    element: button
+    attributes:
+    - label: aria-labelledby
+    - description: aria-describedby
+  gl-link:
+    element: a
+

doc/development/fe_guide/accessibility/index.md

@@ -9,15 +9,19 @@ info: Any user with at least the Maintainer role can merge updates to this conte
 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.
 
-## Accessibility best practices
+## Linting for accessibility defects
 
-Follow these [best practices](best_practices.md) to implement accessible web applications. These are
-some of the topics covered in that guide:
+You can enable linting for accessibility defects with a free VS Code plugin - [axe Accessibility Linter](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter).
+We strongly recommend that to everyone contributing to GitLab that use VS Code.
 
-- [Quick checklist](best_practices.md#quick-checklist)
-- [Accessible names for screen readers](best_practices.md#provide-accessible-names-for-screen-readers)
-- [Icons](best_practices.md#icons)
-- [When to use ARIA](best_practices.md#when-to-use-aria)
+1. Open VS Code editor
+1. Go to Extensions
+1. 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
 
@@ -27,6 +31,16 @@ Uncover accessibility problems and ensure that your features stay accessible ove
 - [When to add accessibility tests](automated_testing.md#when-to-add-accessibility-tests)
 - [How to add accessibility tests](automated_testing.md#how-to-add-accessibility-tests)
 
+## Accessibility best practices
+
+Follow these [best practices](best_practices.md) to implement accessible web applications. These are
+some of the topics covered in that guide:
+
+- [Quick checklist](best_practices.md#quick-checklist)
+- [Accessible names for screen readers](best_practices.md#provide-accessible-names-for-screen-readers)
+- [Icons](best_practices.md#icons)
+- [When to use ARIA](best_practices.md#when-to-use-aria)
+
 ## Other resources
 
 Use these tools and learning resources to improve your web accessibility workflow and skills.