|
18 | 18 | * [Acknowledgements](https://sa11y.netlify.app/acknowledgements/) 👤 |
19 | 19 |
|
20 | 20 | ## Features |
21 | | -- Over 50 checks that encourage quality accessibility. |
22 | | - - Checks for issues regarding images, headings, links, form labels, and more. |
23 | | - - Toggleable/optional checks: readability analysis, contrast checking, and colour filters. |
| 21 | +- Over 80 checks that encourage quality accessibility. |
24 | 22 | - **Automatic:** checks content on page load. |
25 | 23 | - **Customizable:** JSON-like props to fine tune the experience for content authors. |
26 | 24 | - **Focus on the issues:** Turn off or hide irrelevant checks. |
|
29 | 27 | - Fully encapsulated user interface with dark mode. |
30 | 28 | - Offered in various [languages.](https://github.com/ryersondmp/sa11y/tree/master/src/js/lang) |
31 | 29 |
|
| 30 | +## Install |
| 31 | +For setup instructions, including local development, installation, or CDN links, please visit the [developer documentation.](https://sa11y.netlify.app/developers/) |
| 32 | + |
32 | 33 | ## Contributing |
33 | 34 | Want to help translate or improve Sa11y? Consider [contributing! ](https://github.com/ryersondmp/sa11y/blob/master/CONTRIBUTING.md) Translations may either be contributed back to the repository with a pull request, or translated files can be returned to: [[email protected]](mailto:[email protected]). When submitting a pull request, please ensure you create your translated file within the `/src/js/lang/` directory. |
34 | 35 |
|
35 | 36 | ## Contact |
36 | | -Have a question or any feedback? Email: [[email protected]](mailto:[email protected]) |
37 | | - |
38 | | -<hr> |
39 | | - |
40 | | -## Install |
41 | | -Sa11y is a framework-agnostic JavaScript plugin. It's made with vanilla JavaScript and CSS, and its only dependency is Tippy.js - a highly customizable tooltip library that features a positioning system. |
42 | | - |
43 | | -To install on your website, insert Sa11y right before the closing `</body>` tag. Sa11y consists of three files: |
44 | | - |
45 | | -- **sa11y.css** - The main stylesheet. Should be included in the `<head>` of the document (if possible). |
46 | | -- **lang/en.js** - All text strings and tooltip messages. View [supported languages.](https://sa11y.netlify.app/developers/#languages) |
47 | | -- **sa11y.js** - Contains all logic. |
48 | | - |
49 | | -### NPM |
50 | | -`npm i sa11y` |
51 | | - |
52 | | -### Example installation (modules) |
53 | | -````html |
54 | | -<!-- Stylesheet --> |
55 | | -<link rel="stylesheet" href="css/sa11y.min.css"/> |
56 | | - |
57 | | -<!-- JavaScript --> |
58 | | -<script type="module"> |
59 | | - import { Sa11y, Lang } from '../assets/js/sa11y.esm.js'; |
60 | | - import Sa11yLangEn from '../assets/js/lang/en.js'; |
61 | | -
|
62 | | - // Set translations |
63 | | - Lang.addI18n(Sa11yLangEn.strings); |
64 | | -
|
65 | | - // Instantiate |
66 | | - const sa11y = new Sa11y({ |
67 | | - checkRoot: "body", |
68 | | - // Customize with props. |
69 | | - }); |
70 | | -</script> |
71 | | -```` |
72 | | - |
73 | | -### Example installation (regular script) |
74 | | -````html |
75 | | -<!-- Stylesheet --> |
76 | | -<link rel="stylesheet" href="css/sa11y.min.css"/> |
77 | | - |
78 | | -<!-- JavaScript --> |
79 | | -<script src="/dist/js/sa11y.umd.min.js"></script> |
80 | | -<script src="/dist/js/lang/en.umd.js"></script> |
81 | | - |
82 | | -<!-- Instantiate --> |
83 | | -<script> |
84 | | - Sa11y.Lang.addI18n(Sa11yLangEn.strings); |
85 | | - const sa11y = new Sa11y.Sa11y({ |
86 | | - checkRoot: "body", |
87 | | - // Customize with props. |
88 | | - }); |
89 | | -</script> |
90 | | -```` |
91 | | - |
92 | | -### CDN |
93 | | -Please visit [developer documentation](https://sa11y.netlify.app/developers/) for CDN installation instructions. |
94 | | - |
95 | | -## Development environment |
96 | | -A light server for development is included. Any change inside `/src` folder files will trigger the build process for the files and will reload the page with the new changes. To use this environment: |
97 | | - |
98 | | -1. Ensure node is installed and up to date (at least v20 and up). |
99 | | -2. Clone this repo. |
100 | | -3. Run `npm install` |
101 | | -4. Run `npm run serve`. Then open `http://localhost:8080/docs/demo/en/` in your browser. |
102 | | -5. For unit tests, execute `npm run test` while the server is running. |
103 | | - |
104 | | -**Tip!** To speed up compile time while developing, navigate to `rollup.config.js` and change `developmentMode` to `true`. This will only compile javascript, SCSS, and English translation strings. |
| 37 | +Have a question or any feedback? Email: [[email protected]](mailto:[email protected]) |
0 commit comments