31 août 2025, 14:31
 FAQ  FaQ collaborative : l'accessibilité sur PFR
INTRODUCTION

Ce sujet de Foire aux Questions recense les diverses astuces afin de permettre à tous de jouer accessible sur PFR. Chacun est libre d'y présenter ses trucs et astuces, d'y poser ces questions, ou même d'y répondre !

Nous avons fait de cette FaQ une version collaborative afin que toute la communauté puisse s'entraider, et ce parce que les administrateurs et modérateurs ne sont pas forcément les mieux placés pour conseiller sur l'accessibilité (s'ils ne sont pas eux-mêmes concernés). Ainsi, qui de mieux que vous pour aider et sensibiliser à vos propres besoins en la matière ?

Attention !
Les questions et leurs réponses sont abordées d'un point de vue technique et spécifique aux utilisateurs qui rencontrent des problèmes d'accessibilité. Les solutions que vous trouverez ici s'appuient sur un vocabulaire et des commandes qui se veulent adaptés aux outils spécifiques de l'accessibilité (par exemple : les commandes de lecteurs d'écran). Elles ne correspondent pas à tous les utilisateurs, à tous les problèmes ou à tous les outils.

Cette rubrique se veut une assistance, ouverte, en évolution constante et en développement permanent. Voilà aussi pourquoi, il vous est possible d'y participer en apportant vos propres astuces, expériences et interrogations.

SOMMAIRE

FaQ rédigée en collaboration avec Calianor Daenarya.

Administratrice du monde adulte et être humain #KENS
--------
Tutoyons-nous ! | Discord : norastarks | Co-fondatrice de l'UDS
Présence normale

31 août 2025, 14:31
 FAQ  FaQ collaborative : l'accessibilité sur PFR
LES ASTUCES DE LA COMMUNAUTÉ

  1. Sache avant tout que bon nombre de questions que tu peux te poser sont communes à tous les utilisateurs. N'hésites pas à consulter l'aide et les FAQ générales du site, beaucoup de réponses s'y trouvent déjà !

    Quelques liens : Forum des FaQ diverses, FaQ sur l'utilisation des PNJ, FaQ sur la scolarité à Poudlard, FaQ sur les études et formations après Poudlard, Interrogations sur le contexte du site...
  2. Penses au clic droit (ou sa touche clavier équivalente selon ton lecteur) ou encore la combinaison shift+F10, utile pour faire apparaître certains sous-menus dans le site.
  3. Les descriptions d'images : certaines images employées sur le site peuvent être facilement décrites par les lecteurs d'écran. Il suffit de bien placer ton curseur dessus ou d'afficher en plein écran.
  4. Le BBcode : tu peux l'intégrer dans tes posts grâce à certaines commandes au clavier ou en tapant directement les balises si tu les mémorises. Elles seront détaillés dans le post suivant.

La liste des astuces sera susceptible d'être fournie au fil du temps.
Tout modérateur peut prendre en charge cette mise à jour.

[Retour au sommaire]

Administratrice du monde adulte et être humain #KENS
--------
Tutoyons-nous ! | Discord : norastarks | Co-fondatrice de l'UDS
Présence normale

31 août 2025, 14:34
 FAQ  FaQ collaborative : l'accessibilité sur PFR
LES QUESTIONS ET RÉPONSES

Je suis un peu perdu avec le BBcode. Comment m'y retrouver ?
Si tu es un utilisateur déficient visuel, davantage habitué aux commandes clavier qu'à la souris, tu découvriras que le BBcode te permets une mise en forme de tes posts à partir de ton clavier. Tu peux bien sûr utiliser les boutons présent au-dessus du champ de saisie. Tu peux aussi taper directement dans tes messages les commandes activant le BBcode.

En voici quelques-unes qui devraient t'être utiles :
  • Pour du texte en gras, tape

    Code : Tout sélectionner

    [b]ton texte en gras[/b]
  • Pour du texte en italique, tape

    Code : Tout sélectionner

    [i]ton texte en italique[/i]
  • Pour du texte souligné, tape

    Code : Tout sélectionner

    [u]ton texte à mettre en souligné[/u]
  • Pour faire une citation, tape

    Code : Tout sélectionner

    [quote]ta citation[/quote]
  • Pour mentionner quelqu'un, tape

    Code : Tout sélectionner

    [mention]nom du joueur complet et sans faute[/mention]
  • Pour cacher du texte, tape

    Code : Tout sélectionner

    [reducio]texte à cacher[/reducio]

Et si tu veux plutôt cliquer sur les boutons, sans devoir apprendre ces balises, voici la liste de ceux-ci dans l'ordre d'apparition :
Gras - italique - souligné - barré - indice - exposant - couleur - taille de texte - aligné à gauche - centré - aligné à droite - justifié - alinéa - lien - hashtag/référence - image - vidéo - musique - liste avec tirets - liste avec numéros - tableau - revelio - reducio - citation - mention - lancé de dé - emojis
Remarque :
Tu peux aussi trouver sur le site une rubrique t'expliquant le BBcode. Elle s'adresse à tous les utilisateurs, mais comme énoncé précédemment, toi aussi tu peux y trouver de précieuses informations : Mettre en forme ses messages avec BBcode.

Tu peux aussi trouver ailleurs sur le web des explications détaillées sur les balises du BBcode et son fonctionnement. N'hésite pas à les consulter.

Quand je crée un nouveau sujet, après avoir indiqué le titre et rédigé le post, j'ai une série d'options parmi lesquelles cocher mais dont la dénomination n'apparaît pas.
En effet, il y a une liste d'options possibles en bas de la page lors de la création d'un nouveau sujet. Ces cases à cocher sont des icônes qui définissent le type de sujet.

Les voici, reprises dans l'ordre d'apparition et présentées sous cette forme : numéro de la case à cocher = fonction (dessin de l'icône).
  1. Case 1 = discussions (symbole bulle de texte)
  2. Case 2 = RPG (symbole plume)
  3. Case 3 = flood (symbole double bulles de texte)
  4. Case 4 = jeux (symbole pièce de puzzle)
  5. Case 5 = Quidditch (symbole balais)
  6. Case 6 = duels (symbole baguette magique)
  7. Case 7 = aventures (symbole boussole)
  8. Case 8 = concours (symbole trophée)
  9. Case 9 = information (symbole i encerclé)
  10. Case 10 = personnage (symbole carte d'identité)
  11. Case 11 = bug (symbole araignée)

Comment insérer correctement dans mon message/mon post un lien vers un autre post ?
  1. Place-toi au début du post précis dont tu veux communiquer le lien. Tu y trouves le nom de son auteur, mais aussi le lien pour "envoyer un message privé". Clique sur ce lien.
  2. Ta volière s'ouvre, et dans le champ du message, tu trouves tout au début le lien complet du post en question (indice : il commence par [url et finit par /url]).
  3. Sélectionne-le, copie et colle dans le champ de texte de ton nouveau post.

Remarque :
Ce conseil fait partie des options proposées dans la FAQ générale du site :
générer un lien direct vers un post. Cette méthode spécifique est reprise ici car particulièrement adaptée pour une utilisation avec un lecteur d'écran.

Je n'arrive pas à trouver les options du compte comme la signature ou les préférences, même en suivant les conseils de la FAQ du site. Que dois-je faire ?
  1. Quand tu cliques sur le bouton "compte", une liste apparaît, dans laquelle tu retrouves des liens tels que "profil", "compte", "bourse", etc.
  2. Clique ensuite sur le lien "compte". Sur l'écran, tu devrais découvrir un champ de formulaire relatif à ton mail et ton mot de passe.
  3. Au-dessus de ces informations, tu devrais trouver le mot "compte" à nouveau. Il n'apparaît ni comme un bouton, ni comme un lien. Toutefois, en effectuant un clic droit (ou la commande shift+F10) une fois ton curseur positionné sur ce mot, un nouveau menu se déroule, affichant des possibilités telles que signature et préférences.

Certaines images sont décrites d'office par mon lecteur et d'autre pas. Que faire ?
Selon l'image en question et selon ton lecteur d'écran, la description automatique fonctionnera différemment.

Avec le lecteur Jaws, tu peux te positionner sur l'image et lancer la commande au clavier insert+espace+l+c

Avec le Narrateur de Microsoft, lorsque le focus est positionné sur une image, la commande Narrateur+Ctrl+D fournit une description de l'image.

Par ailleurs, l'affichage en plein écran peut aussi améliorer le travail de description des lecteurs d'écran.

On me suggère d'inclure des couleurs dans mes écrits, mais comment faire sans les voir ?
Grâce au BBcode, tu peux incorporer des couleurs de ton choix dans ton texte avec ton clavier :

Code : Tout sélectionner

[color=#code de la couleur]le texte à colorer[/color]

Si tu utilise un code html (codes couleurs universels, que tu peux retrouver sur le web), n'oublie pas le # sans quoi la couleur ne prend pas. Il est également possible d'utiliser les couleurs de base en utilisant leur nom anglais. Voici quelques couleurs de bases, présentées sous cette forme : couleur = #code html = nom anglais (à utiliser dans #).
  • Blanc = #FFFFFF = white
  • Rouge = #FF0000 = darkred
  • Violet = #61177C = purple
  • Bleu = #0000FF = blue
  • Bleu foncé = #00008B = darkblue
  • Gris = #808080 = grey
  • Jaune = #FFFF00 = yellow
  • Jaune d'or = #D29D00 = darkgoldenrod
  • Rose = #D357FE = mediumorchid
  • Marron = #AA7942 = sienna
  • Orange = #FFA500 = chocolate
  • Vert = #008000 = green

Attention : en dehors de ces couleurs de base, toutes ne sont pas lisibles. Pensez à vérifier le contraste entre la couleur de la page du forum et la couleur de police utilisée.

Pourquoi certaines images ne sont-elles pas signalées par les lecteurs d'écran, alors qu'il est évident que le post en contient ?
C'est vrai, si les lecteurs aujourd'hui détectent de plus en plus d'images et en livrent une description, au moins sommaire, il arrive que certaines d'entre elles échappent aux radars. Cela peut être lié à un paramétrage de l'image pour en ajuster la taille, soit pour la rendre plus visible, soit pour éviter les distorsions quand on passe d'un écran d'ordinateur à un écran de téléphone, soit pour n'importe quelle autre bonne raison. Si pouvoir accéder à cette image est important pour vous, voici une astuce pour en obtenir un aperçu lisible par les lecteurs.
  1. Vous vous trouvez sur le post contenant l'image supposée, bien que le lecteur n'indique rien. Cliquez sur "envoyer un message privé".
  2. Dans le champ du destinataire, indiquez votre propre nom. Attention : n'oubliez pas de supprimer l'auteur du post en tant que destinataire, le but n'est pas de l'inonder de hiboux inutiles.
  3. Dans le corps du message, vous verrez alors la localisation de l'image. Par exemple, vous pourrez voir ceci :

    Code : Tout sélectionner

    [image=100x100]identification du fichier.png[/image]
  4. Remplacez

    Code : Tout sélectionner

    [image=100x100]
    par

    Code : Tout sélectionner

    [img]
    De même, remplacez

    Code : Tout sélectionner

    [/image]
    à la fin par

    Code : Tout sélectionner

    [/img]
    N'oubliez pas de le faire à la fin du code de l'image ou ça ne fonctionnera pas.
  5. Envoyez-vous le hibou ainsi modifié.
  6. Dans votre volière, arrive un hibou qui contient le post avec l'image en mode détectable pour le lecteur d'écran. Il est alors possible d'en obtenir une description, selon les capacités du lecteur, ou de la soumettre à Chatgpt qui parfois sera en mesure de la décrire.
Ce n'est pas la manipulation la plus simple à exécuter, mais si vous avez vraiment besoin d'une description d'image a priori non-détectée, sans autre alternative, ça peut vous tirer d'affaire.

Mon lecteur d'écran ne détecte pas la couleur utilisée par mon partenaire RP pour ses dialogues, et il ne l'a pas indiqué dans le RP. Comment faire pour rapporter les paroles de son personnage sans se tromper de couleur ?
Si jamais tu écris avec un joueur qui n'a pas précisé en début de RP le code couleur (html) utilisé pour les dialogues de son personnage, pas de panique ! Tu peux le retrouver d'une manière détournée. Si tu clique sur la commande "citation" (en haut à droite du post ciblé), tu as accès au code utilisé par la personne pour mettre en forme son post RP. Tu peux ainsi y retrouver le code couleur qu'elle a utilisé. Attention cependant à ne pas envoyer le message tel quel, où tu risquerais de poster un double de son RP !

La liste des astuces sera susceptible d'être fournie au fil du temps.
Tout modérateur peut prendre en charge cette mise à jour.

[Retour au sommaire]

Administratrice du monde adulte et être humain #KENS
--------
Tutoyons-nous ! | Discord : norastarks | Co-fondatrice de l'UDS
Présence normale

2 sept. 2025, 14:00
 FAQ  FaQ collaborative : l'accessibilité sur PFR
Salutations,

Si j’ai bien compris, on peut poster librement ici des astuces ; j’aimerais donc ouvrir le bal avec des explications sur la façon d’éviter le hors-cadre dans le cas de figure d’une illustration redimensionnée par la balise [image=largeurxhauteur], qui passe sur PC mais dépassera inévitablement sur téléphone/entravera la lecture pour les utilisateurs sur petit écran.

Pour cela, je vais prendre pour exemples des sujets de présentation d’animations récentes. J’ai trouvé notamment des images de 1024x1024 redimensionnées par la balise [image=400x400] dans un quote pour la Course dragonesque, sans quote pour le Wagon des préfets.
Plateau de course

Code : Tout sélectionner

[quote][center][image=400x400]/files/d5ae674fafa7cf8b.png[/image][/center][/quote]
Wagon

Code : Tout sélectionner

[center][image=400x400]/files/c9615a1f8704cec3.png[/image][/center]
[center][image=400x400]/files/18fea34e6ceb180f.jpg[/image][/center]
Aide à la navigation

Solution la plus basique
Solution intermédiaire
En tableau
Solution esthétique et technique I
Codes prêts à l’emploi
Format 350x350
Format 400x400
Format 450x450
Format 500x500
Format 550x550
Format 600x600
Solution esthétique et technique II

Solution la plus basique

Remplacer les balises [image=largeurxhauteur] par [img]lien[/img] (ça ne dépassera jamais mais risque de remplir toute la largeur si l’image est grande, sacrifiant les marges)
Plateau (quote)
Image
Wagon
Image

Image

Cette solution s’adapte par ailleurs aux tableaux ne contenant que des images, elle permettrait très simplement d’éviter un dépassement dans le sujet des PNJs de la coupe d’Europe en produisant des colonnes égales (même si chaque image fait 500 pixels de largeur, elles ne vont pas requérir 1500 pixels avec la balise [img]lien[/img] mais se répartir chacune un tiers de l’espace, autant sur PC que sur téléphone ; alors que la balise [image=200x200] force l’occupation d’au moins 3*200=600 pixels)
Reducio

Code : Tout sélectionner

[quote][table]
[tr]
[td][center][image=200x200]/files/21e3a4d81e2f50f7.png[/image][/center][/td]
[td][center][image=200x200]/files/cc2e0ea957744eac.png[/image][/center][/td]
[td][center][image=200x200]/files/5c5938903c560478.png[/image][/center][/td]
[/tr][tr]
[td][quote][center][size=80][i]Hussein Barre Gedi[/i]
[color=#4c514a][icon]fill-drip-s[/icon] #4c514a[/color]
Dragonologiste, Somalie[/size][/center][/quote][/td]
[td][quote][center][size=80][i]Bích Ngọc Trần Thị[/i]
[color=#690202][icon]fill-drip-s[/icon] #690202[/color]
Ancienne Dragonnière, Viêtnam[/size][/center][/quote][/td]
[td][quote][center][size=80][i]Catalina Rodríguez[/i]
[color=#926516][icon]fill-drip-s[/icon] #926516[/color]
Dragonologiste, Colombie[/size][/center][/quote][/td]
[/tr][/table][/quote]

Code : Tout sélectionner

[quote][table]
[tr]
[td][center][img]/files/21e3a4d81e2f50f7.png[/img][/center][/td]
[td][center][img]/files/cc2e0ea957744eac.png[/img][/center][/td]
[td][center][img]/files/5c5938903c560478.png[/img][/center][/td]
[/tr][/table][/quote]
Image
Image
Image
J’ai enlevé la ligne de texte pour illustrer la validité de l’astuce dans les tableaux uniquement composés d’images ; à trois colonnes avec du texte le dépassement est difficilement évitable sur les écrans très étroits, à moins de mettre sous reducio ou d’avoir un mot pas trop long par colonne (les techniques pour adapter les tableaux mixtes mélangeant texte et image sont plus complexes si l’on tient à conserver les images au format d’origine).

Reducio
Pour n’avoir qu’une colonne texte, il serait possible d’inverser la répartition 2 lignes / 3 colonnes en 3 lignes / 2 colonnes

Code : Tout sélectionner

[quote][table]
[tr][td][center][img]/files/21e3a4d81e2f50f7.png[/img][/center][/td]
[td][img]/files/28c4632316a41112.png[/img][quote][center][size=80][i]Hussein Barre Gedi[/i]
[color=#4c514a][icon]fill-drip-s[/icon] #4c514a[/color]
Dragonologiste, Somalie[/size][/center][/quote][/td][/tr]
[tr][td][center][img]/files/cc2e0ea957744eac.png[/img][/center][/td]
[td][quote][center][size=80][i]Bích Ngọc Trần Thị[/i]
[color=#690202][icon]fill-drip-s[/icon] #690202[/color]
Ancienne Dragonnière, Viêtnam[/size][/center][/quote][/td][/tr]
[tr][td][center][img]/files/5c5938903c560478.png[/img][/center][/td]
[td][quote][center][size=80][i]Catalina Rodríguez[/i]
[color=#926516][icon]fill-drip-s[/icon] #926516[/color]
Dragonologiste, Colombie[/size][/center][/quote][/td][/tr][/table][/quote]
Image
Image
Hussein Barre Gedi
#4c514a
Dragonologiste, Somalie
Image
Bích Ngọc Trần Thị
#690202
Ancienne Dragonnière, Viêtnam
Image
Catalina Rodríguez
#926516
Dragonologiste, Colombie



Solution intermédiaire

Redimensionner la largeur à 400 pixels hors du site (le rendu ne bougera pas sur PC, sur téléphone l’image remplira la largeur sans dépasser en perdant les marges, cette option baisse potentiellement la qualité visuelle, d’où un intérêt à ajouter le lien à l’image d’origine de meilleure résolution)
Plateau (quote)
Image
Wagon
Image

Image



Cette solution intermédiaire est a priori la plus facile à mettre en œuvre pour les tableaux constitués d’une colonne image face à une colonne texte ‘légère’ (format de liste, peu de mots ou syllabes par ligne, ne fonctionne pas forcément avec un long texte dense) ; permettant de reproduire le rendu initial sur PC tout en empêchant le dépassement du cadre sur téléphone. Les images d’un tableau se trouvant fortement réduites sur petit écran, il est recommandé de mettre le lien vers l’image d’origine/de bonne qualité. Voici pour exemple le code ajusté de résolutions d’une aventure récente – Tours 0 et 3 de La prison des esprits, dont le texte est hors-cadre sur téléphone.
Reducio
Code d’origine utilisant la balise de redimensionnement [image=300x300], à éviter

Code : Tout sélectionner

[quote][table]
[tr]
	[td][center][image=300x300]/files/4f1fafc73d34736e.jpg[/image][/center][/td]
	[td][quote][right][size=85][i][color=#800040]◎ Suileabhan Kohler ◎[/color][size=75] 
[color=#800040]⦿ Sortilège ➳ iv tours[/color] [/size][/right][right][size=85]

[i][color=#56699a]◎ Morgan Rosenwald ◎[/color][size=75] 
[color=#56699a]⦿ Sortilège ➳ iv tours [/color][/size][/right][right][size=85]

[i][color=#800000]◎ Reece Ingham ◎[/color][size=75] 
[color=#800000]⦿ Sortilège ➳ iv tours [/color][/size][/right][right][size=85]

[i][color=#b68623]◎ Dominic Khan ◎[/color][size=75] 
[color=#b68623]⦿ Sortilège ➳ iv tours [/color][/size][/right][/quote][/td]
[/tr]
[/table][/quote]

Code : Tout sélectionner

[quote][table]
[tr][td][center][url=/files/4f1fafc73d34736e.jpg][img]/files/015c1803e3f63afb.jpg[/img][/url][/center][/td]
[td][quote][right][size=85][i][color=#800040]◎ Suileabhan Kohler ◎[/color][size=75] 
[color=#800040]⦿ Sortilège ➳ iv tours[/color] [/size][/right][right][size=85]

[i][color=#56699a]◎ Morgan Rosenwald ◎[/color][size=75] 
[color=#56699a]⦿ Sortilège ➳ iv tours [/color][/size][/right][right][size=85]

[i][color=#800000]◎ Reece Ingham ◎[/color][size=75] 
[color=#800000]⦿ Sortilège ➳ iv tours [/color][/size][/right][right][size=85]

[i][color=#b68623]◎ Dominic Khan ◎[/color][size=75] 
[color=#b68623]⦿ Sortilège ➳ iv tours [/color][/size][/right][/quote][/td]
[/tr]
[/table][/quote]
Image
◎ Suileabhan Kohler ◎
⦿ Sortilège ➳ iv tours


◎ Morgan Rosenwald ◎
⦿ Sortilège ➳ iv tours


◎ Reece Ingham ◎
⦿ Sortilège ➳ iv tours


◎ Dominic Khan ◎
⦿ Sortilège ➳ iv tours
Reducio
Code d’origine utilisant la balise de redimensionnement [image=400x400], à éviter

Code : Tout sélectionner

[quote][table]
[tr]
	[td][center][image=400x400]/files/a1e57b0080731d19.png[/image][/center][/td]
	[td][quote][right][size=85][i][color=#800040]◎ Suileabhan Kohler ◎[/color][size=75] 
[color=#800040]⦿ Sortilège ➳ iv tours[/color] [/size][/right][right][size=85]

[i][color=#56699a]◎ Morgan Rosenwald ◎[/color][size=75] 
[color=#56699a]⦿ Sortilège ➳ iv tours [/color][/size][/right][right][size=85]

[i][color=#800000]◎ Reece Ingham ◎[/color][size=75] 
[color=#800000]⦿ Sortilège ➳ iv tours [/color][/size][/right][right][size=85]

[i][color=#b68623]◎ Dominic Khan ◎[/color][size=75] 
[color=#b68623]⦿ Sortilège ➳ iv tours [/color][/size][/right][/quote][/td]
[/tr]
[/table][/quote]

Code : Tout sélectionner

[quote][table]
[tr][td][center][url=/files/a1e57b0080731d19.png][img]/files/80d83beff2b85225.png[/img][/url][/center][/td]
[td][quote][right][size=85][i][color=#800040]◎ Suileabhan Kohler ◎[/color][size=75] 
[color=#800040]⦿ Sortilège ➳ iv tours[/color] [/size][/right][right][size=85]

[i][color=#56699a]◎ Morgan Rosenwald ◎[/color][size=75] 
[color=#56699a]⦿ Sortilège ➳ iv tours [/color][/size][/right][right][size=85]

[i][color=#800000]◎ Reece Ingham ◎[/color][size=75] 
[color=#800000]⦿ Sortilège ➳ iv tours [/color][/size][/right][right][size=85]

[i][color=#b68623]◎ Dominic Khan ◎[/color][size=75] 
[color=#b68623]⦿ Sortilège ➳ iv tours [/color][/size][/right][/quote][/td]
[/tr]
[/table][/quote]
Image
◎ Suileabhan Kohler ◎
⦿ Sortilège ➳ iv tours


◎ Morgan Rosenwald ◎
⦿ Sortilège ➳ iv tours


◎ Reece Ingham ◎
⦿ Sortilège ➳ iv tours


◎ Dominic Khan ◎
⦿ Sortilège ➳ iv tours


Solution esthétique et technique I

Contraindre l’image à occuper 400 pixels de façon centrée par un tableau, de sorte à conserver les marges vides sur les côtés même sur téléphone. Pour cela on peut soit partir de l’image redimensionnée à la largeur souhaitée (perte de qualité possible), soit la garder grande en considérant qu’une image de meilleure qualité, même si on la contraint à occuper moins de pixels sur la largeur de l’écran, offre plus de détails en zoomant (ctrl + molette sur PC, tactilement sur téléphone) qu’une image d’emblée redimensionnée en petit format.
Image redimensionnée à 400 pixels de largeur avec marges sur tout format d’écran
Plateau (quote)

Code : Tout sélectionner

[quote][table][tr][td][img]/files/90427d63db6bb60a.png[/img][/td]
[td][url=/files/d5ae674fafa7cf8b.png][img]/files/428887c52260d7b9.png[/img][/url][/td]
[td][img]/files/90427d63db6bb60a.png[/img][/td][/tr][/table][/quote]
Image Image Image
Wagon

Code : Tout sélectionner

[table][tr][td][img]/files/9e8126a955f93645.png[/img][/td]
[td][url=/files/c9615a1f8704cec3.png][img]/files/da895b709727da9e.png[/img][/url][/td]
[td][img]/files/9e8126a955f93645.png[/img][/td][/tr][/table]
Image Image Image

Code : Tout sélectionner

[table][tr][td][img]/files/9e8126a955f93645.png[/img][/td]
[td][url=/files/18fea34e6ceb180f.jpg][img]/files/8554b0d48bbb9160.jpg[/img][/url][/td]
[td][img]/files/9e8126a955f93645.png[/img][/td][/tr][/table]
Image Image Image
Image d’origine (1024x1024) mais contrainte d’occuper 400 pixels sur PC avec marges sur tout format d’écran
Plateau (quote)

Code : Tout sélectionner

[quote][table][tr][td][img]/files/a840d497bc194a95.png[/img][/td]
[td][img]/files/d5ae674fafa7cf8b.png[/img][/td]
[td][img]/files/a840d497bc194a95.png[/img][/td][/tr][/table][/quote]
Image Image Image
Wagon

Code : Tout sélectionner

[table][tr][td][img]/files/0d4929fb1c74cd42.png[/img][/td]
[td][img]/files/18fea34e6ceb180f.jpg[/img][/td]
[td][img]/files/0d4929fb1c74cd42.png[/img][/td][/tr][/table]
Image Image Image
Plus technique, il faut pour cette solution adapter selon chaque format d’origine les marges invisibles, je peux proposer des codes prêts à l’emploi correspondant à quelques largeurs principales avec ou sans quote/reducio (champ de largeur réduit à prendre en compte) permettant de remplacer la balise [image=largeurxhauteur]. Pour les utiliser il suffit de remplacer l’image de la colonne du centre par la vôtre, de la largeur indiquée. L’idée en proposant le simple et le double (triple pour les plus petits formats) à chaque fois est de permettre de conserver la haute qualité d’une image dans le second cas.

Attention ! bien qu’il puisse être tentant de faire des marges invisibles par du texte transparent, cette solution peut donner des résultats disproportionnés sur téléphone / déraisonnablement écraser la colonne centrale / voire provoquer du hors cadre si vous accumulez trop de caractères dans vos marges


• Équivalent 350x350 en partant d’image d’une largeur de 350 ou 700 pixels ou 1050 pixels
Sans quote (350 puis 700 et 1050)
Reducio
Code à éviter

Code : Tout sélectionner

[center][image=350x350]/files/b1cc7722d4533794.png[/image][/center]
[center][image=350x350]/files/991f18fcb9fe4016.png[/image][/center]
[center][image=350x350]/files/041a3c5280577d86.png[/image][/center]

Code : Tout sélectionner

[table][tr][td][img]/files/8e8ab8f79b278889.png[/img][/td]
[td][img]/files/b1cc7722d4533794.png[/img][/td]
[td][img]/files/8e8ab8f79b278889.png[/img][/td][/tr][/table]
Image Image Image

Code : Tout sélectionner

[table][tr][td][img]/files/94a75df49069ce73.png[/img][/td]
[td][img]/files/991f18fcb9fe4016.png[/img][/td]
[td][img]/files/94a75df49069ce73.png[/img][/td][/tr][/table]
Image Image Image

Code : Tout sélectionner

[table][tr][td][img]/files/5f88378ab48b9d31.png[/img][/td]
[td][img]/files/041a3c5280577d86.png[/img][/td]
[td][img]/files/0bafde07b7b95ee8.png[/img][/td][/tr][/table]
Image Image Image
En quote (350 puis 700 et 1050)
Reducio
Code à éviter

Code : Tout sélectionner

[quote][center][image=350x350]/files/b1cc7722d4533794.png[/image][/center][/quote]
[quote][center][image=350x350]/files/991f18fcb9fe4016.png[/image][/center][/quote]
[quote][center][image=350x350]/files/041a3c5280577d86.png[/image][/center][/quote]

Code : Tout sélectionner

[quote][table][tr][td][img]/files/225ab20b55e6d344.png[/img][/td]
[td][img]/files/b1cc7722d4533794.png[/img][/td]
[td][img]/files/225ab20b55e6d344.png[/img][/td][/tr][/table][/quote]
Image Image Image

Code : Tout sélectionner

[quote][table][tr][td][img]/files/eae62d78115609ca.png[/img][/td]
[td][img]/files/991f18fcb9fe4016.png[/img][/td]
[td][img]/files/5865a0ffd552c2c7.png[/img][/td][/tr][/table][/quote]
Image Image Image

Code : Tout sélectionner

[quote][table][tr][td][img]/files/876763b59d23c795.png[/img][/td]
[td][img]/files/041a3c5280577d86.png[/img][/td]
[td][img]/files/050ef712a1a760bc.png[/img][/td][/tr][/table][/quote]
Image Image Image


• Équivalent 400x400 en partant d’image d’une largeur de 400 ou 800 ou 1200 pixels
Sans quote (400 puis 800 et 1200)
Reducio
Code à éviter

Code : Tout sélectionner

[center][image=400x400]/files/da895b709727da9e.png[/image][/center]
[center][image=400x400]/files/f073e06c04116f9a.png[/image][/center]
[center][image=400x400]/files/c9615a1f8704cec3.png[/image][/center]

Code : Tout sélectionner

[table][tr][td][img]/files/9e8126a955f93645.png[/img][/td]
[td][img]/files/da895b709727da9e.png[/img][/td]
[td][img]/files/9e8126a955f93645.png[/img][/td][/tr][/table]
Image Image Image

Code : Tout sélectionner

[table][tr][td][img]/files/c4f1cf1e803976cb.png[/img][/td]
[td][img]/files/f073e06c04116f9a.png[/img][/td]
[td][img]/files/c4f1cf1e803976cb.png[/img][/td][/tr][/table]
Image Image Image

Code : Tout sélectionner

[table][tr][td][img]/files/5adc56a7f3ed6d1b.png[/img][/td]
[td][img]/files/c9615a1f8704cec3.png[/img][/td]
[td][img]/files/07f4adaa8492d479.png[/img][/td][/tr][/table]
Image Image Image
En quote/reducio (400 puis 800 et 1200)
Reducio
Code à éviter

Code : Tout sélectionner

[quote][center][image=400x400]/files/da895b709727da9e.png[/image][/center][/quote]
[quote][center][image=400x400]/files/f073e06c04116f9a.png[/image][/center][/quote]
[quote][center][image=400x400]/files/c9615a1f8704cec3.png[/image][/center][/quote]

Code : Tout sélectionner

[quote][table][tr][td][img]/files/fb998a5204b824e4.png[/img][/td]
[td][img]/files/da895b709727da9e.png[/img][/td]
[td][img]/files/fb998a5204b824e4.png[/img][/td][/tr][/table][/quote]
Image Image Image

Code : Tout sélectionner

[quote][table][tr][td][img]/files/96ab4425f50c6b4b.png[/img][/td]
[td][img]/files/f073e06c04116f9a.png[/img][/td]
[td][img]/files/47152ea286a9dd38.png[/img][/td][/tr][/table][/quote]
Image Image Image

Code : Tout sélectionner

[quote][table][tr][td][img]/files/c64dee971deedd08.png[/img][/td]
[td][img]/files/c9615a1f8704cec3.png[/img][/td]
[td][img]/files/9f832489e97d7ec7.png[/img][/td][/tr][/table][/quote]
Image Image Image


• Équivalent 450x450 en partant d’image d’une largeur de 450 ou 900 pixels
Sans quote (450 puis 900)
Reducio
Code à éviter

Code : Tout sélectionner

[center][image=450x450]/files/d59ab9868b6957b3.png[/image][/center]
[center][image=450x450]/files/f5a5ee94e7c724fe.png[/image][/center]

Code : Tout sélectionner

[table][tr][td][img]/files/597121056fc7e796.png[/img][/td]
[td][img]/files/d59ab9868b6957b3.png[/img][/td]
[td][img]/files/597121056fc7e796.png[/img][/td][/tr][/table]
Image Image Image

Code : Tout sélectionner

[table][tr][td][img]/files/952c45a258eb959f.png[/img][/td]
[td][img]/files/f5a5ee94e7c724fe.png[/img][/td]
[td][img]/files/952c45a258eb959f.png[/img][/td][/tr][/table]
Image Image Image
En quote/reducio (450 puis 900)
Reducio
Code à éviter

Code : Tout sélectionner

[quote][center][image=450x450]/files/d59ab9868b6957b3.png[/image][/center][/quote]
[quote][center][image=450x450]/files/f5a5ee94e7c724fe.png[/image][/center][/quote]

Code : Tout sélectionner

[quote][table][tr][td][img]/files/2fc5a40dd989b89d.png[/img][/td]
[td][img]/files/d59ab9868b6957b3.png[/img][/td]
[td][img]/files/2fc5a40dd989b89d.png[/img][/td][/tr][/table][/quote]
Image Image Image

Code : Tout sélectionner

[quote][table][tr][td][img]/files/0de9922bc20d9919.png[/img][/td]
[td][img]/files/f5a5ee94e7c724fe.png[/img][/td]
[td][img]/files/35c2c44951575712.png[/img][/td][/tr][/table][/quote]
Image Image Image


• Équivalent 500x500 en partant d’image d’une largeur de 500 ou 1000 pixels
Sans quote (500 puis 1000)
Reducio
Code à éviter

Code : Tout sélectionner

[center][image=500x500]/files/15049025d23c64ac.png[/image][/center]
[center][image=500x500]/files/136c6619d7c0a811.png[/image][/center]

Code : Tout sélectionner

[table][tr][td][img]/files/ce490676cff43d20.png[/img][/td]
[td][img]/files/15049025d23c64ac.png[/img][/td]
[td][img]/files/ce490676cff43d20.png[/img][/td][/tr][/table]
Image Image Image

Code : Tout sélectionner

[table][tr][td][img]/files/fc66b1382070b03c.png[/img][/td]
[td][img]/files/937504bcc608800e.png[/img][/td]
[td][img]/files/8ed205d6c3010de7.png[/img][/td][/tr][/table]
Image Image Image
En quote/reducio (500 puis 1000)
Reducio
Code à éviter

Code : Tout sélectionner

[quote][center][image=500x500]/files/15049025d23c64ac.png[/image][/center][/quote]
[quote][center][image=500x500]/files/136c6619d7c0a811.png[/image][/center][/quote]

Code : Tout sélectionner

[quote][table][tr][td][img]/files/1b47852136248cd6.png[/img][/td]
[td][img]/files/d753d67938beecb8.png[/img][/td]
[td][img]/files/1b47852136248cd6.png[/img][/td][/tr][/table][/quote]
Image Image Image

Code : Tout sélectionner

[quote][table][tr][td][img]/files/f14eb705a9489c46.png[/img][/td]
[td][img]/files/937504bcc608800e.png[/img][/td]
[td][img]/files/4004dff21b0c0064.png[/img][/td][/tr][/table][/quote]
Image Image Image


• Équivalent 550x550 en en partant d’image d’une largeur de 550 ou 1100 pixels
Sans quote (550 puis 1100)
Reducio
Code à éviter

Code : Tout sélectionner

[center][image=550x550]/files/b6a8ff2325ddde66.png[/image][/center]
[center][image=550x550]/files/b7d493cf74d24d93.png[/image][/center]

Code : Tout sélectionner

[table][tr][td][img]/files/002b16c0f6aa064f.png[/img][/td]
[td][img]/files/b6a8ff2325ddde66.png[/img][/td]
[td][img]/files/002b16c0f6aa064f.png[/img][/td][/tr][/table]
Image Image Image

Code : Tout sélectionner

[table][tr][td][img]/files/49e1a9d63dd98cc3.png[/img][/td]
[td][img]/files/b7d493cf74d24d93.png[/img][/td]
[td][img]/files/49e1a9d63dd98cc3.png[/img][/td][/tr][/table]
Image Image Image
En quote/reducio (550 puis 1100)
Reducio
Code à éviter

Code : Tout sélectionner

[quote][center][image=550x550]/files/b6a8ff2325ddde66.png[/image][/center][/quote]
[quote][center][image=550x550]/files/b7d493cf74d24d93.png[/image][/center][/quote]

Code : Tout sélectionner

[quote][table][tr][td][img]/files/c4bea2965e242e40.png[/img][/td]
[td][img]/files/b6a8ff2325ddde66.png[/img][/td]
[td][img]/files/c4bea2965e242e40.png[/img][/td][/tr][/table][/quote]
Image Image Image

Code : Tout sélectionner

[quote][table][tr][td][img]/files/179a14c6a5ececd3.png[/img][/td]
[td][img]/files/b7d493cf74d24d93.png[/img][/td]
[td][img]/files/6668373bd41d49f3.png[/img][/td][/tr][/table][/quote]
Image Image Image


• Équivalent 600x600 en en partant d’image d’une largeur de 600 pixels
Sans quote
Reducio
Code à éviter

Code : Tout sélectionner

[center][image=600x600]/files/b97e640a2aa3e9a4.png[/image][/center]

Code : Tout sélectionner

[table][tr][td][img]/files/b1bf14d82284f582.png[/img][/td]
[td][img]/files/b97e640a2aa3e9a4.png[/img][/td]
[td][img]/files/78ea36f58297546d.png[/img][/td][/tr][/table]
Image Image Image
En quote/reducio
Reducio
Code à éviter

Code : Tout sélectionner

[quote][center][image=600x600]/files/b97e640a2aa3e9a4.png[/image][/center][/quote]

Code : Tout sélectionner

[quote][table][tr][td][img]/files/b81341dcfdbf3863.png[/img][/td]
[td][img]/files/b97e640a2aa3e9a4.png[/img][/td]
[td][img]/files/6c15ad62291e1f9a.png[/img][/td][/tr][/table][/quote]
Image Image Image


Solution esthétique et technique II

La solution du tableau à marges invisibles permet de vous fournir quelques codes prêts à l’emploi. Néanmoins, si vous maîtrisez un éditeur d’images et êtes prêt à faire un peu de mathématiques (règle de trois, proportionnalité), il est également possible d’intégrer ces marges invisibles directement dans l’image à afficher.

Pour cela, il faut considérer que la largeur de l’encart d’un post est de 675 pixels sur PC (environ, selon la mise en page cela peut varier de quelques pixels), et que le quote ou reducio réduit à 651 pixels l’occupation possible (avec 12 pixels de marges de chaque côté, environ également). Ainsi, vous pouvez calculer le taux d’occupation de la largeur souhaitée par rapport à la largeur maximale avec le tableau de proportionnalité suivant :
Image
Largeur souhaitée
Image
Largeur totale
350, 400, 450, 500, 550, etc.
675 pixels
ou
651 pixels (quote, reducio)
Largeur d’origine
Largeur à créer
Connue
Inconnue
Mise en pratique
Si l’on souhaite qu’une image de format 1024x1024 occupe 400 de largeur, alors on fait le calcul (1024*675)/400 = 1728
→ Il faut redimensionner l’image au format 1728x1024 (il y aura donc sur la largeur des marges vides de 352 pixels de chaque côté)

Si l’on souhaite qu’une image de format 1024x1024 occupe 400 de largeur dans un quote ou un reducio, alors on fait le calcul (1024*651)/400 = 1666.56 (on peut arrondir au pixel près)
→ Il faut redimensionner l’image au format 1666x1024 (il y aura donc sur la largeur des marges vides de 321 pixels de chaque côté)

Limite : des images de 1728 ou 1666 pixels de largeur sont potentiellement lourdes, surtout en png (le format jpg permet d’avoir des images plus légères mais ne peut afficher des marges invisibles) et l’hébergement sur le site peut compresser vos images de poids trop conséquent (même si l’hébergeur extérieur ne les a pas altérées), il peut être sage de prendre les devants et redimensionnant autour de 1000/1200 maximum la largeur obtenue, en respectant les ratios
Soit 1728x1024 = 1200x711 ; ou 1666x1024 = 1200x738
Vous pouvez également insérer le lien de l’hébergeur extérieur (par exemple, zupimages ne touche pas aux dimensions, et leur limite de 7Mo par image est beaucoup plus haute que celle du site) si vous constatez que la compression a fortement altéré la qualité de votre image
Reducio
Cette résolution de duel peut exemplifier l’effet possible d’une compression : la pastille bleue de la faute absence n’est pas uniforme mais grainée. Vous pouvez également constater la différence d’aspect d’un avatar entre zupimages et sa version hébergée par le site (fort grain sur la peau, les yeux : la compression des images trop lourdes crée des imperfections visuelles). D’où le conseil de réduire le poids de l’image en amont, et/ou intégrer le lien de l’image non altérée par un hébergeur extérieur.

Cette solution ne nécessite plus de tableau, il suffit d’afficher l’image obtenue avec les balises [img]lien[/img].
Plateau (quote)

Code : Tout sélectionner

[quote][img]/files/9c254d94c8926af3.png[/img][/quote]
Image
Wagon (avec en bonus les largeurs 350, 400, 450, 500 et 550 pixels obtenues avec les calculs correspondants)
Reducio
Code évité

Code : Tout sélectionner

[center][image=350x350]/files/18fea34e6ceb180f.jpg[/image][/center]

Code : Tout sélectionner

[img]/files/61d00119ae8d7333.png[/img]
Image
Reducio
Code évité

Code : Tout sélectionner

[center][image=400x400]/files/18fea34e6ceb180f.jpg[/image][/center]

Code : Tout sélectionner

[img]/files/10fc6df74c22e53b.png[/img]
Image
Reducio
Code évité

Code : Tout sélectionner

[center][image=450x450]/files/18fea34e6ceb180f.jpg[/image][/center]

Code : Tout sélectionner

[img]/files/65f0ff5bb849e48d.png[/img]
Image
Reducio
Code évité

Code : Tout sélectionner

[center][image=500x500]/files/18fea34e6ceb180f.jpg[/image][/center]

Code : Tout sélectionner

[img]/files/9c7e34ac2e6f8cf7.png[/img]
Image
Reducio
Code évité

Code : Tout sélectionner

[center][image=550x550]/files/18fea34e6ceb180f.jpg[/image][/center]

Code : Tout sélectionner

[img]/files/6418c421bbe5f73b.png[/img]
Image

8 mai 2026, 15:04
 FAQ  FaQ collaborative : l'accessibilité sur PFR
Bonjour,
J'aurais une demande/proposition, en lien avec la gestuelle des sorts :
Bien souvent, dans les manuels, à "gestuelle", on a une image, indescriptible par les lecteurs d'écran (ou très mal ! Je vous jure, j'ai essayé, il était complètement à côté de la plaque !).
Or, ces derniers temps, j'ai souvent comme commentaire de mes devoirs que ma gestuelle est trop peu décrite ou erronée. (soit que j'ai trouvé trop peu d'infos, soit que j'ai tenté de demander une description à mon lecteur qui, comme je le disais, n'a sans doute jamais pratiquer la magie parce qu'il est nul en gestuelle !)

Comme on est sur un site de magie... c'est vrai que c'est embêtant.
Certains sorts ont parfois une petite description (comme Protego ou Collaporta), et pour d'autres, je m'appuie sur des descriptions RP que j'ai trouvées (comme pour Lashlabask), mais ça reste mince.
Du coup, je me demandais si on ne pouvait pas envisager, soit un sous-sujet, soit un post dans cet FAQ, consacré à des descriptions de gestuelles, qui serait collaboratif.
Tous ceux/celles qui le veulent, pourraient venir décrire textuellement une gestuelle (euh bon pour Wingardium Leviosa, ça ira, mais y a tout le reste).
Ça permettrait de se constituer une base pour étoffer la description du lancer de sort (sans devoir demandé aux profs, qui ont déjà bien du boulot, de revoir tous les manuels).

Voilà. C'est une idée que je souhaitais soumettre pour attirer l'attention et solutionner un problème auquel je suis beaucoup confrontée.
Merci