diff options
Diffstat (limited to 'doc/development/fe_guide/accessibility/index.md')
| -rw-r--r-- | doc/development/fe_guide/accessibility/index.md | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/doc/development/fe_guide/accessibility/index.md b/doc/development/fe_guide/accessibility/index.md new file mode 100644 index 00000000000..5274fa644e1 --- /dev/null +++ b/doc/development/fe_guide/accessibility/index.md @@ -0,0 +1,50 @@ +--- +stage: none +group: unassigned +info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments +--- + +# 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. + +## 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) + +## Automated accessibility testing + +Uncover accessibility problems and ensure that your features stay accessible over time by +[implementing automated A11Y tests](automated_testing.md). + +- [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) + +## Other resources + +Use these tools and learning resources to improve your web accessibility workflow and skills. + +### Viewing the browser accessibility tree + +- [Firefox DevTools guide](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector#accessing_the_accessibility_inspector) +- [Chrome DevTools guide](https://developer.chrome.com/docs/devtools/accessibility/reference/#pane) + +### Browser extensions + +We have two options for Web accessibility testing: + +- [axe](https://www.deque.com/axe/) for [Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/) +- [axe](https://www.deque.com/axe/) for [Chrome](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) + +### Other links + +- [The A11Y Project](https://www.a11yproject.com/) is a good resource for accessibility +- [Awesome Accessibility](https://github.com/brunopulis/awesome-a11y) + is a compilation of accessibility-related material |