1177 sujets

Accessibilité du Web

Champs de formulaire en tableau (LimeSurvey)

Bonjour,

Je suis développeur d’un logiciel libre de gestion de questionnaire assez utilisé un peu partout : LimeSurvey.

Je développe en parallèle un modèle accès sur l’accessibilité (avec l’objectif de corriger les problèmes, a terme, dans le cœur).

Il y a actuellement un problème dans le cœur sur les questions de type tableaux avec l’utilisation du rôle group sur les tableaux en eux-mêmes. Ces tableaux contiennent des champs de type radio, case à cocher ou texte (principalement bouton radio).

Je vais pouvoir effectuer la correction pour la version 6 de LimeSurvey (qui passe en plus sur boostrap5).

Mais j’ai une interrogation : faut-il passer les tableaux en mode présentation ou les garder en mode tableau ?

En effet : les tableaux contiennent des lignes, chacune de ses lignes contenant une série de bouton radio. Le rôle "radiogroup" me semble donc approprié sur chaque ligne. Un role group englobant ses lignes. Pour gérer le passage sur téléphone, chaque bouton radio possède bien son label masqué sur grand écran (mais visible par un lecteur d’écran). Si les données peuvent paraître en ordre tabulé c'est aussi une liste de liste : cet état de groupe de groupe de bouton radio est visible sur téléphone ou le tableau passe en mode bloc, avec l’entête masquée.

Grâce à l'équipe de Tanaguru (merci à eux): nous avons construit une solution valide avec le role="presentation". Cependant, le mode table par défaut me semble aussi une possibilité intéressante.

Je ne sais réellement pas quelle solution est la meilleure, sachant que à la suite je dois construire la solution pour tous les autres types de tableaux: je pense qu’il faut réellement partir sur la meilleure. Surtout que ce type de modification entrainant une incompatibilité avec les extensions et thème de LimeSurvey : il y a besoin d’un saut majeur de version pour le corriger effectivement.

Pour plus de compréhension, j’ai créé 2 exemples qui semble passer la validation RGAA :

- Table en mode présentation : https://www.shnoulle.net/test/arrayWCAG/tableau_role-presentation.html
- Table en mode table : https://www.shnoulle.net/test/arrayWCAG/tableau_role-table.html
- Table en mode table avec entête liées par aria aux champs : https://www.shnoulle.net/test/arrayWCAG/tableau_role-table-2.html


Merci des avis et conseil que vous pourrez m’apporter.
Modifié par Shnoulle (11 Jan 2023 - 08:28)
Pour les personnes voulant étudier directement le code ici

Les élement ls-question-text-591517X1326X15972, question-mandatory-15972 et question-help-15972 étant au dessur du tableau.

