贰苍-迟锚迟别 (ou Masthead)

Vous 锚tes sur le point de d茅velopper le mod猫le (template) de votre nouveau site Web ou de remplir un mod猫le.

Pour respecter les normes Web des Nations Unies (voir le site : 芦 Construire des sites Web 脿 l鈥橭NU 禄), l'int茅gralit茅 de votre site doit 锚tre accessible ; et cela inclut l'en-t锚te (le masthead). Pour ce faire, suivez les 茅tapes ci-dessous.

Les 4 principes d鈥檃ccessibilit茅 du contenu Web

Être perceptible, 锚tre utilisable, 锚tre compr茅hensible et 锚tre robuste sont les 4 principes directeurs r茅f茅renc茅s tout au long de ce site, ils constituent la base de l'accessibilit茅 du Web.

脢tre perceptible

Pour supprimer tout obstacle 脿 l'acc猫s 脿 votre site Web, vous devez proposer des moyens alternatifs d'acc茅der 脿 son contenu afin de compenser l'absence ou la faiblesse de certains sens, comme la perte d'audition ou la d茅ficience visuelle. Cela implique 茅galement que votre site Web prenne en charge l'utilisation de technologies d'assistance (lecteurs d'茅cran, outils d'agrandissement, etc.).

  1. Pourquoi est-ce important ?

    Les lecteurs d鈥櫭ヽran et les appareils Braille doivent pouvoir identifier les changements de langue afin de fournir une prononciation correcte.

    Assurer l'accessibilit茅

    • La balise <html> dans l鈥檈n-t锚te de la page indique la langue du contenu de la page. Si un mot ou une phrase d'une autre langue appara卯t dans le contenu, il faut le baliser en cons茅quence.
    Ce qu鈥檌l convient de faire :

    Utiliser l'attribut 芦 lang 禄 pour identifier le texte dans une autre langue.

    Ce qu鈥檌l faut se rappeler

    • S'il y a du contenu dans une langue autre que la langue principale de la page, v茅rifiez le code HTML.
    Exemple :
    <html lang="en" >
      <ul>
        <li><a href="sg_letter.html">Letter of the Secretary general</a></li>
        <li><a href="letter_fr.html" lang="fr">Lettre du Repr茅sentant permanent de la Belgique</a></li>
        <li><a href="letter_sc.html">Letter of the President of the Security Council</a></li>
      </ul>
    </html>

  2. Pourquoi est-ce important ?

    La couleur, la police et la taille du texte sont des 茅l茅ments cl茅s dans la conception d'un site web, et bien qu'ils soient utilis茅s pour am茅liorer le contenu et 锚tre attractifs visuellement, tous ces 茅l茅ments doivent 锚tre accessibles. Le respect de cette exigence aidera les utilisateurs qui s'appuient sur des technologies d'assistance, ainsi que les utilisateurs daltoniens ou ceux qui utilisent des 茅crans braille. Le texte est 茅galement un 茅l茅ment important de la conception d'un site, et il existe une grande vari茅t茅 de polices et de tailles mais pour que votre contenu Web reste lisible, les utilisateurs doivent pouvoir redimensionner le texte.

    Assurer l'accessibilit茅

    • Le contraste entre le premier et le deuxi猫me plan doit 锚tre suffisant (ratio de 3 : 1).
    • Fournir des adresses web (url) courtes afin qu鈥檈lles restent afficher enti猫rement dans le cas o霉 l鈥檜tilisateur agrandit la taille du texte ou de l鈥櫭ヽran.
    • D茅finissez la taille de la police avec des unit茅s relatives pour rendre le redimensionnement plus facile que s'il 茅tait fixe.
    • D茅finissez les tailles en pourcentages (%) ou 芦 em 禄.

    Ce qu鈥檌l faut se rappeler

    • Le choix des couleurs ne doit PAS 锚tre le seul moyen de faire passer un message ou d鈥檌dentifier du contenu.
    • Le texte des paragraphes ne doit pas 锚tre en retrait, sinon il devient difficile 脿 lire.
    • Cr茅er des boutons radio verts avec les mots 芦 go 禄 et rouges pour 芦 stop 禄 n'est pas accessible ; compl茅tez les indices de couleur avec une phrase, comme 芦 Cliquez sur le bouton vert pour continuer 禄 ou 芦 Cliquez sur le bouton rouge pour arr锚ter l'enregistrement 禄.
    • Les informations importantes ne doivent pas 锚tre diminu茅es quand les couleurs sont d茅sactiv茅es ; par exemple, les liens doivent 锚tre soulign茅s.
    • - Utilisez le CSS pour styliser la taille de caract猫re (voir l鈥檈xemple ci-dessous, CSS).
    Exemples :

    CSS
    h1 {font-size: 3em;}

