# Wally Monitor - Plugin WordPress de Acessibilidade

## Descrição

O **Wally Monitor** é um plugin WordPress profissional que utiliza o motor **axe-core** para detectar problemas de acessibilidade digital em tempo real e sob demanda. Ele oferece:

- ✅ Análise em tempo real no editor de posts/páginas (Gutenberg e Classic Editor)
- ✅ **Processamento automático de shortcodes** - expande `[gallery]`, `[video]`, `[contact-form-7]` antes de analisar
- ✅ Análise completa de todo o site com processamento paralelo (70% mais rápido)
- ✅ **13 regras customizadas específicas para WordPress** + 48 regras NBR 17.225 + 57 regras IF-THEN = **118+ regras exclusivas**
- ✅ Relatório detalhado com score de acessibilidade baseado em padrões WCAG
- ✅ Determinação automática do nível de conformidade WCAG (A, AA, AAA)
- ✅ Paginação de resultados (10 itens por página)
- ✅ Filtros por criticidade (Crítico, Sério, Moderado, Leve)
- ✅ Exportação em CSV e JSON com timestamp
- ✅ Histórico das últimas 10 análises
- ✅ Página de configurações personalizáveis (tipos de post, limite de URLs, nível WCAG)
- ✅ Suporte a Custom Post Types
- ✅ Barra de progresso em tempo real com estimativa
- ✅ Interface similar ao WallyMonitor para Chrome e VS Code
- 🔒 Segurança: Verificação de capacidades, nonces e sanitização de dados

## Regras Customizadas WordPress

Além das **90+ regras nativas do axe-core**, o Wally Monitor inclui **118+ regras exclusivas** para WordPress, NBR 17.225 e conformidade brasileira. As 13 regras originais para elementos WordPress são:

### **1. Imagens sem Alt** (`custom-image-alt-empty`)
- Detecta imagens sem atributo `alt` ou com `alt` vazio
- Funciona inclusive em blocos `<figure>` (que o axe-core pode ignorar)

### **2. Botões/Links Vazios** (`custom-empty-button-link`)
- Botões Gutenberg (`.wp-block-button__link`) sem texto ou `aria-label`
- Links vazios sem destino (`href`) ou conteúdo

### **3. Galerias sem Descrição** (`custom-wp-gallery-missing-alt`)
- Blocos de galeria Gutenberg (`.wp-block-gallery`)
- Shortcode `[gallery]` renderizado
- Identifica quantas imagens estão sem `alt`

### **4. Vídeos/Áudios sem Legendas** (`custom-wp-media-no-captions`)
- Blocos de vídeo Gutenberg sem `<track>` para legendas
- Embeds do YouTube/Vimeo (alerta moderado)
- Blocos de áudio sem transcrição visível

### **5. Formulários sem Labels** (`custom-wp-forms-missing-labels`)
- **Contact Form 7** - campos sem `<label>` associado
- **Gravity Forms** - labels ocultos sem `aria-label`
- **WPForms** - campos sem label adequado
- Detecta quando só há `placeholder` (insuficiente!)

### **6. Hierarquia de Headings** (`custom-heading-hierarchy`)
- Detecta saltos incorretos (H1 → H4 sem H2/H3)
- Alerta sobre múltiplos H1 na mesma página
- Crítico para navegação por leitores de tela

### **7. Tabelas sem Estrutura** (`custom-table-accessibility`)
- Tabelas sem `<th>` (headers)
- Headers sem atributo `scope` em tabelas complexas
- Tabelas sem `<caption>` ou `aria-describedby`

### **8. Blocos Cover (Contraste)** (`custom-cover-contrast`)
- Texto sobre imagem de fundo sem overlay adequado
- Verifica opacidade do overlay (`opacity < 0.5` = problema)
- Alerta sobre possível contraste insuficiente (WCAG AA: 4.5:1)

### **9. Navegação sem Semântica** (`custom-navigation-structure`)
- Menus WordPress fora de elemento `<nav>`
- Múltiplos `<nav>` sem `aria-label` descritivo
- Blocos de navegação Gutenberg sem estrutura adequada

### **10. Logo sem Alt Adequado** (`custom-site-logo-alt`)
- Logo do site sem texto alternativo
- Logo com alt genérico ("logo", "site logo")
- Recomenda usar nome da empresa/site

### **11. Widget de Busca** (`custom-search-widget-label`)
- Campo de busca Gutenberg sem label
- Widget de busca clássico sem `aria-label`
- Placeholder sozinho não é suficiente

### **12. Blocos HTML Customizados** (`custom-html-block-warning`)
- Alerta sobre blocos `.wp-block-html` com elementos interativos
- Recomenda verificação manual de formulários, imagens, tabelas
- Impacto moderado (verificação preventiva)

