ufc-itapaje-accessibility 1.0.1 → 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.
Files changed (2) hide show
  1. package/README.md +168 -0
  2. package/package.json +1 -1
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
+ [![npm](https://img.shields.io/npm/v/ufc-itapaje-accessibility)](https://www.npmjs.com/package/ufc-itapaje-accessibility)
6
+ [![license](https://img.shields.io/npm/l/ufc-itapaje-accessibility)](./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.1",
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",