Tableau HTML - `summary` et `caption`

L'élément HTML <caption> et l'attribut summary doivent être utilisé pour décrire l'objet d'un tableau.

Hypothèse

Si l'attribut summary est présent, il DOIT être annoncé avec le tableau;
Si l'élément HTML <caption> est présent, il DOIT être annoncé avec le tableau;
Si l'attribut summary et l'élément HTML <caption> sont présent, summary DOIT être annoncé avec le tableau et <caption> DOIT être annoncée séparément;
Si ni l'attribut summary et l'élément HTML <caption> ne sont présent, le nombre de lignes et de colonnes DOIT être annoncé avec le tableau.

Test

Exemple 1: Tableau seul

Cellule d'entête 1	Cellule d'entête 2
Cellule de donnée 1	Cellule de donnée 2

Résultats

Système d'exploitation	Navigateur	NVDA 2017.2	NVDA 2017.1	JAWS 18	JAWS 16	VoiceOver
Windows 10	Chrome 58	Annonce: «Tableau de 2 lignes et 2 colonnes.»	Annonce: «Tableau de 2 lignes et 2 colonnes.»	Annonce: «Tableau : 2 colonnes et 2 lignes.»	Annonce: «Tableau : 2 colonnes et 2 lignes.»	Non applicable
Windows 10	Firefox 53	Annonce: «Tableau de 2 lignes et 2 colonnes.»	Annonce: «Tableau de 2 lignes et 2 colonnes.»	Annonce: «Tableau : 2 colonnes et 2 lignes.»	Annonce: «Tableau : 2 colonnes et 2 lignes.»	Non applicable
Windows 10	Microsoft Edge 38.14393.1066.0	Annonce: «Tableau de 2 lignes et 2 colonnes.»	Annonce: «Tableau de 2 lignes et 2 colonnes.»	Rien n'est annoncé.	Rien n'est annoncé.	Non applicable
Windows 10	Internet Explorer 11	Annonce: «Tableau de 2 lignes et 2 colonnes.»	Annonce: «Tableau de 2 lignes et 2 colonnes.»	Annonce: «Tableau : 2 colonnes et 2 lignes.»	Annonce: «Tableau de 2 lignes et 2 colonnes.»	Non applicable
OSX	Chrome 60	Non applicable	Non applicable	Non applicable	Non applicable	Annonce: «Tableau 2 colonnes 2 lignes.»
OSX	Firefox 55	Non applicable	Non applicable	Non applicable	Non applicable	À l'entrée dans le tableau, annonce: «Tableau 0 colonne, 2 lignes». Une fois que l'on a navigué dans le tableau et qu'on retourne au point d'entrée, annonce: «Tableau 2 colonnes 2 lignes.»
OSX	Safari 10	Non applicable	Non applicable	Non applicable	Non applicable	Annonce: «Tableau 2 colonnes 2 lignes.»

Système d'exploitation	Navigateur	Talkback	VoiceOver
Android 7.1.2	Chrome	Annonce: «Cellule d'entête 1 - column header - row 1 ingrid 2 rows 2 columns.»	Non applicable
iOS 10.3.2	Safari	Non applicable	Annonce: «Cellule d'entête 1 - rangée 1 colonne 1 - Début du tableau 2 rangs et 2 colonnes.»
iOS 10.3.2	Chrome	Non applicable	Annonce: «Cellule d'entête 1 - rangée 1 colonne 1 - Début du tableau 2 rangs et 2 colonnes.»

Exemple 2: Tableau avec l'attribut `summary`

Cellule d'entête 1	Cellule d'entête 2
Cellule de donnée 1	Cellule de donnée 2

Résultats

Système d'exploitation	Navigateur	NVDA 2017.2	NVDA 2017.1	JAWS 18	JAWS 16	VoiceOver
Windows 10	Chrome 58	Annonce: «Tableau de 2 lignes et 2 colonnes Exemple 2 de mon tableau.»	Annonce: «Tableau de 2 lignes et 2 colonnes Exemple 2 de mon tableau.»	Annonce: «Résumé: Exemple 2 de mon tableau.»	Annonce: «Résumé: Exemple 2 de mon tableau.»	Non applicable
Windows 10	Firefox 53	Annonce: «Tableau de 2 lignes et 2 colonnes Exemple 2 de mon tableau.»	Annonce: «Tableau de 2 lignes et 2 colonnes Exemple 2 de mon tableau.»	Annonce: «Résumé: Exemple 2 de mon tableau.»	Annonce: «Résumé: Exemple 2 de mon tableau.»	Non applicable
Windows 10	Microsoft Edge 38.14393.1066.0	Annonce: «Tableau de 2 lignes et 2 colonnes ligne 1 colonne 1 Cellule d'entête 1». L'attribut `summary` n'est pas annoncé.	Annonce: «Tableau de 2 lignes et 2 colonnes ligne 1 colonne 1 Cellule d'entête 1». L'attribut `summary` n'est pas annoncé.	Annonce rien.	Annonce rien.	Non applicable
Windows 10	Internet Explorer 11	Annonce: «Tableau de 2 lignes et 2 colonnes Exemple 2 de mon tableau.»	Annonce: «Tableau de 2 lignes et 2 colonnes Exemple 2 de mon tableau.»	Annonce: «Résumé: Exemple 2 de mon tableau.»	Annonce: «Résumé: Exemple 2 de mon tableau.»	Non applicable
OSX	Chrome 60	Non applicable	Non applicable	Non applicable	Non applicable	Annonce: «Exemple 2 de mon tableau. Tableau de 2 lignes et 2 colonnes.»
OSX	Firefox 55	Non applicable	Non applicable	Non applicable	Non applicable	Annonce: «Exemple 2 de mon tableau. Tableau de 0 lignes et 2 colonnes.»
OSX	Safari 10	Non applicable	Non applicable	Non applicable	Non applicable	Annonce: «Tableau de 2 lignes et 2 colonnes. Exemple 2 de mon tableau.»

