Image du projet 'Socle K-Sup' téléversée
  1. Socle K-Sup
  2. CORE-5181

[RGAA] Compteur de caractères non accessible

XMLWordImprimable

    • Icon: Bug Bug
    • Résolution: Résolu
    • Icon: Mineur Mineur
    • 7.0.0-ALPHA-1, 6.07.33
    • master, 6.07.31
    • Aucune

      Le compteur de caractères n’est pas restitué aux lecteurs d’écran. Les personnes aveugles ne
      disposent donc pas du nombre de caractères autorisés et restants.
      Le code actuel doit être revu pour implémenter une propriété aria-live="polite".

      Cela concerne les champs de formulaires en front-office, et les formulaires spécifiques (réponse à une offre d'emploi par exemple, ou d'inscription à un événement).

      Code actuel sans le compteur

      <p class="obligatoire">
          <label for="VILLE">Ville: (*)</label>
          <input type="hidden" name="#FORMAT_VILLE" value="2;0;0;50;LIB=Ville:;11">
          <input required="" type="text" id="VILLE" name="VILLE" value="" maxlength="50" form="1473412456281" ariarequired=" true" data-original-title="" title="" class="valid">
      </p>

      Code actuel avec le compteur

      <p class="obligatoire">
          <label for="VILLE">Ville: (*)</label>
          <input type="hidden" name="#FORMAT_VILLE" value="2;0;0;50;LIB=Ville:;11">
          <input required="" type="text" id="VILLE" name="VILLE" value="" maxlength="50" form="1473412456281" aria-required="true" data-original-title="" title="" class="valid" aria-invalid="false">
          <div class="tooltip fade right in" style="display: block; top: 1530.72px; left: 719.817px;">
              <div class="tooltip-arrow"></div>
              <div class="tooltip-inner">3 / 50 caractères autorisés</div>
          </div>
      </p>

      Note : il n’est pas possible qu’une balise <p> contienne une balise <div>.

       

      • Transformer la balise <div> en <span>.

      Pour que la propriété aria-live fonctionne, il faut que le contenu soit déjà présent dans le code
      HTML :

      1. Positionner la tooltip et la masquer avec la propriété display: none ;
      2. Ajouter la propriété aria-live avec la valeur polite sur la div.

      Lorsque la tooltip doit être affichée, passer la valeur display: à block et insérer le texte.

            alice.ark Alice ARK [X] (Inactif)
            alice.ark Alice ARK [X] (Inactif)
            Votes:
            0 Voter pour ce ticket
            Gérer les observateurs:
            3 Démarre l'observation de ce ticket

              Création:
              Mise à jour:
              Résolue: