Skip to content
Snippets Groups Projects

[Accessibilité] - Page Accueil (actualités)

    • Closed Issue created by Marlène SIMONDANT @msimondant

    Contexte

    Résultats du rapport d'audit d'accessibilité
    Page Accueil (actualités) : https://resin.grandlyon.com/actualites

    Objectif

    Corriger les problèmes d'accessibilité restants.
    Faire ce qui est raisonnable. N'hésitez pas à signaler ce qui est trop compliqué, ça pourra être discuté et/ou reporté en accord avec Erwan.

    Ressources

    Rapport envoyé par mail

    Tâches

    • !879 (merged)
      Les onglets de tri des actualités doivent avoir un attribut aria-selected avec pour valeur « true » pour l’onglet actif et « false » pour les autres onglets. (Modèle de conception : Tabs Pattern)
      image
    • !891 (merged)
      En dessous du titre, les onglets de tri des actualités ont un focus (outline) dégradé dû à la propriété CSS « overflow-x: auto; » sur l’élément parent (balise avec l’attribut role="tablist"). En supprimant cette propriété CSS l’outline devient complètement visible.
      image
    • !880 (merged)
      Lorsque la fenêtre est réduite à une hauteur de 256px, le menu est tronqué et on ne peut pas accéder à tous les éléments du menu. Il faut rajouter « overflow-y: scroll; » à l’élément ayant pour attribut « role="menu" » (vérifier aussi que la couleur d’arrière-plan s’applique à tout le menu).
      image
    • !881 (merged)
      Lorsque la fenêtre est réduite à une largeur de 320px, le contenu est tronqué (par exemple le titre « Recrutement : animateur/animatrice numérique »). Il faut rajouter la propriété CSS « word-break: break-word; ».
      image
    • !892 (merged)
      Il n’existe pas de lien d’évitement ou d’accès rapide. Ils peuvent être positionnés hors écran (position: absolute) et apparaitre à la prise de focus (navigation clavier). Ils doivent être positionnés en début de code et en haut de page. Ils doivent toujours être situés à la même place dans les pages et doivent toujours être dans le même ordre dans le code source. (Exemple sur cette page : https://disic.github.io/guide-integrateur/demo/2-navigation/access-rapide.html)
    ✓ 5 of 5 checklist items completed · Edited

    Designs

      Child items ...

      2. Activity

      Please register or sign in to reply