5545 sujets

Sémantique web et HTML

Entité html dans un submit

Pages :
Bonjour,

Je sais que l'on peut s'en sortir avec inpuit type="image" qui appelle une image, mais j'aimerais pouvoir transformer un simple caractère en bouton input : ↵

Il me semble qu'il est impossible de s'en sortir en html et qu'il faut un petit javascript.

Savez-vous où cela est documenté ?

Merci, d'avance.
Modifié par boteha_2 (21 May 2015 - 10:27)
Modérateur
Salut,

button.... 


<button type="submit">&crarr;</button>


Au passage, l'attribut type submit est important et cet element accepte pratiquement n'importe quoi comme enfant (div, p, h, etc.). Smiley cligne

<<<EDIT
Je pense que tu devrais rééditer le titre du sujet. Ce n'est pas assez explicite. entité html dans un submit par exemple.
EDIT;
Modifié par niuxe (21 May 2015 - 02:31)
Modérateur
re,

Toujours penser à la simplicité. Pas besoin de js sur ce coup là. Smiley cligne

Peux tu stp, mettre résolu à sujet stp. En tout cas, heureux que cette solution te convienne.

@+
Bonjour,

Attention, j'attends d'avoir mis en oeuvre avant de déclarer Résolu.

Mon idée est de mettre en position fixed un alias au bouton Ajouterr au panier qui est dans le flux.
Je passe sur les détails mais la page peut être assez l:ongue d'où l'intérêt d'un alias fixe.

Donc, dans le même form, deux boutons de soumission.

<form>

<input type="submit" name="choix" value="Ajouter au panier &gt;">

<button type="submit" name="choix">&crarr;</button>

</form>


En plus, je veux une infobulle au survol de &crarr; car autrement cela risque d'être peu compréhensible, je pense pouvoir faire :

<button type="submit" name="choix">&crarr;</button><span>Alias pour Ajouter au panier</span>

button {position: relative}
button + span {display: none, position absolute, etc.}
button + span:hover {display: block}

Modifié par boteha_2 (21 May 2015 - 22:00)
Modérateur
Salut,

on déborde du sujet initial. Smiley cligne

Tant que les deux ou trois .... submit fassent la même action, je vois aucun souci.

Je te déconseille de cibler frère pour ce type de comportement (infobulle). Tu risques des bugs de comportement, réactivité, etc.

Ce que je ferai si je dois implémenter ce type de submit : 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        button{position: relative;}
        button span{position: absolute;display: none;}
        button:hover span{display: block;}
    </style>
</head>
<body>
    <form action="controller">
        <button type="submit" title="Ajouter au panier">&crarr;</button>
    </form>
    <script>
        //compatible IE8
        window.onload = function(){
            var elButton = document.querySelector('form button'),
                titreElButton = elButton.title,
                elSpan = document.createElement('span'),
                txtSpan = document.createTextNode(titreElButton);                
                
                elButton.removeAttribute('title');
                elSpan.appendChild(txtSpan);                
                elButton.appendChild(elSpan);
                
        }
    </script>
</body>
</html>

Modifié par niuxe (22 May 2015 - 12:48)
Bonjour,

Effectivement, on déborde du sujet mais c'erst intéressant.

Merci de ton javascript que je n'aurais pas trouvé (je suis nul en javascript).

Dans un CSS pur, c'est le sélecteur de frère qui te pose porblème ?
Si oui, je peux peut-être m'en sortir avec un sélecteur d'enfant depuis le container.

<div id="footer">
<button type="submit" name="choix">&crarr;</button><span>Alias pour Ajouter au panier</span>
</div>

button {position: relative}
div#footer span {display: none, position absolute, etc.}
div#footer button:hover + span {display: block}


Si je peux faire sans javascript j'aime autant.
Mais je pense que mon CSS ne marchera pas, il faudrait que span soit enfant de button et ce n'est pas possible.

Par ailleurs, remaraqye générale :
Title provoque une infobulle.
Mais le problème avec ces infobulles gérées par les navigateurs est qu'elles sont généralement assez longues à s'afficher.

C'est pourquoi ma politique est :
Infobulle non importante par title
infobulle importante par CSS, pas tant pour la mise en forme mais surtout pouir la rapidité d'affichage.
Modifié par boteha_2 (23 May 2015 - 17:05)
Modérateur
Salut,

boteha_2 a écrit :

Dans un CSS pur, c'est le sélecteur de frère qui te pose porblème ?
Si oui, je peux peut-être m'en sortir avec un sélecteur d'enfant depuis le container.

