# Sistema de design W3C ## Prévia da interface sistema de design W3C Abra as sessões individualmente ou em conjunto; o conteúdo continua legível quando JavaScript está desativado. ## Referência de design sistema de design W3C Documentação oficial da W3C e instantâneo público da CDN baixado em 3 de outubro de 2026; CSS real e script nativo inspecionados. ### Tipografia fluida | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Web font / fallback | Noto Sans / Trebuchet MS, Geneva, sans-serif | O CSS nativo aplica Noto Sans após fonts-loaded; a demonstração mantém a fonte alternativa do sistema. | | Fluid range | 320–1120px viewport | Os valores de clamp atingem um limite fora deste intervalo; não há mudanças tipográficas bruscas. | | --w3c-text-0 | clamp(.9375rem, .9125rem + .125vw, 1rem) | Corpo do texto: de 15px a 16px no tamanho raiz normal. | | --w3c-text-5 | clamp(1.6894rem, 1.6444rem + .2253vw, 1.802rem) | Escala H1; aproximadamente 27–28.8px. | | --w3c-text-7 | clamp(2.1382rem, 2.0811rem + .2851vw, 2.2807rem) | Maior escala text-xl, não o H1 padrão. | | Body line height | 1.5 | Em relação ao tamanho de fonte fluido. | | Collapsible H3 | --w3c-text-1 / line-height 1.5 | Substituição de componente: aproximadamente 16.9–18px. | ### Cores semânticas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Text | #111111 | quase preto; texto para leitura comum. | | Link | #005a9c | Azul da W3C; diferente dos estados de foco ao passar o cursor e de link visitado. | | Hover / visited | #002a56 / #75336c | Preserve a distinção entre estados. | | Focus | #f9dc4a | Destaque de foco amarelo com contorno visível. | | Input border | #545454 | Papel de contraste diferente do das divisórias decorativas. | | Success / error | #046704 / #a82615 | Significado de status, não destaques aleatórios. | | Warning | #c28605 | Papel de borda para avisos. | ### Layout e espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | l-center | max-inline-size:70rem; padding-inline:5vw | Contêiner amplo nativo; a prévia aplica um limite de 55rem, mais estreito, para a aplicação. | | Reading measure | 41.25rem | Largura máxima do conteúdo dentro dos blocos recolhíveis. | | Stack default | 1em between direct siblings | O mixin oficial do Sass aceita uma medida explícita; não é uma escala fixa de 8px. | | Collapsible inset | 1.5625rem | 25px no tamanho raiz normal. | | Collapsible separation / radius | 1rem / .375rem | Separação de 16px e cantos de 6px. | | Collapsible shadow | -.0625rem .0625rem .25rem rgba(55,70,95,.12) | Separação sutil entre superfícies; CSS nativo. | ### Contrato de aprimoramento progressivo | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Outer hook | data-component="collapsibles" | O script localiza a raiz de cada componente. | | Heading hook | data-heading="collapsibles" | O script insere um botão real em cada título. | | Collapsed state | aria-expanded=false; next sibling aria-hidden=true | O CSS avançado exige o marcador html.js para ocultar o corpo. | | data-anchor="no" | Suppress automatic heading anchors for this subtree | Evite inserir outro link no título recolhível. | | No JavaScript | All content remains visible | Não publique conteúdo oculto na marcação inicial sem aprimoramento. | ## Guia completo de sistema de design W3C Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Aprimoramento progressivo de sistema de design W3C ### O conteúdo vem antes dos controles > A W3C separa os estilos básicos dos componentes avançados. O componente recolhível começa com títulos comuns seguidos pelo conteúdo. Sem script, todos os roteiros das sessões podem ser lidos. main.js insere botões e altera o estado somente depois de detectar os atributos de dados documentados. Esse modelo de implementação é diferente de publicar um acordeão já oculto cujos controles talvez nunca sejam inicializados. A prévia usa core.css, advanced.css e main.js da CDN oficial, salvos como um instantâneo local datado. O marcador html.js ativa os seletores avançados. Sem esse marcador, os atributos ARIA mudam, mas os corpos continuam visualmente abertos; a prévia verifica explicitamente a visibilidade real, além de aria-expanded. Consulte a especificação de apoio ## Tipografia fluida e carregamento de fontes de sistema de design W3C ### Uma escala de leitura moderada O tamanho do texto do corpo aumenta de 15px no limite inferior da largura da janela de visualização para 16px em 1120px. Nove propriedades personalizadas nomeadas definem a escala. O H1 usa --w3c-text-5, não o maior --w3c-text-7; copiar indiscriminadamente um título de exibição de 36px para todos os documentos não corresponderia à hierarquia de títulos padrão. Noto Sans é a fonte web desejada. A pilha de fontes alternativas nativa usa Trebuchet MS e Geneva até que o caminho de carregamento da fonte adicione fonts-loaded à raiz. Este exemplo independente mantém ativa a fonte alternativa e identifica essa escolha. O tamanho fluido e a altura da linha permanecem nativos; a prévia não afirma reproduzir com exatidão as métricas dos glifos de Noto Sans. Consulte a especificação de apoio ## Largura de leitura e espaçamento de sistema de design W3C ### Componha primitivas de layout A primitiva l-center fornece um tamanho máximo em linha de 70rem e preenchimento lateral de 5vw. A prévia acrescenta um limite de 55rem, específico da aplicação, para manter compactos os três roteiros curtos de aprendizagem. Esse limite não é um novo token da W3C. Dentro do corpo de cada componente recolhível, a largura de texto nativa de 41.25rem limita o comprimento das linhas. O mixin Stack documentado cria uma coluna e aplica margin-top aos elementos irmãos diretos a partir do segundo. Sua medida padrão é 1em, e quem o chama pode passar outra unidade. Trate-o como uma relação entre blocos, em vez de inventar uma escala global de espaçamento numerada. O próprio componente recolhível tem recuo de 25px, separação de 16px e raio de 6px, todos verificados separadamente. Consulte a especificação de apoio ## Papéis semânticos das cores de sistema de design W3C ### Mantenha visíveis o histórico dos links e o foco O sistema distingue o link azul padrão, o azul-escuro ao passar o cursor e o estado roxo de link visitado. Esses papéis são importantes em um site no qual as pessoas retornam a documentos longos e navegam entre referências. Reutilizar o alias de link para decoração sem relação com links faz com que futuras mudanças de tema alterem superfícies sem relação entre si. O foco usa amarelo com um contorno visível. A página de configurações diferencia as bordas comuns do papel de borda mais escura dos campos de entrada. Ela também lista significados distintos para as cores de informação, sucesso, aviso e erro. Preserve o papel e verifique a combinação com o fundo real; uma amostra de cor, por si só, não comprova que o estado de um componente tenha contraste suficiente. Consulte a especificação de apoio ## Marcação e script recolhíveis de sistema de design W3C ### Título, botão e corpo adjacente Cada filho direto contém um título seguido imediatamente pelo corpo do conteúdo. O script usa nextElementSibling para encontrar esse corpo; portanto, inserir metadados sem relação entre eles quebraria essa associação. Coloque o rótulo da categoria dentro do span do título, como no padrão documentado para listas de grupos. O script envolve o conteúdo do título com um botão. O código nativo alterna aria-expanded nesse botão e aria-hidden no corpo. A folha de estilos avançada oculta o corpo recolhido. data-anchor="no" impede que o recurso separado de âncoras nos títulos insira links indesejados nesse componente. Inicialize main.js uma única vez; o aprimoramento repetido aninharia botões extras nos títulos. ```

