IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre chevronné

    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2013
    Messages
    865
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Conseil

    Informations forums :
    Inscription : octobre 2013
    Messages : 865
    Points : 2 158
    Points
    2 158
    Par défaut Accessibilité de la page d'accueil
    Bonjour,

    J'ai constaté que la page d'accueil de "developpez.com" a changée.
    Pour moi ça se traduit par une régression de l'accessibilité.

    Avant il y avait des titres de niveaux 2 pour marquer les parties "A la une", "Actualités" et "publications".
    Maintenant ce sont des graphiques, certes bien marqués avec un texte.
    Mais les titres étaient bien pratiques pour naviguer.

    De plus pour naviguer Il y a bien des zones de navigations pour marquer les menus et le pied de page, mais pas de zone pour marquer la zone principale.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <main role="main">
    ...</main>
    ...

    Il n'y a pas de liens cachés "Aller au con tenu", "skip to content", et on peut envisager des liens vers les 3 rubriques que j'ai évoqué plus haut car elles sont les plus importantes de la page

    , peut procéder ainsi avec le css
    La zone sera invisible car trop petite pour être affichée par le navigateur, mais lu par les lecteur d'écrans

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    : 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }


    Cordialement
    Consultez mes articles sur l'accessibilité numérique :

    Comment rendre son application SWING accessible aux non voyants
    Créer des applications web accessibles à tous

    YES WE CAN BLANCHE !!!

    Rappelez-vous que Google est le plus grand aveugle d'Internet...
    Plus c'est accessible pour nous, plus c'est accessible pour lui,
    et meilleur sera votre score de référencement !

  2. #2
    Community Manager

    Avatar de Malick
    Homme Profil pro
    Auditeur
    Inscrit en
    juillet 2012
    Messages
    8 325
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Sénégal

    Informations professionnelles :
    Activité : Auditeur
    Secteur : Conseil

    Informations forums :
    Inscription : juillet 2012
    Messages : 8 325
    Points : 77 599
    Points
    77 599
    Billets dans le blog
    15
    Par défaut
    Salut,

    En ce qui concerne les titres évoqués, je pense qu'ils apparaissent toujours.

    Sinon il serait bien d'indiquer le navigateur utiliser pour permettre à l'équipe technique de voir c'est quoi le souci.

    Nom : Sans titre.png
