recursal/MDN huggingface dataset:
output
======

**Référence XSLT/XPath** : Éléments XSLT, Fonctions EXSLT, Fonctions XPath, Axes XPath

L'élément `<xsl:output>` contrôle les caractéristiques du document de sortie. Pour fonctionner correctement dans Netscape, cet élément doit être utilisé, avec l'attribut `method`. À partir de Netscape 7.0, `method="text"` fonctionne comme prévu.

### Syntaxe


```xml
<xsl:output
 method="xml" | "html" | "text"
 version=CHAÎNE
 encoding=CHAÎNE
 omit-xml-declaration="yes" | "no"
 standalone="yes" | "no"
 doctype-public=CHAÎNE
 doctype-system=CHAÎNE
 cdata-section-elements=LISTE-DE-NOMS
 indent="yes" | "no"
 media-type=CHAÎNE />
```

### Attributs obligatoires

Aucun.

### Attributs optionnels

`method`

Définit le format de sortie.


`version`

Définit la valeur de l'attribut version dans la déclaration XML ou HTML du document de sortie. Cet attribut n'est utilisé qu'avec `method="html"` ou `method="xml"`.


`encoding`

Définit la valeur de l'attribut `encoding` dans le document de sortie.


`omit-xml-declaration`

Indique d'inclure ou non, une déclaration XML dans le document de sortie. Les valeurs possibles sont `yes` ou `no`.


`standalone` (Non supporté)

Indique, si utilisé, qu'une déclaration autonome doit être incluse dans le document de sortie et donne sa valeur. Les valeurs possibles sont `yes` ou `no`.


`doctype-public`

Définit la valeur de l'attribut `PUBLIC` de la déclaration du `DOCTYPE` dans le document de sortie.


`doctype-system`

Définit la valeur de l'attribut `SYSTEM` de la déclaration du `DOCTYPE` dans le document de sortie.


`cdata-section-elements`

Liste les éléments dont le contenu texte doit être écrit en tant que section `CDATA`. Les éléments sont séparés par des espaces.


`indent` (Non supporté.)

Spécifie si la sortie doit indentée pour indiquer sa structure hiérarchique.


`media-type` (Non supporté.)

Définit le type MIME du document de sortie.

### Type

Haut niveau, doit être l'enfant de `<xsl:stylesheet>` ou de `<xsl:transform>`.

### Définition

XSLT 1.0, section 16.

### Gecko support

Support partiel. Voir les commentaires ci-dessus.
key
===

**Référence XSLT/XPath** : Éléments XSLT, Fonctions EXSLT, Fonctions XPath, Axes XPath

L'élément `<xsl:key>` déclare une clef nommée qui peut être utilisée dans toute la feuille de styles à l'aide de la fonction `key( )`.

### Syntaxe


```xml
<xsl:key name=NOM match=EXPRESSION
 use=EXPRESSION />
```

### Attributs obligatoires

`name`

Définit un nom pour cette clef. Le nom doit être un QName valide.

`match`

Définit les nœuds sur lesquels cette clef est applicable.

`use`

Définit une expression XPath qui sera utilisée pour déterminer la valeur de la clef pour chacun des nœuds sur lesquels elle est applicable.

### Attributs optionnels

Aucun.

### Type

Haut niveau, doit être l'enfant de `<xsl:stylesheet>` ou de `<xsl:transform>`.

### Définition

XSLT 1.0, section 12.2.

### Support Gecko

Supporté.
Guides ARIA
===========

**ARIA** (Accessible Rich Internet Applications ou Applications Internet riches accessibles) défini une manière de rendre le web plus accessible pour les personnes en situation de handicap. Les quelques principes suivant permettent de s'assurer d'une meilleure accessibilité :

* Traiter les erreurs dans les formulaires
* Labelliser les composants d'interface
* Labelliser les composants composés (Composite Widgets) et des zones (Regions)
* Gérer le focus dans les composants composés (`aria-activedescendant` vs roving tabindex)
* Utiliser les rôles de points de repère (Landmark Roles)
* Traiter les actualisations dynamiques & des zones « Live »
* Mode Virtuel contre mode non virtuel dans les produits de technologies d'assistance
* Utiliser le Glisser & déposer
* Notifier les utilisateurs sur les lecteurs d'écran non-ARIA
* Arranger la structure avec le rôle `presentation`
* Masquer les trames des tableaux
* Gérer les dialogues modaux et non modaux
* Utiliser ARIA avec HTML5
* Comment tester ARIA ?
* ARIA sur les périphériques mobiles
Techniques ARIA
===============

### Rôles

