Checklist Renow 4.3

18 résultat(s) trouvé(s)

Image et Multimédia

  • IM.003 - Alternatives des images décoratives - Niveau 1

    Les éléments graphiques qui n'apportent pas d'information nécessaires à la compréhension du contenu possèdent une alternative textuelle vide.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 1.1.1(A)

Formulaire

  • FM.015 - Distinction des champs obligatoires - Niveau 1

    Les champs obligatoires sont différenciés par une astérisque dans leur LABEL, sous la forme "Intitulé * :".
    La distinction peut être faite avec la mention (obligatoire) écrit en toute lettre. La propriété "required" doit également être présente sur le champs <label for="numero-serie">Numéro de série *</label>
    <input type="text" id="numero-serie" required>
    • Etape(s):
      • Prototype
      • Final
      • Design graphique
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 3.2.1(A)
      • 3.2.2(A)

Image et Multimédia

  • IM.004 - Alternative des images-liens - Niveau 1

    L'alternative textuelle d'une image-lien ou d'un bouton graphique indique la cible ou la fonction du lien ou du bouton.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 1.1.1(A)
      • 4.1.2(A)

Formulaire

  • FM.016 - Note champs obligatoire - Niveau 1

    La note "* Champ obligatoire" est spécifié au niveau du formulaire.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
    • WCAG 2.1:
      • 3.3.2(A)

Image et Multimédia

  • IM.005 - Déclenchement explicite des sons et vidéos - Niveau 1

    Les sons et/ou vidéos sont uniquement déclenchés par l'utilisateur.
    • Etape(s):
      • Final
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 3.2.2(A)

Formulaire

  • FM.017 - Messages d'erreur explicites - Niveau 1

    Les messages d'erreurs indiquent la nature de l'erreur ainsi que les moyens de correction de l'erreur directement après le champ et reliés.
    <label for="document"> Ajouter un document à votre dossier </label>
    <input type="file" id="document" name="document" aria-invalid="true" aria-describedby="formats erreur" />
    <p id="erreur">Format de fichier incorrect.</p> <p id="formats">Formats acceptés : pdf ou doc.</p>
    • Etape(s):
      • Final
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 3.1.1(A)
      • 3.3.3(AA)

  • FM.008 - Listes à choix uniques - Niveau 1

    Les champs INPUT RADIO sont utilisés pour des listes à choix uniques.
    Si les boutons radio sont simulés, ils doivent satisfaire aux mêmes contraintes d'usage que les boutons radio natifs en HTML
    • Etape(s):
      • Final
      • Prototype
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 4.1.2(A)

  • FM.002 - Label des champs - Niveau 1

    Les champs de formulaire ont un label explicitement associé et pertinent.
    Le label contient la propriété for et l'input contient un id identique <code><label for="label1"> étiquette du champs</label><input id="lable1"></input></code>
    • Etape(s):
      • Prototype
      • Final
      • Design graphique
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 3.2.2(A)

Image et Multimédia

  • IM.001 - Alternative des images - Niveau 1

    Les alternatives textuelles d'images de contenu sont concises, limitées à l'information essentielle apportée spécifiquement par l'image. Elles ne font pas doublon avec l'information textuelle déjà présente dans le corps du texte.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
      • Référencement
    • WCAG 2.1:
      • 1.1.1(A)

