Please note: the demo pages are automatic translations. Sa11y (the interface) was professionally translated only. You can improve the translation with a pull request.

## Tout

Eh bien, presque tout. Juste une page avec beaucoup d'erreurs et d'avertissements. 🤠

Sur cette page: Rubriques Images Liens Tables Autres issues

## Rubriques

### Rubriques vides

###

### Rubriques ignorées

##### Cela devrait être un titre 4 !

### Les titres trop longs

#### Un titre est-il vraiment un titre s'il s'agit d'une longue phrase ? Ou un auteur de contenu se contente-t-il d'une esthétique visuelle ? Les titres de plus de 160 caractères seront signalés comme un avertissement.

### En-tête intentionnellement caché

### Blocs de citations utilisés comme titres

Si un bloc de citation est inférieur à 25 caractères, il sera signalé comme un avertissement.

> À propos de l'équipe

> "Être ou ne pas être, telle est la question."

### L'en-tête vide contient une image décorative

####

### Le titre contient une image sans texte alternatif

####

### Le titre contient une image avec un texte alternatif

####

### Texte en gras utilisé comme titre

À la recherche de`<p><strong>Some text</strong></p>`

À propos de nous

La douleur elle-même est l'amour de la douleur, les principaux problèmes écologiques, mais je donne ce genre de temps pour tomber, de sorte que de grandes douleurs et douleurs. Tristesse d'élite Il y avait aussi le choix du chocolat dans l'article, pas le principal. Le stress de la vie est le résultat du dessin animé. Egestas macenas frémit pour apaiser la maladie du lion.

Cela ne devrait pas être signalé car c'est long et pas nécessairement un titre. Il pourrait simplement s'agir d'un gros bloc de texte en gras. Il fait plus de 120 caractères.

La douleur elle-même est l'amour de la douleur, les principaux problèmes écologiques, mais je donne ce genre de temps pour tomber, de sorte que de grandes douleurs et douleurs. Tristesse d'élite Il y avait aussi le choix du chocolat dans l'article, pas le principal. Le stress de la vie est le résultat du dessin animé. Egestas macenas frémit pour apaiser la maladie du lion.

### Texte en gras utilisé comme titre avec des sauts de ligne

À la recherche de quelque chose comme... Cette vérification a été conçue pour être quelque peu indulgente afin d'éviter trop d'avertissements. `<p><strong>Fake heading<br></strong> Followed by some text.</p>`

#### Avertissement

Ce sera signalé !
Parce que c'est un paragraphe assez substantiel. La douleur elle-même est l'amour de la douleur, les principaux problèmes écologiques, mais je donne ce genre de temps pour tomber, de sorte que de grandes douleurs et douleurs. Tristesse d'élite La douleur elle-même est l'amour de la douleur, les principaux problèmes écologiques, mais je donne ce genre de temps pour tomber, de sorte que de grandes douleurs et douleurs. Tristesse d'élite Il y avait aussi le choix du chocolat dans l'article, pas le principal. Le stress de la vie est le résultat du dessin animé. Egestas macenas frémit pour apaiser la maladie du lion.

#### Passer

À propos de nous
Ne sera pas signalé car il s'agit d'un petit paragraphe. La douleur elle-même est l'amour de la douleur, les principaux problèmes écologiques, mais je donne ce genre de temps pour tomber, de sorte que de grandes douleurs et douleurs. Tristesse d'élite

Adresse
105, rue Bond
Toronto, ON
M5B 2K3

Cela ne sera pas signalé non plus car ce texte en gras est long et n'est pas nécessairement un titre. Il pourrait simplement s'agir d'un gros bloc de texte en gras. Il fait plus de 120 caractères.
La douleur elle-même est l'amour de la douleur, les principaux problèmes écologiques, mais je donne ce genre de temps pour tomber, de sorte que de grandes douleurs et douleurs. Tristesse d'élite La douleur elle-même est l'amour de la douleur, les principaux problèmes écologiques, mais je donne ce genre de temps pour tomber, de sorte que de grandes douleurs et douleurs. Tristesse d'élite Il y avait aussi le choix du chocolat dans l'article, pas le principal. Le stress de la vie est le résultat du dessin animé. Egestas macenas frémit pour apaiser la maladie du lion.

## Images

### Images sans liens

#### Passer

1. L'image contient du texte alternatif.

#### Mises en garde

2 : Le texte alternatif contient un mot vide suspect.

3. L'image est décorative.

4. L'image est décorative en utilisant un espace vide (alt=" ").

5 : Le texte alternatif est trop long.

#### les erreurs

6 : Texte alternatif manquant.

7 : Le texte alternatif a une extension de fichier.

8 : Le texte alternatif contient un texte d'espace réservé.

### Images hyperliées

#### Passer

En savoir plus sur les Tigres