#### Rôles de composant d'interface

* Alert
* Alertdialog
* Button
* Checkbox
* Dialog
* Link
* Log
* Marquee
* Progressbar
* Radio
* Scrollbar
* Slider
* Spinbutton
* status
* textbox
* Timer
* Tooltip

#### Rôles composés

Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôles enfants obligatoires ou facultatifs.

* Grid (tableau, contenant les rôles `row` (ligne), `gridcell` (cellule), `rowheader` (en-tête de ligne) et `columnheader` (en-tête de colonne))
* Menubar / Menu (contenant les rôles `menuitem`, `menuitemcheckbox` et `menuitemradio`)
* Listbox (boîte de liste, contenant le rôle `option`)
* Tablist (boîte à onglets, contenant les rôles `tab` et `tabpanel`)
* Tree (arbre, contenant les rôles `group` et `treeitem`)
* Radiogroup (voir le rôle `Radio`)
* Treegrid

#### Rôles de structure de document

* Article
* Definition
* Directory
* Document
* Group
* Heading
* Img
* List, listitem
* Math
* Note
* Presentation
* Region
* Separator
* Toolbar

#### Rôles de points de repère

* Application
* Banner
* Complementary
* Contentinfo
* Form
* Main
* Navigation
* Search
### États et propriétés

#### Attributs de composants d'interface

* aria-autocomplete
* aria-checked
* aria-disabled
* aria-expanded
* aria-haspopup
* aria-hidden
* aria-invalid
* aria-label
* aria-level
* aria-multiline
* aria-multiselectable
* aria-orientation
* aria-pressed
* aria-readonly
* aria-required
* aria-selected
* aria-sort
* aria-valuemax
* aria-valuemin
* aria-valuenow
* aria-valuetext

#### Attributs de zones « live »

* aria-live
* aria-relevant
* aria-atomic
* aria-busy

#### Attributs de glisser-déposer

* aria-dropeffect
* aria-dragged

#### Attributs de relation

* aria-activedescendant
* aria-controls
* aria-describedby
* aria-flowto
* aria-labelledby
* aria-owns
* aria-posinset
* aria-setsize
Comment déposer un bug lié à ARIA
=================================

L'état de la technologie ARIA a toujours dépendu de la communauté. Si vous remarquez un problème d'implémentation, veuillez prendre un instant pour en informer les développeurs. Voici comment déposer les bugs :

**Note :** Quand vous trouvez un bug, veuillez en aviser les tables de compatibilité liées dans la page des exemples.

A faire : ajouter la bon lien d'accessibilité à la table

| Genre | Programme | Où déposer | Notes |
| --- | --- | --- | --- |
| Lecteurs d'écran | Freedom Scientific JAWS | formulaire de support technique JAWS |
| GW Micro Window Eyes | commentaires, questions et retours Window-Eyes (email) |  |
| Non Visual Desktop Access (NVDA) | Déposer un bug NVDA
 (github)
  | Discuter des problèmes NVDA |
| Orca | Déposer un bug Orca |  |
| Navigateurs | Apple Safari | Déposer un bug WebKit.org |  |
| Google Chrome | Déposer un bug Chromium |  |
| Microsoft Internet Explorer | Déposer un bug IE | Voir les bugs ARIA Firefox existants |
| Mozilla Firefox | Déposer un bug Firefox | Utiliser le composant : Disability Access APIs |
| Opera | Déposer un bug Opera | Marquer [ARIA] dans le sommaire |
| Librairies JS | Dojo Toolkit | Déposer un bug Dojo | Marquer [Accessibilité] dans le champ composant |
| Google Web Toolkit (GWT) | Déposer un bug GWT |  |
| Yahoo User Interface | Déposer un bug YUI | 
 Déposer contre le composant associé dans la combobox catégorie et
 inclure [ARIA] dans le sommaire
  |
Utilisation du rôle banner
==========================

### Description

Cette technique présente l'utilisation du rôle `banner` (en).

La zone d'entête principale d'un site devrait être structurée avec `<header role="banner">`. Cette zone peut contenir le logo du site, sa description, le moteur de recherche.

Une page web ne doit pas contenir plus d'un rôle `banner`, mais il est tout à fait possible d'utiliser plusieurs éléments `<header>` dans une page.

### Effets possibles sur les agents utilisateurs et les technologies d'assistance

**Note :** il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative.

### Exemples

#### Une zone d'entête typique de site


```html
<header role="banner">
  <p><img src="logo.png" alt="Nom du site" /></p>
  <p>Description du site</p>
  <div role="search">...</div>
</header>
```

