Update PR template to prompt for accessibility (#11407)

* Add accessibility section to PR template

* Add accessibility section to Forem docs

* Incorporate PR review feedback

.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

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

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)
+

docs/frontend/readme.md

@@ -11,7 +11,7 @@ items:
   - liquid-tags.md
   - debugging.md
   - tracking.md
+  - accessibility.md
   - tips.md
----
 
 # Frontend Guide