9 : Image hyperliée avec un texte alternatif nul, mais avec un texte de lien environnant sous l'image.

En savoir plus sur les Tigres

10 : Image hyperliée avec un texte alternatif nul, mais avec un texte de lien environnant au-dessus de l'image.

Texte de la légende de la figure.

11 : Image de la figure avec un texte alternatif et un texte de légende différents.

12 : Image de la figure sans légende.

#### Mises en garde

13 : Image hyperliée avec texte alternatif.

14 : L'image hyperliée a un texte alternatif qui contient un mot vide.

15 : Image en lien hypertexte trop longue.

En savoir plus sur Fiat.

16 : Image hyperliée contenant à la fois du texte alternatif et du texte de lien.

Fig. 1 : Désert namibien (Source : inconnue)

17 : Image décorative dans un élément <figure>.

Deux zèbres

18 : L'élément de la figure comporte un texte alternatif et un texte de légende en double.

19 : Élément de figure hyperlié sans légende.

Photo en noir et blanc de deux zèbres.

20 : Élément de figure hyperlié avec légende de la figure.

#### les erreurs

21 : Texte alternatif manquant dans l'image hyperliée.

22 : Image hyperliée qui est décorative.

23 : Image hyperliée qui est décorative en utilisant un espace vide (alt=" ").

En savoir plus sur les dahlias

24 : Image hyperliée avec alt manquante et contient le texte du lien environnant.

25 : L'image hyperliée a un texte alternatif contenant un texte d'espace réservé.

26 : Image hyperliée où l'ancre a aria-hidden="true".

#### Autre

27 : Image hyperliée où l'ancre a aria-hidden="true" et tabindex="-1"

###### En savoir plus sur les îles Canaries

28 : L'image hyperliée contient un en-tête ignoré. L'erreur est ajoutée après le lien hypertexte pour empêcher le bouton d'imbrication dans le lien hypertexte.

29 : L'image hyperliée s'ouvre dans un nouvel onglet.

30 : L'image hyperliée s'ouvre dans un nouvel onglet. Le texte alternatif indique que le lien s'ouvre dans une nouvelle fenêtre.

31 : Tests de bogues. Ignorer les balises <noscript>.

## Liens

### Mots vides partiels

#### les erreurs

L'utilisation de l'un des mots ci-dessus seul entraînera une erreur car il n'est pas assez descriptif.

cette page
Cette page »
En savoir plus >

#### Passer

Cependant, s'il est utilisé avec du texte supplémentaire, il ne sera pas signalé comme une erreur.

En savoir plus sur Sa11y

### Mots vides partiels avec exclusions

Parfois, un thème de site Web peut automatiquement ajouter du texte à un lien. Par exemple, "(Lien externe)" sera ignoré, ce qui signalera correctement ce lien comme une erreur car il n'est pas assez descriptif.

en savoir plus (Lien externe)

### Hyperliens vides

- Lien hypertexte vide :
- Lien hypertexte vide avec espace :
- Caractère unique : .
- Espace non-cassant:

### Hyperliens vides avec des enfants

- Lien hypertexte vide avec police d'icône :
- Lien hypertexte vide avec police d'icône (ouvre un nouvel onglet) :
- Lien hypertexte vide avec SVG :
- Lien hypertexte vide avec SVG (ouvre un nouvel onglet) :

### Liens hypertexte vides avec un nom accessible via l'attribut title

- Lien hypertexte vide avec titre :
- Lien hypertexte vide avec espace et titre :
- Espace insécable et titre :
- Lien hypertexte vide avec police d'icône et titre :
- Lien hypertexte vide avec police d'icône (ouvre un nouvel onglet) et titre :
- Lien hypertexte vide avec SVG et titre :
- Lien hypertexte vide avec SVG (ouvre un nouvel onglet) :

### Meilleures pratiques en matière de texte de lien

#### Mots vides

Le lien contient : "cliquez ici", ">", "<"

Cliquez ici pour voir nos programmes
Suivant >
< Précédent

#### URL longues

Seules les URL longues seront signalées.

https://sa11y.netlify.app/developers/custom-checks/
https://sa11y.netlify.app

### Liens hypertextes avec ARIA

#### Label ARIA

- Code: `<a href="#" aria-label="Learn more about Sa11y">Learn more</a>`
- Résultat attendu : En savoir plus sur Sa11y

Apprendre encore plus

#### Enfant labellisé ARIA

- Code: `<a href="#">Learn more <span aria-label="about Sa11y"></span></a>`
- Résultat attendu : En savoir plus sur Sa11y

Apprendre encore plus

#### Plusieurs enfants labellisés ARIA

- Code: `<a href="#">Learn more <span aria-label="about Sa11y"></span> <i aria-label="(External)" class="bi bi-box-arrow-up-right"></i></a>`
- Résultat attendu : En savoir plus sur Sa11y (externe)

