18041 sujets

Questions générales et questions de débutants

Bootstrap, sémantique et accessibilité

Bonjour,

Note préliminaire: j'ai posté dans le forum général parce que je n'étais pas trop sûr de savoir où le poster ailleurs; il y a du CSS et de la sémantique.
Le cas échéant, merci de déplacez ce sujet dans uns salon plus approprié.

J'essaie de travailler sur un site en utilisant bootstrap.
Bootstrap a l'air très bien pour faire de la mise en page responsive sans trop se casser la tête, et il y a plein de thèmes gratuits qui semblent pas trop mauvais.
C'est le bon plan pour moi qui ne peux pas vraiment faire du CSS réellement from scratch...

Cependant, je me sens un peu irrité. J'aimerais bien ajouter de l'accessibilité et de la sémantique, mais dans pratiquement tous les exemples que j'ai vu jusqu'ici, on n'utilise pour ainsi dire que des div et rien que des div. J'ai l'impression que c'est un peu une soupe bizarre.

Première question, j'aimerais savoir jusqu'à quel point j'ai le droit de changer et/ou ajouter des éléments sans tout casser, i.e. que la mise en page soit conservée.

Par exemple à partir de ce genre de code :


<div class="row">
<div class="col-md-1">
<p>July 14, 2013</p>
</div><!--col-md-1-->
<div class="col-md-3">
<h4>Post</h4>
<img class="img-responsive" src="..." alt="..." />
</div><!--col-md-3-->
<div class="col-md-8">
<p>Du bla bla</p>
<p>Encore du bla bla</p>
<p>Toujours du bla bla</p>
</div><!--col-md-8-->
</div><!--row-->


Est-ce que j'ai le droit de mettre à la place :


<article class="row">


En d'autres termes remplacer un div par un article. Mais ça pourrait aussi être section, ou aside, ou autre chose en d'autres occasions semblables.

Ou :


<header class="col-md-3">
<h2>Some entry</h2>
<img class="img-responsive" src="..." alt="..." />
</header><!--col-md-3-->


En clair, remplacer le H4 qui ne fait aucun sens dans la hiérarchie actuelle par un H2 qui est censé être le niveau correct, et remplacer un div par un header.

OU, dans d'autres circonstances :


<div class="col-md-3">
<header>
<h4>Some entry</h4>
<img class="img-responsive" src="..." alt="..." />
</header>
</div><!--col-md-3-->


Dans ce cas ici, ajouter le header plutôt que de remplacer un des div.

