Conheça a tipografia, a grade e o API de acordeão concretos do sistema do Estado francês, dentro de seu escopo institucional. Compare o comportamento de divulgação vinculada e independente em um exemplo educacional claramente neutro.
Interpretação original e neutra de HTML/CSS/JavaScript da estrutura de acordeão documentada. Sem recursos oficiais de DSFR ou identidade visual do Estado. · Referência de implementação
02
Referência de design do sistema de design DSFR
Documentação oficial do DSFR v1.15 e metadados verificados do pacote @gouvfr/dsfr 1.15.3. Estes são valores de referência oficiais; a prévia neutra demonstra a estrutura de interação sem usar a identidade visual do Estado.
DSFR é o sistema de design do Estado francês. Os termos oficiais atuais definem os serviços .gouv.fr e os aplicativos móveis do Estado como seu contexto de uso previsto e distinguem usuários e operadores do Estado de organizações externas. Trata-se de um limite substancial de adoção, não de uma nota de rodapé que possa ser removida ocultando um logotipo.
Uma equipe elegível deve seguir o processo oficial de aprovação e implementação de projetos. Um produto sem relação com esse contexto pode estudar a arquitetura da informação documentada e as considerações de acessibilidade sem se apresentar como parte da identidade do Estado francês. A prévia desta página é um exercício original e neutro de acordeão: não carrega estilos, fontes nem scripts do DSFR.
Referência tipográfica oficial do sistema de design DSFR
Marianne: usos e fontes alternativas
A documentação tipográfica identifica Marianne e Spectral, com Arial e Georgia como fontes alternativas, respectivamente. O texto padrão do corpo usa 16px/24px; o texto de artigos, 18px/28px. O H1 muda de 32px/40px em dispositivos móveis para 40px/48px em computadores. Esses valores descrevem o sistema oficial, enquanto a demonstração usa um tratamento tipográfico neutro próprio.
As classes de tamanho do texto não substituem os níveis semânticos dos títulos. Mantenha o título da página como h1 e cada título do acordeão no nível de cabeçalho adequado. Não use um estilo visual maior para pular níveis na estrutura do documento.
A referência da grade define SM 576px, MD 768px, LG 992px e XL 1248px. A largura máxima de conteúdo é 1200px. As margens internas opcionais são de 16px nos tamanhos menores e 24px a partir de LG. A grade de código não tem margens internas por padrão, um detalhe importante ao converter uma grade do Figma em marcação.
O espaçamento se baseia em múltiplos de 4px, com exceções documentadas de −6px, −2px, 2px e 6px. Assim, uma classe de espaçamento representa um sistema controlado, não uma autorização para inventar deslocamentos arbitrários. A prévia neutra usa uma coluna de leitura independente e não pretende reproduzir a grade oficial.
O componente documentado contém section.fr-accordion, heading.fr-accordion__title, button.fr-accordion__btn e um div.fr-collapse em seguida. O aria-controls do botão deve corresponder ao id do painel; aria-expanded descreve seu estado aberto. O nível do cabeçalho depende da hierarquia da página.
O painel contém elementos de texto apropriados, como parágrafos e listas. DSFR JavaScript nativo gerencia a classe de expansão; um aplicativo elegível não deve adicionar um segundo manipulador de clique independente que entre em conflito com o componente. A prévia neutra implementa seu próprio estado aberto/fechado, igualmente explícito, para fins de comparação educativa.
Acordeões agrupados ou independentes no sistema de design DSFR
A configuração do grupo altera o comportamento
Por padrão, um fr-accordions-group vincula os itens: ao abrir um, o outro item aberto se fecha. Definir data-fr-group="false" permite manter vários painéis abertos. O exemplo apresenta os dois modos para que o leitor compare seus efeitos na consulta cruzada de informações.
Essa diferença é importante para instruções de preparação. Quem consulta uma lista de documentos talvez precise manter aberto também um painel com um endereço. Um grupo que permite apenas um item aberto economiza espaço, mas oculta o contexto repetidamente. Escolha o modo conforme a tarefa, em vez de tratar o padrão como regra editorial.
A página de acessibilidade vai além do comportamento padrão em tempo de execução: recomenda, por padrão, grupos independentes, pois grupos vinculados podem dificultar o uso. Por isso, o exemplo começa no modo independente.
O modo independente permite comparar duas seções ao mesmo tempo.
O modo vinculado permite expandir apenas uma seção por vez.
Ao alternar os modos, mantenha o estado de aria-expanded internamente consistente.
Sistema de design DSFR: o que deve permanecer visível
Não oculte a etapa essencial
As orientações do componente recomendam acordeões para conteúdo extenso, opcional ou relevante apenas para algumas pessoas. Não recomendam ocultar informações que todos precisam ler, usar acordeões para conteúdo muito curto, aninhar controles complexos ou colocá-los dentro de uma janela modal.
Por isso, a finalidade e os controles do exemplo permanecem visíveis. Apenas as observações opcionais sobre o acesso à sala, a lista de equipamentos e a explicação sobre a chegada ficam recolhidas. Cada título apresenta uma pergunta distinta, e o conteúdo revelado usa parágrafos curtos e listas, em vez de um segundo fluxo interativo.
Mantenha a instrução principal fora do acordeão.
Divida o material complementar de acordo com as dúvidas de quem lê, não por critérios arbitrários de extensão.
Use um parágrafo comum quando a seção contiver apenas uma resposta curta.
Sistema de design DSFR: inspeção de teclado e estado
Valide a estrutura antes da decoração
Cada controle neutro de prévia é um botão real; por isso, Enter e Espaço acionam o botão pelo comportamento padrão do navegador. O script altera aria-expanded e o estado hidden do painel controlado. Ele nunca remove o controle quando o painel é fechado, e o foco permanece no botão acionado.
O seletor de modo permite comparar imediatamente os comportamentos independente e vinculado. Um pequeno indicador de estado visível lista os painéis abertos; ele é um recurso didático deste exemplo, não um componente oficial de DSFR. Em telas estreitas, os títulos quebram linha e o botão mantém toda a largura da área clicável.
A página oficial de acessibilidade também documenta contrastes insuficientes ao passar o cursor no tema escuro e limitações específicas nas notificações para leitores de tela e navegadores. Não presuma acessibilidade completa só por usar o componente sem alterações; verifique essas limitações conhecidas para a versão e o ambiente em que será implantado.
Sistema de design DSFR: integração em projetos elegíveis
Carregue as dependências principais e do componente
A página oficial de código lista as dependências CSS principais e do acordeão, além dos scripts de módulo principais e do acordeão. Depois de carregado, o ambiente de execução aprimora automaticamente a marcação documentada. A API pública permite revelar um painel com dsfr(element).collapse.disclose() após a inicialização.
A instalação fornecida destina-se a um projeto institucional elegível. Ela foi verificada com base no código-fonte, mas não foi executada nesta prévia neutra, que intencionalmente não depende do ambiente de execução de DSFR. Ao atualizar, as equipes de produção devem manter em conjunto a estrutura oficial de diretórios de recursos, a marcação do componente e as condições de uso vigentes.
O documento completo inclui layout, controles e inicialização. Extraia o arquivo de exemplo indicado para obter os recursos do fornecedor no caminho relativo exato e, em seguida, disponibilize-o por HTTP.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Accordion structure laboratory</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.6 Arial,sans-serif;color:#28251f;background:#faf9f6}main{max-width:54rem;margin:auto;padding:32px 24px}.notice{background:#eee9df;border-left:4px solid #6b573d;padding:16px}h1{font:700 32px/1.3 Georgia,serif;margin:24px 0}h2{font-size:18px;margin:0}.mode{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0}select{font:inherit;padding:10px;background:white;border:1px solid #777}section{border-bottom:1px solid #aaa18f}.trigger{font:700 18px/1.5 Arial,sans-serif;border:0;background:transparent;color:inherit;display:flex;justify-content:space-between;gap:16px;text-align:start;padding:20px 8px;width:100%;cursor:pointer}.trigger::after{content:'+'}.trigger[aria-expanded=true]::after{content:'−'}.panel{padding:0 24px 24px}.panel p{margin-top:0}:focus-visible{outline:3px solid #6b573d;outline-offset:3px}#state{font-size:14px;background:#eee9df;padding:12px;margin-top:24px}small{display:block;margin-top:24px;color:#625a4e;font-size:14px}[hidden]{display:none!important}@media(max-width:600px){main{padding:24px 16px}h1{font-size:28px}.panel{padding-inline:8px}}</style><main><div class="notice">Neutral interaction study · No DSFR visual identity or assets</div><h1>Prepare for a community workshop</h1><p>The purpose and main instruction stay visible: arrive with your booking note. Optional supporting details can be opened below.</p><div class="mode"><label for="mode">Panel behaviour</label><select id="mode"><option value="independent">Independent: compare sections</option><option value="linked">Linked: one section at a time</option></select></div><div id="group"><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="access">Room access</button></h2><div class="panel" id="access" hidden><p>The fictional workshop room is reached from the courtyard. The step-free entrance is on the same level as the activity room.</p><p>Ask the example welcome desk for assistance if the courtyard route is unavailable. These are demonstration instructions, not a real venue guide.</p></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="equipment">Equipment to bring</button></h2><div class="panel" id="equipment" hidden><p>The example workshop uses simple paper materials. Bring the following if convenient:</p><ul><li>A notebook for your own observations.</li><li>A pencil or pen you can use comfortably.</li><li>Your fictional booking reference.</li></ul></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="arrival">What happens on arrival</button></h2><div class="panel" id="arrival" hidden><p>The example facilitator explains the activity before participants choose a seat. No personal information is collected by this demonstration.</p><p>Keep this panel open with the equipment list to compare the two instructions in independent mode.</p></div></section></div><p id="state" role="status">Open sections: none</p><small>Original OpenDesign educational specimen. DSFR documentation informs the structural comparison; this is not a government service or native DSFR rendering.</small></main><script>const buttons=[...document.querySelectorAll('.trigger')],mode=document.querySelector('#mode');function set(b,open){b.setAttribute('aria-expanded',String(open));document.getElementById(b.getAttribute('aria-controls')).hidden=!open}function announce(){const names=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').map(b=>b.textContent);document.querySelector('#state').textContent='Open sections: '+(names.join(', ')||'none')}buttons.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';if(open&&mode.value==='linked')buttons.forEach(x=>set(x,false));set(b,open);announce()});mode.onchange=()=>{if(mode.value==='linked'){let retained=false;buttons.forEach(b=>{if(b.getAttribute('aria-expanded')==='true'){if(retained)set(b,false);retained=true}})}announce()};</script></html>
Baixe o exemplo completo em Fontes. O README informa o comando exato para iniciá-lo localmente.
Mantenha os caminhos do fornecedor relativos a este documento; o arquivo inclui todos os recursos usados nesta prévia.
04
Configuração do agente de IA para o sistema de design DSFR
Ponto de partida para implementação
Instalação para projetos elegíveis, verificada com base no código-fonte; não executada pela prévia neutra. Preserve o escopo institucional e os termos oficiais vigentes. Copie o diretório dist para manter os caminhos relativos dos recursos dependentes. O ZIP completo do exemplo funcional, em Fontes, também fornece 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/dsfr.html. Não abra exemplos baseados em módulos usando file://.
bash
# For a project within the documented DSFR institutional scope:
npm install @gouvfr/[email protected]
# Copy node_modules/@gouvfr/dsfr/dist to your public asset directory.
# In <head>:
# <link rel="stylesheet" href="/dsfr/core/core.min.css">
# <link rel="stylesheet" href="/dsfr/component/accordion/accordion.min.css">
# Before </body>:
# <script type="module" src="/dsfr/core/core.module.min.js"></script>
# <script type="module" src="/dsfr/component/accordion/accordion.module.min.js"></script>
Um prompt para seu projeto
Prompt para agente de IA
Explique a estrutura e o escopo do acordeão DSFR. Em um projeto estadual elegível, use fr-accordion, fr-accordion__title, fr-accordion__btn e fr-collapse com ids/aria-controls correspondentes, os recursos principais e do acordeão, e data-fr-group=false quando for necessário manter várias seções abertas para comparação. Para uma prévia educativa independente, use estilos originais neutros e identifique claramente o conteúdo como uma interpretação estrutural; não carregue fontes de identidade estadual nem alegue que se trata de um serviço oficial.
05
Sistema de design DSFR: fontes e escopo
DSFR tem um escopo de uso institucional documentado. Esta página é uma referência técnica, e sua prévia original e neutra não é um serviço do governo francês nem uma implementação com a identidade visual de DSFR.