Apprendre encore plus

#### Attribut ARIA-labelledby unique

apples

- Pièce d'identité: `<span id="app">apples</span>`
- Code: `<a href="#" aria-labelledby="app">Learn more</a>`
- Résultat attendu : pommes

Apprendre encore plus

#### Plusieurs attributs ARIA labelledby

and bananas

- ID de référence : lui-même, `<span id="app">apples</span>`, `x`qui n'existe pas,`<span id="ban">bananas</span>`
- Code: `<a href="#" id="self" aria-labelledby="self app x ban">Learn more about</a>`
- Résultat attendu : En savoir plus sur les pommes et les bananes

En savoir plus sur

#### Enfant avec des attributs ARIA-labelledby

- ID de référence : `<span id="app">apples</span>` , `x` qui n'existe pas,`<span id="ban">bananas</span>`
- Code: `<a href="#">Learn more <span aria-labelledby="app x ban"></span></a>`
- Résultat attendu : En savoir plus sur les pommes et les bananes

En savoir plus sur

#### ARIA Caché

- Code: `<a href="#" aria-hidden="true">Learn more</a>`
- Résultat attendu:

Apprendre encore plus

## les tables

### Tableau approprié

Nom de l'événement | Temps | Emplacement
--- | --- | ---
Discours d'ouverture | 09H00 | Salle
Déjeuner | 12h00 | Chambre Skyline
Dîner de clôture | 17H00 | Chambre métropolitaine

### En-têtes de tableau manquants

Nom de l'événement | Temps | Emplacement
Discours d'ouverture | 09H00 | Salle
Déjeuner | 12h00 | Chambre Skyline
Dîner de clôture | 17H00 | Chambre métropolitaine

### Tableau avec en-tête vide

| Temps | Emplacement
--- | --- | ---
Discours d'ouverture | 09H00 | Salle
Déjeuner | 12h00 | Chambre Skyline
Dîner de clôture | 17H00 | Chambre métropolitaine

### Tableau avec en-têtes sémantiques

#### Événement

#### Temps

#### Emplacement

Discours d'ouverture | 09H00 | Salle
Déjeuner | 12h00 | Chambre Skyline faux titre
Dîner de clôture | 17H00 | Chambre métropolitaine

## Autres issues

### PDF

Un avertissement est ajouté à tous les hyperliens qui ont une `.pdf`extension de fichier. Une icône d'avertissement n'est ajoutée qu'au premier PDF détecté sur la page pour éviter de submerger un auteur de contenu. Tous les autres liens PDF sont mis en évidence visuellement.

- Télécharger le dossier d'admission (PDF)
- Plan de cours (PDF)
- Aide -mémoire (PDF)

### Texte en majuscule

Cet avertissement vise à décourager l'utilisation de texte en majuscules. Ce n'est pas une exigence WCAG 2.1, mais c'est une pratique déconseillée pour la lisibilité. Deuxièmement, certains mots en majuscules peuvent être confondus avec un acronyme et être affichés caractère par caractère avec un lecteur d'écran. Cette condition utilise une expression régulière pour rechercher des mots majuscules d'au moins 3 caractères, mais elle ne sera indiquée comme avertissement que si au moins 5 mots majuscules dans un élément sont trouvés. Il vérifie uniquement les mots en majuscules dans les éléments suivants : h1, h2, h3, h4, h5, h6, p, li, span, blockquote.

PAR EXEMPLE, CECI SERA SIGNALÉ .

PAR EXEMPLE, cela NE SERA PAS signalé.

- Le TEXTE EN MAJUSCULES DANS LES PUCES sera également signalé.

### Texte souligné

Cet avertissement vise à décourager l'utilisation de texte souligné car il est facilement confondu avec des liens. Cette condition vérifie le texte souligné créé avec le balisage <u> et les styles CSS dans les éléments suivants : h1, h2, h3, h4, h5, h6, p, li, span, blockquote.

Cela sera signalé.

<u>souligné</u> de cette manière sera signalé.

- Le texte souligné dans les listes sera également signalé.

#### Cette rubrique sera signalée.

Le texte lié ne sera pas signalé.

### Listes non sémantiques

a) Parfois, les gens créent manuellement une liste
b) en utilisant de faux préfixes de liste
c) au lieu d'utiliser une liste sémantique.

1. Bananes

2. Poires

3. Pommes

### ID en double

L' élément 1 et l' élément 2 ont le même `id`attribut.

### Subscript and superscript formatting

A subscript or superscript is a character that is set slightly below or above the normal line of type, respectively. It is usually smaller than the rest of the text. Subscripts appear at or below the baseline, while superscripts are above. Wikipedia.

A subscript or superscript is a character that is set slightly below or above the normal line of type, respectively. It is usually smaller than the rest of the text. Subscripts appear at or below the baseline, while superscripts are above. Wikipedia.