Janvier et début d'année oblige, les bonnes résolutions sont de saison.
Nous vous proposons donc d'en prendre une pour votre forum en orientant le concours du mois de janvier sur la sensibilisation au handicap.

En effet, à priori le forum RPG est une plateforme équitable: accessible à tous ceux munis d'un ordinateur et d'une connexion internet, il ne fait pas de discrimination en fonction du sexe, de l'apparence physique, de la couleur, religion ou orientation sexuelle. Il est même accessible aux personnes souffrant d'un handicap moteur, aux sourds et aux muets... Et, contrairement à ce que beaucoup pensent, il peut aussi l'être aux personnes mal ou non-voyantes, sous peine de prendre quelques bons réflexes!

Ce sont ces réflexes qui seront l'objet du concours de janvier: jusqu'à la fin du mois, nous dispenserons deux astuces simples par semaine à mettre en place sur son forum et qui permettront de le rendre plus accessible aux personnes souffrant de déficience visuelle.

Pour cela rien de plus simple: il suffit d'inscrire votre forum à la suite de ce topic et de suivre son actualité jusqu'à la fin du mois. Tifet et moi-même noteront ensuite début février les forums participants en fonction d'un barème précis pour élire celui qui le mieux réussi l'exercice

Forums participants:

- Hell's Gate
- Phantasmagoria
- Domaine Mackaelah
- La cité Brûleciel


Pour ceux qui auraient envie de prendre de l'avance, vous pouvez lire l'article complet sur le sujet, en attendant voici la première astuce de la semaine:

Astuce n°1: Les couleurs

Difficulté : Certains malvoyants ne voient pas bien les contrastes ou ne distinguent pas certaines couleurs.Les lignes brailles et synthèses vocale ne lisent pas les couleurs.
Modification : Choisissez des couleurs avec de bons contrastes.La page doit pouvoir être lue sans couleur. (Source: http://www.blindlife.ch)

Astuce n°2: Les textes défilants

Difficulté: Les malvoyants ont de la peine à s'adapter à la vitesse, au clignotement, ou autre.
Solution: Assurez-vous que les fonctions permettant de faire bouger, clignoter, défiler ou mettre à jour automatiquement des objets ou des pages puissent être mises en pause ou stoppées.

Astuce n°3: Utiliser le CSS - Eviter le flash et php

Difficulté: un afficheur braille ou un synthétiseur vocal n'est pas sensible aux effets esthétiques et sera incapable de traduire les mises en forme codées.
Solution: Utiliser au maximum le CSS pour mettre les pages en forme, car ces logiciels ont la capacité de séparer la feuille de style du contenu du site pour l'adapter au mieux. Il vaut donc mieux passer systématiquement par le CSS pour la mise en page et ne pas le faire directement dans les lignes de code, et éviter au maximum les effets flash et php, qui ne sont pas traduisibles.

Astuce n°4: Soigner ses images (en dur)

Sachant que j'appelle "en dur" les images non cliquables, qui servent juste de décor.
Difficulté: Est-il besoin de le préciser? ^^ Les logiciels pour les malvoyants ne savent pas convertir les pixels, et donc ne peuvent pas interpréter les images.
Solution:Il est souvent suffisant d'utiliser l'attribut «alt» de l'élément «IMG», qui indique avec une brève description de l'image.

Code:

<IMG SRC="NomDeLImage.jpg" ALT="Description de l'image visible par les moyens auxiliaires">

Il est bon de noter que le texte présenté sur des images ne sera pas lu, donc il faudra le retranscrire également, et éviter de manière générale d'utiliser cette technique, préférez utiliser le CSS qui permettra une large variété de mise en forme tout en restant facilement lisible (et éditable par la suite, donc aussi pratique pour l'admin )

Astuce 5 : Soigner ses images cliquables

Problème: Les logiciels utilisés doivent surmonter une double difficulté: comprendre ce que représente l'image, ET la destination vers laquelle elle nous mène.
Solution: Il faut attribuer une balise explicative pour chaque partie: l'image (attribut alt comme pour l'astuce 4) ET le lien (attribut name ou alt qui fonctionne aussi)

Code:

<A HREF="http://www.nom_destination.ch" NAME="Nom du lien"><IMG SRC="NomDeLImage.jpg" ALT="Description de l'image visible par les moyens auxiliaires"></a>

Annexe pour les images-maps:
Le principe est le même vu qu'il s'agit d'une image multi-cliquable:

Code:

<MAP NAME="NomDuMap">
<AREA SHAPE="CIRCLE" COORDS="506,241,72" HREF="http://www.nom_destination.ch" ALT="Description du lien">
<AREA SHAPE="RECT" COORDS="80,80,217,385" HREF=" http:// www.nom_destination.ch " ALT="Description du lien">
</MAP>
<IMG SRC="NomDeLImage.jpg" ALT="Description de l'image" USEMAP="#NomDuMap">

Ouiiiiiii moi aussi je veux jouer
/sbaf/

Cela dit je vais avoir du mal, y a que les images qui sont bien annotées chez moi. Ca va être long de tout changer. :O
Par contre j'ai une question : qu'entendez-vous tous par "des couleurs à bon contraste" ? C'est à dire du foncé sur du clair ou inversement, quelque chose qui se voit bien ?


/sent qu'elle est mal barrée /

Exactement! Par exemple, le meilleur contraste est le noir sur le blanc ou inversement ^^

Le but n'est pas non plus de TOUT modifier sur le forum, mais d'améliorer ce qui peut l'être, tout en gardant les conseils qui n'ont pas pu être mis en œuvre à l'esprit pour plus tard ou un autre site!

J'inscris donc ton forum, pour le moment nous sommes deux en lice

Oui, le noir et le blanc... C'est ce que je disais, je suis mal barrée

D'ailleurs, je trouve que ce concours est un très bonne idée, voire une très bonne chose, parce que même si on ne fait pas tout le forum, qui de toute manière ne pourra jamais être optimisé à 100%, participer à ce concours nous oblige (en quelque sorte) à le faire, et c'est toujours un plus.

Je trouve le concept intéressant aussi, et c'est bien pour ça que la thématique est mise à l'honneur ce mois-ci ^^

Je vais en profiter pour donner la suite:

Astuce n°2: Les textes défilants

Difficulté: Les malvoyants ont de la peine à s'adapter à la vitesse, au clignotement, ou autre.
Solution: Assurez-vous que les fonctions permettant de faire bouger, clignoter, défiler ou mettre à jour automatiquement des objets ou des pages puissent être mises en pause ou stoppées.

Je ne participe pas, mais je suis curieuse de connaître les astuces

Ayant deux amies non voyante, je trouve l'idée vraiment géniale. Je vais songer pour mon domaine à savoir si je participe ou pas. Mais cela pourrait être une idée. Le formulaire il est où exactement ?

Il n'y a pas de formulaire ^^ Il suffit de dire quel forum tu souhaites inscrire et c'est bon

J'ai seulement un forum référencer ici alors le choix ne sera pas très complexe lol

http://mackaelah.forum-canada.com/

Voilà

Tu es rajoutée ^_^
Allez les autres

Astuce n°3: Utiliser le CSS - Eviter le flash et php

Difficulté: un afficheur braille ou un synthétiseur vocal n'est pas sensible aux effets esthétiques et sera incapable de traduire les mises en forme codées.
Solution: Utiliser au maximum le CSS pour mettre les pages en forme, car ces logiciels ont la capacité de séparer la feuille de style du contenu du site pour l'adapter au mieux. Il vaut donc mieux passer systématiquement par le CSS pour la mise en page et ne pas le faire directement dans les lignes de code, et éviter au maximum les effets flash et php, qui ne sont pas traduisibles.

