Système de design NHS.

Contexte du NHS et polices — système de design système de design NHS

Une interface de santé sans fausse identité

NHS.UK frontend fournit les bases visuelles et interactives ; il ne planifie pas de consultation et ne détermine pas les modes de consultation proposés par un cabinet. Cette étude présente un rendez-vous fictif et permet au visiteur d’indiquer sa préférence. Le résultat est une vérification locale, pas une réservation.

Frutiger est une ressource de marque du NHS soumise à des conditions de licence. Cette ressource indépendante utilise Arial, la police de remplacement documentée, et n’inclut pas le logo du NHS. Le CSS officiel est conservé intact ; une surcharge locale explicite de la police empêche les requêtes de Frutiger.

Consultez la spécification associée

Système de design NHS Typographie transactionnelle

Donner la priorité à la question

Utilisez nhsuk-heading-l pour la question de la page et nhsuk-heading-m pour une section secondaire. Cette approche diffère de celle d’une longue page éditoriale, où le contenu de conseils commence par un titre de niveau heading-xl. La légende du groupe de champs radio peut avoir la taille d’un titre sans perdre sa sémantique de groupe.

Les classes de paragraphe standard distinguent le corps de texte, le texte d’introduction et le texte d’accompagnement de petite taille. Un texte d’introduction de 26px est utile une fois, au début d’une page, tandis que les instructions de rendez-vous restent en texte courant. L’aperçu conserve une largeur de ligne suffisante pour permettre aux dates et aux noms de lieux de passer à la ligne.

Consultez la spécification associée

Système de design NHS Espacement et conteneur

L’échelle d’espacement du NHS diffère de celle de GOV.UK

Les unités responsives du NHS suivent une séquence différente et changent au-dessus de 768px. Par exemple, l’unité 6 passe de 32px à 40px. Ne transposez pas la valeur de l’unité 6 de GOV.UK au NHS simplement parce que les noms des classes utilitaires semblent apparentés.

La démonstration utilise le conteneur de 960px et une colonne de lecture aux deux tiers. Le comportement natif de la grille produit une seule colonne en dessous du format bureau. Les changements de mise en page sont gérés par la bibliothèque, tandis que la petite bande d’identité indépendante relève du style de l’application.

.appointment-section {
  @include nhsuk-responsive-margin(6, "bottom");
}

Référence du code

Consultez la spécification associée

Points de rupture adaptatifs

La documentation définit 641px comme le seuil tablette et 769px comme le seuil bureau. Les largeurs de colonnes de la grille s’appliquent à partir du format bureau ; cela ne signifie pas que toutes les règles typographiques attendent le même seuil. Utilisez les classes natives plutôt que d’appliquer un point de rupture unique à toutes les propriétés.

Consultez la spécification associée

Système de design NHS Choix groupés du mode de consultation

Un groupe de champs, une réponse

L’exemple utilise nhsuk-fieldset avec une légende visible et un attribut name commun aux boutons radio. Chaque bouton a son propre id et son propre libellé. L’indication complémentaire est associée au groupe par aria-describedby. Ces relations permettent au navigateur de présenter un choix unique parmi plusieurs options mutuellement exclusives.

La structure de chaque option radio place le bouton et son libellé dans nhsuk-radios__item. Les boutons radio standard conviennent à une question principale ; la variante compacte est prévue pour les contextes de filtres plus denses. Les choix fictifs de mode de consultation restent mutuellement exclusifs lorsqu’on les sélectionne avec les touches fléchées.

• La légende énonce le choix à faire.
• Le même nom pour les options crée le groupe de sélection.
• Chaque libellé pointe vers un ID d’entrée différent.

Consultez la spécification associée

Système de design NHS Aider sans masquer l’essentiel

Utilisez un élément details natif

L’exemple details comprend nhsuk-details__summary et un élément span summary-text, suivi de nhsuk-details__text. Il s’ouvre selon le comportement natif du navigateur. L’identité du rendez-vous et le fait qu’aucune réservation n’a lieu doivent rester visibles en dehors de la zone dépliable, car ces informations sont essentielles pour tout le monde.

Dans la version 10.6, le API Nunjucks utilise summary.text ou summary.html ; l’ancienne option summaryText est obsolète. Si vous utilisez des macros, privilégiez la nouvelle structure d’objet. L’exemple HTML évite toute dépendance à un moteur de templates tout en conservant la même structure.

Consultez la spécification associée

Système de design NHS Erreurs de sélection et récapitulatif

Validez le groupe sans présélectionner de réponse

Aucune option n’est sélectionnée au départ. Si le visiteur continue sans répondre, un message d’erreur s’affiche en ligne et le groupe est associé à ce message. L’aperçu place alors le focus sur l’erreur. La sélection reste visible au retour du récapitulatif. Ces décisions concernant l’état de l’interface s’ajoutent aux contrôles natifs.

