Pular para o conteúdo
Faculdade PhorteDesign System

PularParaOConteudo

Em andamento

O primeiro elemento focável da página: leva o teclado direto ao conteúdo principal, por cima da navegação (WCAG 2.4.1). Fica invisível até receber o foco. O PageLayout já o traz.

Função
Navegação e estrutura
Também chamado de
skip link, pular navegação, ir para o conteúdo, link de salto
Mora em
app/components/atoms/PularParaOConteudo.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

1280px, em tamanho real

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Outro texto

Quando usar

Em toda página com navegação repetida antes do conteúdo — no site, pelo PageLayout, que já o inclui.

Faça

  • Ponha-o como o primeiro elemento da página, antes da Navbar.
  • Marque o conteúdo principal com o mesmo id do alvo (padrão conteudo) e tabIndex={-1}, para ele receber o foco.
  • Monte a página com o PageLayout, que já faz as duas coisas.

Evite

  • Mais de um por página: o primeiro Tab tem de ser sempre este.
  • Escondê-lo com display: none: aí ele não recebe foco; o sr-only da peça esconde sem tirar do Tab.

Quando não usar. Dentro de uma seção ou de uma peça: é um por página, o primeiro foco. Para pular dentro de uma página longa (as seções do curso), o CourseTabs.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Link — Recortado (`sr-only`) até o foco; com foco, aparece no canto de cima, em `--card`, com sombra e o anel, acima de tudo (`--z-pular-para-o-conteudo`).
  2. Alvo — O `<main>` com o `id` do `alvo` e `tabIndex={-1}`.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Sem focoInvisível, mas presente para o leitor e para o Tab.
Com focoAparece no canto de cima, com 44px de altura.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Primeiro Tab da páginaO link aparece com o foco — testado na ficha.
EnterO foco vai ao conteúdo principal, e o próximo Tab continua de lá — testado na ficha. Sem JavaScript, o href leva até lá.

Relacionados