Autres ressources
-----------------

La fiche accede-web.
Utilisation du rôle checkbox
============================

### Description

Cette technique présente l'utilisation du rôle checkbox.

Le rôle `checkbox` est utilisé pour des contrôles interactifs à cocher. Si un élément utilise `role="checkbox",` il est obligatoire pour cet élément d'avoir également un attribut `aria-checked` qui présente l'état de la case à cocher aux technologies d'assistance. Alors que le contrôle de formulaire HTML natif `checkbox` ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle `role=checkbox` peut présenter trois états pour l'attribut `aria-checked` :

* `aria-checked="true"` : la case est cochée ;
* `aria-checked="false"` : la case est décochée ;
* `aria-checked="mixed"` : la case est partiellement cochée.

Le développeur doit modifier dynamiquement la valeur de l'attribut `aria-checked` lorsque la case est cochée.

Comme une case à cocher est un contrôle interactif, elle doit pouvoir recevoir le focus et être accessible au clavier. Si le rôle est appliqué à un élément qui ne peut recevoir le focus, l'attribut `tabindex` devra être utilisé pour corriger cela. Le raccourci clavier attendu pour activer une case à cocher est la barre d'espace.

### Effets possibles sur les agents utilisateurs et les technologies d'assistance

Lorsque le rôle `checkbox` est ajouté à un élément, l'agent utilisateur devrait suivre les étapes suivantes :

* Présenter l'élément comme ayant un rôle de case à cocher à l'API d'accessibilité du système d'exploitation ;
* Lorsque la valeur de l'attribut `aria-checked` change, envoyer un événement accessible de changement d'état.

Les technologies d'assistance doivent faire la chose suivante :

* Les lecteurs d'écran devraient annoncer l'élément comme une case à cocher, et, éventuellement, fournir des instructions sur les façons de l'activer.

**Note :** il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative.

### Exemples

#### Exemple 1 : Ajout du rôle ARIA `checkbox`


```html
<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span>
<label for="chk1">Enregistrer mes préférences</label>
```


#### Exemples concrets

* http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php
### Notes

### Attributs ARIA utilisés

* checkbox
* aria-checked
### Techniques ARIA connexes

### Autres ressources
Utiliser le rôle textbox
========================

### Description

Cette technique présente l'utilisation du rôle `textbox` et décrit les effets produits sur les navigateurs et les technologies d'assistance.

Le rôle `textbox` est utilisé pour identifier un élément permettant la saisie d'un texte librement formaté. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement `textbox` accessible aux produits de technologie d'assistance qui pourront alors le notifier à l'utilisateur.

L'utilisation par défaut est pour un champ de saisie monoligne où `Entrée` ou `Retour`, enverra le formulaire, par exemple, comme avec le HTML `<input type="text">`. Lorsqu'on a un champ multilignes et que les retours à la ligne sont pris en charge, par exemple avec l'utilisation d'un élément HTML `<textarea>`, il est également nécessaire de définir l'attribut `aria-multiline="true"`.

Lorsqu'un champ texte est en lecture seule, cela devrait être indiqué en utilisant l'attribut `aria-readonly="true"` sur l'élément concerné.

### Effets possibles sur les agents utilisateurs et les technologies d'assistance

Lorsque le rôle `textbox` est ajouté à un élément, ou qu'un tel élément devient visible, l'agent utilisateur devrait suivre les étapes suivantes :

* Présenter l'élément comme ayant un rôle `textbox` à l'API d'accessibilité du système d'exploitation ;
* Déclencher un événement `textbox` accessible à l'aide de l'API d'accessibilité du système d'exploitation si elle le prend en charge.

Les technologies d'assistance devraient être à l'écoute de tels événements et les notifier à l'utilisateur en conséquence :

* Les lecteurs d'écran devraient annoncer son label et son rôle lorsque le focus est sur la boite de texte. Si elle contient également du contenu, il devrait être annoncé comme avec une boite de texte régulière ;
* Les loupes d'écran devraient agrandir la boite de texte.

**Note :** il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative.

### Exemples

#### Exemple 1 : ajout du rôle `textbox` dans le code HTML d'un champ de saisie monoligne `<input>`

L'extrait de code ci-dessous montre comment le rôle `textbox` est ajouté directement dans le code source HTML.


```html
<input type="text" role="textbox" value="Voici du texte" />
```


#### Exemple 2 : ajout du rôle `textbox` dans le code HTML d'un champ de saisie multilignes `<textarea>`

L'extrait de code ci-dessous montre comment le rôle `textbox` est ajouté directement dans le code source HTML.