Le récapitulatif reprend le mode choisi et l’identité du rendez-vous fictif. Le bouton indique « Modifier la préférence ». Aucun message ne laisse entendre qu’un service médical a accepté la préférence, et aucun conseil de santé ni aucune consigne de préparation ne sont inventés.

1. Continuez sans avoir sélectionné de mode de consultation.
2. Sélectionnez « Par téléphone » et affichez le récapitulatif local.
3. Choisissez « En personne » et vérifiez le récapitulatif mis à jour.

Consultez la spécification associée

Système de design NHS Ressources locales de l’interface

Utilisez le package et le module sélectionnés

La configuration copie le CSS 10.6.1 et le module navigateur dans un répertoire de ressources statiques. Le module exporte initAll ; appelez cette fonction une fois le balisage du composant présent. L’exemple autonome utilise la même distribution servie localement et une surcharge de police Arial au niveau de la page.

Les styles incluent les règles des composants et les bases responsives. Le petit script qui modifie le panneau du récapitulatif est un code d’application distinct. En production, un service remplacerait les données fictives du rendez-vous par des données tenues à jour et traiterait les demandes réelles de préférence via son propre backend.

Consultez la spécification associée

Système de design NHS Vérifier la composition

Tenir compte du contexte des services de santé

Les vérifications essentielles consistent à s’assurer que le visiteur peut identifier le rendez-vous, comprendre que sa préférence de mode de consultation n’est pas encore confirmée et modifier son choix sans perdre le contexte. Un message de réussite générique masquerait cette distinction.

Testez le fonctionnement du groupe de boutons radio et du résumé details au clavier, puis vérifiez l’affichage étroit avec un nom de cabinet long. Le message d’erreur en l’absence de sélection doit permettre de revenir au groupe. La bibliothèque apporte des comportements réutilisables, tandis que l’organisation reste responsable des règles réelles de prise de rendez-vous et des informations médicales.

Consultez la spécification associée

Système de design NHS Exemples de composants du système de design

<fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset>

<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details>

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Appointment preference — OpenDesign study</title><link rel="stylesheet" href="vendor/nhsuk-10.6.1/nhsuk-frontend.min.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}[hidden]{display:none!important}.study-strip{background:white;border-bottom:1px solid #d8dde0;padding:16px}.study-strip p{margin:0}.study-card{background:#fff;border:1px solid #d8dde0;padding:24px;margin-bottom:32px}h1:focus{outline:none}.study-result{border-left:4px solid #005eb8;padding:16px 24px;background:white}button,a,input{touch-action:manipulation}</style></head><body><header class="study-strip"><p class="nhsuk-body-s"><strong>OpenDesign · NHS component study</strong><br>Fictional appointment. This page cannot book or change care.</p></header><main class="nhsuk-width-container nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent"><div class="nhsuk-grid-row"><div class="nhsuk-grid-column-two-thirds"><div class="study-card"><h2 class="nhsuk-heading-m">Example appointment</h2><p class="nhsuk-body">Community clinic · Alex Example<br>Tuesday, 20 October · 10:30am</p></div><section id="choice"><h1 class="nhsuk-heading-l">Choose an attendance preference</h1><form id="form" novalidate><div class="nhsuk-form-group" id="group"><fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset></div><details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details><button class="nhsuk-button" type="submit">Review preference</button></form></section><section id="review" hidden><h1 class="nhsuk-heading-l" tabindex="-1" id="review-title">Your preference</h1><div class="study-result"><p class="nhsuk-body" id="selected"></p><p class="nhsuk-body">This is a local example. The appointment has not changed.</p></div><button class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-top-5" id="change" type="button">Change preference</button></section><p class="nhsuk-body-s">Native 10.6.1 controls with Arial. <a href="vendor/nhsuk-10.6.1/LICENSE.txt">Frontend licence</a>.</p></div></div></main><script type="module">import{initAll}from './vendor/nhsuk-10.6.1/nhsuk-frontend.min.js';initAll();const form=document.getElementById('form'),group=document.getElementById('group'),fs=group.querySelector('fieldset');form.addEventListener('submit',e=>{e.preventDefault();document.getElementById('error')?.remove();group.classList.remove('nhsuk-form-group--error');fs.setAttribute('aria-describedby','contact-hint');const value=form.querySelector(':checked')?.value;if(!value){group.classList.add('nhsuk-form-group--error');const p=document.createElement('p');p.id='error';p.className='nhsuk-error-message';p.tabIndex=-1;p.textContent='Select how you would prefer to attend';fs.querySelector('.nhsuk-radios').before(p);fs.setAttribute('aria-describedby','contact-hint error');p.focus();return}document.getElementById('selected').textContent='Selected method: '+(value==='telephone'?'Telephone':'In person');document.getElementById('choice').hidden=true;document.getElementById('review').hidden=false;document.getElementById('review-title').focus()});document.getElementById('change').addEventListener('click',()=>{document.getElementById('review').hidden=true;document.getElementById('choice').hidden=false;form.querySelector(':checked').focus()});</script></body></html>