diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 9f02f674b..a3304e964 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -31,6 +31,10 @@ _Please replace this line with instructions on how to test your changes, as well as any relevant images for UI changes._ +### UI accessibility concerns? + +_If your PR includes UI changes, please replace this line with details on how accessibility is impacted and tested. For more info, check out the [Forem Accessibility Docs](https://docs.forem.com/frontend/accessibility)._ + ## Added tests? - [ ] Yes diff --git a/docs/contributing/forem.md b/docs/contributing/forem.md index 8fda1653b..3fb70e311 100644 --- a/docs/contributing/forem.md +++ b/docs/contributing/forem.md @@ -113,6 +113,10 @@ More importantly, we avoid Code quality tools are not perfect, so don't obsess over your Code Climate score. +### Consider accessibility in UI changes + +If the change you're proposing touches a user interface, include accessibility in your approach. This includes things like color contrast, keyboard accessibility, screen reader labels, and other common requirements. For more information, check out the [Forem Accessibility docs page](https://docs.forem.com/frontend/accessibility). + ### Please use inclusive language Inclusion and respect are core tenets of our diff --git a/docs/frontend/accessibility.md b/docs/frontend/accessibility.md new file mode 100644 index 000000000..fca666fc5 --- /dev/null +++ b/docs/frontend/accessibility.md @@ -0,0 +1,44 @@ +--- +title: Accessibility +--- + +# Accessibility + +To make Forem the most inclusive community platform around, accessibility should be considered to enable people with disabilities to create and consume content. + +## The Basics + +Forem UI changes should consider accessibility wherever possible. This includes common requirements such as: + +- [Adequate color contrast](https://webaim.org/articles/contrast/evaluating) +- [Semantic structure and headings](https://webaim.org/techniques/semanticstructure/) +- [Alternative text for images](https://webaim.org/techniques/alttext/) +- [Unique button and link text](https://webaim.org/techniques/hypertext/link_text) +- [Accessible forms with labels](https://webaim.org/techniques/forms/) +- [Visible keyboard focus styles](https://www.washington.edu/accessibility/checklist/focus/) + +## More Advanced Things + +If you're working on something JavaScript-heavy or animated, there are a few additional considerations for accessibility: + +- [Forem Accessibility Tests](https://docs.forem.com/tests/accessibility-tests/) +- [Intro to ARIA](https://webaim.org/techniques/aria/) +- [Handle focus for client-side interactions](https://dev.to/robdodson/managing-focus-64l) +- [Reducing motion with CSS media queries](https://css-tricks.com/introduction-reduced-motion-media-query/) +- [Linting with eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y) +- [Testing with Jest-axe](https://dev.to/bdougieyo/accessibility-testing-in-react-with-jest-axe-l7k) + +## Resources + +There's a wealth of information out there to learn about digital accessibility! Here are some resources: + +- [W3C's Web Accessibility Initiative](https://www.w3.org/WAI/) +- [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/) +- [ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/) +- [WebAIM](http://webaim.org/) +- [A11y Project](https://a11yproject.com) +- [Deque University](https://dequeuniversity.com/) +- [React Accessibility Docs](https://reactjs.org/docs/accessibility.html) (most will apply to Preact) +- [The Importance of Manual Accessibility Testing](https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/) +- [Accessibility Insights extension](https://accessibilityinsights.com) + diff --git a/docs/frontend/readme.md b/docs/frontend/readme.md index 29035eb02..7a5df4dce 100644 --- a/docs/frontend/readme.md +++ b/docs/frontend/readme.md @@ -11,7 +11,7 @@ items: - liquid-tags.md - debugging.md - tracking.md + - accessibility.md - tips.md ---- # Frontend Guide