### **13. Embeds sem Título** (`custom-embed-no-title`)
- YouTube, Vimeo, Spotify, TikTok, SoundCloud, Twitter
- Iframes sem atributo `title` descritivo
- Detecta 28 tipos de embeds WordPress

## Instalação

### Opção 1: Instalação via Painel do WordPress (Recomendado)

1. Baixe o arquivo `wally-monitor-wordpress-plugin.zip`
2. Acesse o painel administrativo do seu site WordPress
3. Vá em **Plugins > Adicionar Novo**
4. Clique em **Enviar plugin** (no topo da página)
5. Clique em **Escolher arquivo** e selecione o arquivo `.zip`
6. Clique em **Instalar agora**
7. Após a instalação, clique em **Ativar plugin**

### Opção 2: Instalação Manual via FTP

1. Descompacte o arquivo `wally-monitor-wordpress-plugin.zip`
2. Envie a pasta `wally-monitor-plugin` para o diretório `/wp-content/plugins/` do seu WordPress
3. Acesse o painel administrativo
4. Vá em **Plugins** e ative o **Wally Monitor**

## Como Usar

### 1. Análise Completa do Site

1. No menu lateral do WordPress, clique em **Wally Monitor**
2. Clique no botão **Analisar Site Completo Agora**
3. Aguarde enquanto o plugin analisa todas as páginas e posts publicados
4. Visualize o relatório com:
   - Total de problemas encontrados
   - Número de regras violadas
   - Score de acessibilidade (0-100)
   - Lista detalhada de problemas por criticidade

### 2. Análise em Tempo Real no Editor

1. Ao editar um post ou página, procure pelo painel **Wally Monitor - Acessibilidade** na barra lateral direita
2. O plugin analisa automaticamente o conteúdo enquanto você escreve (suporta Gutenberg e Classic Editor)
3. Os problemas são exibidos em tempo real
4. Clique em **Re-analisar Agora** para forçar uma nova análise

### 3. Configurações

1. Acesse **Wally Monitor > Configurações**
2. Configure:
   - **Tipos de Conteúdo**: Selecione quais post types incluir (posts, páginas, CPTs)
   - **Incluir Página Inicial**: Análise da home page
   - **Limite de URLs**: Máximo de páginas (recomendado: 50-100)
   - **Nível WCAG**: A, AA ou AAA (padrão: AA)
3. Clique em **Salvar Configurações**

### 4. Histórico

1. Acesse **Wally Monitor > Histórico**
2. Visualize as últimas 10 análises realizadas
3. Veja data/hora, usuário, total de problemas e score

### 5. Exportação de Relatórios

Após executar uma análise completa:

1. Clique em **Exportar CSV** para baixar uma planilha com todos os problemas
2. Clique em **Exportar JSON** para baixar os dados em formato JSON

## 🚀 Processamento de Shortcodes (Diferencial Único)

O Wally Monitor é o **único plugin** que processa shortcodes automaticamente antes de analisar, detectando problemas em:

### **Shortcodes Nativos WordPress:**
- `[gallery ids="1,2,3"]` → Expande e verifica alt em cada imagem
- `[video src="..."]` → Verifica se tem legendas (`<track>`)
- `[audio src="..."]` → Verifica se há transcrição próxima
- `[playlist]` → Analisa todos os itens da playlist

### **Plugins Populares:**
- `[contact-form-7 id="123"]` → Verifica se campos têm `<label>`
- `[gravityform id="1"]` → Detecta labels ocultos sem `aria-label`
- `[wpforms id="456"]` → Valida estrutura de formulário
- `[elementor-template id="789"]` → Analisa templates Elementor

### **Como Funciona:**

1. **Editor detecta shortcode** no conteúdo
2. **WordPress processa** via `do_shortcode()` e `the_content`
3. **HTML expandido** é analisado pelo axe-core + regras customizadas
4. **Problemas detectados** antes mesmo de publicar

**Exemplo prático:**

```
Editor: [gallery ids="10,25,42"]
         ↓
Processado: <div class="gallery">
              <img src="foto1.jpg" alt="">
              <img src="foto2.jpg" alt="">
              <img src="foto3.jpg" alt="IMG_123">
            </div>
         ↓
Wally detecta: ⚠️ Galeria com 3 de 3 imagens sem alt adequado
```

**Sem processamento de shortcodes:** Zero problemas detectados (falso negativo!)  
**Com processamento:** 3 problemas críticos detectados ✅

## Personalização

### Trocar a Logo