脢tre utilisable

Tout le monde ne navigue pas sur un site internet de la m锚me fa莽on. Les utilisateurs handicap茅s peuvent par exemple utiliser des technologies d'assistance, telles que des lecteurs d'茅cran, des appareils en braille, des logiciels d'agrandissement d'茅cran, etc. Il est donc essentiel que les utilisateurs puissent utiliser les commandes, les boutons, la navigation et les autres 茅l茅ments interactifs n茅cessaires.

  1. Pourquoi est-ce important ?

    脡tant donn茅 que certains utilisateurs handicap茅s ne peuvent pas utiliser une souris, il convient de mettre en place des solutions de rechange telles que les fonctions au clavier.

    Assurer l'accessibilit茅

    • Toutes les fonctionnalit茅s disponibles 脿 l'aide de la souris doivent 茅galement l'锚tre 脿 l'aide de la touche 芦 entr茅e/retour 禄. De plus, chaque 茅l茅ment de la navigation (bouton, onglet, sous-menus, etc.) doit 茅galement 锚tre disponible depuis le clavier pour naviguer, avancer ou reculer dans les diff茅rentes pages.
    Ce qu鈥檌l convient de faire :
    • Utilisez les liens 芦 Sauter/Skip 禄 pour acc茅der directement 脿 la navigation et/ou pour passer au contenu. Ces liens doivent devenir visibles lorsque le clavier est activ茅, car ils sont utiles aux utilisateurs voyants qui ne peuvent pas utiliser de souris.
    • 脡vitez d'utiliser des applications, des plugins, des widgets ou des techniques JavaScript qui bloquent le clavier et emp锚chent les utilisateurs d'entrer et de sortir de tout 茅l茅ment de l'interface utilisateur.

    Ce qu'il faut se rappeler

    • Les utilisateurs de lecteurs d'茅cran doivent 茅couter le titre, les 茅l茅ments de la banni猫re et la barre de navigation de chaque page. Faites en sorte qu'il soit facile d'acc茅der directement au contenu, en utilisant un lien 芦 Sauter/Skip 禄.
    • L'indicateur de mise au point - propre aux navigateurs (ligne pointill茅e fine ou contour bleu) - peut 锚tre d茅sactiv茅 脿 l'aide de CSS. Ne le d茅sactivez pas, sauf si vous pouvez en proposer un meilleur.
    • Si la navigation sur votre site est complexe, les utilisateurs devront parcourir chaque lien, ce qui peut 锚tre difficile pour eux. Proposez un lien 芦 Passer au contenu 禄 ET utilisez une structure d'en-t锚te appropri茅e, cr茅ant un aper莽u du contenu de la page.
    • D茅sactivez les liens.
    Exemples :

    Skip links

    • HTML

      <div id="skiplink">
        <ul>
          <li> <a href="#navigation">Skip to navigation </a> </li>
          <li> <a href="#content">Skip to content </a> </li>;
        </ul>
      </div>
      <div id="banner">
        <h1>Events </h1>
      </div>
      <div id="navigation">
        <ul>
          <li id="home"> <a href="index.shtml">At Headquarters in New York </a> </li>
          <li id="type"> <a href="exhibition.shtml">Exhibitions </a> </li>;
        </ul>
      </div>
      <div id="content" class>
        <p>The UN at 75, an exhibition online </p>
      </div>

    • CSS - to hide the skip links by giving them the same colour as the background

      body {background-colour: #FFFFFF;}
      #skiplink a {color:#FFFFFF;}
      #skiplink a:focus, div#skiplink a:active {color:#0000FF;}

  2. Pourquoi est-ce important ?

    Les utilisateurs doivent pouvoir s'orienter sur un site ou une page Web et trouver le contenu et les fonctionnalit茅s qu'ils recherchent.

    Assurer l'accessibilit茅

    • Aidez les utilisateurs 脿 naviguer, 脿 trouver du contenu et 脿 d茅terminer o霉 ils se trouvent sur votre site Web. La navigation doit 锚tre pr茅sent茅e dans un ordre uniforme, bien structur茅 et logique afin d'茅viter toute confusion ou d茅sorientation.
    Ce qu鈥檌l convient de faire :
    • Chaque page Web doit avoir un titre informatif (<title>) qui d茅crit son contenu/son objectif .
    • Assurez-vous que chaque lien correspond 脿 une action sp茅cifique ou est li茅 脿 un texte afin que ces liens puissent 锚tre lus hors contexte.
    • Utilisez les en-t锚tes de section pour une navigation simple et logique.

    Ce qu'il faut se rappeler

    • 脡vitez les liens ambigus - la destination d'un lien doit 锚tre compr茅hensible 脿 partir du libell茅 ou par la description du texte.
    • N'utilisez pas 芦 En savoir plus 禄 ou 芦 Cliquez ici 禄. Soyez pr茅cis : 芦 En savoir plus sur le mandat de notre D茅partement 禄, ou 芦 Lire le rapport complet de l'Envoy茅 sp茅cial 禄.
    Exemples :
    • Page Title

      <html>
        <head>
          <title>Key Documents, International Law | 51吃瓜</title>
        </head>
        <body>
          <h1>Legal Key Documents</h1>
          <h2>Introduction</h2>
          <h2>Introduction</h2>
          …
        </body>
      </html>

脢tre compr茅hensible

Ce principe fait r茅f茅rence 脿 la compr茅hension du contenu et des fonctionnalit茅s d'un site Web. Un contenu utilisant un langage complexe et de nombreux acronymes peut 锚tre difficile 脿 comprendre pour certaines personnes handicap茅es, ainsi que pour celles qui lisent dans une langue qui n'est pas la leur.

Assurez-vous que votre contenu soit clair et concis ; et pour garantir une compr茅hension totale de votre site Web, n'oubliez pas que la coh茅rence et la facilit茅 de navigation sont essentielles.

  1. Pourquoi est-ce important ?

    Lorsque les utilisateurs remplissent un formulaire de contact ou stoppent un diaporama, ils peuvent faire une erreur et ils doivent pouvoir la corriger facilement et efficacement.

    Assurer l'accessibilit茅

    • Pour 茅viter les erreurs lors du remplissage de formulaires ou de recherche dans une base de donn茅es, il faut avant tout des instructions claires.
    • S'il y a des erreurs de saisie dans un formulaire, faites en sorte que les messages d'erreur soient imm茅diatement visibles et descriptifs.
    Ce qu鈥檌l convient de faire :
    • Utilisez des balises (label) pour chacun des champs d鈥檜n formulaire, et identifiez chaque 茅tiquette avec le champ qui lui est associ茅.
    • Faites en sorte que chaque 茅tiquette soit compr茅hensible pour une personne qui ne peut pas voir au-del脿 de ce champ de formulaire. Si l'茅tiquette d'un champ de formulaire indique 芦 Adresse 禄, un utilisateur de lecteur d'茅cran peut alors saisir son adresse compl猫te, y compris l'茅tage, le num茅ro d'appartement, le code postal et l'茅tat/la province. Si le prochain champ sur lequel il navigue est 芦 num茅ro d'appartement 禄 ou 芦 code postal 禄, l'utilisateur devra revenir en arri猫re et modifier sa saisie pr茅c茅dente, ce qui risque de le frustrer. Il est pr茅f茅rable d'utiliser une 茅tiquette plus descriptive, comme 芦 Adresse de la rue, ligne 1 禄.
    • Lorsqu'un utilisateur soumet un formulaire comportant des erreurs, vous devez faire conna卯tre l'茅tat d'erreur de soumission du formulaire sur le titre de la page et les en-t锚tes<h1> ou <h2>, et lister les erreurs en haut du formulaire.
    • Si l'utilisateur remplit un champ de formulaire de mani猫re incorrecte, utilisez des messages d'erreur descriptifs et sugg茅rez des moyens utiles pour remplir correctement les champs du formulaire. Par exemple, si quelqu'un saisit sa date de naissance sous la forme 芦 1er janvier 2000 禄, un message d'erreur utile pourrait 锚tre du type 芦 Format incorrect . Veuillez saisir votre date de naissance dans un format tel que 12/31/1999 禄. Les messages d'erreur du type 芦 entr茅e non valide 禄 ne sont pas utiles.

    Ce qu'il faut se rappeler

    • N'utilisez pas de texte de remplacement dans chaque champ de formulaire comme 茅tiquette de champ.
    • N'utilisez pas uniquement la couleur, par exemple une bordure de champ de saisie rouge, pour signaler les champs incorrects. Les erreurs doivent 锚tre clairement indiqu茅es et associ茅es 脿 chaque champ.
    Exemples :
    • 脡tiquette associ茅e 脿 son champ :

      <label for="firstname">First name:</label>
      <input type="text" name="firstname" id="firstname" />

    • Une messagerie utile sur un formulaire qui renvoie des erreurs :

      <h1>Form Submission Error!</h1>
      <div role="alert">
        <h2>There is 1 error in this form. Please fix the following and resubmit:</h4>
        <ul>
          <li>
            <a href="#firstname" id="firstname_error">
              The First name field is empty; it is a required field and must be filled in.
            </a>
          </li>
        </ul>
      </div>
      ...
      <form>
        <label for="firstname">First Name:</label>
        <input type="text" id="firstname" aria-describedby="firstname_error">
        ...

  2. Pourquoi est-ce important ?

    Certains utilisateurs lisent rapidement, mais d'autres ne le font pas parce qu'ils ne le peuvent pas. Si votre contenu Web est complexe, vous risquez de perdre des visiteurs parce que le texte est trop difficile 脿 suivre. Vous devez 茅galement organiser votre contenu selon une structure simple.

    Assurer l'accessibilit茅 :

    • Modifiez votre contenu Web pour le rendre aussi compr茅hensible que possible. Gardez 脿 l'esprit les principes de base de la r茅daction pour le Web : 茅crivez des phrases courtes, actives et simples, 茅vitez l'utilisation du jargon, expliquez les acronymes et rendez le texte lisible.
    Ce qu鈥檌l convient de faire :
    • D茅finissez la langue utilis茅e sur le site (A, C, E, F, R, S).
    • Utilisez un style moins formel que celui normalement utilis茅 dans les documents de l'ONU : le texte doit 锚tre concis et direct, particuli猫rement sur la page d'accueil.
    • Les abr茅viations, les acronymes et la terminologie technique doivent 锚tre expliqu茅s, utilis茅s avec parcimonie et uniquement lorsqu'ils sont largement reconnaissables.
    • Fournissez des liens vers les d茅finitions des termes techniques.

    Ce qu'il faut se rappeler

    • La connaissance de votre public est la premi猫re 茅tape. Qui est votre public cible ?
    • Vous pouvez envisager de solliciter des utilisateurs repr茅sentant votre public cible.
    Exemples :
    • Attribut de langage

      <html dir="ltr" lang="en">
        <head="...">
        <meta charset="utf-8"/>
        ...

    • 脡l茅ment d'abr茅viation <Abbr>

      Vous pouvez expliquer la signification d'un acronyme en utilisant la balise , comme suit :

      The regional approach to <abbr title=”Nuclear-Weapon-Free Zones”>NWFZ</abbr> aims to ...

      Remarque : la balise <acronym> est obsol猫te ; la balise <abbr> doit 锚tre utilis茅e pour les acronymes.