Fixed accessability issue 1 - updated readme

README.md

@@ -1,47 +1,120 @@
 # Website APP - Associação Portuguesa de Powerlifting
 
-## Overview
+## Visão Geral
 
-- Next.js (App Router) + TypeScript + Tailwind
+Site oficial da Associação Portuguesa de Powerlifting, construído com tecnologias modernas e com foco em acessibilidade e desempenho.
-- Strict accessibility (WCAG 2.1 AA)
-- Bilingual support: Portuguese (default) and English
-- Markdown content with sticky Table of Contents
-- OpenPowerlifting integration (meets scraping + results CSV parsing)
-- Cloudflare Turnstile on Contatos page
 
-## Getting Started
+**Stack Tecnológico:**
+- Next.js 16 (App Router) com TypeScript
+- Tailwind CSS 4 para estilos
+- React 19.2
+- Markdown com remark e rehype para processamento de conteúdo
+- Integração com OpenPowerlifting para dados de provas
 
-1. Install dependencies:
+**Características Principais:**
+- Acessibilidade rigorosa (WCAG 2.1 AA) com suporte completo a leitores de ecrã
+- Suporte bilingue: Português (predefinido) e Inglês
+- Conteúdo em Markdown com Tabela de Conteúdos fixa na navegação lateral
+- Integração com OpenPowerlifting (scraping de provas + análise CSV de resultados)
+- Proteção contra bots com Cloudflare Turnstile na página Contactos
+
+## Começar
+
+### Pré-requisitos
+- Node.js 18+ instalado
+- npm ou yarn
+
+### Instalação
+
+1. Instalar dependências:
 
 ```bash
 npm install
 ```
 
-2. Set environment variables in `.env.local`:
+2. Configurar variáveis de ambiente em `.env.local`:
 
 ```bash
 NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key_here
 ```
 
-3. Run the dev server:
+Contacte a equipa para obter a chave do Turnstile.
+
+3. Executar o servidor de desenvolvimento:
 
 ```bash
 npm run dev
 ```
 
-Open http://localhost:3000 — you will be redirected to /pt.
+Abra http://localhost:3000 — será redirecionado automaticamente para /pt.
 
-## Key Paths
+## Scripts Disponíveis
 
-- Portuguese: [src/app/pt](src/app/pt)
+```bash
-- English: [src/app/en](src/app/en)
+npm run dev      # Servidor de desenvolvimento com hot reload
-- Content: [content](content)
+npm run build    # Construir para produção
-- Markdown API: [src/app/api/content/route.ts](src/app/api/content/route.ts)
+npm start        # Iniciar servidor de produção
-- Meets API: [src/app/api/openpowerlifting/meets/route.ts](src/app/api/openpowerlifting/meets/route.ts)
+npm run lint     # Validar código com ESLint
-- Results API: [src/app/api/openpowerlifting/results/route.ts](src/app/api/openpowerlifting/results/route.ts)
+```
 
-## Accessibility Notes
+## Estrutura do Projeto
 
