51吃瓜

• Utilisez un attribut 芦 alt 禄 vide si l'image est purement d茅corative (ligne horizontale, etc.) ; dans ce cas, le lecteur d'茅cran ignorera l'image, plut么t que de lire 芦 image 禄 sans raison.
• Utilisez l'attribut 芦 alt 禄 pour d茅crire le contenu et/ou la fonction d'un visuel.
• Limitez la longueur de la description du contenu non textuel 脿 80-100 caract猫res.
• D茅crivez ce qui se trouve SUR le visuel, en tenant compte du contexte.
• R茅p茅tez le texte int茅gr茅 dans l'image (par exemple, dans le cas d'un logo, d'une annonce, etc.).
• Fournissez des m茅thodes alternatives pour d茅crire les visuels dans le texte pr猫s du contenu non textuel ou par le biais d'une description de page s茅par茅e (par exemple, pour les graphiques, les infographies, etc.).
Pour les images complexes ou les images qui renvoient 脿 du contenu, ou qui n茅cessitent des informations suppl茅mentaires, utilisez 茅galement l'attribut title (voir l'exemple ci-dessous).

Alt attribute

<img src="sg_Summit2020.jpg" alt="UN Secretary-General at the podium during the Climate Ambition Summit 2020" />

Title attribute

<img src=".../web_cover_issue_2_2018_english.jpg鈥� alt="Magazine cover of the UN Chronicle, issue about the 2030 Agenda鈥� title="Link to issue 2 of the UN Chronicle which focuses on the 2030 Agenda for Sustainable Development鈥� />

Empty alt attribute

<img src=".../images/hr_shadow.gif" alt="" />

• Vid茅o pr茅-enregistr茅e : ajoutez une description audio lorsque vous proposez une vid茅o en ligne. Elle ne doit pas seulement inclure la narration (transcription) mais aussi d茅crire des informations importantes telles que les bruits de fond, les effets visuels, etc.
• Vid茅o pr茅-enregistr茅e : pr茅voyez et organisez des vid茅os avec interpr茅tation en langue des signes.
• Vid茅o pr茅-enregistr茅e et audio pr茅-enregistr茅e : assurez-vous qu'il y a suffisamment de temps pour lire les sous-titres.
• Vid茅o pr茅enregistr茅e : ajoutez une description de la vid茅o dans l'attribut 芦 Title 禄 (voir l'exemple ci-dessous, <iframe>).
• Carrousel : les commandes (avant/arri猫re) doivent 锚tre clairement affich茅es et reconnaissables (fl猫ches, points).
• Carrousel : l'acc猫s au clavier est essentiel pour que les utilisateurs puissent naviguer manuellement d'une image 脿 l'autre.
• Contenu audio : incluez des commandes pour mettre en pause ou arr锚ter l'audio, ainsi que des commandes pour augmenter ou diminuer le volume.

• <iframe allowfullscreen="" frameborder="0" mozallowfullscreen="" src=/webcast/1362235914001/B1J3DDQJf_default/index.html?videoId=6203307844001" title="Video message of the Secretary-General on UN Day 2020" webkitallowfullscreen=""></iframe></div>
• Transcription : description d'informations visuelles et sonores disponibles sous forme de texte. Chargez sur votre site web une description objective de la vid茅o - sans interpr茅tation, censure ou commentaire - au pr茅sent, en utilisant une voix active et un style narratif 脿 la troisi猫me personne.
• 尝茅驳别苍诲别蝉/蝉辞耻蝉-迟颈迟谤别蝉 : YouTube offre la possibilit茅 d'ajouter automatiquement des sous-titres. Vous devez les v茅rifier/茅diter manuellement pour en assurer l'exactitude.

