ufc-itapaje-accessibility 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +168 -0
- package/package.json +16 -4
package/README.md
ADDED
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
# ufc-itapaje-accessibility
|
|
2
|
+
|
|
3
|
+
Widget de acessibilidade customizável para web. Suporta ajuste de texto, fonte para dislexia, inverter cores, guia de leitura, texto para fala e muito mais.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/ufc-itapaje-accessibility)
|
|
6
|
+
[](./LICENSE)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Instalação
|
|
11
|
+
|
|
12
|
+
### npm / yarn
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install ufc-itapaje-accessibility
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
yarn add ufc-itapaje-accessibility
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### CDN (sem bundler)
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<script src="https://cdn.jsdelivr.net/npm/ufc-itapaje-accessibility/dist/index.global.js"></script>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## Uso básico
|
|
31
|
+
|
|
32
|
+
### Via CDN
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<script src="https://cdn.jsdelivr.net/npm/ufc-itapaje-accessibility/dist/index.global.js"></script>
|
|
36
|
+
<script>
|
|
37
|
+
new Accessibility.Accessibility();
|
|
38
|
+
</script>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Via npm (ES Modules)
|
|
42
|
+
|
|
43
|
+
```js
|
|
44
|
+
import { Accessibility } from 'ufc-itapaje-accessibility';
|
|
45
|
+
|
|
46
|
+
new Accessibility();
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Via npm (CommonJS)
|
|
50
|
+
|
|
51
|
+
```js
|
|
52
|
+
const { Accessibility } = require('ufc-itapaje-accessibility');
|
|
53
|
+
|
|
54
|
+
new Accessibility();
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## Configuração
|
|
60
|
+
|
|
61
|
+
Todas as opções são opcionais. O widget funciona com valores padrão sem nenhuma configuração.
|
|
62
|
+
|
|
63
|
+
```js
|
|
64
|
+
new Accessibility.Accessibility({
|
|
65
|
+
// Rótulos exibidos no menu
|
|
66
|
+
labels: {
|
|
67
|
+
menuTitle: 'Acessibilidade',
|
|
68
|
+
resetTitle: 'Redefinir',
|
|
69
|
+
closeTitle: 'Fechar',
|
|
70
|
+
dyslexicFont: 'Fonte para dislexia',
|
|
71
|
+
hideImages: 'Ocultar imagens',
|
|
72
|
+
// ... demais rótulos
|
|
73
|
+
},
|
|
74
|
+
|
|
75
|
+
// Módulos visíveis (true = visível, false = oculto)
|
|
76
|
+
modules: {
|
|
77
|
+
increaseText: true,
|
|
78
|
+
decreaseText: true,
|
|
79
|
+
increaseTextSpacing: true,
|
|
80
|
+
decreaseTextSpacing: true,
|
|
81
|
+
increaseLineHeight: true,
|
|
82
|
+
decreaseLineHeight: true,
|
|
83
|
+
invertColors: true,
|
|
84
|
+
grayHues: true,
|
|
85
|
+
bigCursor: true,
|
|
86
|
+
readingGuide: true,
|
|
87
|
+
underlineLinks: true,
|
|
88
|
+
textToSpeech: true,
|
|
89
|
+
speechToText: true,
|
|
90
|
+
disableAnimations: true,
|
|
91
|
+
dyslexicFont: true,
|
|
92
|
+
hideImages: true,
|
|
93
|
+
},
|
|
94
|
+
|
|
95
|
+
// Salva preferências do usuário entre visitas
|
|
96
|
+
session: { persistent: true },
|
|
97
|
+
|
|
98
|
+
// Logo exibido no rodapé do menu
|
|
99
|
+
logoImage: 'https://exemplo.com/logo.png',
|
|
100
|
+
|
|
101
|
+
// Idioma para texto-para-fala e fala-para-texto
|
|
102
|
+
language: {
|
|
103
|
+
textToSpeechLang: 'pt-BR',
|
|
104
|
+
speechToTextLang: 'pt-BR',
|
|
105
|
+
},
|
|
106
|
+
});
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
## Módulos disponíveis
|
|
112
|
+
|
|
113
|
+
| Módulo | Descrição |
|
|
114
|
+
|---|---|
|
|
115
|
+
| `increaseText` / `decreaseText` | Aumenta ou diminui o tamanho da fonte |
|
|
116
|
+
| `increaseTextSpacing` / `decreaseTextSpacing` | Ajusta espaçamento entre palavras e letras |
|
|
117
|
+
| `increaseLineHeight` / `decreaseLineHeight` | Ajusta a altura de linha |
|
|
118
|
+
| `invertColors` | Alto contraste invertendo as cores |
|
|
119
|
+
| `grayHues` | Remove todas as cores (tons de cinza) |
|
|
120
|
+
| `bigCursor` | Cursor do mouse maior |
|
|
121
|
+
| `readingGuide` | Barra horizontal que segue o mouse |
|
|
122
|
+
| `underlineLinks` | Sublinha todos os links da página |
|
|
123
|
+
| `textToSpeech` | Lê o conteúdo clicado em voz alta |
|
|
124
|
+
| `speechToText` | Dita em campos de formulário via microfone |
|
|
125
|
+
| `disableAnimations` | Remove animações e transições CSS |
|
|
126
|
+
| `dyslexicFont` | Aplica fonte OpenDyslexic na página |
|
|
127
|
+
| `hideImages` | Oculta todas as imagens da página |
|
|
128
|
+
|
|
129
|
+
> `speechToText` requer HTTPS e navegador com suporte a `webkitSpeechRecognition`.
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Temas (CSS Custom Properties)
|
|
134
|
+
|
|
135
|
+
O widget pode ser estilizado via variáveis CSS:
|
|
136
|
+
|
|
137
|
+
```css
|
|
138
|
+
:root {
|
|
139
|
+
--_access-icon-bg: #4054b2;
|
|
140
|
+
--_access-icon-color: #fff;
|
|
141
|
+
--_access-menu-background-color: #F3F4F6;
|
|
142
|
+
--_access-menu-width: 20vw;
|
|
143
|
+
--_access-menu-min-width: 300px;
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
---
|
|
148
|
+
|
|
149
|
+
## Preset em português
|
|
150
|
+
|
|
151
|
+
```js
|
|
152
|
+
import { Accessibility, ptBRLabels } from 'ufc-itapaje-accessibility';
|
|
153
|
+
|
|
154
|
+
new Accessibility({ labels: ptBRLabels });
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
---
|
|
158
|
+
|
|
159
|
+
## WordPress
|
|
160
|
+
|
|
161
|
+
Um plugin WordPress oficial está disponível na pasta [`wordpress-plugin/`](./wordpress-plugin/).
|
|
162
|
+
Consulte o [README do plugin](./wordpress-plugin/ufc-itapaje-accessibility/README.md) para instruções de instalação.
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
## Licença
|
|
167
|
+
|
|
168
|
+
MIT — [João Bruno Sousa](https://github.com/JBrunoS)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ufc-itapaje-accessibility",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Widget de acessibilidade customizável com suporte a temas, fonte para dislexia, ocultar imagens e módulos extras.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -14,7 +14,9 @@
|
|
|
14
14
|
"require": "./dist/index.js"
|
|
15
15
|
}
|
|
16
16
|
},
|
|
17
|
-
"files": [
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
18
20
|
"scripts": {
|
|
19
21
|
"build": "tsup",
|
|
20
22
|
"dev": "tsup --watch",
|
|
@@ -28,9 +30,19 @@
|
|
|
28
30
|
"regenerator-runtime": "^0.14.1"
|
|
29
31
|
},
|
|
30
32
|
"peerDependenciesMeta": {
|
|
31
|
-
"regenerator-runtime": {
|
|
33
|
+
"regenerator-runtime": {
|
|
34
|
+
"optional": true
|
|
35
|
+
}
|
|
32
36
|
},
|
|
33
|
-
"keywords": [
|
|
37
|
+
"keywords": [
|
|
38
|
+
"accessibility",
|
|
39
|
+
"a11y",
|
|
40
|
+
"widget",
|
|
41
|
+
"wcag",
|
|
42
|
+
"ufc",
|
|
43
|
+
"dyslexia",
|
|
44
|
+
"screen-reader"
|
|
45
|
+
],
|
|
34
46
|
"author": "João Bruno Sousa",
|
|
35
47
|
"license": "MIT",
|
|
36
48
|
"repository": {
|