Category Archives: Accessibility

Victor Tsaran presents screen readers

Most companies either don’t have the resources or aren’t willing to invest in assistive technologies so that they can actively test their web products, so their employees are forced to simply follow the rules (WAI) as best they can and hope that their final product is at least somewhat accessible. Victor Tsaran’s video introduction to screen readers is very useful as it allows a peek into real life screen reader usage. I wonder how many people will be surprised by the last couple minutes of the video?

He highlighted the following important points (with a little of my own two cents thrown in as well):

Screen readers users can navigate via links, headings, and lists. All of the above should thus be marked-up appropriately using semantic HTML or XHTML and should have descriptive and unique text associated with them.

He showed how he could pull up lists of all the links on a page. You should ask your self if you have used an identical link text for more than one link on a page. The worst example of this is “click here” but “find out more!” is my personal favorite — about what?!?

We also saw in the video that he could pull up a list of all the headings (H1-H6) in a page and shuffle through the content. This was his best way of getting an overview of a website, something sighted people can have at a glance. So keeping this in mind, big text is *not* the same thing as a heading. Consider styling each of your potential headings to encourage that they be used appropriately.

Finally, lists should be marked up as such, whether they have bullets or numbers, are horizontal or vertical, etc. This will allow your users to hear how many items there are in the list and decide if they would like to hear individual elements or skip to the end of the group. Lists include one LI per item; a series of A tags does not constitute a list.

Anyway, I hope you enjoy the video, I did. Victor, is there any chance you would be willing to do another video on flash interactions with your screen reader?

Why are women not on the A-list?

I’ve been reading the book Guns, germs, and steel and though I am only halfway through it leads me to ask a different question.

Why are women less known in front end design / CSS / standards ?

I’m sure it doesn’t apply to all of us, but I am simply not willing to participate in the world of forums. I’ve lurked for years learning and gleaning information from posts and responses but the flame wars and nastiness are generally something I’m not willing to risk. The same guys who are delightful at a conference, bright, and eager to share information will flame someone in an online environment as if the rules of politeness that your mother taught you don’t apply in digital format.

A particular example that comes to mind is an ALA article from just before the redesign. It was basic (but shouldn’t ALA also publish those), and the technique left something to be desired and yet the response to it was rabid.

A while back I saw in technorati that Joe Clark had linked to an article I had written on accessibility. I adore his writing style and have a lot of respect for his work, and yet my first thought was “Oh jesus, I’ve been FLAMED”.

Maybe this speaks more to do with my timidity than my gender, but I suspect that if you guys were a little more respectful you might have a few more women around. (Not such a bad thing, right?) So, Eric, perhaps you are asking the wrong question. I’m not a proponent of lowering the skill level for diversity’s sake, but is it possible that there are CSS Goddesses on the A-list in terms of technical skill, speaking ability, and vision who simply aren’t on the radar of the web development community?

Pourquoi des sites au design accessible ?

Traduction de l’article Why design accessible web sites?

Introduction