```html
<textarea role="textbox" aria-multiline="true">
  Voici du texte
  …
  sur plusieurs lignes.
</textarea>
```


#### Exemples concrets

### Notes

* Les développeurs doivent connaitre la distinction qui existe entre les champs de saisie monolignes et les champs de saisie multilignes lorsqu'ils créent un champ ;
* Les champs en lecture seule devraient être indiqués avec l'attribut `aria-readonly`.
### Attributs ARIA utilisés

* textbox.
### Techniques ARIA connexes

N/A

### Autres ressources
Utiliser le rôle progressbar
============================

### Description

Cette technique présente l'utilisation du rôle `progressbar`.

Le rôle `progressbar` devrait être utilisé pour un élément qui affiche la progression d'un tâche prenant un certain temps ou s'effectuant en plusieurs étapes.

Une barre de progression indique que la requête de l'utilisateur a été prise en compte et que l'application progresse vers la finalisation de l'action demandée. Si la valeur courante de la barre de progression peut être connue, le développeur pourra indiquer la progression à l'aide des attributs `aria-valuenow`, `aria-valuemin` et `aria-valuemax`. Si la valeur de progression est indéterminée, le développeur peut omettre l'attribut `aria-valuenow`.

Lorsqu'une tâche progresse, la valeur `aria-valuenow` doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d'assistance.

Si le rôle `progressbar` décrit la progression du chargement d'une zone particulière d'une page, l'auteur **DOIT** utiliser l'attribut `aria-describedby` pour pointer vers l'état courant, et définir l'attribut `aria-busy` à `true` pour la zone jusqu'à la fin du chargement. Il n'est pas possible à l'utilisateur de modifier la valeur de `progressbar` car elle est toujours en lecture seule.

**Note :** généralement les technologies d'assistance retourneront la valeur de l'attribut `aria-valuenow` sous la forme d'un pourcentage d'une plage de valeurs comprise entre `aria-valuemin` et `aria-valuemax`, sauf si `aria-valuetext` est spécifié. Il est préférable de définir les valeurs pour les attributs `aria-valuemin`, `aria-valuemax` et `aria-valuenow` de façon appropriée pour ce calcul.

**Note :** les éléments possédant le rôle `progressbar` ont une valeur `aria-readonly` implicite définie à `true`.

### Effets possibles sur les agents utilisateurs et les technologies d'assistance

Les lecteurs devraient annoncer les mises à jour de la progression dès qu'elles se produisent. Si la barre de progression a un label, il devrait également être mentionné.

**Note :** il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative.

### Exemples

#### Exemple 1 : barre de progression simple avec pourcentage de progression


```html
<div
 role="progressbar"
 aria-valuenow="20"
 aria-valuemin="0"
 aria-valuemax="100">
  20 %
</div>
```


#### Exemple 2 : Utilisation de `aria-valuetext`


```html
<div
 role="progressbar"
 aria-valuenow="20"
 aria-valuemin="0"
 aria-valuetext="Étape 2&nbsp;: Copie des fichiers…"
 aria-valuemax="100">
  Étape 2&nbsp;: Copie des fichiers…
</div>
```


#### Exemples concrets

### Notes

### Attributs ARIA utilisés

* progressbar
* aria-valuenow
* aria-valuemin
* aria-valuemax
* aria-valuetext
Utilisation du groupe switch
============================

Le rôle ARIA switch est très similaire au role checkbox, à la sémantique près — il a deux états représentant on/off, au lieu de checked/unchecked.

Extrait des spécifications ARIA 1.1 : l'attribut `aria-checked` d'un `switch` indique si l'entrée est activée (`true`) ou désactivée (`false`). La valeur `mixed` n'est pas supportée, et les agents utilisateurs *DOIVENT* la traiter comme équivalente à `false` pour ce rôle.
Utiliser le rôle status
=======================

### Description

Cette technique présente l'utilisation du rôle status et décrit les effets produits sur les navigateurs et les technologies d'assistance.

Le rôle `status` est un type de zone live et un conteneur dont le contenu est un message d'informations destiné à l'utilisateur. Ce message n'est pas assez important pour justifier une alerte. Il est souvent présenté comme une barre d'état. Lorsque le rôle est ajouté à un élément, le navigateur émettra un événement `status` accessible aux produits de technologies d'assistance qui pourront alors le notifier à l'utilisateur.

Le contenu des informations d'état doit être fourni dans un objet d'état et il faut s'assurer que cet objet ne reçoive pas le focus. Si une autre partie de la page contrôle ce qui s'affiche dans l'objet d'état, la relation doit être explicitement définie à l'aide de l'attribut `aria-controls`.