Dans d'autres exemples que je n'ai plus ici, remplacer des span par des label dans le cadre de formulaires (c'est impressionnant à quel point les labels sont bafoués !)

ET toutes sortes d'autres modifications du genre qui me paraissent pourtant être du bon sens...

Alors, qu'ais-je le droit de faire ou pas comme ajouts/modifications sans que tout se casse la figure ?

J'ai une seconde question. A certains endroits, je trouve le genre de code ci-dessous, et je ne comprends pas à quoi il sert :


<p><i class="fa fa-clock-o"></i> 17 July, 2013</p>


Quelle est donc l'utilité de ce <i> vide ? Pourquoi <i> ?

Troisième question: bootstrap est un framework CSS. Alors pourquoi fournissent-ils des scripts JavaScript aussi ? A quoi servent ces scripts ? Sont-ils obligatoires ?
Désolé, je dois sans doute être un des derniers fous qui a encore une conscience avant de balancer 150 Ko de code JavaScript sans même piger ce qu'il fait; ça me paraît énorme quand c'est chez moi... même si on le sait, facebook c'est plus de 10 fois plus.

Merci pour vos réponses
Modifié par QuentinC (12 Apr 2016 - 17:08)
Bonjour,

Je ne suis pas un utilisateur de Bootstrap, mais au niveau des tags HTML utilisés ça ne devrait a priori pas avoir d'importance sur le résultat finale. A moins qu'il y ait des règles de CSS se basant sur le tag HTML utilisé (ce dont je doute, ça n'aurait pas vraiment de sens), tu devrais pouvoir utiliser n'importe quel tag à partir du moment où tu respectes les conventions W3C.

N'oublions pas qu'en CSS, la plupart des comportements par défauts des tags peuvent être totalement réécrits, un span ou un lien peut très bien devenir un block au lieu d'un élément inline. Il y a quelques exceptions (les inputs de formulaire par exemple), mais dans l'ensemble les tags HTML servent à donner un sens sémantique au code, la div étant justement l'élément utilisés par défaut parce qu'il s'agit d'un conteneur sans fonction particulière.

Je te conseille également dans ton propre code de baser la majorité de tes sélecteurs sur des classes plutôt que des tags HTML. Ainsi, je n'utilise pas de règles ciblant un H1, H2 ou H3 mais j'utilise un classe "title" car la hiérarchie des titres d'une page est amenée à changer et il est très ennuyeux d'avoir ensuite à revenir sur son CSS. Pareil pour un élément img, je lui donne une classe "photo" ou "image" car plus tard je vais peut-être devoir la placer dans un conteneur qui aura le même rôle.

Pour ce qui est du CSS et JavaScript embarqué, je ne peux pas te répondre mais effectivement, je me méfie toujours des "packs" qui chargent un gros tas de ressources, pas tant pour le poids que dans un soucis de contrôle et de propreté du code.
Bootstrap n'est pas qu'un framework html/css, il comporte aussi une panoplie d'accordéons et d'onglets (très mal gérés de mon point de vue) qui recourent au javascript pour leur animation...
Pour ce qui est de la grille, l'important c'est d'avoir les classes imbriquées dans ce sens ; .container puis .row et enfin tes .col. Pour le reste peut importe les balises sur lesquelles tu mets ces classes ou si il y a des balises intermédiaires. Si tu veux être plus sûr de rien casser, tu peux rajouter tes balises sémantique en sus du code existant mais on est jamais sûr avec certains sélecteur CSS (comme d'enfants ou directement sur les balises).

Au niveau des composants/components ça peut poser des soucis. Par exemple pour la pagination, tu as un sélecteur comme ceci : .pagination > li > a. Donc évidemment tu perdras la mise en forme en modifiant les balises.

La classe fa-clock-o sert à afficher une icône font awesome (inclus dans une typo). Le <i> vide n'a pas vraiment de sens en effet.
Modifié par bzh (12 Apr 2016 - 19:44)
a écrit :
Je ne suis pas un utilisateur de Bootstrap, mais au niveau des tags HTML utilisés ça ne devrait a priori pas avoir d'importance sur le résultat finale. A moins qu'il y ait des règles de CSS se basant sur le tag HTML utilisé (ce dont je doute, ça n'aurait pas vraiment de sens), tu devrais pouvoir utiliser n'importe quel tag à partir du moment où tu respectes les conventions W3C.


Merci.

NE pas avoir le contrôle, je n'aime pas ça, mais là je suis obligé de considérer que c'est une boîte noire, j'ai pas trop le choix.

a écrit :
Je te conseille également dans ton propre code de baser la majorité de tes sélecteurs sur des classes plutôt que des tags HTML. Ainsi, je n'utilise pas de règles ciblant un H1, H2 ou H3 mais j'utilise un classe "title" car la hiérarchie des titres d'une page est amenée à changer et il est très ennuyeux d'avoir ensuite à revenir sur son CSS. Pareil pour un élément img, je lui donne une classe "photo" ou "image" car plus tard je vais peut-être devoir la placer dans un conteneur qui aura le même rôle.


Bonne idée, mais de toute façon je vais très très superficiellement ou même pas du tout modifier le CSS moi-même, je reprends juste un thème tout fait (enfin, j'essaie).

Je suis non-voyant donc bien incapable de vérifier la mise en page du site seul. Je cherche juste à avoir un truc un minimum acceptable sur tous les écrans avec un minimum d'effort, tout en restant parfaitement accessible.
ET boostrap semblait être un bon candidat, en tout cas pour le premier critère.

a écrit :
Au niveau des composants/components ça peut poser des soucis. Par exemple pour la pagination, tu as un sélecteur comme ceci : .pagination > li > a. Donc évidemment tu perdras la mise en forme en modifiant les balises.


Ah... donc ce n'est pas aussi simple que ça.

Comment est-ce que je peux connaître les limites de ce qui est modifiable et ce qui ne l'est pas, sans être obligé de regarder leur 100 Ko de CSS minifiés ?


a écrit :
La classe fa-clock-o sert à afficher une icône font awesome (inclus dans une typo). Le <i> vide n'a pas vraiment de sens en effet.


Ah, donc d'après toi pas vraiment de sens que ce soit <i> plutôt que <span> ?

JE connais pas ce font awesome... c'est un autre pack à télécharger et à inclure ?


a écrit :
Bootstrap n'est pas qu'un framework html/css, il comporte aussi une panoplie d'accordéons et d'onglets (très mal gérés de mon point de vue) qui recourent au javascript pour leur animation...


Peux-tu expliciter le « mal géré » ?

De toute façon, pour moi, de l'animation en JavaScript, c'est une mauvaise idée. Maintneant on devrait avoir suffisament de quoi faire avec CSS3 uniquement sans être obligé de coder des choses en JavaScript.
Dans l'idéal, dans ce cadre-là, le JavaScript ne devrait se contenter que d'ajouter/enlever des classes et lancer/arrêter les transitions/animations sans préciser aucun autre détail.

Au moins en JavaScript je sais ce que je fais et je peux débugger sur IE, firefox et chrome sans aucun problème. Je me suis construit une JQuery-like ultra-light qui fait 15-20 Ko minifiée. Avec ça un accordéon pour moi c'est 10 lignes :


$('.accordion-summary').forEach(function(btn){
btn.setAttributes({role: 'button', 'aria-expanded': !btn.hasClass('collapsed') });
btn.on('click', function(e){
var panel = $(this.getAttribute('aria-controls'))[0];
panel.toggleClass('collapsed');
item.setAttribute('aria-expanded', !panel.hasClass('collapsed'));
if (e&&e.preventDefault) e.preventDefault();
return false;
});
});


AVec un code comme celui-là, libre est celui qui veut ajouter une belle transition CSS3 sur la classe collapsed s'il le veut... j'ai pas à gérer ça en js.

En plus j'ai décidé d'adopter le modèle AMD et je trouve que c'est vraiment une bonne façon d'organiser son code js.

Merci pour vos réponses, ça m'aide à mieux cerner le truc.
Modifié par QuentinC (12 Apr 2016 - 23:46)
a écrit :
Ah... donc ce n'est pas aussi simple que ça.

Comment est-ce que je peux connaître les limites de ce qui est modifiable et ce qui ne l'est pas, sans être obligé de regarder leur 100 Ko de CSS minifiés ?


Je ne sais pas jusqu'à quel point tu es non-voyant (si tu fais du CSS je suppose que tu dois tout de même avoir un moyen de comprendre un minimum le résultat), mais si tu doutes sur quelques chose il suffit d'essayer et de vérifier si ça fonctionne ou non. En mise en page il y a toujours un moment où l'on progresse par essais et erreurs.
a écrit :
Je ne sais pas jusqu'à quel point tu es non-voyant (si tu fais du CSS je suppose que tu dois tout de même avoir un moyen de comprendre un minimum le résultat),


Techniquement je comprends tout à fait ce que fait un code CSS et j'arrive à me l'imaginer, mais seulement jusqu'à un certain point.

Par exemple les tout nouveaux trucs genre flexbox, j'ai encore pas trop compris comment ça marchait.
Dommage, ça a l'air dêtre la solution ultime.


a écrit :
mais si tu doutes sur quelques chose il suffit d'essayer et de vérifier si ça fonctionne ou non. En mise en page il y a toujours un moment où l'on progresse par essais et erreurs.


C'est bien là qu'est le problème en fait. Je n'ai pas de moyen fiable à 100% pour vérifier si le code que j'ai écrit moi-même donne effectivement le résultat que j'ai imaginé, ou pas du tout.
ET comme CSS est bourré de subtilités et qu'en plus chaque navigateur fait un peu autrement, ce n'est pas facile.

D'où l'utilisation de code réputé fiable sur tout navigateur et tout support, comme bootstrap; afin de pouvoir se concentrer sur les fonctionalités du site, et pas trop sur son apparence.
QuentinC a écrit :
Ah, donc d'après toi pas vraiment de sens que ce soit <i> plutôt que <span> ?

JE connais pas ce font awesome... c'est un autre pack à télécharger et à inclure ?

Oui, en fait c'est juste un css, qui, à des classes spécifiques (via l'attribut CSS content et une font-face spéciale) va associer et générer visuellement une icône.

Et pourquoi <i> et pas une autre balise ? Je crois qu'il ne se sont pas fait ch***, je pense juste qu'ils ont pris la balise HTML la plus courte (et peu utilisée) pour éviter au maximum de gonfler le code.

Pour finir, niveau accessibilité par rapport à ça, c'est forcément vide de sens, tu pourras me le confirmer : sur le site officiel font-awesome, il colle sur leur balise d'icône <i> un aria-hidden="true"
a écrit :
Pour finir, niveau accessibilité par rapport à ça, c'est forcément vide de sens, tu pourras me le confirmer : sur le site officiel font-awesome, il colle sur leur balise d'icône <i> un aria-hidden="true"


Ca semble effectivement être complètement vide de sens dans la quasi-totalité des cas.
Mais en fait si on y réfléchit mieux, c'est la même problématique que pour les alt des images: à moins que ça apporte une indication notoire ou que ce soit un élément réactif, pas besoin de alt / le aria-hidden est tout à fait approprié.

Par contre dans leurs exemples, si j'ai bien pigé leur truc, ils ont des icônes facebook et twitter d'après le même principe, qui sont toutes seules et dans des <a>. Pour ce cas-là, le texte alternatif est absolument indispensable, sans ça les utilisateurs lambda de lecteurs d'écran ne voient même pas le lien ou bien il est labélisé avec son URL. Heureusement pour les éléments vides, l'attribut title semble assez bien marcher (J'ai encore pas essayé avec VO)

Sur le pourquoi de <i> plutôt qu'autre chose, tu as peut-être raison, mai j'y pense tout à coup: vu que c'est des icônes textuelles, elles sont donc... en italique ? Ce serait peut-être voulu ?
QuentinC a écrit :
mai j'y pense tout à coup: vu que c'est des icônes textuelles, elles sont donc... en italique ? Ce serait peut-être voulu ?

Ça dépend de ce que tu appelles "textuelles", ce sont bien des petites images en finalité (font-face transforme les caractères en icônes), donc non, ce n'est pas en italique.
QuentinC a écrit :
Peux-tu expliciter le « mal géré » ?

De mon point de vue : le code fait appel à trop d'éléments html ou d'ID alors que ce n'est pas forcément nécessaire.
Sujet clos
Aller à