Affichages : 79
Taille : 176,3 Ko
    Vous avez envie de contribuer au sein du Club Developpez.com ? Contactez-nous maintenant !
    Vous êtes passionné, vous souhaitez partager vos connaissances en informatique, vous souhaitez faire partie de la rédaction.
    Il suffit de vous porter volontaire et de nous faire part de vos envies de contributions :
    Rédaction d'articles/cours/tutoriels, Traduction, Contribution dans la FAQ, Rédaction de news, interviews et témoignages, Organisation de défis, de débats et de sondages, Relecture technique, Modération, Correction orthographique, etc.
    Vous avez d'autres propositions de contributions à nous faire ? Vous souhaitez en savoir davantage ? N'hésitez pas à nous approcher.

  3. #3
    Responsable technique

    Avatar de Anomaly
    Homme Profil pro
    Analyste programmeur
    Inscrit en
    juin 2003
    Messages
    10 187
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Somme (Picardie)

    Informations professionnelles :
    Activité : Analyste programmeur
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juin 2003
    Messages : 10 187
    Points : 92 526
    Points
    92 526
    Billets dans le blog
    1
    Par défaut
    Bonjour CoderInTheDark,

    C'est vrai qu'on ne pense pas toujours qu'il y a des non-voyants qui viennent sur Developpez.com.

    J'avoue que je n'ai pas compris ton exemple de code CSS qui est visiblement endommagé vu qu'il commence par ": 0".

    Peux-tu nous dire concrètement ce qu'il faudrait changer dans le code HTML pour que cela soit plus pratique pour toi s'il te plaît ? Merci d'avance.
    Responsable technique forum & site

    Si ce message (ou un autre) vous a aidé et/ou vous semble pertinent, votez pour lui avec

  4. #4
    Membre chevronné

    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2013
    Messages
    865
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Conseil

    Informations forums :
    Inscription : octobre 2013
    Messages : 865
    Points : 2 158
    Points
    2 158
    Par défaut
    Bonjour,

    L'idée du code CSS est de créer une zone invisible en haut de page, car trop petite pour être affichée par le navigateur., et d'y mettre des liens sur la page pour atteindre les zones principales de la page sans chercher.
    Google le fait sur sa page de résultats de recherches Paradoxalement ce peut être mal vu par les moteurs d'indexations.
    Ce sont des liens "aller au contenu", "skip to content".
    Dans notre cas "aller a la rubrique à la une", "aller à la rubrique actualités", et "aller à la rubrique publication".
    J'ai du pourrir le code car la touche 0 du pavé numérique en mode non verouillé sert de touche de racourçis pour mon lecteur d'écrans.


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    blindZone {*** border: 0;
    *** clip: rect(0 0 0 0);
    *** height: 1px;
    *** margin: -1px;
    *** overflow: hidden;
    *** padding: 0;
    *** position: absolute;
    *** width: 1px;
    }
    Je suis nul en CSS, car un non-voyant ne peut pas vérifier le résultat du CSS à l'écran.On a aucun retour pour avoir les informations mise en forme par le CSS.
    Mais la logique me semble bonne.

    Comme ça on tombe dessus directement , et on peut aller au contenu qui nous intéresse/

    Vous avez utilisez des zones pour la navigation et le pied de pied de page.
    Mais pas de zone pour le contenu principal de la page.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <main role="main">
    …
    </main>
    On a une toucje pour naviguer de zone en zone, et la zone principale nous permet de nous repérer.

    On peut utiliser les titres.
    Il donne une hiérarchie au contenu.
    On peut naviguer par titre et aussi par niveaux de titres.

    C'est pour ça qu'avant c'était pratique quand les rubriques était des titres de niveaux 2.
    La les rubriques sont marqués comme des graphiques et sont présentes plusieurs fois.

    Je vais être occupé cette semaine, car je rédige une note de synthèse technique que je dois rendre lundi prochain

    Si il faut en parler on peut remettre ça la semaine prochaine.?
    Et j'ai toujours mon article sur le html accessible sous le coude
    Consultez mes articles sur l'accessibilité numérique :

    Comment rendre son application SWING accessible aux non voyants
    Créer des applications web accessibles à tous

    YES WE CAN BLANCHE !!!

    Rappelez-vous que Google est le plus grand aveugle d'Internet...
    Plus c'est accessible pour nous, plus c'est accessible pour lui,
    et meilleur sera votre score de référencement !

  5. #5
    Membre chevronné

    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2013
    Messages
    865
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Conseil

    Informations forums :
    Inscription : octobre 2013
    Messages : 865
    Points : 2 158
    Points
    2 158
    Par défaut
    Bonjour,

    Je suis de retour


    Les liens de "aller à" navigations permettent d'avoir des racourçis
    Le but est de découper sémantiquement la page, avec les zone header main et footer, puis en ajoutant des titres marquer les différentes zones de la zone main.
    Cordialement
    Consultez mes articles sur l'accessibilité numérique :

    Comment rendre son application SWING accessible aux non voyants
    Créer des applications web accessibles à tous

    YES WE CAN BLANCHE !!!

    Rappelez-vous que Google est le plus grand aveugle d'Internet...
    Plus c'est accessible pour nous, plus c'est accessible pour lui,
    et meilleur sera votre score de référencement !

Discussions similaires

  1. Comment revenir à la page d'accueil ?
    Par whbh dans le forum Langage
    Réponses: 10
    Dernier message: 21/01/2006, 01h02
  2. Afficher la page d'accueil du service web d'un routeur cisco
    Par just1980 dans le forum Développement
    Réponses: 1
    Dernier message: 02/01/2006, 00h45
  3. Bonjour petit débutan a besoin d'aide pour page d'accueil
    Par Gray Man dans le forum Balisage (X)HTML et validation W3C
    Réponses: 13
    Dernier message: 09/12/2005, 18h33
  4. Définir une page d'accueil
    Par ista9im dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 20/10/2005, 09h34
  5. [ debutant ][ Tomcat ] La page d'accueil ne s'affiche pas
    Par zsoh dans le forum Tomcat et TomEE
    Réponses: 17
    Dernier message: 10/04/2005, 10h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo