Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Modèle de page ARIA

Page de garde

Les métadonnées de la page sont décrites dans l'en-tête comme dans l'exemple suivant :

md
---
title: aria-labelledby
slug: Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby
page-type: aria-attribute
spec-urls: https://w3c.github.io/aria/#aria-labelledby
sidebar: accessibilitysidebar
---

Titre et chemin

Une page de rôle ARIA doit avoir un title et un slug de ARIA: Nom du rôle. Par exemple, le rôle button a un title et un slug de ARIA/NameOfTheRole_role et l'attribut aria-labelledby a un title de aria-labelledby.

Barre latérale

La accessibilitysidebar peut être utilisée dans toutes les pages sous /Web/Accessibility :

yaml
sidebar: accessibilitysidebar

Voir Structures de page : Barres latérales pour plus de détails.

Macros en haut de page

Un certain nombre d'appels de macros apparaissent en haut de la section de contenu. Vous devez les mettre à jour ou les supprimer selon les conseils ci-dessous.

Statuts

Ne pas ajouter ou modifier les clés de statut manuellement. Pour inclure la clé de statut de fonctionnalité (appropriée) — expérimentale, obsolète, ou non standard — voir la section « Comment les statuts des fonctionnalités sont ajoutés ou mis à jour ».

Spécifications

Dans la valeur de la clé de métadonnées spec-urls, mettez à jour les URL pour pointer vers les ID de fragment des sections correctes des spécifications suivantes :

Ressources supplémentaires :

Modèle de page

Le paragraphe de résumé — commencez par nommer le rôle ou l'attribut et expliquez ce qu'il fait. Idéalement, cela doit être une ou deux phrases courtes. Ce contenu apparaît comme info-bulle sur les liens vers cette page, alors soignez-le.

html
<!-- Insérez un bloc de code montrant des cas d'utilisation courants -->

(Optionnel) Incluez une brève description de l'exemple précédent.

Description

Incluez une description complète de l'attribut ou du rôle.

Rôles, états et propriétés ARIA associés

Nom des rôles associés

Explication de l'exigence, lien vers les pages des fonctionnalités.

Nom des attributs associés

Explication de l'exigence, lien vers les pages des attributs, ainsi que lien vers le JS nécessaire pour modifier la valeur, si approprié.

Interactions au clavier

Fonctionnalités JavaScript requises

Gestionnaires d'évènements requis

Explication de chacun

Modification des valeurs des attributs

Explication de chacun

Note : Incluez une note sur les alternatives sémantiques à l'utilisation de ce rôle ou attribut. La première règle de l'utilisation d'ARIA est que vous pouvez utiliser une fonctionnalité native avec la sémantique et le comportement dont vous avez besoin déjà intégrés, au lieu de réutiliser un élément et d'ajouter un rôle, un état ou une propriété ARIA pour le rendre accessible, puis faites-le. Ensuite, publiez tous les détails dans la section des meilleures pratiques ci-dessous.

Exemples

Notez que nous utilisons le pluriel « Exemples » même si la page ne contient qu'un seul exemple.

Un titre descriptif

Chaque exemple doit avoir un titre H3 nommant l'exemple. Le titre doit être descriptif de ce que fait l'exemple. Par exemple, « Un exemple simple » ne dit rien sur l'exemple et n'est donc pas un bon titre. Le titre doit être concis. Pour une description plus longue, utilisez le paragraphe après le titre.

Consultez notre guide sur la façon d'ajouter des exemples de code pour plus d'informations.

Note : Parfois, vous pouvez vouloir créer un lien vers des exemples donnés sur une autre page.

Scénario 1 : Si vous avez des exemples sur cette page et d'autres exemples sur une autre page :

Incluez un titre H3 (###) pour chaque exemple sur cette page, puis un dernier titre H3 (###) avec le texte « Plus d'exemples », sous lequel vous pouvez créer des liens vers les exemples sur d'autres pages. Par exemple :

md
## Exemples

### Utiliser l'API fetch

Exemple de Fetch

### Plus d'exemples

Liens vers plus d'exemples sur d'autres pages

Scénario 2 : Si vous n'avez des exemples que sur une autre page et aucun sur cette page :

N'ajoutez pas de titres H3 ; ajoutez simplement les liens directement sous le titre H2 « Exemples ». Par exemple :

md
## Exemples

Pour des exemples de cette API, voir [la page sur `fetch()`](https://example.org/).

Problèmes d'accessibilité

Optionnellement, avertissez des éventuels problèmes d'accessibilité liés à l'utilisation de cette propriété, et comment les contourner. Supprimez cette section s'il n'y en a pas à mentionner.

Meilleures pratiques

Optionnellement, énumérez les meilleures pratiques existantes pour ce rôle. Supprimez la section s'il n'y en a pas.

Avantages supplémentaires

Rôle associé

Si ce rôle est un parent, enfant ou voisin requis, et ce qu'il fait.

Tout avantage supplémentaire que cette fonctionnalité offre aux utilisateur·ice·s de lecteurs d'écran non typiques, comme Google ou la reconnaissance vocale mobile.

Spécifications

{{Specifications}}

Pour utiliser cette macro, supprimez les accents inversés et l'antislash dans le fichier markdown.

Ordre de priorité

Quelles sont les propriétés associées, et dans quel ordre cet attribut ou cette propriété est-il lu (quelle propriété a la priorité sur celle-ci, et quelle propriété est écrasée).

Support des lecteurs d'écran

Voir aussi

Incluez des liens vers des pages de référence et des guides liés à l'API actuelle. Pour plus de directives, consultez la section Voir aussi dans le Guide de style d'écriture.

  • lien1
  • lien2
  • lien_externe (année)