A11Y: Amélioration de l'accessibilité des tooltip #5380

hellodeloo · 2025-01-13T14:10:23Z

🤔 Pourquoi ?

Les tooltips ne sont pas toujours activables à la tabulation

🍰 Comment ?

En remontant le data-bs-toggle="tooltip" sur les <a> qui enroberaient un <i data-bs-toggle="tooltip">
En remplaçant les <span> ou <div> possédant un data-bs-toggle="tooltip" par des quand c'était possible et en ajoutant sur un role="button" et tabindex="0"quand ça ne l'était pas

💻 Captures d'écran

Avant

Apres

francoisfreitag · 2025-01-13T14:47:12Z

En ajoutant sur un role="button" et tabindex="0" sur les <span>, <i> et <div> possédant un data-bs-toggle="tooltip"

La doc de bootstrap dit:

Keep tooltips accessible to keyboard and assistive technology users by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding tabindex="0", this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation.

Est-ce qu’on ne devrait pas changer le markup pour suivre ces recommendations ?

hellodeloo · 2025-01-13T15:51:28Z

Est-ce qu’on ne devrait pas changer le markup pour suivre ces recommendations ?

Pour les <span> et les <div>, oui, tu as raison, je vais remplacer par des <button> 👍
Pour les <i>, je vais voir si je peux en enrober certains dans un <button> mais ça ne sera surement pas possible pour tous

tests/www/job_seekers_views/test_list.py

itou/templates/admin/job_applications/jobapplication_change_form.html

github-actions · 2025-01-21T14:29:24Z

🥁 La recette jetable est prête ! 👉 Je veux tester cette PR !

francoisfreitag

La meilleure accessibilité pour les tooltips est de les retirer...
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role

À discuter avec les UX, mais j’ai l’impression qu’on continue d’en ajouter.

francoisfreitag · 2025-01-30T14:25:57Z

itou/templates/apply/includes/buttons/rdv_insertion_invite.html

               data-bs-toggle="tooltip"
               data-bs-placement="left"
               data-bs-html="true"
-               data-bs-title="Une relance sera envoyée 3 jours après. <br> Vous pourrez renvoyer une invitation sous 10J."></i>
+               data-bs-title="Une relance sera envoyée 3 jours après. <br> Vous pourrez renvoyer une invitation sous 10J."
+               role="button"


Pourquoi ne pas utiliser un bouton avec text-success ici ?

francoisfreitag · 2025-01-30T15:51:50Z

itou/templates/apply/includes/transfer_job_application.html

                <strong>Une autre structure</strong>
            </a>
        {% else %}
-            <div data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Vous devez d’abord décliner la candidature pour pouvoir la transférer à un autre employeur">
+            <div data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Vous devez d’abord décliner la candidature pour pouvoir la transférer à un autre employeur" role="button" tabindex="0">


Ce dropdown me semble complètement inaccessible au clavier ?

Peut-être qu’une fois son markup corrigé (dans une autre PR), on pourrait en profiter pour utiliser un bouton ici ?

francoisfreitag · 2025-01-30T15:57:51Z

itou/templates/apply/list_of_available_exports.html

@@ -93,16 +93,18 @@ <h2 class="h4">Candidatures</h2>
                                            {% if export_for == "siae" %}
                                                <a class="btn btn-sm btn-link btn-ico-only"
                                                   {% matomo_event "candidature" "exports" "export-siae" %}
-                                                   aria-label="Télécharger cet export SIAE au format .xlsx"


Pourquoi déplacer le aria-label sur le <i>? C’est bien le lien qui déclenche le téléchargement, pas l’icone à l’intérieur.

(tous le fichier)

francoisfreitag · 2025-01-30T16:00:37Z

itou/templates/apply/process_refuse.html

                                                        {% elif radio.data.value == RefusalReason.NO_POSITION %}
                                                            {{ radio.choice_label }}
-                                                            <i class="ri-information-line ri-lg text-info ms-1" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Si vous choisissez ce motif, les fiches de postes associées seront dépubliées."></i>
+                                                            <button type="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Si vous choisissez ce motif, les fiches de postes associées seront dépubliées.">
+                                                                <i class="ri-information-line ri-lg text-info ms-1" aria-label="Si vous choisissez ce motif, les fiches de postes associées seront dépubliées."></i>


J’ai l’impression que ce tooltip ne devrait pas en être un. Le aria-label décrit l’élément <i>, ce qui n’est pas vraiment ce qu’on veut. Ni le bouton d’ailleurs.

francoisfreitag · 2025-01-30T16:08:45Z

itou/templates/approvals/includes/box.html

+                    <i class="ri-information-line ri-xl text-info"
+                       data-bs-toggle="tooltip"
+                       data-bs-title="Cette date de fin est susceptible d’évoluer avec les éventuelles suspensions et prolongations du PASS IAE."
+                       role="button"
+                       tabindex="0">
+                    </i>


axeDevTools n’est pas heureux avec ce markup.
https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=AxeFirefox

To solve this problem, you need to fix at least (1) of the following:

L’élément n’a aucun contenu textuel visible par les lecteurs d’écran L’attribut aria-label n’existe pas ou est vide L’attribut aria-labelledby n’existe pas, fait référence à des éléments qui n’existent pas ou à des éléments vides ou non visibles L’élément n’a pas d’attribut title

francoisfreitag · 2025-01-30T16:12:46Z

