Mettre des liens d'accès rapide (pour rendre plus accessible PluXML)

iKsiKs Member
mars 2007 modifié dans Archives
Bonjour à tous,

Encore et toujours, Mr iKs s'informe ^^
Et en ce moment c'est tout ce qui touche au (X)HTML et à l'accessibilité qui m'intéresse. Je lis donc pas mal d'articles sur le Site du Zéro, sur Alsacréations et bien sur le W3C et je suis tombé sur un point intéressant..

Les liens d'accès rapide et d'évitement !
Pour faire simple ce sont des liens à insérer en début de page qui permettent d'accéder au menu, au contenu, etc.. Ces liens sont particulièrement pratiques pour les personnes désavantagées (les aveugles et mal-voyants entre autre) qui ne doivent plus se taper tout le menu pour arriver à la substance de la page ou au contraire qui ne doivent pas se taper tout un texte qui ne les intéresse pas pour arriver au menu qui leur permettra de naviguer sur le site. Les personnes navigant au clavier sont plus généralement très aidées par ce dispositif.
Ces liens peuvent aussi être intéressant aux personnes entièrement valides puisqu'ils permettent une meilleure navigation à l'intérieur même de la page !

Ces liens peuvent soit être cachés des navigateurs graphiques (via du CSS, voir du côté de color, display, visible et position, au choix) si on les considèrent "moches" soit simplement ajouté au dessus du header.

Bref je pense que ce serait un pas de plus vers l'accessibilité !

iKs.