Tu verras par expérience (je te laisse découvrir pourquoi) que ce type de mise en forme est beaucoup mieux quand on le peut surtout s'il y a de l’interaction par la suite.

boteha_2 a écrit :

Si je peux faire sans javascript j'aime autant.

+10000

boteha_2 a écrit :

Mais je pense que mon CSS ne marchera pas, il faudrait que span soit enfant de button et ce n'est pas possible.

Si, la preuve le scipt que je t'ai filé. Regarde le code console. Smiley cligne . Je t'invite à relire ma 1ere réponse Attention, c'est une ébauche. Mais l'idée est là. Pourquoi c'est une ébauche ? Je ne sélectionne qu'un button et je ne vérifie pas si "title" vaut quelque chose.

boteha_2 a écrit :
:
Title provoque une infobulle.
Mais le problème avec ces infobulles gérées par les navigateurs est qu'elles sont généralement assez longues à s'afficher.

C'est pourquoi ma politique est :
Infobulle non importante par title
infobulle importante par CSS, pas tant pour la mise en forme mais surtout pouir la rapidité d'affichage.


Je t'invite à lire cet article : http://www.handi-pratique.com/accessibilite-liens-title

Là ton entité ne veut pas dire grand chose à vrai dire. Donc l'attribut title s'assimile à un attribut "alt" d'un élément img. Ce sera beaucoup plus pertinent que d'utiliser un élément span. Ensuite le JS revient au résultat désiré.

Attention, ton idée n'est pas fausse en soi. Si par la suite tu as de l'interaction avec l'infobulle (ex : lien vers... ), title posera des soucis. Dans un cas simple, title sera beaucoup plus pertinent qu'un span à mon avis.

à+
Modifié par niuxe (24 May 2015 - 16:55)
Salut,
boteha_2 a écrit :

Si je peux faire sans javascript j'aime autant.
Mais je pense que mon CSS ne marchera pas, il faudrait que span soit enfant de button et ce n'est pas possible.

Tu peux tout à fait mettre un span dans ton <button> si c'est justifié et pour une infobulle ça me paraît pas mal.

Je te laisse regarder le pen que j'ai écrit à l'instant : http://codepen.io/korell/pen/RPowwX
Sans aucun JS.

On perd cependant l'accessibilité via l'attribut 'title' du bouton. Je sais pas si on peut détecter en JS du coup l'utilisation de liseuse pour les mal-voyants et ajouter un attribut 'title' au bouton le cas échéant...
Modifié par MatthieuR (24 May 2015 - 17:47)
Bonjour,

Merci de vos réponses et des liens.

J'aime le Web sémantique et l'accessibilité, il est sûr que sur ces deux points title est plus pertinent qu'un span.

Ceal dit, je préfère span sans javascript à title avec javascript.

D'ailleurs, je ne comprends pas pourquoi même les navigateurs les plus récents traitent aussi mal title, je veux dire avec une telle lenteur.
Autre inconvénient, le pointeur prend une forme saugrenue que je n'aime pas (mais cela on peut peut-être forcer avec un CSS).
Pour CSS4, ils pourraient penser à une propripété permettant d'utiliser title pour une infobulle personnablisée qui se substituerait à l'infobulle système.

MatthieuR, je vais aller voir ton code ce soir. De là où je suis avec un vieux naviigateur (iCab sous Tiger) je tombre sur une page vide...

 +
Bonjour,

MatthieuR a écrit :
Salut,
Je te laisse regarder le pen que j'ai écrit à l'instant : http://codepen.io/korell/pen/RPowwX
Sans aucun JS.


J'ai vu ton code, merci.

Je ne comprends pas à quoi correspond l'identifiant #aaa du CSS que je n'ai pas trouvé dans le html.

Par contre, si on peut entrer un span dans button et que c'est conforme il est sûr que l'on peut en faire une infobulle.
Avec les réserves d'accessibilité déjà évoquées.

Je dois faire les essais de mon côté, à vrai dire j'ai des travaux préparatoires à réaliser avant d'aborder ce détail.

Je vous tiens au courant et encore merci.
boteha_2 a écrit :
Je ne comprends pas à quoi correspond l'identifiant #aaa du CSS que je n'ai pas trouvé dans le html.

Euh, c'est une couleur en hexadecimal Smiley ohwell . C'est un gris, j'aurais pu l'écrire #aaaaaa mais là c'est un format raccourci sur 3 caractères.
Tu peux facilement écrire de tête des gris de #fff (blanc) à #000 (noir) sachant que #888 est un gris à 50%...
boteha_2 a écrit :
Par contre, si on peut entrer un span dans button et que c'est conforme il est sûr que l'on peut en faire une infobulle.

Tout à fait conforme du moment que c'est du contenu phrasé (<span> en est...)
Modifié par MatthieuR (24 May 2015 - 22:34)
Bonjour,

Une couleur, j'aurais pu trouver...

A ma décharge je trouve le texte sur fond noir difficile à lire.
Bonjour,

Je serais presque tenté de dire que le span est beaucoup mieux que le title du point de vue de l'accessibilité, s'il est caché par un autre moyen que display:none ou visibility:hidden lorsqu'il n'est pas actif. Au moins tous les lecteurs d'écran lisent la même chose.

En plus, un span, on peut le lier avec aria-labelledby et/ou aria-describedby, ce qui est encore mieux.

Le problème principal avec title c'est que tous les lecteurs d'écran ne lisent pas la même chose dans tous les cas, et que parfois la logique qui fait qu'il soit lu ou pas lu, en plus ou à la place de l'intitulé, est difficile à prévoir.
QuentinC a écrit :
Je serais presque tenté de dire que le span est beaucoup mieux que le title du point de vue de l'accessibilité, s'il est caché par un autre moyen que display:none ou visibility:hidden lorsqu'il n'est pas actif. Au moins tous les lecteurs d'écran lisent la même chose

Ok, du coup on est bon puisque ce span est bien présent dans le DOM et n'est masqué que par une opacité à 0.
boteha_2 a écrit :
A ma décharge je trouve le texte sur fond noir difficile à lire.

Désolé, c'est le choix de Codepen et le choix de la majorité des dev ou intégrateur je pense, c'est plus reposant pour les yeux Smiley biggrin
Modifié par MatthieuR (26 May 2015 - 20:31)
Salut,

J'ajoute juste mon grain de sel pour dire que d'un point de vue accessibilité, il est préférable d'utiliser cette petite astuce en lieue et place de display: none; ou visibility: hidden;, ou bien position: absolute; + left: -999em; lorsque c'est possible :

font: 0/0 a;
Bonjour,

Tu utilises opacity pour masquer le span.

On peut aussi utiliiser display:none ou visibility:hidden.

Je suppose que les trois possibilités sont équivalentes en terme d'accessibilité.

Opacity est peut-être moins bien reconnu par les vieux navigateurs.
a écrit :
A ma décharge je trouve le texte sur fond noir difficile à lire.



Ce n'est pas moi qui ai écrit ça !

En plus à l'époque où ja'vais encore un reste visuel, je préfèrais le texte clair sur fond foncé.

a écrit :
J'ajoute juste mon grain de sel pour dire que d'un point de vue accessibilité, il est préférable d'utiliser cette petite astuce en lieue et place de display: none; ou visibility: hidden;, ou bien position: absolute; + left: -999em; lorsque c'est possible :
font: 0/0 a;


Que fait ce code ? Je ne comprends pas.

a écrit :
Tu utilises opacity pour masquer le span.
On peut aussi utiliiser display:none ou visibility:hidden.
Je suppose que les trois possibilités sont équivalentes en terme d'accessibilité.


Absolument pas. Display:none et visibility:hidden agissent sur toutes les représentations, tandis que opacity:0 n'agit que sur le visuel.

En clair: le lecteur d'écran lit le texte avec opacity:0 alors que les utilisateurs voyants ne le voient pas; avec display:none ou visibility:hidden, le texte a complètement disparu pour tout le monde, personne ne peut le lire, pas même un lecteur d'écran.
Donc il s'agit de bien savoir ce qu'on veut.
QuentinC a écrit :
Ce n'est pas moi qui ai écrit ça !

Oh oui désolé, j'ai oublié de modifier le pseudo dans la balise... c'est bien une citation de boteha. Et oui texte clair sur fond foncé c'est plus cool.
Modifié par MatthieuR (26 May 2015 - 20:33)
Bonjour,

Ok, je comprends l'intérêt d'opacity pour l'accessibilité.

L'astuce de Manumanu relève de la mâme logique : font: 0/0 a;

J'ai encore des choses à faire avant mais je m'attaque prochainement au petit button avec infobulle.

Je vous tiens au courant.
Pages :
Sujet clos
Aller à