Fixed accessability issue 1 - updated readme

2026-01-24 13:34:49 +00:00 · 2026-01-24 13:34:49 +00:00 · fd02a6e486
commit fd02a6e486
parent ea8155bc75
3 changed files with 101 additions and 29 deletions
--- a/README.md
+++ b/README.md
@ -1,47 +1,120 @@
 # Website APP - Associação Portuguesa de Powerlifting

-## Overview
+## Visão Geral

- Next.js (App Router) + TypeScript + Tailwind
- 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
+Site oficial da Associação Portuguesa de Powerlifting, construído com tecnologias modernas e com foco em acessibilidade e desempenho.

-## 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)
- English: [src/app/en](src/app/en)
- Content: [content](content)
- Markdown API: [src/app/api/content/route.ts](src/app/api/content/route.ts)
- Meets API: [src/app/api/openpowerlifting/meets/route.ts](src/app/api/openpowerlifting/meets/route.ts)
- Results API: [src/app/api/openpowerlifting/results/route.ts](src/app/api/openpowerlifting/results/route.ts)
+```bash
+npm run dev      # Servidor de desenvolvimento com hot reload
+npm run build    # Construir para produção
+npm start        # Iniciar servidor de produção
+npm run lint     # Validar código com ESLint
+```

-## Accessibility Notes
+## Estrutura do Projeto

- Skip link and clear focus indicators present
- Semantic headings and ARIA labels on navigation
- Tables include headers and caption
+```
+app/
+├── 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.
--- a/src/app/pt/page.tsx
+++ b/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-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-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">Fotos</a>
                  </div>
                </div>
              </div>
--- a/src/components/layout/Navigation.tsx
+++ b/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>