PS: Pour tester l'accessibilité, téléchargez Opera (pas libre mais de qualité) puis activez le mode "Emuler un navigateur Texte".
PS2: Erreur dans le titre.. Dommage qu'on puisse pas l'éditer :/ (je regarderai si c'est activable tient)

Réponses

  • Hop dans la todo :)
  • DitiDiti Member
    Yop,

    Je suis spécialiste en ça depuis 2 ans. Mais j'ai pas eu le temps d'y penser, pardon :o
    'Va vraiment falloir que je fasse un post sur tout ce qui est à améliorer :D
  • iKsiKs Member
    Spécialiste en accessibilité ? oO C'est à dire que tu as fait des études là dedans ?

    Justement c'est ta réflexion à propos de l'accessibilité dans le forum dév qui m'a fait penser à ça ^^
  • NicoNico Member
    Bonne lecture iKs :p

    Il existe aussi des barres pour tester l 'accessibilité
    - Web Developer Toolbar extension de firefox http://chrispederick.com/work/webdeveloper/
    - barre pour internet explorer
    http://www.wat-c.org/tools/WAT/versions/fr/about.html

    Liste d'outils de validation (recherche)
    http://www.w3.org/WAI/ER/tools/simple

    W3C Web Accessibility Initiative
    http://www.w3.org/WAI/Overview.html
    The full check list
    http://www.w3.org/TR/WCAG10/full-checklist.html

    Tutoriel pour faire un site de qualité
    http://www.w3schools.com/quality/default.asp
  • DitiDiti Member
    iKs a écrit:
    Spécialiste en accessibilité ? oO C'est à dire que tu as fait des études là dedans ?
    Je m'excuse, j'ai confondu « spécialiste » et « spécialisé » :/
    Ça veut dire que tout l'apprentissage du HTML que je fais depuis 2 ans est intégralement basé sur l'accessibilité.
  • iKsiKs Member
    Ah bah idem alors, ou presque ^^
    Sachant que j'ai appris l'XHTML sur le SdZ ya.. Hum 2 ans et quelque je pense, ce qui est une bonne base, et que depuis je m'iontéresse à tout c qui est developpement Web :)

    @Nico : le mieux c'est encore de :
    1. Virer le style sous Firefox et observer
    2. Triturer la partie View => Style de Opera
    3. Passer le test lynx/links

    C'est là que tu te rends vraiment compte de ce que c'est l'accéssibilité ^^

    PS: BTW, j'viens de défoncer mon driver de CG (enfin ma carte es tplus supportée quoi) et j'ai donc eu le bonheur d'apprécier PunBB sous links (le forum d'ubuntu-fr) pour trouver un indice de solution. PunBB rock :)
  • MilkaJinkaMilkaJinka Member
    mars 2007 modifié
    Tant qu'on y est, quid des accesskeys et du tabindex ? Y'a moyen de générer ça (au moins pour ce dernier, les accesskeys devant pouvoir se mettre directement dans le template) ?

    PS : hé hé, quelqu'un d'Ubuntu-fr, salut !
  • bonjour,
    pour les accesskey , je ne suis pas pour , trop de diference d'un navigateur a l'autre , conflit possible avec les raccourcis claviers même du navigateur et mode d'emploi a rediger pas forcement des plus clair qui peut etre necessaire quand l'utilisateur ne savait pas que son navigateur a cette fonction "possible".

    TabIndex , a prioiri une page bien codé , peut s'en passer , Mal utiliser ou integrer , on peut se trouver a transformer la page en 'yoyo'. :)
    Un lecteur d'ecran , passera de titre en titre sans necessairement avoir besoins des "tabindex". Les formulaires s'en passe aussi , mais un accesskey pour aller directement au formulaire n'est pas mal non plus :) ... me semble bien qu'il y a deja un lien vers le formulaire justement .. ?


    Le code html de base de pluxml est propre , manque effectivement le menu 'd'echappement en debut du flux, pour sauté le titre et sous titre direction le contenu , ou se rendre directement aux differents menus. ... la encore il faut faire attention a ne pas "vouloir trop bien faire" , car ajouté un menu avec 30 liens (j'exagere bien sur ) va rendre inefficace cette idée de faciliter la navigation.

    En tout cas tout cela est interessant :)

    GC
  • MilkaJinkaMilkaJinka Member
    mars 2007 modifié
    Pour les accesskeys en utilisant celles qui vont bien il n'y a pas de conflit. De plus pour Pluxml il suffirait de trois : page d'accueil (1), contact (7 ou 9), aller au contenu (touche s). Selon Accessiweb : http://www.accessiweb.org/fr/Label_Accessibilite/criteres_accessiweb/92_accessiweb_lineaire/#aide

    Pour le tabindex, oui t'as raison, mieux vaut une bonne structure :). C'est vrai que pour le moment dans le code du template le menu est situé après le contenu (histoire que les lecteurs d'écrans ne se tapent pas tout le menu à chaque fois), d'où l'intérêt d'un tabindex privilégiant le menu (voire le contact en pied de page et les titres des billets) avant les liens dans les billets. Mais avec les liens d'évitement on pourrait s'en passer.

    Ah, et puis tant que j'y suis, vu que j'ai fait cette erreur au début : les display: none ou visibility: hidden sur les liens d'évitement ça les rend invisibles aussi aux lecteurs d'écrans ^^
  • oui ,
    un position :absolue + un left:-9999px; ou un height:0; overflow:hidden; (assortie d'un z-index negatif pour opera ) permettent visuellement d'extraire un ou plusieurs element de la pages sans les rendres totalement invisibles a un lecteur d'ecran ou autre "outils" sensible au display/visibility.

    un mini menu d'evitement de 3 lien calé en haut de page n'est pas si moche que ça non plus :).

    GC
  • DitiDiti Member
    Cherchez sur internet l'échec des AccessKeys. Dans le cadre d'un blog, c'est inutile : même si un blog/CMS est proposé pour être le plus accessible possible, l'entrée faite par un utilisateur « désaccessibilise » le blog/CMS. Alors à quoi bon ?
  • @gcyrillus : merci, je n'y avais pas pensé ^^ Le problème est que mon thème s'accomode très mal d'un menu d'évitement au sommet de la page, et je me cassais la tête ^^

    @ Diti : L'échec des acesskeys, sauf quelques-unes, et ce sont ces quelques-unes qui comptent, si on s'appuie sur http://css.alsacreations.com/Accessibilite-du-Web/Accesskey-le-grand-echec-de-l-accessibilite-du-Web

    En quoi l'entrée faite par un utilisateur "désaccessabilise" le blog ? Par une syntaxe inaccessible ? J'aimerais en savoir plus (le sujet m'intéresse aussi ;) )
  • DitiDiti Member
    MilkaJinka a écrit:
    En quoi l'entrée faite par un utilisateur "désaccessabilise" le blog ? Par une syntaxe inaccessible ? J'aimerais en savoir plus (le sujet m'intéresse aussi ;) )
    Euh, j'ai pô trop l'temps de faire un essai là-dessus, tu pourrais m'inscrire à Jabber / MSN ? Merci :P
  • iKsiKs Member
    (Diti, t'as pas mis ton adresse Jabber dans ton profil et l'adresse MSN qui y est n'est pas celle que j'ai)
  • DitiDiti Member
    iKs a écrit:
    (Diti, t'as pas mis ton adresse Jabber dans ton profil et l'adresse MSN qui y est n'est pas celle que j'ai)
    Merci de l'avoir fait remarquer, c'est corrigé :P
Connectez-vous ou Inscrivez-vous pour répondre.