• <h> tags 鈥� balises pour l'architecture d'une page d'accueil/index :
  
  <h1>Law of the Sea</h1> [Premier titre de la page d'index]
  <h2>Our mandate: saving the oceans</h2> [Titre du premier paragraphe]
  <h3>The oceans and sustainable development</h3> [Sous-th猫me imbriqu茅 dans le premier paragraphe]
  <h2>Our action: maintaining the law at sea</h2> [Titre du second paragraphe]
  <h3>Piracy</h3> [Sous-th猫me imbriqu茅 dans le deuxi猫me paragraphe]
  ...
  
  

  Remarque : les balises <h> sont stylis茅es de<h1> 脿 <h6>, <h1> 茅tant la plus grande et <h6> la plus petite.

• Tableau 鈥� Offre d'emploi
  
  <table>
  <tr>
    <th>Job Title </th>
    <td>...</td>
  </tr>
  <tr>
    <th>Mandate</th>
    <td>...</td>
  </tr>
  <tr>
    <th>Deadline</th>
    <td> ...</td>
  </tr>
</table>

  
  
• Tableau de donn茅es 鈥� « Nominations officielles du Secr茅taire g茅n茅ral de l'ONU », en utilisant une l茅gende pour garantir que l'identifiant reste avec le tableau lorsque le CSS est d茅sactiv茅 par exemple.
  
  <table>
  <caption>Schedule for the week of 4 February 2019</caption>
  ...
</table>
  

• <blockquote>
I feel honoured and very humbled when I think of all our founding fathers wise enough and courageous enough to save this world from the scourge of war who have negotiated, drafted, and finally signed the Charter of the 51吃瓜, which has shaped the future of the whole international community.
</blockquote>
<p>Secretary-General Ban Ki-moon in remarks at San Francisco War Memorial, 26 July 2007</p>

• Pr茅voyez des commandes pour que les utilisateurs puissent activer et d茅sactiver, ou mettre en pause les animations, les carrousels, etc. (脿 moins qu'ils ne soient essentiels 脿 la fonctionnalit茅 du site) et de profiter de cette fonctionnalit茅 脿 leur propre rythme.
• Indiquez l'茅tat du bouton dans un diaporama/curseur, car les commandes d'un carrousel sont g茅n茅ralement petites. La couleur et la forme, ainsi qu'une d茅nomination et un 茅tiquetage appropri茅s, indiqueront l'茅tat et permettront aux utilisateurs de conna卯tre plus facilement leur 茅tat actuel.

• Pr茅c茅dent et Suivant - <bouton> JavaScript
  
  var ctrls = document.createElement('ul');
ctrls.className = 'controls';
ctrls.innerHTML = '<li>' +
  '<button type="button" class="btn-prev">' +
  '<img src="img/chevron-left.png" alt="Previous Item">' +
  '</button>' +
  '</li>' +
  '<li>' +
  '<button type="button" class="btn-next">' +
  '<img src="img/chevron-right.png" alt="Next Item">' +
  '</button>' +
  '</li>';
ctrls.querySelector('.btn-prev').addEventListener('click', function() {
  prevSlide(true);
});
ctrls.querySelector('.btn-next').addEventListener('click', function(){
  nextSlide(true);
});
carousel.appendChild(ctrls);
  
  

• Les pages Web ne doivent contenir aucun 茅l茅ment qui clignote plus de trois fois par seconde.

• Utilisez des scripts c么t茅 serveur au lieu de scripts c么t茅 client. Si vous utilisez un script c么t茅 client et que le client ne prend pas en charge cette technologie, l'utilisateur ne pourra pas acc茅der au contenu ou aux fonctionnalit茅s fournies par le script. Mais dans de nombreux cas, la m锚me fonctionnalit茅 peut 锚tre obtenue en utilisant un script c么t茅 serveur.
• En dernier recours, fournissez un 茅quivalent d鈥檜n texte 脿 jour des informations sur une autre page.

• Veillez 脿 ce que la navigation soit coh茅rente sur l'ensemble du site. Si vous d茅cidez d'avoir des sous-menus plut么t que des menus lat茅raux, conservez ce mod猫le.

• Les documents sont souvent divis茅s en plusieurs sections ; ces sections doivent 锚tre introduites avec des 茅l茅ments d鈥檈n-t锚te HTML (de <h1> 脿 <h6>).
• Il est important d'utiliser les titres de mani猫re appropri茅e pour transmettre la structure du document. Par exemple, <h2> est le sous-titre d'un <h1> ; un <h3> est le sous-titre d'un <h2>, etc.
• >Ne sautez pas de niveaux (par exemple, de <h1> directement 脿 <h3> ; pour cr茅er un effet de mise en forme, utilisez des feuilles de style CSS (pour modifier les styles de police, par exemple).

• <body>
  <div class="section1">
    <h1>Welcome to the 51吃瓜!</h1>
    鈥� some text here ...
  </div>
  <div class="section2">
    <h2>sub topic 1</h2>
    ... text of the section ...
  </div>
  <div class="section3">
    <h2>sub topic 2</h2>
    ... text of the section ...
  </div>
</body>

• Assurez-vous que les composants personnalis茅s conservent autant d'attributs d'accessibilit茅 HTML et XML natifs que possible.
• Les balises de d茅but et de fin de HTML ou de XML doivent 锚tre compl猫tes pour 茅viter les erreurs d'affichage et les probl猫mes avec les technologies d'assistance.
• Utilisez les 茅tiquettes ARIA pour fournir une 茅tiquette invisible lorsqu'une 茅tiquette visible ne peut 锚tre utilis茅e.
• Validez votre code HTML en utilisant la fonction int茅gr茅e du module compl茅mentaire « d茅veloppeur Web ».

• Balisage HTML appropri茅
  
  “On 23 March 2020, Secretary-General Antonio Guterres issued an <em>urgent</em> appeal for a <strong>global ceasefire</strong> in all corners of the world to focus together on the true fight – defeating COVID-19.”
  <em> = mot important dans la phrase
  <strong> = comme <em> mais soulign茅 pour l'accentuation.
  
  

• Indiquez le type et la taille du fichierdans le lien ou entre crochets ou parenth猫ses.
• En fournissant des d茅tails sur le type et la taille du fichier ainsi que sur la langue dans le titre du lien, vous vous assurez que les utilisateurs t茅l茅chargent les fichiers qui r茅pondent le mieux 脿 leurs besoins (plate-forme et langue).
• Fournissez des liens vers des pr茅sentations alternatives.
• Chaque fois que des alternatives sont disponibles, fournissez des liens clairs vers ces alternatives (exemple : fournissez des liens vers diff茅rents types de m茅dias ou diff茅rentes options de langue pour le m锚me document, si possible). Envisagez d'utiliser des profils pour enregistrer les pr茅f茅rences de l'utilisateur et configurez le serveur pour qu'il choisisse automatiquement les pr茅f茅rences du document.
• Par exemple, un navigateur pourrait indiquer qu'il souhaite voir les informations en arabe ou en anglais en fonction des param猫tres de l'utilisateur ; offrez aux utilisateurs la possibilit茅 de r茅initialiser leurs param猫tres.

• <!-- clearly specify the file type, size and/or language -->
<a href="event.mov">Download the video of the event (Quick Time format, 3MB, 12mn)</a>
or
<a href="event.mp3">Download the audio recording of the event (MP3 format, 112KB, 12mn)</a>
<p>Choose the language of the document:</p>
<ul>
  <li><a href="English_file.html">English (HTML format)</a></li>
  <li><a lang="ar" href="Arabic_file.pdf">毓乇亘賷 (PDF 3MB)</a></li>
</ul>