Les technologies d'assistance devraient réserver des cellules dans la grille Braille pour rendre l'état.

### Effets possibles sur les agents utilisateurs et les technologies d'assistance

Lorsque le rôle `status` est ajouté à un élément, ou qu'un tel élément devient visible, l'agent utilisateur devrait suivre les étapes suivantes :

* Présenter l'élément ayant un rôle de `status` à l'API d'accessibilité du système d'exploitation ;
* Déclencher un événement `status` accessible à l'aide l'API d'accessibilité du système d'exploitation si elle le prend en charge.

Les technologies d'assistance devraient être à l'écoute de tels événements et les notifier à l'utilisateur en conséquence :

* Les lecteurs d'écran peuvent fournir une touche spécifique pour annoncer l'état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut `aria-live=”assertive”` soit défini dans quel cas l'utilisateur peut être interrompu ;
* Les loupes d'écran devraient agrandir l'objet d'état.

**Note :** il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative.

### Exemples

#### Exemple 1 : ajout du rôle `status` dans le code HTML

L'extrait de code ci-dessous montre comment le rôle `status` est ajouté directement dans le code source HTML.


```html
<p role="status">Vos modifications ont été automatiquement enregistrées.</p>
```


#### Exemples concrets

### Notes

### Attributs ARIA utilisés

* status.
### Techniques ARIA connexes

* Rôle alert.
### Autres ressources

* Bonnes pratiques ARIA – Implémentation des zones live : #LiveRegions.
Utiliser le rôle presentation
=============================

Cette page présente l'usage du rôle `presentation` et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.

Description
-----------

Le rôle `presentation` est utilisé pour retirer toute représentation sémantique pour un élément donné ainsi que pour ses descendants. Par exemple, un tableau utilisé pour la mise en page pourrait avoir un rôle `presentation` appliqué sur l'élément `table` pour retirer la sémantique de l'élément en lui-même ainsi que tout ses sous-éléments, comme l'en-tête de tableau ou même les données de tableau elles-mêmes.

Effets possibles sur les agents utilisateurs et les technologies d'assistance
-----------------------------------------------------------------------------

Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle `presentation`.

**Note :** il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative.

Exemples
--------

### Exemple 1: Les icônes-fontes

Une des recommandations d'accessibilité propose que les couleurs ou les représentations imagées (icônes par exemple) ne soient pas l'unique méthode pour transmettre une information. Ainsi nous pouvons partir du postula que votre icône est un complément décoratif à un texte explicite. Il faut donc lui appliquer un rôle `presentation`.


```html
<i class="icon-user" role="presentation"></i>
```


#### Exemples concrets

Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire.


```html
<button type="button" aria-haspopup="true">
  Technologies
  <span class="main-menu-arrow" role="presentation">▼</span>
</button>
```

### Exemple 2 : Inline SVG

De plus en plus d'images sont proposées sous la forme de compositions SVG directement insérées dans le document HTML. À l'image de l'attribut `alt` vide sur un élément `img`, il est possible d'indiquer qu'un élément SVG est purement décoratif grâce au rôle `presentation`.


```html
<svg role="presentation">…</svg>
```

Autres ressources
-----------------

Using Aria - 2.9 Use of Role=presentation or Role=none: https://www.w3.org/TR/using-aria/#presentation
Référence HTML
==============

Cette référence HTML décrit l'ensemble des **éléments** et des **attributs** qui peuvent être utilisés en HTML, y compris les **attributs universels** qui peuvent s'appliquer sur tous les éléments.

Référence des éléments HTML

Cette page énumère tous les éléments HTML, regroupés ici selon leurs fonctions.

Référence des attributs HTML

Chaque élément HTML peut avoir un ou plusieurs attributs. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.

Attributs universels

Les attributs universels peuvent être définis sur tous les éléments HTML. Il est toutefois possible qu'ils n'aient pas d'effet sur certains éléments.

Types de liens

En HTML, les différents types de liens indiquent les relations entre deux documents. Ces liens peuvent prendre la forme d'un élément `<a>`, `<area>` ou `<link>`.

Catégories de contenu

Chaque élément HTML appartient à une ou plusieurs catégories de contenu. Ces catégories regroupent des éléments avec des caractéristiques communes.

Formats des dates et heures en HTML

Certains éléments HTML permettent de manipuler des valeurs temporelles (dates, heures, dates et heures). Cet article décrit le format de représentation de ces valeurs, notamment utilisées pour les éléments `<input>`, `<ins>` et `<del>`.