Système d'exploitation	Navigateur	Talkback	VoiceOver
Android 7.1.2	Chrome	Annonce: «Cellule d'entête 1 column header row 1 ingrid - Exemple 2 de mon tableau - 2 rows 2 columns.»	Non applicable
iOS 10.3.2	Safari	Non applicable	Annonce: "Exemple de mon tableau. - Cellule d'entête 1 - rangée 1 colonne 1 - Début du tableau 2 rangs 2 colonnes.»
iOS 10.3.2	Chrome	Non applicable	Annonce: «Exemple de mon tableau. - Cellule d'entête 1 - rangée 1 colonne 1 - Début du tableau 2 rangs 2 colonnes.»

Exemple 3: Tableau avec l'élément HTML `<caption>`

Légende de mon tableau.
Cellule d'entête 1	Cellule d'entête 2
Cellule de donnée 1	Cellule de donnée 2

Résultats

Système d'exploitation	Navigateur	NVDA 2017.2	NVDA 2017.1	JAWS 18	JAWS 16	VoiceOver
Windows 10	Chrome 58	Annonce: «Tableau de 2 lignes et 2 colonnes Légende de mon tableau.»	Annonce: «Tableau de 2 lignes et 2 colonnes Légende de mon tableau.»	Annonce: «Tableau: 2 colonnes et 2 lignes Légende de mon tableau.»	Annonce: «Tableau: 2 colonnes et 2 lignes Légende de mon tableau.»	Non applicable
Windows 10	Firefox 53	Annonce: «Tableau de 2 lignes et 2 colonnes Légende de mon tableau.»	Annonce: «Tableau de 2 lignes et 2 colonnes Légende de mon tableau.»	Annonce: «Tableau: 2 colonnes et 2 lignes Légende de mon tableau.»	Annonce: «Tableau: 2 colonnes et 2 lignes Légende de mon tableau.»	Non applicable
Windows 10	Microsoft Edge 38.14393.1066.0	Annonce: «Tableau de 2 lignes et 2 colonnes Légende de mon tableau.»	Annonce: «Tableau de 2 lignes et 2 colonnes Légende de mon tableau.»	Annonce rien.	Annonce rien.	Non applicable
Windows 10	Internet Explorer 11	Annonce: «Tableau de 2 lignes et 2 colonnes Légende de mon tableau.»	Annonce: «Tableau de 2 lignes et 2 colonnes Légende de mon tableau.»	Annonce: «Tableau: 2 colonnes et 2 lignes Légende de mon tableau.»	Annonce: «Tableau: 2 colonnes et 2 lignes Légende de mon tableau.»	Non applicable
OSX	Chrome 60	Non applicable	Non applicable	Non applicable	Non applicable	Annonce: «Légende de mon tableau. Tableau: 2 colonnes et 2 lignes»
OSX	Firefox 55	Non applicable	Non applicable	Non applicable	Non applicable	Annonce: «Légende de mon tableau. Tableau: 0 colonnes et 2 lignes»
OSX	Safari 10	Non applicable	Non applicable	Non applicable	Non applicable	Annonce: «Légende de mon tableau. Tableau: 2 colonnes et 2 lignes»

Système d'exploitation	Navigateur	Talkback	VoiceOver
Android 7.1.2	Chrome	Annonce: «Légende de mon tableau - ingrid Légende de mon tableau - 2 rows 2 columns»;	Non applicable
iOS 10.3.2	Safari	Non applicable	Annonce: «Légende de mon tableau - Début du tableau - 2 rangs 2 colonnes»;
iOS 10.3.2	Chrome	Non applicable	Annonce: «Légende de mon tableau - Début du tableau - 2 rangs 2 colonnes»;

Exemple 4: Tableau avec l'attribut `summary` et l'élément HTML `<caption>`

Légende de mon tableau.
Cellule d'entête 1	Cellule d'entête 2
Cellule de donnée 1	Cellule de donnée 2