1. Abra a pasta do plugin no seu computador
2. Navegue até `wally-monitor-plugin/assets/images/`
3. Substitua o arquivo `logo.png` pela sua própria logo
4. Recomenda-se usar uma imagem PNG de 512x512 pixels com fundo transparente

### Editar Estilos

Os estilos CSS estão em:
```
wally-monitor-plugin/assets/css/wally-monitor-admin.css
```

### Editar Funcionalidades

O código é modular:
```
wally-monitor-plugin/wally-monitor.php (Bootstrap PHP)
wally-monitor-plugin/includes/class-wally-admin.php (Menu, enqueue, meta box)
wally-monitor-plugin/assets/js/wally-admin.js (Orquestrador JS principal)
```

## Estrutura de Arquivos

```
wally-monitor-plugin/
├── wally-monitor.php
├── uninstall.php
├── readme.txt
├── assets/
│   ├── css/
│   │   └── wally-monitor-admin.css
│   ├── js/
│   │   ├── axe.min.js
│   │   ├── wally-admin.js          (orquestrador)
│   │   ├── wally-utils.js          (escapeHtml, getImpactColor)
│   │   ├── wally-rule-helpers.js    (helpers compartilhados p/ regras)
│   │   ├── wally-custom-rules.js   (13 regras WordPress)
│   │   ├── wally-nbr-rules.js      (48 regras NBR 17.225)
│   │   ├── wally-ifthen-rules.js   (57 regras IF-THEN)
│   │   ├── wally-analysis-modes.js (motor de modos)
│   │   ├── wally-scanner.js        (scan completo do site)
│   │   ├── wally-editor.js         (scan no editor)
│   │   ├── wally-report.js         (processamento de resultados)
│   │   ├── wally-ui.js             (renderização de UI)
│   │   ├── wally-quickfix.js       (sugestões de correção)
│   │   ├── wally-stats.js          (estatísticas de elementos)
│   │   ├── wally-chart.js          (gráficos de histórico)
│   │   ├── wally-onboarding.js     (wizard de primeiro uso)
│   │   └── lib/
│   │       └── chart.umd.min.js
│   └── images/
│       └── logo.png
├── includes/
│   ├── class-wally-admin.php
│   ├── class-wally-ajax.php
│   ├── class-wally-cli.php
│   ├── class-wally-cron.php
│   ├── class-wally-database.php
│   ├── class-wally-export.php
│   ├── class-wally-html-checker.php
│   ├── class-wally-pdf-generator.php
│   ├── class-wally-rest-api.php
│   ├── class-wally-sanitizer.php
│   ├── class-wally-seo-integration.php
│   └── lib/fpdf/
└── docs/
    └── CI-CD-INTEGRATION.md
```

## Requisitos

- WordPress 5.0 ou superior
- PHP 7.4 ou superior
- Navegador moderno (Chrome, Firefox, Safari, Edge)

## Tecnologias Utilizadas

- **axe-core 4.11.1**: Motor de análise de acessibilidade
- **WordPress API**: Hooks, AJAX, Meta Boxes
- **jQuery**: Manipulação do DOM e requisições AJAX
- **PHP**: Backend e processamento de dados

## Compatibilidade

- ✅ WordPress 5.0 ou superior
- ✅ PHP 7.4 ou superior
- ✅ Editor de Blocos (Gutenberg)
- ✅ Classic Editor (TinyMCE)
- ✅ Custom Post Types
- ✅ Posts e Páginas
- ✅ Temas personalizados
- ✅ Análise de WCAG 2.0, 2.1 e 2.2 (níveis A, AA, AAA)

## Performance

- ⚡ Análise paralela: até 5 páginas simultâneas (70% mais rápido)
- ⚡ Timeout de 15s por página (evita travamentos)
- ⚡ Paginação de resultados (10 por página)
- ⚡ axe.js carregado apenas onde necessário

## Segurança

- 🔒 Verificação de capacidades (`manage_options`) em todos os endpoints
- 🔒 Nonces em todas as requisições AJAX e exportações
- 🔒 Sanitização de dados de entrada
- 🔒 Escape de saída HTML
- 🔒 Proteção contra CSRF e XSS

## Suporte

Para dúvidas, sugestões ou reportar problemas:
- Edite o código-fonte diretamente no VS Code
- Consulte a documentação do axe-core: https://github.com/dequelabs/axe-core

## Licença

GPL v2 ou posterior

## Créditos

- Desenvolvido com base nos plugins Wally para Chrome e VS Code
- Motor de análise: axe-core by Deque Systems
- Logo gerada por IA

---

**Versão:** 1.4.0  
**Autor:** Equallyze Solutions  
**Data:** Março 2026