Merci pour les infos. Pourtant, mon amie aveugle parvenait très bien à se repérer sur le forum (à l'exception de la PA bien entendu, car celle-ci est une image codé). Mais c'est bien d'avoir un autre avis.

N'étant pas aveugle moi-même, je suis les conseils de sites spécialisés sur la question, auxquels je suis obligée de faire "aveuglément" confiance
Ceci dit, si ton amie se repérait bien c'était que peut-être tu avais déjà fais ce qu'il fallait sans le savoir, ou bien qu'elle arrivait à naviguer mais sans que ce soit vraiment optimisé pour elle ^^

Huuum c'est bien c'est ce que je fais.

D'ailleurs, pour la parenthèse, les PA codées par image, je trouve ça chiant : s'il y a une faute, faut refaire l'image... ^^ Un texte par dessus une image de fond c'est tellement plus simple.

J'ai une question : comment ferez-vous pour comparer les forums ? Si c'est un concours c'est qu'il y aura forcément des critères, donc des jugements. Il faudra vous donner des bouts de code, ou vous irez voir vous-mêmes ?

Grâce à Firefox on a accès à l'intégralité du code des forums, donc on fera les notations à partir de ces infos et d'un barème précis dont vous aurez le détail à la fin

D'accord. ^^ Merci pour la réponse.

Astuce n°4: Soigner ses images (en dur)

Sachant que j'appelle "en dur" les images non cliquables, qui servent juste de décor.
Difficulté: Est-il besoin de le préciser? ^^ Les logiciels pour les malvoyants ne savent pas convertir les pixels, et donc ne peuvent pas interpréter les images.
Solution:Il est souvent suffisant d'utiliser l'attribut «alt» de l'élément «IMG», qui indique avec une brève description de l'image.

Code:

<IMG SRC="NomDeLImage.jpg" ALT="Description de l'image visible par les moyen auxiliaire">

Il est bon de noter que le texte présenté sur des images ne sera pas lu, donc il faudra le retranscrire également, et éviter de manière générale d'utiliser cette technique, préférez utiliser le CSS qui permettra une large variété de mise en forme tout en restant facilement lisible (et éditable par la suite, donc aussi pratique pour l'admin )

Oh bah je veux bien participer, je trouve ça assez génial

Pour l'instant je crois que je suis dans le coup. Il faut juste que j'aille ajouter des ALT un peu partout = )

Chouette un participant de plus ^^
Je te rajoute dans la liste dans le premier post

Astuce 5 : Soigner ses images cliquables

Problème: Les logiciels utilisés doivent surmonter une double difficulté: comprendre ce que représente l'image, ET la destination vers laquelle elle nous mène.
Solution: Il faut attribuer une balise explicative pour chaque partie: l'image (attribut alt comme pour l'astuce 4) ET le lien (attribut name ou alt qui fonctionne aussi)

Code:

<A HREF="http://www.nom_destination.ch" NAME="Nom du lien"><IMG SRC="NomDeLImage.jpg" ALT="Description de l'image visible par les moyen auxiliaire"></a>

Annexe pour les images-maps:
Le principe est le même vu qu'il s'agit d'une image multi-cliquable:

Code:

<MAP NAME="NomDuMap">
<AREA SHAPE="CIRCLE" COORDS="506,241,72" HREF="http://www.nom_destination.ch" ALT="Description du lien">
<AREA SHAPE="RECT" COORDS="80,80,217,385" HREF=" http:// www.nom_destination.ch " ALT="Description du lien">
</MAP>
<IMG SRC="NomDeLImage.jpg" ALT="Description de l'image" USEMAP="#NomDuMap">

Voici donc la dernière astuce pour ce concours, vous avez jusqu'à la fin du mois pour travailler votre copie

Whaaaa, ou comment rendre dingue XD

Jvais essayer mais je promet rien >....>

Mode dénonciation:

LE PETIT DRAPEAU BIENVENUE DE L'IMMAGINARIUM N'A PAS SON ALT!

Et pourtant si, il y est! A moins qu'on ne parle pas du même drapeau

Wouahhhh j'ai tant de choses à changer. /se suicide/

Ah, bah ça doit pas marcher sous Opéra alors Hell!

Mais en même temps je crois que tu n'as pas parlé de "TITLE" qui remplace "ALT" pour certains navigateurs

En effet, je n'ai parlé que de alt et de name, qui étaient les seules balises préconisées dans les articles dont je me suis servie pour me documenter, mais normalement ces balises là devraient fonctionner pour tous les navigateurs non? Ce ne sont pas des éléments spécifiques à tel ou tel navigateur ^^