En role="table"
<div role="group" aria-labelledby="ls-question-text-591517X1326X15972" aria-describedby="question-mandatory-15972 question-help-15972">
  <table class="ls-answers subquestion-list questions-list radio-array table table-bordered table-hover table-array-radio">
    <colgroup class="col-responses">
      <col class="col-answers" style="width: 33%;">
      <col class="ls-col-odd" style="width: 13.4%">
      <col class="ls-col-even" style="width: 13.4%">
      <col class="ls-col-odd" style="width: 13.4%">
      <col class="ls-col-even" style="width: 13.4%">
      <col class="ls-col-odd" style="width: 13.4%">
    </colgroup>
    <thead>
      <tr class="ls-heading">
        <!-- thead -->
        <td class="">
        </td>
        <!-- end of thead -->
        <!-- thead -->
        <th class="answer-text" role="columnheader">
          Complétement d'accord
        </th>
        <!-- end of thead -->
        <!-- thead -->
        <th class="answer-text" role="columnheader">
          Assez d'accord
        </th>
        <!-- end of thead -->
        <!-- thead -->
        <th class="answer-text" role="columnheader">
          Ni d'accord, ni pas d'accord
        </th>
        <!-- end of thead -->
        <!-- thead -->
        <th class="answer-text" role="columnheader">
          Plutôt en désaccord
        </th>
        <!-- end of thead -->
        <!-- thead -->
        <th class="answer-text" role="columnheader">
          Complétement en désaccord
        </th>
        <!-- end of thead -->
      </tr>
    </thead>
    <tbody>
      <!-- answer_row -->
      <tr id="javatbd591517X1326X15972SQ001" class="answers-list radio-list  ls-even" role="radiogroup" aria-labelledby="answertext591517X1326X15972SQ001">
        <th id="answertext591517X1326X15972SQ001" class="answertext control-label">
          Ce tableau reste accessible à l'usage
          <input id="java591517X1326X15972SQ001" disabled="disabled" type="hidden" value="" name="java591517X1326X15972SQ001">
        </th>
        <!-- answer_td -->
        <td class="answer_cell_A1 answer-item radio-item" title="Complétement d'accord">
          <input type="radio" name="591517X1326X15972SQ001" value="A1" id="answer591517X1326X15972SQ001-A1">
          <label for="answer591517X1326X15972SQ001-A1" class="ls-label-xs-visibility">
            Complétement d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A2 answer-item radio-item" title="Assez d'accord">
          <input type="radio" name="591517X1326X15972SQ001" value="A2" id="answer591517X1326X15972SQ001-A2">
          <label for="answer591517X1326X15972SQ001-A2" class="ls-label-xs-visibility">
            Assez d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A3 answer-item radio-item" title="Ni d'accord, ni pas d'accord">
          <input type="radio" name="591517X1326X15972SQ001" value="A3" id="answer591517X1326X15972SQ001-A3">
          <label for="answer591517X1326X15972SQ001-A3" class="ls-label-xs-visibility">
            Ni d'accord, ni pas d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A4 answer-item radio-item" title="Plutôt en désaccord">
          <input type="radio" name="591517X1326X15972SQ001" value="A4" id="answer591517X1326X15972SQ001-A4">
          <label for="answer591517X1326X15972SQ001-A4" class="ls-label-xs-visibility">
            Plutôt en désaccord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A5 answer-item radio-item" title="Complétement en désaccord">
          <input type="radio" name="591517X1326X15972SQ001" value="A5" id="answer591517X1326X15972SQ001-A5">
          <label for="answer591517X1326X15972SQ001-A5" class="ls-label-xs-visibility">
            Complétement en désaccord
          </label>
        </td>
        <!-- end of answer_td -->
      </tr>
      <!-- end of answer_row -->
      <!-- answer_row -->
      <tr id="javatbd591517X1326X15972SQ002" class="answers-list radio-list  ls-odd" role="radiogroup" aria-labelledby="answertext591517X1326X15972SQ002">
        <th id="answertext591517X1326X15972SQ002" class="answertext control-label">
          Ce tableau respecte les règle du RGAA4.1
          <input id="java591517X1326X15972SQ002" disabled="disabled" type="hidden" value="" name="java591517X1326X15972SQ002">
        </th>
        <!-- answer_td -->
        <td class="answer_cell_A1 answer-item radio-item" title="Complétement d'accord">
          <input type="radio" name="591517X1326X15972SQ002" value="A1" id="answer591517X1326X15972SQ002-A1">
          <label for="answer591517X1326X15972SQ002-A1" class="ls-label-xs-visibility">
            Complétement d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A2 answer-item radio-item" title="Assez d'accord">
          <input type="radio" name="591517X1326X15972SQ002" value="A2" id="answer591517X1326X15972SQ002-A2">
          <label for="answer591517X1326X15972SQ002-A2" class="ls-label-xs-visibility">
            Assez d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A3 answer-item radio-item" title="Ni d'accord, ni pas d'accord">
          <input type="radio" name="591517X1326X15972SQ002" value="A3" id="answer591517X1326X15972SQ002-A3">
          <label for="answer591517X1326X15972SQ002-A3" class="ls-label-xs-visibility">
            Ni d'accord, ni pas d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A4 answer-item radio-item" title="Plutôt en désaccord">
          <input type="radio" name="591517X1326X15972SQ002" value="A4" id="answer591517X1326X15972SQ002-A4">
          <label for="answer591517X1326X15972SQ002-A4" class="ls-label-xs-visibility">
            Plutôt en désaccord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A5 answer-item radio-item" title="Complétement en désaccord">
          <input type="radio" name="591517X1326X15972SQ002" value="A5" id="answer591517X1326X15972SQ002-A5">
          <label for="answer591517X1326X15972SQ002-A5" class="ls-label-xs-visibility">
            Complétement en désaccord
          </label>
        </td>
        <!-- end of answer_td -->
      </tr>
      <!-- end of answer_row -->
      <!-- answer_row -->
      <tr id="javatbd591517X1326X15972SQ003" class="answers-list radio-list  ls-even" role="radiogroup" aria-labelledby="answertext591517X1326X15972SQ003">
        <th id="answertext591517X1326X15972SQ003" class="answertext control-label">
          Ce tableau est agréable à répondre pour tous
          <input id="java591517X1326X15972SQ003" disabled="disabled" type="hidden" value="" name="java591517X1326X15972SQ003">
        </th>
        <!-- answer_td -->
        <td class="answer_cell_A1 answer-item radio-item" title="Complétement d'accord">
          <input type="radio" name="591517X1326X15972SQ003" value="A1" id="answer591517X1326X15972SQ003-A1">
          <label for="answer591517X1326X15972SQ003-A1" class="ls-label-xs-visibility">
            Complétement d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A2 answer-item radio-item" title="Assez d'accord">
          <input type="radio" name="591517X1326X15972SQ003" value="A2" id="answer591517X1326X15972SQ003-A2">
          <label for="answer591517X1326X15972SQ003-A2" class="ls-label-xs-visibility">
            Assez d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A3 answer-item radio-item" title="Ni d'accord, ni pas d'accord">
          <input type="radio" name="591517X1326X15972SQ003" value="A3" id="answer591517X1326X15972SQ003-A3">
          <label for="answer591517X1326X15972SQ003-A3" class="ls-label-xs-visibility">
            Ni d'accord, ni pas d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A4 answer-item radio-item" title="Plutôt en désaccord">
          <input type="radio" name="591517X1326X15972SQ003" value="A4" id="answer591517X1326X15972SQ003-A4">
          <label for="answer591517X1326X15972SQ003-A4" class="ls-label-xs-visibility">
            Plutôt en désaccord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A5 answer-item radio-item" title="Complétement en désaccord">
          <input type="radio" name="591517X1326X15972SQ003" value="A5" id="answer591517X1326X15972SQ003-A5">
          <label for="answer591517X1326X15972SQ003-A5" class="ls-label-xs-visibility">
            Complétement en désaccord
          </label>
        </td>
        <!-- end of answer_td -->
      </tr>
      <!-- end of answer_row -->
    </tbody>
  </table>