Inclusive forms Practical workshop

Connect each field to its label, hint and recovery message.

  • Preserve entered values
  • Test keyboard recovery
``` Referência de código Consulte a especificação de apoio ## Controles em massa e uso do teclado de sistema de design W3C ### Amplie usando os botões existentes Expandir tudo e Recolher tudo são controles de exemplo originais. Eles verificam cada botão nativo e o acionam somente quando seu estado precisa mudar. Assim, a transição de estado nativa e a regra visual permanecem juntas. Os controles não alteram diretamente um atributo ARIA enquanto deixam o outro desatualizado. Os botões nativos permitem ativação com Enter e Espaço. A prévia verifica um botão individual, expande tudo, recolhe tudo e abre novamente uma seção pelo teclado. Uma mensagem de status educada descreve a ação em massa. O componente de origem permite que vários roteiros fiquem abertos ao mesmo tempo; ele não é um acordeão exclusivo que mantém apenas uma seção aberta. 1. Abra Formulários inclusivos e confira sua lista prática. 2. Expanda tudo para comparar as descrições das três sessões. 3. Recolha tudo e, em seguida, use Enter em um dos títulos para reabrir apenas essa seção. Consulte a especificação de apoio ## Recursos e integração de sistema de design W3C ### Sem inventar instalação de pacotes A página oficial de introdução publica endereços estáveis da CDN para os estilos core, avançados e de impressão, além de main.js e scripts de recursos opcionais. O bloco de configuração usa esses caminhos reais. Para esta implementação de HTML, não é necessário um provedor de React nem um pacote npm. A demonstração local inclui os arquivos baixados para que o exemplo funcione independentemente de uma conexão ativa. A integração em produção deve manter o mecanismo documentado de verificação de compatibilidade de CSS para estilos avançados, caso seja necessário oferecer suporte ao mesmo conjunto de navegadores antigos. A configuração compacta carrega os estilos avançados diretamente para navegadores modernos. Inclua a folha de estilos de impressão em um site com documentos completos; a prévia independente se concentra no exemplo interativo para telas. - core.css: tipografia básica, layouts e componentes sem aprimoramento. - advanced.css: regras para estados aprimorados com JavaScript. - main.js: detecta os ganchos de dados e aprimora os componentes compatíveis uma única vez. Consulte a especificação de apoio ## Escopo e verificação de sistema de design W3C ### Sistema de design, não certificação de conformidade Uma página com o estilo da W3C não está automaticamente em conformidade com WCAG. Teste o conteúdo real, a ordem do foco, o comportamento do zoom e os estados de recuperação. Este exemplo verifica três larguras de janela de visualização e o funcionamento sem script; não reivindica certificação nem uma auditoria exaustiva de tecnologias assistivas. Os nomes e as descrições dos círculos de aprendizagem são conteúdo ficcional original. Não representam grupos de trabalho, cronogramas ou oportunidades de inscrição oficiais. O exemplo evita deliberadamente logotipos da W3C e alegações de associação. A reutilização de um recurso de estilo público deve ser independente de qualquer sugestão de endosso institucional. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design sistema de design W3C ### Roteiro de sessão com aprimoramento progressivo O título e o corpo adjacente são a estrutura obrigatória; main.js adiciona o controle de alternância. ```

