From 5cd19fa7cd21cf1ccb203d09e986e2ad44ec292b Mon Sep 17 00:00:00 2001 From: Caroline Date: Tue, 7 Sep 2021 15:48:00 +0100 Subject: [PATCH] feat: accessability section --- README.md | 37 ++++++++++++++++++++++++++++++++++--- images/accessibility.png | Bin 0 -> 4776 bytes 2 files changed, 34 insertions(+), 3 deletions(-) create mode 100644 images/accessibility.png diff --git a/README.md b/README.md index c29ce8b..5bd515b 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,7 @@ If you want to share a best practice, or think one of these guidelines should be - [API design](#api-design) - [API security](#api-security) - [API documentation](#api-documentation) +- [Accessability](#a11y) - [Licensing](#licensing) @@ -47,6 +48,7 @@ There are a set of rules to keep in mind: _Why:_ >Because this way all work is done in isolation on a dedicated branch rather than the main branch. It allows you to submit multiple pull requests without confusion. You can iterate without polluting the master branch with potentially unstable, unfinished code. [read more...](https://www.atlassian.com/git/tutorials/comparing-workflows#feature-branch-workflow) + * Branch out from `develop` _Why:_ @@ -757,14 +759,43 @@ For each endpoint explain: "code": 401, "message" : "Authentication failed", "description" : "Invalid username or password" - } + } ``` - * Use API design tools, There are lots of open source tools for good documentation such as [API Blueprint](https://apiblueprint.org/) and [Swagger](https://swagger.io/). + +## 10. Accessibility ([a11y](https://www.a11yproject.com/)) +![Accessibility](/images/accessibility.png) + +* Take the following steps **at the start of your project** to ensure an intentional level of accessibility is sustained: + _Why:_ + > Web content is [accessibile by default](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML). We compromise this when we build complex features. It's much easier to reduce this impact by considering accessibility from the start, rather than having to re-implement these features later. + + * Arrange to do regular audits using [lighthouse](https://www.notion.so/elsewhen/Accessibility-at-Elsewhen-5e495685b508402bad209b8804922922#1302363f87ac49bd9d3ffe9cd721ef1a) or the [axe DevTools extension](https://www.notion.so/elsewhen/Accessibility-at-Elsewhen-5e495685b508402bad209b8804922922#1302363f87ac49bd9d3ffe9cd721ef1a). Agree a minimum score based on your projects requirements. The scoring in both tools is based on [axe user impact assessments](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md#wcag-21-level-a--aa-rules). + > **Note:** [some important checks](https://web.dev/lighthouse-accessibility/#additional-items-to-manually-check) must be done manually, eg logical tab order. The above tools list these as manual/guided tests alongside the automated results. With axe you have to save your automated results to view these. + + * Install an a11y linter: + - React: [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y) + - Angular: [Angular Codelyzer](https://github.com/mgechev/codelyzer) + - Vue: [eslint-plugin-vuejs-accessibility](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility) + + _Why:_ + > A linter will automatically check that a basic level of accessibility is met by your project and is relatively easy to set up. + + * Set up and use a11y testing using [axe-core](https://www.notion.so/elsewhen/Accessibility-at-Elsewhen-5e495685b508402bad209b8804922922#7e83a08d6a794cab8a2bfc8c9a6ed11f) or similar. If you're using storybook, do [this](https://storybook.js.org/blog/accessibility-testing-with-storybook/). + + _Why:_ + > Including a11y checks in your tests will help you to catch any changes that affect your projects accessibility and your audit score. + + * Consider using an accessible design system such as [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/) or [Material Design](https://material.io/design). + + _Why:_ + > These components are highly accessible out of the box + + -## 10. Licensing +## 11. Licensing ![Licensing](/images/licensing.png) Make sure you use resources that you have the rights to use. If you use libraries, remember to look for MIT, Apache or BSD but if you modify them, then take a look at the license details. Copyrighted images and videos may cause legal problems. diff --git a/images/accessibility.png b/images/accessibility.png new file mode 100644 index 0000000000000000000000000000000000000000..b9b00be2b6e62e1ba231d73d3e3cbeeaeecdefb4 GIT binary patch literal 4776 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