-- Skip link and clear focus indicators present
+```
-- Semantic headings and ARIA labels on navigation
+app/
-- Tables include headers and caption
+├── src/
+│   ├── app/
+│   │   ├── pt/                    # Rotas em Português
+│   │   ├── en/                    # Rotas em Inglês
+│   │   └── api/                   # Endpoints da API
+│   └── components/                # Componentes React reutilizáveis
+├── content/
+│   ├── pt/                        # Conteúdo em Português (Markdown)
+│   └── en/                        # Conteúdo em Inglês (Markdown)
+└── public/                        # Assets estáticos
+```
+
+## Caminhos Principais
+
+### Rotas
+- **Português:** [src/app/pt](src/app/pt)
+- **Inglês:** [src/app/en](src/app/en)
+
+### API
+- **API de Conteúdo (Markdown):** [src/app/api/content/route.ts](src/app/api/content/route.ts) — obtém e processa ficheiros Markdown
+- **API de Provas:** [src/app/api/openpowerlifting/meets/route.ts](src/app/api/openpowerlifting/meets/route.ts) — lista próximas provas
+- **API de Resultados:** [src/app/api/openpowerlifting/results/route.ts](src/app/api/openpowerlifting/results/route.ts) — resultados de provas passadas
+
+### Conteúdo
+- **Conteúdo em Markdown:** [content](content) — todas as páginas dinâmicas
+
+## Notas de Acessibilidade
+
+O projeto segue as normas WCAG 2.1 Nível AA:
+
+- **Navegação:** Skip link no topo da página e indicadores de foco claros em todos os elementos interativos
+- **Estrutura:** Títulos semânticos (`<h1>`, `<h2>`, etc.) e etiquetas ARIA apropriadas na navegação
+- **Tabelas:** Incluem cabeçalhos estruturados, legendas e suporte a leitores de ecrã
+- **Imagens:** Todos os `<img>` têm atributo `alt` descritivo
+- **Cores:** Contraste suficiente entre texto e fundo (ratio mínimo 4.5:1)
+
+## Dependências Principais
+
+| Pacote | Versão | Uso |
+|--------|--------|-----|
+| `next` | 16.1.1 | Framework React com SSR e otimizações |
+| `react` | 19.2.3 | Biblioteca UI |
+| `react-markdown` | 10.1.0 | Renderizar Markdown em React |
+| `cheerio` | 1.1.2 | Web scraping para OpenPowerlifting |
+| `papaparse` | 5.5.3 | Parsing de CSV |
+| `tailwindcss` | 4 | Framework CSS utilitário |
+
+## Deployment
+
+O site está pronto para ser deployado em plataformas como Vercel:
+
+```bash
+npm run build    # Construir bundle de produção
+npm start        # Testar localmente antes de fazer deploy
+```
+
+Assegurar que as variáveis de ambiente estão configuradas no provider de hosting.

src/app/pt/page.tsx

@@ -26,7 +26,7 @@ export default function PtHome() {
                     <p className="text-xs font-semibold tracking-[0.08em] uppercase text-white" style={{ color: "#fff" }}>Boas-vindas</p>
                     <h2 className="text-xl md:text-2xl font-bold text-white" style={{ color: "#fff" }}>Aqui é casa para atletas, treinadores e clubes</h2>
                   </div>
-                  <a className="btn btn-outline bg-white text-[var(--color-green)] border-white shadow-sm" href="/pt/sobre/quem-somos" aria-label="Falar com a APP">Falar connosco</a>
+                  <a className="btn btn-outline bg-white text-[var(--color-green)] border-white shadow-sm" href="/pt/sobre/quem-somos">Falar connosco</a>
                 </div>
                 <div className="p-6 space-y-4">
                   <p className="muted">Boas-vindas ao site da Associação Portuguesa de Powerlifting! Estás na casa para todos os recursos relacionados com powerlifting na IPF, em português.</p>
@@ -69,8 +69,8 @@ export default function PtHome() {
                     </div>
                   </div>
                   <div className="grid grid-cols-2 gap-3">
-                   <a className="btn bg-[var(--color-red)] text-white hover:opacity-90 px-4 text-center" href="/pt/competicoes/resultados" aria-label="Ver resultados oficiais">Resultados</a>
+                   <a className="btn bg-[var(--color-red)] text-white hover:opacity-90 px-4 text-center" href="/pt/competicoes/resultados">Resultados</a>
-                   <a className="btn bg-[var(--color-green)] text-white hover:opacity-90 px-4 text-center" href="/pt/competicoes/calendario" aria-label="Ver fotos das competições">Fotos</a>
+                    <a className="btn bg-[var(--color-green)] text-white hover:opacity-90 px-4 text-center" href="/pt/competicoes/calendario">Fotos</a>
                   </div>
                 </div>
               </div>

src/components/layout/Navigation.tsx

@@ -119,13 +119,12 @@ export function Navigation() {
           </li>
         ))}
         <li className="lang-switcher" role="group" aria-label={locale === "en" ? "Language" : "Idioma"}>
-          <Link className={locale === "pt" ? "current" : ""} href="/pt" aria-label="Português">PT</Link>
+          <Link className={locale === "pt" ? "current" : ""} href="/pt">PT (Português)</Link>
           <button
             className={`lang-switcher-btn ${locale === "en" ? "current" : ""}`}
             onClick={() => setShowConstructionModal(true)}
-            aria-label="English (em construção)"
           >
-            EN
+            EN (English - em construção)
           </button>
         </li>
       </ul>