</div>


En role="presentation"
<div role="group" aria-labelledby="ls-question-text-591517X1326X15972" aria-describedby="question-mandatory-15972 question-help-15972">
  <table class="ls-answers subquestion-list questions-list radio-array table table-bordered table-hover table-array-radio" role="presentation">
    <tbody>
      <tr class="ls-heading ls-header" aria-hidden="true">
        <!-- thead -->
        <td class="" style="width: 33%;">
        </td>
        <!-- end of thead -->
        <!-- thead -->
        <td class="answer-text" style="width: 13.4%">
          Complétement d'accord
        </td>
        <!-- end of thead -->
        <!-- thead -->
        <td class="answer-text" style="width: 13.4%">
          Assez d'accord
        </td>
        <!-- end of thead -->
        <!-- thead -->
        <td class="answer-text" style="width: 13.4%">
          Ni d'accord, ni pas d'accord
        </td>
        <!-- end of thead -->
        <!-- thead -->
        <td class="answer-text" style="width: 13.4%">
          Plutôt en désaccord
        </td>
        <!-- end of thead -->
        <!-- thead -->
        <td class="answer-text" style="width: 13.4%">
          Complétement en désaccord
        </td>
        <!-- end of thead -->
      </tr>
      <!-- answer_row -->
      <tr id="javatbd591517X1326X15972SQ001" class="answers-list radio-list  ls-even" role="radiogroup" aria-labelledby="answertext591517X1326X15972SQ001">
        <td id="answertext591517X1326X15972SQ001" class="answertext control-label no-answer-item">
          Ce tableau reste accessible à l'usage
          <input id="java591517X1326X15972SQ001" disabled="disabled" type="hidden" value="" name="java591517X1326X15972SQ001">
        </td>
        <!-- answer_td -->
        <td class="answer_cell_A1 answer-item radio-item" title="Complétement d'accord">
          <input type="radio" name="591517X1326X15972SQ001" value="A1" id="answer591517X1326X15972SQ001-A1" aria-labelledby="label-591517X1326X15972SQ001-A1">
          <label for="answer591517X1326X15972SQ001-A1" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ001-A1">
            Complétement d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A2 answer-item radio-item">
          <input type="radio" name="591517X1326X15972SQ001" value="A2" id="answer591517X1326X15972SQ001-A2" aria-labelledby="label-591517X1326X15972SQ001-A2">
          <label for="answer591517X1326X15972SQ001-A2" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ001-A2">
            Assez d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A3 answer-item radio-item">
          <input type="radio" name="591517X1326X15972SQ001" value="A3" id="answer591517X1326X15972SQ001-A3" aria-labelledby="label-591517X1326X15972SQ001-A3">
          <label for="answer591517X1326X15972SQ001-A3" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ001-A3">
            Ni d'accord, ni pas d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A4 answer-item radio-item">
          <input type="radio" name="591517X1326X15972SQ001" value="A4" id="answer591517X1326X15972SQ001-A4" aria-labelledby="label-591517X1326X15972SQ001-A4">
          <label for="answer591517X1326X15972SQ001-A4" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ001-A4">
            Plutôt en désaccord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A5 answer-item radio-item">
          <input type="radio" name="591517X1326X15972SQ001" value="A5" id="answer591517X1326X15972SQ001-A5" aria-labelledby="label-591517X1326X15972SQ001-A5">
          <label for="answer591517X1326X15972SQ001-A5" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ001-A5">
            Complétement en désaccord
          </label>
        </td>
        <!-- end of answer_td -->
      </tr>
      <!-- end of answer_row -->
      <!-- answer_row -->
      <tr id="javatbd591517X1326X15972SQ002" class="answers-list radio-list  ls-odd" role="radiogroup" aria-labelledby="answertext591517X1326X15972SQ002">
        <td id="answertext591517X1326X15972SQ002" class="answertext control-label no-answer-item">
          Ce tableau respecte les règle du RGAA4.1
          <input id="java591517X1326X15972SQ002" disabled="disabled" type="hidden" value="" name="java591517X1326X15972SQ002">
        </td>
        <!-- answer_td -->
        <td class="answer_cell_A1 answer-item radio-item" title="Complétement d'accord">
          <input type="radio" name="591517X1326X15972SQ002" value="A1" id="answer591517X1326X15972SQ002-A1" aria-labelledby="label-591517X1326X15972SQ002-A1">
          <label for="answer591517X1326X15972SQ002-A1" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ002-A1">
            Complétement d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A2 answer-item radio-item">
          <input type="radio" name="591517X1326X15972SQ002" value="A2" id="answer591517X1326X15972SQ002-A2" aria-labelledby="label-591517X1326X15972SQ002-A2">
          <label for="answer591517X1326X15972SQ002-A2" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ002-A2">
            Assez d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A3 answer-item radio-item">
          <input type="radio" name="591517X1326X15972SQ002" value="A3" id="answer591517X1326X15972SQ002-A3" aria-labelledby="label-591517X1326X15972SQ002-A3">
          <label for="answer591517X1326X15972SQ002-A3" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ002-A3">
            Ni d'accord, ni pas d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A4 answer-item radio-item">
          <input type="radio" name="591517X1326X15972SQ002" value="A4" id="answer591517X1326X15972SQ002-A4" aria-labelledby="label-591517X1326X15972SQ002-A4">
          <label for="answer591517X1326X15972SQ002-A4" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ002-A4">
            Plutôt en désaccord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A5 answer-item radio-item">
          <input type="radio" name="591517X1326X15972SQ002" value="A5" id="answer591517X1326X15972SQ002-A5" aria-labelledby="label-591517X1326X15972SQ002-A5">
          <label for="answer591517X1326X15972SQ002-A5" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ002-A5">
            Complétement en désaccord
          </label>
        </td>
        <!-- end of answer_td -->
      </tr>
      <!-- end of answer_row -->
      <!-- answer_row -->
      <tr id="javatbd591517X1326X15972SQ003" class="answers-list radio-list  ls-even" role="radiogroup" aria-labelledby="answertext591517X1326X15972SQ003">
        <td id="answertext591517X1326X15972SQ003" class="answertext control-label no-answer-item">
          Ce tableau est agréable à répondre pour tous
          <input id="java591517X1326X15972SQ003" disabled="disabled" type="hidden" value="" name="java591517X1326X15972SQ003">
        </td>
        <!-- answer_td -->
        <td class="answer_cell_A1 answer-item radio-item" title="Complétement d'accord">
          <input type="radio" name="591517X1326X15972SQ003" value="A1" id="answer591517X1326X15972SQ003-A1" aria-labelledby="label-591517X1326X15972SQ003-A1">
          <label for="answer591517X1326X15972SQ003-A1" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ003-A1">
            Complétement d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A2 answer-item radio-item">
          <input type="radio" name="591517X1326X15972SQ003" value="A2" id="answer591517X1326X15972SQ003-A2" aria-labelledby="label-591517X1326X15972SQ003-A2">
          <label for="answer591517X1326X15972SQ003-A2" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ003-A2">
            Assez d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A3 answer-item radio-item" title="Ni d'accord, ni pas d'accord">
          <input type="radio" name="591517X1326X15972SQ003" value="A3" id="answer591517X1326X15972SQ003-A3" aria-labelledby="label-591517X1326X15972SQ003-A3">
          <label for="answer591517X1326X15972SQ003-A3" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ003-A3">
            Ni d'accord, ni pas d'accord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A4 answer-item radio-item">
          <input type="radio" name="591517X1326X15972SQ003" value="A4" id="answer591517X1326X15972SQ003-A4" aria-labelledby="label-591517X1326X15972SQ003-A4">
          <label for="answer591517X1326X15972SQ003-A4" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ003-A4">
            Plutôt en désaccord
          </label>
        </td>
        <!-- end of answer_td -->
        <!-- answer_td -->
        <td class="answer_cell_A5 answer-item radio-item">
          <input type="radio" name="591517X1326X15972SQ003" value="A5" id="answer591517X1326X15972SQ003-A5" aria-labelledby="label-591517X1326X15972SQ003-A5">
          <label for="answer591517X1326X15972SQ003-A5" class="ls-label-xs-visibility" id="label-591517X1326X15972SQ003-A5">
            Complétement en désaccord
          </label>
        </td>
        <!-- end of answer_td -->
      </tr>
      <!-- end of answer_row -->
    </tbody>
  </table>