Un site accessibles et un site inaccessibles peuvent paraître exactement les mêmes pour un utilisateur qui n’est pas handicapé. Il peut alors être difficile de comprendre les raisons de tout ce remue-ménage. Pourquoi est-il aussi important de tenir compte de cette accessibilité lorsqu’on conçoit et lorsqu’on met en forme des pages Internet ?

  1. Premièrement, la société dont nous faisons tous parti a décidé que chaque individu doit avoir droit à un accès et à des chances égales même s’il est handicapé. Dans ce but, le gouvernement a créé la « loi pour l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées » (http://www.senat.fr/leg/pjl03-183.html)
  2. Deuxièmement, les moteurs de recherche comme Google effectuent plus de 150 millions de recherches par jour et les programmes qu’ils utilisent pour collecter les informations à propos d’un site distinguent ce qu’un visiteur aveugle pourrait voir. Donc si vous avez un site qui est considéré comme vide pour des visiteurs non-voyants, il l’est également pour tous ceux qui utilisent Google pour rechercher des produits et des services.
  3. Troisièmement, les sites qui ont utilisé standard web vont fonctionner sur les nouveaux et les futurs appareils/systèmes (comme l’accès au web via un téléphone portable ou un PDA). Cela évite d’avoir à remettre en forme votre site chaque fois qu’un nouvel appareil ou qu’un nouveau navigateur sort.

Alors que deux sites peuvent sembler identiques à vos yeux, ils peuvent être construits de manière radicalement différente. L’architecture d’un page web, quand elle est utilisée correctement, est ce qui fournit aux visiteurs déficients une utilisation très différente, adaptée à leurs besoins.

Remarque : Aucun article bref ne peut expliquer l’aménagement ou l’accessibilité en rapport avec la « loi pour l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées » dans son intégralité. La lecture la plus conseillée est incluse dans Les Ressources Techniques.

Un exemple

L’accessibilité du web est particulièrement difficile à déterminer car, contrairement aux briques visibles sur la façade d’une boutique, on ne peut pas voir la rampe d’accès ou l’ascenseur prévu pour les fauteuils roulants sur un site web. Néanmoins, il existe des moyens pour mieux comprendre ce qu’un visiteur handicapé perçoit en naviguant sur votre site web.

Un exemple, donné par Jeffery Zeldman dans son livre Designing With Web Standards : The Gilmore est un très beau site et il est véritablement le fruit d’un investissement considérable.

Le site avec images est tres beau

Cependant, lorsqu’on le regarde sans les images, pour simuler l’expérience d’un visiteur non-voyant (ou de quelqu’un qui chercherait avec Google), le site est pratiquement vide.

le meme site sans images est vide

Comme vous pouvez le voir, la navigation a complètement disparu et tout le contenu, mis à part l’adresse, a été perdu.

Ajouter du texte au code du site (qui est invisible pour la plupart des visiteurs, mais qui permet aux utilisateurs non-voyants de naviguer) est l’une des mesures les plus essentielles que l’on peut adopter pour favoriser l’accessibilité.

The Gilmore utilise également des images à la place de texte pour certains des mots de sa page. Lorsqu’on grossit le texte, on peut simuler ce que voit une personne qui utilise une loupe d’écran.

Comme vous pouvez le voir, lorsque les images sont utilisées à la place d’un texte, le résultat est flou et donc d’aucun recours. Quand du texte est utilisé pour l’ensemble du site, cela reste clair et lisible –peu importe le pourcentage de grossissement.

Résultat d’images utilisées à la place d’un texte :
Images utilisées en tant que texte texte simple
Images utilisées en tant que texte texte simple

Plus de remarques concernant l’accessibilité :

The Gilmore fournit deux exemples démontrant comment un site web peut être inaccessible pour les malvoyants. Les autres conseils d’accessibilité sont :

  • Des instructions uniquement sonores/audio laissent l’utilisateur malentendant dans l’interrogation de ce qu’il manque.
  • Des sites affichant des prix de vente en rouge ne permettent pas aux visiteurs qui ne distinguent pas les couleurs de se rendre compte des offres promotionnelles.
  • Des sites dont l’organisation repose sur des tableaux peuvent laisser le visiteur désemparé, bloqué dans une partie du site, l’empêchant ainsi d’accéder à d’autres pages -en particulier quand nombre de tableaux sont eux-mêmes insérés dans d’autres tableaux.

Comment réaliser cet aménagement :

  1. Standardiser son site. Il est plus facile de concevoir un site accessible lorsqu’il répond aux standards de l’industrie.
  2. Veiller à ce que votre page réponde aux directives de la « loi pour l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées »
  3. Prévoir. L’aménagement de votre site, comme toute chose, coûte beaucoup plus cher lorsque vous l’incluez dès l’élaboration plutôt que d’essayer de l’intégrer lorsque celle-ci est achevée.
  4. Choisir le bon éditeur HTML. Le choix de l’éditeur est extrêmement important lorsqu’on conçoit l’accessibilité aux handicapés. Certains éditeurs prennent en charge l’écriture de pages accessibles et standardisées, alors que d’autres requièrent un codage à la main fastidieux ou des extensions à coûts élevés chargées de générer ce code. Pour plus d’informations : WYSIWYG Editor Accessibility Test Results (anglais)
  5. L’aménagement est un continuum et chaque étape que vous franchissez dans la bonne direction augmente la valeur de votre site. Vous n’avez pas besoin d’être parfait pour être meilleur.

Ressources Techniques (anglais)

Plus d’informations

Pour plus d’information, veuillez contacter nicole A stubbornella POINT org.

L’accessibilité pour les rédacteurs : les manuels de logiciels

J’ai finalement publié cette traduction de mon article de décembre 2004 sur l’accessibilité.

L’une des améliorations les plus importantes pouvant être réalisée pour l’accessibilité d’un site est une tâche qui échappera souvent aux rédacteurs. Ajouter du texte pour décrire des images permet aux non-voyants et aux déficients visuels d’accéder au contenu de votre page, mais écrire n’est pas forcément quelque chose d’inné. Les conseils énoncés ici vous aideront à débuter et à éviter les erreurs fréquentes.

Si le logiciel sur lequel vous êtes en train d’écrire n’est pas encore accessible, il peut être utile de considérer les difficultés de parents non-voyants essayant d’aider leur enfant qui ne l’est pas. Ou un non-voyant et son épouse qui, elle, voit parfaitement bien, apprenant ensemble à se servir d’un logiciel d’impôts. Les gens auraient tendance à penser qu’un site qui vend des télévisions n’a pas besoin d’être accessible puisque les non-voyants ne peuvent pas la regarder. Pourtant il est tout de même possible qu’ils veuillent en acheter une pour quelqu’un de leur famille ou pour un ami. En effet, même si l’application en elle-même n’est pas ou ne peut pas être conçue de manière accessible, le manuel d’utilisation, quant à lui, pourrait et devrait l’être. Cependant, dans la mesure où le logiciel peut être manipulé par un visiteur handicapé, de longues descriptions devraient décrire et expliquer comment un utilisateur non-voyant peut utiliser le logiciel.

Il existe trois options pour ajouter du texte aux images :

  1. Un texte alternatif – la caractéristique la plus simple et la plus importante à ajouter pour une accessibilité supplémentaire.
    L’information essentielle est incluse dans la description alternative. Elle est spécifiée par l’attribut alt=”[tapez l'information essentielle ici]”
  2. Un titre – utilisé pour apporter un plus à vos descriptions.
    Vous pouvez être plus créatif avec le titre. Il est déterminé par l’attribut title=”[entrez ici une information complémentaire plus longue et plus créative]”

  3. Une longue description – avec des images complexes comme les screen shots (capture d’écran) ou les images qui véhiculent de nombreuses significations chez le spectateur, on utilise une longue description.
    Elle est déterminée par l’utilisation de l’attribut longdesc=”[entrez ici l'url d'une longue description]”

Texte alternatif

Pink Water lillies and blue pads

Vous avez probablement déjà remarqué que Macromedia Contribute vous incite à utiliser du texte alternatif quand vous insérez des images, mais peut-être n’êtes vous pas sûr à 100% de la manière dont le texte approprié devrait être rédigé.

Le texte alternatif doit être utilisé pour décrire ce qu’est, ce que représente ou ce que fait une chose. Par exemple, cette photo des fleurs pourrait correspondre au texte alternatif “fleurs violet sur le lac leman”. Un texte alternatif doit être le résumé en quelques mots de ce qu’est la photo.

La réglementation indiquée dans la loi pour l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées exige que “tout type d’information sous forme numérique” doit être accessible par tous, “quels que soient le moyen d’accès, les contenus et le mode de consultation”. Donc ce texte doit être l’équivalent de ce qu’une personne non déficiente verrait, mais il ne doit pas être trop long, ni trop vague. La difficulté est de trouver l’équilibre entre exactitude et brièveté.

Le texte alternatif ne doit jamais dépasser les 1024 caractères. En général, il ne doit être composé que de quelques mots. Il est important de garder en tête que tout ce qui est sur une page doit pouvoir être lu à haute voix par quelqu’un qui ne peut pas voir l’écran.

Peut-être vous êtes vous demandé “que fait une chose”, comment une image peut “faire” quelque chose? Parfois certaines images ont une fonction précise comme servir de lien vers une autre page. Dans ce cas, le texte alternatif doit prévenir l’utilisateur de ce qui arrivera s’il suit le lien. Par exemple si le lien pointe vers une page concernant les voyages en Haute Savoie, le texte alternatif devra être “Choissisez votre voyage en Haute Savoie” ou quelque chose de similaire.

Les erreurs fréquentes:

dans votre texte alternatif il ne faut jamais utiliser l’expression “image de” ou “lien vers”. Le screen reader (programme de lecture d’écran) aura déjà informé l’utilisateur que le texte se rapporte à un lien ou une photo. Il est facile d’imaginer l’exaspération de l’utilisateur qui entendrait deux fois la même chose à chaque fois qu’il serait confronté à une image.

Le texte alternatif doit absolument être utilisé pour toutes les images, et ce à chaque fois. Néanmoins, il existe des cas où une image n’a pas vraiment de fonction. Par exemple, des images utilisées uniquement pour l’agencement de la page (layout) comme les cadres, les règles, les textures, les angles arrondis ou encore les logos. Dans ce cas, vous devez utilisez l’attribut alt=”” . Cela fera comprendre au screen reader qu’il ne faut pas tenir compte de l’image. Si vous ne mentionnez pas cet attribut pour les images du layout, l’utilisateur entendra à n’en plus finir IMAGE IMAGE IMAGE, et il se demandera ce qui lui échappe.

Tour Button Le texte alternatif devrait toujours être envisagé dans le contexte du document dont il fait partie. Par exemple, les manuels explicatifs de logiciels présentent souvent des boutons et des descriptions de ces boutons. Dans ce programme, le texte alternatif pourrait être “faire une visite” ou “visite du lecteur”, mais dans le cas d’un guide à propos du logiciel, le texte alternatif devrait être “bouton pour faire une visite” ou quelque chose de semblable. Le plus important est que l’utilisateur soit capable d’identifier le bouton et d’appliquer cette information pour utiliser le logiciel.

Pour les screen shots, où on insèrera également une longue description, le texte alternatif devra être “screen shot de la bibliothèque – longue description”. Cela permettra à l’utilisateur de savoir que l’image est à la fois un screen shot de la bibliothèque et un lien vers sa longue description.

Longue description

Ces descriptions sont des pages web à part, utilisées pour décrire des images complexes comme les screen shots qui ne peuvent être complètement résumés par leur texte alternatif ou par leur contexte.

Title Page Screenshot - long description

Pour faciliter leur identification, Joe Clark suggère de garder les longues descriptions dans le même répertoire et de les nommer comme l’image qu’elles décrivent, en ajoutant -LD à la fin du nom du fichier. Par exemple, l’image “TitrePage.png” aurait une page de description nommée “TitrePage-LD.html“.

Ces descriptions sont de simples textes qui utilisent des mots pour décrire ce que l’utilisateur ne peut pas voir. Le titre devrait être “Longue description pour TitrePage.png”

Screen shots:

Suivez ces indications lorsque vous rédigez des descriptions de screen shots.

Vous pouvez observer un exemple de description en cliquant sur l’image du dessus.

  • Décrivez ce que vous voyez.
  • Imaginez que vous êtes un professeur non-voyant qui essaie d’expliquer à un de ses élèves comment se servir de cet écran particulier. Qu’a-t-il besoin de savoir? Expliquez à l’élève comment trouver les différentes fonctions en utilisant seulement des mots.
  • Travaillez en partant du coin supérieur gauche jusqu’au coin inférieur droit, et décrivez les choses dans l’ordre. (puisque le français se lit de gauche à droite et puisque nous écrivons en français)
  • Lorsque certaines parties du screen shot se présentent sous forme de tableaux ou de listes, décrivez les comme telles.
  • Pour rendre la lecture de vos descriptions plus facile, utilisez des groupements de mots comme des colonnes, des lignes, des barres de navigation etc., pour séparer les différentes parties relatives au screen shot.
  • Le langage utilisé doit correspondre à l’image. Des screen shots administratifs doivent être décrits avec un langage fonctionnel, alors qu’un screen shot amusant doit être décrit avec plus de détails.
  • Rapportez vous aux couleurs, aux formes ou à d’autres moyens de présentation qui pourraient aider un professeur ou un parent non-voyant pour expliquer à un élève ce qu’il faut chercher.
  • Evitez d’écrire plusieurs fois la même chose. Si vous avez déjà rédigé une longue description pour la bibliothèque et qu’ensuite vous écrivez une autre description pour un élément en particulier à l’intérieur de la bibliothèque, il est suffisant d’utiliser une expression comme “dans la partie supérieure, à l’intérieur d’une barre jaune, on retrouve des éléments de navigation qui sont présents dans toute la bibliothèque”. Il suffit ensuite de mettre le mot ” bibliothèque” en lien vers la description plus générale de la bibliothèque.
  • La longue description est utilisée pour rendre l’image utile dans son contexte. S’il est absolument nécessaire de rendre la description plus intelligible, vous pouvez éventuellement inclure des informations qui sont déjà citées dans le texte du document, mais en général cela n’est pas indispensable.

Images générales

A lire : les conseils de Joe Clarks sur comment écrire une longue description pour une photo (anglais).
Cet article aborde l’écriture des descriptions pour les screen shots. Sa façon d’aborder le sujet peut vous aider à comprendre quelles informations sont à inclure ou non.

A List Apart

A List Apart has launched a new site design. They had a couple seconds of style-less content, and then boom, the new site was born. At first glance it is a 1000px wide, four column design based on ruby on rails. Take a look.

New design. New structure. New server. New publishing system powered by Ruby on Rails. As the dog days of summer draw to a close, we present A List Apart 4.0.