Inclusive forms Practical workshop

Connect each field to its label, hint and recovery message.

  • Preserve entered values
  • Test keyboard recovery
``` Referência de código ### Lista de aprendizagem nativa completa Inclui o marcador de aprimoramento na raiz, os recursos oficiais, componentes recolhíveis nativos e controles em massa. ``` Web learning circles

INDEPENDENT LEARNING PROGRAMME

Web learning circles

Explore three small-group sessions for people building a more usable web.

Choose a session to read its outline.

Inclusive forms Practical workshop

Trace a form from its label to its hint, error message and recovery action. Compare the experience with a keyboard and with enlarged text.

  • Associate labels and help text
  • Keep entered values after an error
  • Move focus only when it helps recovery

Resilient reading Discussion circle

Examine document structure before adding interaction. The content in this example remains visible when JavaScript is unavailable.

Bring a short article and identify its heading hierarchy, reading measure and meaningful links.

International text Peer review

Review language declarations, long translated labels and mixed-direction text. A font choice alone cannot guarantee a usable multilingual interface.

All sessions are fictional examples, with no membership or registration service.

``` Referência de código ## Configuração do agente de IA sistema de design W3C ### Ponto de partida para implementação Caminhos oficiais reais da CDN. A prévia local inclui esses recursos e mantém a fonte de sistema nativa como fallback. O ZIP completo do exemplo funcional em Fontes também inclui as dependências exatas da prévia e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/w3c.html. Não abra exemplos baseados em módulos usando file://. ``` ``` ### Um prompt para seu projeto ``` Use os estilos core e advanced do W3C com main.js e o marcador de aprimoramento html.js. Crie títulos semânticos com conteúdo recolhível adjacente usando os ganchos de dados reais. Preserve a linha de base legível sem JavaScript, a tipografia fluida nativa e as cores semânticas de links e foco. Não inicialize duas vezes nem deduza conformidade com WCAG apenas pela estilização. ``` ## Sistema de design W3C Fontes e escopo Demonstração independente de OpenDesign usando recursos públicos oficiais. Não implica afiliação com o W3C nem certificação de acessibilidade. - Primeiros passos Recursos oficiais da CDN e instruções de carregamento. - Contêineres recolhíveis Estrutura nativa, ganchos e comportamento progressivo. - Tipografia Noto Sans e escala fluida. - Configurações Funções de cor e comportamento de carregamento das fontes. - Espaçamento vertical Mixin de pilha e medidas explícitas. - Baixar o exemplo completo funcional ZIP com HTML completo, dependências locais CSS/JavaScript, licenças incluídas e instruções exatas de inicialização. Não é necessário executar uma etapa de compilação. ## Sistema de design W3C Recursos relacionados ### Codex Use a anatomia real do SearchInput, a hierarquia de ações e os tokens voltados à leitura de Codex. Pesquise um índice local de artigos, consulte um resultado e retorne à mesma posição de leitura. ### Agriculture sistema de design Crie transações de serviço mais longas com o espaçamento concreto, as propriedades responsivas e o modelo de status TaskList da AgDS. Experimente um fluxo de preparação cuja etapa de revisão só é liberada quando todos os pré-requisitos estão concluídos. ### Alberta sistema de design Use os componentes web nativos e os tokens de design publicados da Alberta para criar uma lista completa de preparação, com opções acessíveis, progresso derivado e feedback de revisão transparente. - [Referência de implementação](https://design-system.w3.org/components/collapsible-containers.html) - [Fonte](https://design-system.w3.org/styles/typography.html) - [Fonte](https://design-system.w3.org/settings/) - [Fonte](https://www.w3.org/assets/website-2021/styles/core.css) - [Fonte](https://design-system.w3.org/components/collapsible-containers.html) - [Consulte a especificação de apoio](https://design-system.w3.org/) - [Consulte a especificação de apoio](https://design-system.w3.org/styles/typography.html) - [Consulte a especificação de apoio](https://design-system.w3.org/styles/vertical-spacing.html) - [Consulte a especificação de apoio](https://design-system.w3.org/settings/) - [Referência de código](https://design-system.w3.org/components/collapsible-containers.html) - [Consulte a especificação de apoio](https://design-system.w3.org/components/collapsible-containers.html) - [Consulte a especificação de apoio](https://design-system.w3.org/getting-started.html) - [Primeiros passos Recursos oficiais da CDN e instruções de carregamento.](https://design-system.w3.org/getting-started.html) - [Contêineres recolhíveis Estrutura nativa, ganchos e comportamento progressivo.](https://design-system.w3.org/components/collapsible-containers.html) - [Tipografia Noto Sans e escala fluida.](https://design-system.w3.org/styles/typography.html) - [Configurações Funções de cor e comportamento de carregamento das fontes.](https://design-system.w3.org/settings/) - [Espaçamento vertical Mixin de pilha e medidas explícitas.](https://design-system.w3.org/styles/vertical-spacing.html)