itou/templates/dashboard/includes/dashboard_title_content.html

                {% else %}
                    <a href="{% url 'apply:start_hire' company_pk=request.current_organization.pk %}" class="btn btn-lg btn-primary btn-ico" {% matomo_event "employeurs" "clic" "declarer-embauche" %}>
-                        <i class="ri-user-follow-line fw-medium"></i>
+                        <i class="ri-user-follow-line fw-medium" aria-hidden="true"></i>


J’ai l’impression qu’on pourrait faire une passe plus globale sur les icônes pour ajouter aria-hidden="true" partout.

francoisfreitag · 2025-01-30T16:14:50Z

itou/templates/includes/members.html

@@ -23,7 +23,9 @@
                        <td>
                            {{ member.user.get_full_name }}
                            {% if member.user in active_admin_members %}
-                                <span class="badge badge-xs rounded-pill bg-info" data-bs-toggle="tooltip" data-bs-title="Administrateur de la structure">admin</span>
+                                <button type="button" class="badge badge-xs rounded-pill bg-info" data-bs-toggle="tooltip" data-bs-title="Administrateur de la structure">
+                                    admin


Je me demande si on ne voudrait pas ajouter un <span class="visually-hidden">inistrateur</span> ou équivalent pour que les lecteurs d’écran n’emploient pas l’abbréviation ?

francoisfreitag · 2025-01-30T16:15:13Z

itou/templates/includes/members.html

+                                            <a href="{% url base_url|add:":update_admin_role" "add" member.user.pk %}" class="dropdown-item">Ajouter en tant qu'administrateur</a>
                                        {% else %}
-                                            <a href="{% url base_url|add:":update_admin_role" "remove" member.user.pk %}" class="dropdown-item">
-                                                Retirer les droits d'administrateur
-                                            </a>
+                                            <a href="{% url base_url|add:":update_admin_role" "remove" member.user.pk %}" class="dropdown-item">Retirer les droits d'administrateur</a>


Ces lignes n’ont pas été changées, serait-il possible de les laisser dans leur état d’origine ?

hellodeloo added the modifié label Jan 13, 2025

hellodeloo self-assigned this Jan 13, 2025

hellodeloo requested review from xavfernandez and francoisfreitag January 13, 2025 14:22

hellodeloo force-pushed the deloo/fix-tooltip-a11y branch from 26100be to e20826a Compare January 13, 2025 15:29

xavfernandez reviewed Jan 13, 2025

View reviewed changes

tests/www/job_seekers_views/test_list.py Outdated Show resolved Hide resolved

hellodeloo force-pushed the deloo/fix-tooltip-a11y branch from 29b2a62 to 3d03510 Compare January 14, 2025 09:53

hellodeloo requested a review from xavfernandez January 14, 2025 10:09

xavfernandez reviewed Jan 16, 2025

View reviewed changes

itou/templates/admin/job_applications/jobapplication_change_form.html Outdated Show resolved Hide resolved

hellodeloo force-pushed the deloo/fix-tooltip-a11y branch 3 times, most recently from 62d9f78 to a9781e7 Compare January 16, 2025 14:11

hellodeloo requested a review from xavfernandez January 16, 2025 14:28

hellodeloo marked this pull request as draft January 20, 2025 13:22

hellodeloo force-pushed the deloo/fix-tooltip-a11y branch 2 times, most recently from 4454f80 to 2ccf1c8 Compare January 21, 2025 14:07

hellodeloo added the 1-recette-jetable [Payé à l’heure] Crée une recette jetable sur CC label Jan 21, 2025

hellodeloo marked this pull request as ready for review January 21, 2025 14:30

hellodeloo force-pushed the deloo/fix-tooltip-a11y branch from 2ccf1c8 to 068bfbb Compare January 29, 2025 08:33

hellodeloo removed the 1-recette-jetable [Payé à l’heure] Crée une recette jetable sur CC label Jan 29, 2025

fix: tooltip a11y

f8bd32c

hellodeloo force-pushed the deloo/fix-tooltip-a11y branch from 068bfbb to f8bd32c Compare January 29, 2025 10:02

francoisfreitag reviewed Jan 30, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A11Y: Amélioration de l'accessibilité des tooltip #5380

A11Y: Amélioration de l'accessibilité des tooltip #5380

hellodeloo commented Jan 13, 2025 •

edited

Loading

francoisfreitag commented Jan 13, 2025 •

edited

Loading

hellodeloo commented Jan 13, 2025

github-actions bot commented Jan 21, 2025

francoisfreitag left a comment

francoisfreitag Jan 30, 2025

francoisfreitag Jan 30, 2025

francoisfreitag Jan 30, 2025

francoisfreitag Jan 30, 2025

francoisfreitag Jan 30, 2025

francoisfreitag Jan 30, 2025

francoisfreitag Jan 30, 2025

francoisfreitag Jan 30, 2025

A11Y: Amélioration de l'accessibilité des tooltip #5380

Are you sure you want to change the base?

A11Y: Amélioration de l'accessibilité des tooltip #5380

Conversation

hellodeloo commented Jan 13, 2025 • edited Loading

🤔 Pourquoi ?

🍰 Comment ?

💻 Captures d'écran

francoisfreitag commented Jan 13, 2025 • edited Loading

hellodeloo commented Jan 13, 2025

github-actions bot commented Jan 21, 2025

francoisfreitag left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hellodeloo commented Jan 13, 2025 •

edited

Loading

francoisfreitag commented Jan 13, 2025 •

edited

Loading