Résultats

Système d'exploitation	Navigateur	NVDA 2017.2	NVDA 2017.1	JAWS 18	JAWS 16	VoiceOver
Windows 10	Chrome 58	Annonce: «Tableau de 2 lignes et 2 colonnes Légende de mon tableau.» N'annonce pas l'attribut `summary`. Annonce une 2^e fois l'élément `<caption>`	Annonce: «Tableau de 2 lignes et 2 colonnes Légende de mon tableau.» N'annonce pas l'attribut `summary`. Annonce une 2^e fois l'élément `<caption>`	Annonce: «Résumé: Résumé de mon tableau» Annonce: «vide» Annonce: «Tableau: 2 colonnes et 2 lignes» Annonce séparément: «Légende de mon tableau.»	Annonce: «Résumé: Résumé de mon tableau" Annonce: «vide» Annonce: «Tableau: 2 colonnes et 2 lignes» Annonce séparément: «Légende de mon tableau.»	Non applicable
Windows 10	Firefox 53	Annonce: «Tableau de 2 lignes et 2 colonnes Résumé de mon tableau». Annonce séparément: «Légende de mon tableau.»	Annonce: «Tableau de 2 lignes et 2 colonnes Résumé de mon tableau». Annonce séparément: «Légende de mon tableau.»	Annonce: «Résumé: Résumé de mon tableau» Annonce: «vide» Annonce: «Tableau: 2 colonnes et 2 lignes» Annonce séparément: «Légende de mon tableau.»	Annonce: «Résumé: Résumé de mon tableau» Annonce: «vide» Annonce: «Tableau: 2 colonnes et 2 lignes» Annonce séparément: «Légende de mon tableau.»	Non applicable
Windows 10	Microsoft Edge 38.14393.1066.0	Annonce: «Tableau de 2 lignes et 2 colonnes Légende de mon tableau.» N'annonce pas l'élément HTML `<caption>`	Annonce: «Tableau de 2 lignes et 2 colonnes Légende de mon tableau.» N'annonce pas l'élément HTML `<caption>`	Annonce rien.	Annonce rien.	Non applicable
Windows 10	Internet Explorer 11	Annonce: «Tableau de 2 lignes et 2 colonnes Résumé de mon tableau». Annonce séparément: «Légende de mon tableau.»	Annonce: «Tableau de 2 lignes et 2 colonnes Résumé de mon tableau». Annonce séparément: «Légende de mon tableau.»	Annonce: «Résumé: Résumé de mon tableau» Annonce: «vide» Annonce: «Tableau: 2 colonnes et 2 lignes» Annonce séparément: «Légende de mon tableau.»	Annonce: «Résumé: Résumé de mon tableau» Annonce: «vide» Annonce: «Tableau: 2 colonnes et 2 lignes» Annonce séparément: «Légende de mon tableau.»	Non applicable
OSX	Chrome 60	Non applicable	Non applicable	Non applicable	Non applicable	Annonce: «Légende de mon tableau. Tableau: 2 colonnes et 2 lignes» N'annonce pas le résumé du tableau.
OSX	Firefox 55	Non applicable	Non applicable	Non applicable	Non applicable	Annonce: «Légende de mon tableau. Tableau: 2 colonnes et 2 lignes. Résumé de mon tableau» Annonce séparément: «Résumé de mon tableau.»
OSX	Safari 10	Non applicable	Non applicable	Non applicable	Non applicable	Annonce: «Légende de mon tableau. Tableau: 2 colonnes et 2 lignes.»

Système d'exploitation	Navigateur	Talkback	VoiceOver
Android 7.1.2	Chrome	Annonce: «Légende de mon tableau - ingrid Légende de mon tableau - 2 rows 2 columns» L'attribut `summary` est ignoré;	Non applicable
iOS 10.3.2	Safari	Non applicable	Annonce: «Légende de mon tableau - Résumé de mon tableau - Début du tableau 2 rangs 2 colonnes.»
iOS 10.3.2	Chrome	Non applicable	Annonce: «Légende de mon tableau - Résumé de mon tableau - Début du tableau 2 rangs 2 colonnes.»

Retourner à l'index

Attention, cette page Web nécessite que JavaScript soit activé! JavaScript est un langage de programmation permettant d'améliorer l'expérience utilisateur.Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.Comment activer JavaScript ?

Tableau HTML - summary et caption

Hypothèse

Test

Exemple 1: Tableau seul

Résultats

Exemple 2: Tableau avec l'attribut summary

Résultats

Exemple 3: Tableau avec l'élément HTML <caption>

Résultats

Exemple 4: Tableau avec l'attribut summary et l'élément HTML <caption>

Résultats

Tableau HTML - `summary` et `caption`

Exemple 2: Tableau avec l'attribut `summary`

Exemple 3: Tableau avec l'élément HTML `<caption>`

Exemple 4: Tableau avec l'attribut `summary` et l'élément HTML `<caption>`