Formulaire

  • FM.013 - Validation de formulaire - Niveau 1

    Le formulaire peut être validé à l'aide de la touche entrée.
    Le formulaire est validable lorsque l'utilisateur est dans le dernier champs du formulaire.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 2.1.1(A)

  • FM.004 - Groupement de champs - Niveau 1

    Les champs sont visuellement regroupés (fieldset) et possèdent une légende, si cela facilite la compréhension.
    2 champs ne peuvent avoir un même label sauf si un fielfset permet de les distinguer (exemple d'utilisation nécessaire : adresse de livraison / facturation)
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 1.3.1(A)
      • 3.3.2(A)

Image et Multimédia

  • IM.006 - Transcriptions textuelles des sons ou vidéos - Niveau 1

    L'information délivrée dans les documents audio et vidéo est reproduite sous forme de transcriptions textuelles. Une audiodescription doit être fournie si le document le nécessite.
    Selon le cas:
    - Les vidéos et/ ou sons pré-enregistrées ont des sous-titres et /ou audiodescription synchronisés.
    - Si un média est une alternative au texte, il est légendé et clairement lié au texte.
    - Pour un live, une légende doit préciser le contexte et l'interet de la vidéo: "(En direct) Conférence de ....".
    La liaison peut se faire avec l'un des moyens suivants: <code>- <video src="..."> Détails et explications de la vidéo affichée.</video>
    - <div src="vidéo" describedby=iddesc >... </div>
    <p id="iddesc"> Détails et explications de la vidéo affichée.
    </p>
    - ou avec une balise figure:
    <figure role="group" >
    <video src="…" describedby=iddesc > </video>
    <figcaption id=iddesc> Détails et explications de la vidéo affichée.
    </figcaption>
    </figure></code>
    • Etape(s):
      • Rédaction
      • Final
    • Types d'exigence:
      • Accessibilité
      • Référencement
    • WCAG 2.1:
      • 1.2.1 (A)
      • 1.2.2(A)
      • 1.2.3(A)
      • 1.2.4 (AA)
      • 1.2.5(AA)

Formulaire

  • FM.021 - Format attendu - Niveau 1

    L'utilisateur est guidé dans les valeurs à saisir:
    - format de données attendu (type de caractère ou type de fichier...)
    - suggestion de valeur pertinente (proposition à partir de l'historique utilisateur)
    Le champs et l'aide à la saisie sont liés<label for="document"> Ajouter un document à votre dossier </label>
    <input type="file" id="document" name="document" aria-describedby="formats" />
    <p id="formats">Formats acceptés : pdf ou doc.</p>
    Pour les champs texte qui permettent de saisir l'identité d'une personne, le champ "nom" a pour valeur de l'attribut autocomplete "family-name", le champ "prénom" la valeur "given-name", etc.
    • Etape(s):
      • Prototype
      • Final
      • Design graphique
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 3.3.2(A)
      • 1.3.5 (AA)

  • FM.018 - Apparence des messages d'erreurs - Niveau 1

    Les messages d'erreurs, les libellés et les champs associés sont mis en valeur, visuellement, au moyen de 2 mécanismes différents, au moins l'un d'eux doit faire apparaitre du rouge (contraste de couleur, graisse, style, pictogramme, etc...).
    • Etape(s):
      • Prototype
      • Final
      • Design graphique
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 1.3.3(A)

  • FM.012 - Libellé des boutons d'action - Niveau 1

    Les libellés des boutons indiquent clairement l'action de manière concise.
    L'intitulé visible peut éventuellement être complété par un title. Il ne peut être remplacé
    • Etape(s):
      • Prototype
      • Final
      • Design graphique
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 2.5.3(A)
      • 2.4.6(AA)

  • FM.003 - Position du label - Niveau 1

    Les labels sont visibles et placés au dessus de leur champs
    Pour les formulaires à champs unique, il peut être rendu visible en dupliquant le label au niveau du placeholder.
    • Etape(s):
      • Final
      • Prototype
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 2.5.3(A)

Image et Multimédia

  • IM.002 - Alternative des images complexes - Niveau 1

    L'information apportée par une image complexe est explicitée dans le corps du texte, et l'image a une alternative textuelle permettant de localiser la description.
    Pour une balise img (canvas ou role=img ...) l'utilisation d'un aria-describedby="id", id faisant référence au paragraphe de la description.
    <img src="…" alt="voir légende ci-après" aria-describedby=iddesc />
    <p id="iddesc"> Détails et explications de l'image affichée.
    </p>
    ou avec une balise figure: <figure role="group">
    <img src="…" alt="description courte" />
    <figcaption>
    Détails et explications de l'image affichée. (ou lien vers la description)
    </figcaption>
    </figure>
    idem pour un svg avec un aria-label ou une balise <title> ou un paragraphe masqué (sauf au lecteur d'écran)
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
      • Référencement
    • WCAG 2.1:
      • 1.1.1(A)

Formulaire

  • FM.005 - Groupement de réponse - Niveau 1

    Les groupes d'options des champs SELECT sont balisés avec des éléments OPTGROUP dotés d'un libellé via l'attribut LABEL.
    • Etape(s):
      • Prototype
      • Final
    • Types d'exigence:
      • Accessibilité
      • Ergonomie
    • WCAG 2.1:
      • 1.3.1(A)

Dernière modification le