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. 🤠
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.
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
9 : Image hyperliée avec un texte alternatif nul, mais avec un texte de lien environnant sous l'image.
10 : Image hyperliée avec un texte alternatif nul, mais avec un texte de lien environnant au-dessus de l'image.
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
16 : Image hyperliée contenant à la fois du texte alternatif et du texte de lien.
17 : Image décorative dans un élément <figure>.
18 : L'élément de la figure comporte un texte alternatif et un texte de légende en double.
20 : Élément de figure hyperlié avec légende de la figure.
les erreurs
24 : Image hyperliée avec alt manquante et contient le texte du lien environnant.
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.
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.
Passer
Cependant, s'il est utilisé avec du texte supplémentaire, il ne sera pas signalé comme une erreur.
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.
Hyperliens vides
- Lien hypertexte vide :
- Lien hypertexte vide avec espace :
- Caractère unique : .
- Espace non-cassant:
Hyperliens vides avec des enfants
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", ">", "<"
URL longues
Seules les URL longues seront signalées.
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
Enfant labellisé ARIA
- Code:
<a href="#">Learn more <span aria-label="about Sa11y"></span></a>
- Résultat attendu : En savoir plus sur Sa11y
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)
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
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
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
ARIA Caché
- Code:
<a href="#" aria-hidden="true">Learn more</a>
- Résultat attendu:
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
Un avertissement est ajouté à tous les hyperliens qui ont une .pdfextension 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 idattribut.