L'accessibilité (souvent raccourcie en "a11y") est un sujet complexe, qu'il est courant de mal implémenter. Pour vous aider, Svelte vous avertit au moment de la compilation si vous écrivez du markup non accessible. Toutefois, gardez à l'esprit que de nombreux problèmes d'accessibilité ne peuvent être identifiés qu'au moment de l'exécution, à l'aide d'autres outils automatisés et en testant manuellement votre application.
Certains avertissements seront incorrects dans votre cas. Vous pouvez désactivez ces faux positifs en ajoutant le commentaire <!-- svelte-ignore a11y-<code> --> juste au dessus de la ligne causant l'avertissement. Exemple :
<!-- svelte-ignore a11y-autofocus -->
<input autofocus />Voici la liste des vérifications d'accessibilité que Svelte fera pour vous.
a11y-accesskeypermalink
Assure de ne pas utiliser l'attribut accesskey sur des éléments. L'attribut HTML accesskey permet aux développeurs web d'attribuer des raccourcis clavier aux éléments. Les incohérences entre les raccourcis clavier et les commandes clavier utilisées par le lecteur d'écran et les utilisateurs du clavier créent des complications d'accessibilité. Pour éviter les complications, les touches d'accès ne doivent pas être utilisées.
<!-- A11y: Avoid using accesskey -->
<div accessKey="z" />a11y-aria-activedescendant-has-tabindexpermalink
Un élément avec aria-activedescendant doit pouvoir être navigable en utilisant la touche "Tab", il doit donc avoir un tabindex intrinsèque, ou déclarer tabindex comme attribut.
<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->
<div aria-activedescendant="some-id" />a11y-aria-attributespermalink
Certains éléments DOM spéciaux ne prennent pas en charge les rôles, états et propriétés ARIA. C'est souvent parce qu'ils ne sont pas visibles, comme meta, html, script, style. Cette règle garantit que ces éléments DOM ne contiennent pas des aria-* accessoires.
<!-- A11y: <meta> should not have aria-* attributes -->
<meta aria-hidden="false" />a11y-autofocuspermalink
Interdit l’usage d'autofocus sur les éléments. Le focus automatique d'éléments peut entraîner des problèmes d'usage pour les utilisateurs, qu'ils soient malvoyants, non voyants ou avec une vue parfaite.
<!-- A11y: Avoid using autofocus -->
<input autofocus />a11y-click-events-have-key-eventspermalink
Assure que les éléments visibles et non interactifs possédent un évènement on:click possèdent également un gestionnaire d'évènement de clavier.
Il est important de se poser la question si un élément interactif serait plus approprié sous la forme d'un élément <button type="button"> pour des actions ou d'un élément <a> pour des navigations. Ces éléments ont du sens sémantiquement et ont une gestion native des touches du clavier. Par exemple, Space et Enter déclenchent l'action d'un <button> et Enter déclenche la navigation d'un élément <a>.
Si un élément non interactif est requis, alors on:click doit être accompagné d'un gestionnaire on:keyup ou on:keydown permettant à l'utilisateur ou l'utilisatrice de faire des actions équivalentes au clavier. Afin qu'ils ou elles puissent déclencher une touche de clavier, l'élément doit aussi pouvoir récupérer le focus en ajoutant un tabindex. Même si l'ajout d'un gestionnaire on:keypress va désactiver cet avertissement, il est important de noter que l'évènement keypress est déprécié.
<!-- A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. -->
<div on:click={() => {}} />Développer avec l'usage au clavier en tête est important pour les personnes ne pouvant pas physiquement utiliser une souris, pour les personnes utilisant la compatibilité AT, ainsi que pour les personnes utilisant des lecteurs d'écran.
a11y-distracting-elementspermalink
Assure qu'aucun élément distrayant ne soit utilisé. Les éléments distrayants visuellement peuvent causer des problèmes d'accessibilité avec les utilisateurs malvoyants. Ces éléments sont généralement dépréciés et doivent être évités.
Les éléments suivants sont visuellement distrayants: <marquee> et <blink>.
<!-- A11y: Avoid <marquee> elements -->
<marquee />a11y-hiddenpermalink
Certains éléments DOM sont utiles pour la navigation avec lecteur d'écran et ne doivent pas être cachés.
<!-- A11y: <h2> element should not be hidden -->
<h2 aria-hidden="true">invisible header</h2>a11y-img-redundant-altpermalink
Assure que l'attribut alt des balises img ne contienne pas le mot "image" ou "photo". Les lecteurs d'écran décrivent déjà les éléments img comme étant des images. Il n'est pas nécessaire d'utiliser des mots tels que photo et / ou image.
<img src="foo" alt="Foo mange un sandwich." />
<!-- A11y: aria-hidden, won't be announced by screen reader -->
<img src="bar" aria-hidden="true" alt="Photo de moi prenant une photo d'une image" />
<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="foo" alt="Image de foo bizarre." />
<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="bar" alt="Image de moi dans un bar !" />
<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="foo" alt="Image de baz corrigeant un bug." />a11y-incorrect-aria-attribute-typepermalink
Assure que le bon type de valeur soit utilisé pour les attributs aria. Par exemple, aria-hidden ne devrait recevoir qu'un booléen.
<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->
<div aria-hidden="yes" />a11y-invalid-attributepermalink
Assure que les attributs importants pour l'accessibilité aient une valeur valide. Par exemple, href ne devrait pas être vide, '#' ou javascript:.
<!-- A11y: '' is not a valid href attribute -->
<a href="">invalide</a>a11y-interactive-supports-focuspermalink
Assure que les éléments avec un rôle interactif et des gestionnaires d'évènements interactifs (de souris ou de clavier) soient focalisables ou accessibles avec la touche Tab.
<!-- A11y: Elements with the 'button' interactive role must have a tabindex value. -->
<div role="button" on:keypress={() => {}} />a11y-label-has-associated-controlpermalink
Assure qu'un élément label ait une étiquette de texte et un contrôle associé.
Il existe deux méthodes prises en charge pour associer une étiquette à un contrôle :
- Envelopper un contrôle dans un élément
label. - Ajouter
forà une étiquette et lui attribuer l'ID d'un champ d'entrée sur la page.
<label for="id">B</label>
<label>C <input type="text" /></label>
<!-- A11y: A form label must be associated with a control. -->
<label>A</label>a11y-media-has-captionpermalink
Fournir des sous-titres pour les médias est essentiel afin que les utilisateurs sourds puissent suivre. Les sous-titres devraient être une transcription ou une traduction du dialogue, des effets sonores, des indications musicales pertinentes et d'autres informations audio pertinentes. Ce n'est pas seulement important pour l'accessibilité, mais peut également être utile pour tous les utilisateurs dans le cas où les médias ne sont pas disponibles (similaire au texte alt sur une image lorsqu'une image ne peut pas être chargée).
Les sous-titres doivent contenir toutes les informations importantes et pertinentes pour comprendre les médias correspondants. Cela peut signifier que les sous-titres ne sont pas une correspondance 1:1 du dialogue dans le contenu média. Cependant, les sous-titres ne sont pas nécessaires pour les composants vidéo avec l'attribut muted.
<video><track kind="captions" /></video>
<audio muted />
<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
<video />
<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
<video><track /></video>a11y-misplaced-rolepermalink
Certains éléments DOM réservés ne prennent pas en charge les rôles, états et propriétés ARIA. Cela est souvent dû à leur invisibilité, par exemple meta, html, script, style. Cette règle impose que ces éléments DOM ne contiennent pas l'attribut role.
<!-- A11y: <meta> should not have role attribute -->
<meta role="tooltip" />a11y-misplaced-scopepermalink
L'attribut scope ne devrait être utilisé que sur les éléments <th>.
<!-- A11y: The scope attribute should only be used with <th> elements -->
<div scope="row" />a11y-missing-attributepermalink
Assure que les attributs requis pour l'accessibilité soient présents sur un élément. Cela inclut les vérifications suivantes:
<a>devrait avoir unhref(sauf s'il s'agit d'une balise définissant un fragment)<area>devrait avoiralt,aria-labelouaria-labelledby<html>devrait avoirlang<iframe>devrait avoirtitle<img>devrait avoiralt<object>devrait avoirtitle,aria-labelouaria-labelledby<input type="image">devrait avoiralt,aria-labelouaria-labelledby
<!-- A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute -->
<input type="image" />
<!-- A11y: <html> element should have a lang attribute -->
<html />
<!-- A11y: <a> element should have an href attribute -->
<a>texte</a>a11y-missing-contentpermalink
Assure que les éléments d'en-tête (h1, h2, etc.) et les ancres aient un contenu, et que ce contenu soit accessible aux lecteurs d'écran.
<!-- A11y: <a> element should have child content -->
<a href="/foo" />
<!-- A11y: <h1> element should have child content -->
<h1 />a11y-mouse-events-have-key-eventspermalink
Assure que on:mouseover and on:mouseout soient accompagnés de on:focus et on:blur, respectivement. Cela aide à garantir que toutes les fonctionnalités déclenchées par ces événements de souris soient également accessibles aux utilisateurs du clavier.
<!-- A11y: on:mouseover must be accompanied by on:focus -->
<div on:mouseover={handleMouseover} />
<!-- A11y: on:mouseout must be accompanied by on:blur -->
<div on:mouseout={handleMouseout} />a11y-no-redundant-rolespermalink
Certains éléments HTML ont des rôles ARIA par défaut. Donner à ces éléments un rôle ARIA déjà défini par le navigateur n'a aucun effet et est redondant.
<!-- A11y: Redundant role 'button' -->
<button role="button" />
<!-- A11y: Redundant role 'img' -->
<img role="img" src="foo.jpg" />a11y-no-interactive-element-to-noninteractive-rolepermalink
Les rôles WAI-ARIA ne devraient pas être utilisés pour convertir un élément interactif en un élément non interactif. Les rôles ARIA non interactifs incluent article, banner, complementary, img, listitem, main, region et tooltip.
<!-- A11y: <textarea> cannot have role 'listitem' -->
<textarea role="listitem" />a11y-no-noninteractive-element-to-interactive-rolepermalink
Un élément non interactif ne supporte pas les gestionnaires d'événements (souris et clavier). Les éléments non interactifs incluent : <main>, <area>, <h1> (,<h2>, etc), <p>, <img>, <li>, <ul> and <ol>. Les rôles WAI-ARIA interactifs incluent button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch et textbox.
<!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' -->
<h3 role="searchbox">Bouton</h3>a11y-no-noninteractive-tabindexpermalink
La navigation à l'aide de la touche Tab doit être limitée aux éléments de la page avec lesquels il est possible d'interagir.
<!-- A11y: noninteractive element cannot have nonnegative tabIndex value -->
<div tabindex="0" />a11y-no-static-element-interactionspermalink
Les éléments comme un <div> avec des gestionnaires d'événements comme click doivent avoir un rôle ARIA.
<!-- A11y: <div> with click handler must have an ARIA role -->
<div on:click={() => ''} />a11y-positive-tabindexpermalink
Évitez les valeurs positives pour la propriété tabindex. Cela positionnera des éléments en dehors de l'ordre de tabulation attendu, ce qui créera une expérience confuse pour les utilisateurs du clavier.
<!-- A11y: avoid tabindex values above zero -->
<div tabindex="1" />a11y-role-has-required-aria-propspermalink
Les éléments avec des rôles ARIA doivent avoir tous les attributs requis pour ce rôle.
<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
<span role="checkbox" aria-labelledby="foo" tabindex="0" />a11y-role-supports-aria-propspermalink
Les éléments avec un rôle explicite ou implicite doivent contenir uniquement des propriétés aria-* prévues pour ce rôles.
<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->
<div role="link" aria-multiline />
<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->
<li aria-required />a11y-structurepermalink
Assure que certains éléments DOM aient la bonne structure.
<!-- A11y: <figcaption> must be an immediate child of <figure> -->
<div>
<figcaption>Légende de l'image</figcaption>
</div>a11y-unknown-aria-attributepermalink
Assure que seuls les attributs ARIA connus soient utilisés. Cela est basé sur la spécification WAI-ARIA States and Properties.
<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->
<input type="image" aria-labeledby="foo" />a11y-unknown-rolepermalink
Les éléments avec des rôles ARIA doivent utiliser un rôle ARIA valide et non abstrait. Une référence aux définitions de rôle peut être trouvée sur le site WAI-ARIA.
<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->
<div role="toooltip" />