AutoRevenda Premium - Aplicação SEM Acessibilidade

Este projeto é uma aplicação frontend de uma revenda de automóveis intencionalmente desenvolvida SEM recursos de acessibilidade para fins de treinamento e demonstração de problemas de acessibilidade web.

⚠️ IMPORTANTE

Esta aplicação foi desenvolvida propositalmente SEM acessibilidade para demonstrar problemas comuns que usuários de leitores de tela e outras tecnologias assistivas enfrentam. NÃO use este código como referência para desenvolvimento real.

🎯 Objetivo

Servir como material de treinamento para demonstrar:

• Falta de estrutura semântica adequada
• Ausência de atributos ARIA
• Elementos sem labels adequados
• Navegação via teclado comprometida
• Contraste de cores inadequado
• Falta de textos alternativos em imagens
• Uso inadequado de elementos interativos

🚗 Funcionalidades

• Página inicial com catálogo de veículos
• Sistema de filtros para busca de veículos
• Página de detalhes do veículo com galeria de imagens
• Formulário de interesse no veículo
• Página de contato com formulário
• Página sobre a empresa

🛠️ Tecnologias

• Angular 8.x
• TypeScript
• SCSS
• Dados mockados (preparado para integração com JSON Server)

🚀 Como executar

1. Instalar dependências:

   npm install

2. Executar a aplicação:

   npm start

3. Acessar no navegador:

   http://localhost:4200
   

📝 Problemas de Acessibilidade Implementados

1. Estrutura HTML

• Uso excessivo de <div> sem elementos semânticos
• Falta de landmarks (<main>, <nav>, <section>)
• Hierarquia de cabeçalhos inadequada

2. Navegação

• Links e botões sem textos acessíveis
• Navegação apenas via mouse
• Falta de skip links
• Ordem de tabulação problemática

3. Formulários

• Campos sem labels associados
• Apenas placeholders como identificação
• Falta de validação acessível
• Mensagens de erro inadequadas

4. Imagens

• Imagens sem textos alternativos
• Informações importantes apenas visuais
• Falta de descrições de conteúdo visual

5. Interatividade

• Elementos clicáveis sem semântica adequada
• Estados de foco removidos via CSS
• Feedback apenas visual
• Falta de indicações de estado

6. Design Visual

• Contraste de cores inadequado
• Dependência apenas de cor para informação
• Texto pequeno demais
• Áreas de clique muito pequenas

🎓 Para o Treinamento

Use esta aplicação para:

1. Demonstrar problemas testando com leitores de tela
2. Praticar correções implementando melhorias de acessibilidade
3. Comparar antes/depois ao corrigir os problemas
4. Ensinar boas práticas mostrando o que NÃO fazer

📚 Próximos Passos (Exercícios)

Após usar esta versão problemática, os participantes podem:

1. Identificar todos os problemas de acessibilidade
2. Implementar correções gradualmente
3. Testar com ferramentas de acessibilidade
4. Validar com usuários reais

🤝 Backend

O backend pode ser facilmente implementado com JSON Server:

npm install -g json-server
json-server --watch db.json --port 3000

---

Lembre-se: Esta aplicação serve apenas para demonstrar problemas. Sempre desenvolva com acessibilidade em mente!