</div>

Modifié par Shnoulle (09 Jan 2023 - 12:45)
Modérateur
Salut,

Un formulaire n'est pas des données tabulaire (vestige d'un passé révolu). Je te souhaite bonne chance pour un tableau sur de petites résolutions.
Une liste non ordonnée te donnera plus de satisfactions (une liste de réponses).

edit:
Je peux peut être dire des bêtises (je ne suis pas expert dans ce domaine)... Il me semble que ton attribut aria-labelby est too much. Tu lies déjà <label> avec le <input:radio>.
Modifié par niuxe (11 Jan 2023 - 13:38)
niuxe a écrit :
Un formulaire n'est pas des données tabulaire (vestige d'un passé révolu). Je te souhaite bonne chance pour un tableau sur de petites résolutions.
Une liste non ordonnée te donnera plus de satisfactions (une liste de réponses).
Oui, donc tu conseil plutôt le role=présentation. ce sur qui j'étais parti au final.
Pour le mode téléphone : RAS, c'est prévu, tu peux tester.

niuxe a écrit :

edit:
Je peux peut être dire des bêtises (je ne suis pas expert dans ce domaine)... Il me semble que ton attribut aria-labelby est too much. Tu lies déjà &lt;label&gt; avec le &lt;input:radio&gt;.
Sans le aria-labelledby : NVDA semble considérer que le label est masqué (alors qu'il est sur une des méthode sr-only).
On a pas compris, mais en le forçant : ça règle le soucis… donc bon … ca coute pas grand chose.
Prévenir un modérateur
Répondre au sujet
Aller à