[Résolu] Optimisation : lint5 (validation HTML5)

Bonsoir à tous,

Je dois mettre un site en ligne mais j'ai quelques erreurs qui me restent sur les bras. J'utilise Grunt et donc lint5 pour tester la validité de mes pages et j'ai cette erreur :

Warning:   info: Article lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all articles.

J'ai regardé sur Google et autre mais je ne comprends pas bien le truc. J'ai ce code, je pense que c'est lui qui pose problème vu que c'est le seul titre de la page :

<header>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="index.html">
					<h1 class="masque">brand</h1>
				</a>
			</div>

etc.

Si je vire la classe masque, je n'ai plus d'erreur. J'ai essayais avec une opacité à 0, avec un déplacement négatif pour le sortir de la page, etc. Rien à faire. J'ai besoin de ce titre car je n'ai pas d'autres "endroits" pour avoir un titre h1.

J'ai une page où j'ai deux titres h2 par exemple. Je ne peux pas mettre des h1 à la place ni un h1 suivi d'un h2, vu que le contexte, ça n'aurais pas beaucoup de sens.

Je suis tombé sur la page de Alsacreations qui parle des titres mais pour le moment ça ne m'a pas aidé.

Bref, j'aurais besoin de quelques conseils, indications, solutions pour mieux discerner le problème et trouver une solution.

Merci à vous pour votre aide.
Modifié par MagicCarpet (06 Feb 2015 - 08:42)

J'avais des balises articles que j'ai modifié en section. J'ai 6 pages principales sur ce site, donc l'idée c'était d'avoir 6 sections. Mais, si j'ai bien compris, l'usage des sections imposent un titre, que je n'ai pas forcement sur chaque page. Au final je reviens à utiliser une simple div. Je souhaitez votre avis sur cette question. Concernant le h1, j'avais vu quelque part (mais je n'ai pas retrouvé la source) qu'on pouvais utiliser un h1 pour le logo du site. Donc dans mon nav qui affiche le logo de l'association, j'ai fais ceci (à la place du code présenté au premier post) :

<h1 class=masque>Brand</h1>

Je pensais que la classe posé un problème mais en fait il n'en ai rien. Comme ça j'ai bien un titre h1, qui de manière sémantique, présente bien le "sujet" et dans les pages qui ont des titres, j'attaque avec des h2. Qu'en pensez-vous ?
Modifié par MagicCarpet (29 Jan 2015 - 14:23)

Est-ce que quelqu'un a été confronté à ce genre d'erreur ? :

The “aria-describedby” attribute must point to an element in the same document.

Apparemment, il faut que le aria-describedby soit un ID qui pointe sur un élément du HTML. J'ai beau essayé plusieurs choses, y'a rien à faire, je prends toujours cette erreur... Merci.

J'ai trouvé cette page : http://tuyauxa11y.info/tuyaux/92 Dans son exemple, que je vais coller ici pour plus de pratique :

<button aria-describedby="descFermer" onclick="monDialogue.close ()">X</button>
…
<div id="descFermer">La fermeture de cette fenêtre effacera toute information entrée et vous fera revenir à la page principale.</div>

La div, elle doit-être placé à quel endroit ? Peut-elle être masqué ? Merci. EDIT : je précise que je souhaite utiliser "aria-describedby" dans un formulaire (input text principalement). C'est ce qui est écris sur la doc de Bootstrap.
Modifié par MagicCarpet (30 Jan 2015 - 00:25)

bonjour

A) http://tinyurl.com/oktacnx
je pense que oui juste après sinon comment les autres items vont se repérer
en plus cela dépend de comment fonctionne votre javascript ( toujours ne supposer rien même si identifiant commun ... regarder le code )

B) oui, invisible regarder le code css sur la page demo de bootstrap
info support navigateur absent sur canius ? sinon http://tinyurl.com/lbnnhsr
je ne vois pas de code bootstrap (version ?) dans votre code ?
la doc bootstrap n 'est pas la référence cet attribut pour ARIA

C) pour bootstrap fenêtre modale oui http://tinyurl.com/kf7s32t

sinon
<h1 class=masque>Brand</h1>
????? pourquoi pas avec des "quotations" / guillemets ?
<h1 class="masque">Brand</h1>
Modifié par 75lionel (05 Feb 2015 - 17:58)

Je suis désolé mais je ne comprends rien à vos réponses.

J'ai réglé le problème, comme les `aria-describedby` doivent référencer une div via son id, je me suis renseigné sur les `aria-labelledby` et je les utilises. Au final, je ne suis pas sur du résultat mais le lint ne pose plus de problème. Ce sont quand même des infos Aria, de plus je sais que les appareils qui lisent les pages HTML regardent aussi d'autres paramètres que j'utilise comme le nom ou les placeholder.

Donc...

Et pour finir, mon site aurait de toutes façons les plus grandes difficultés à être consulter par des personnes mal-voyantes étant donné que l'information principale est très graphique. Ce n'est pas une raison pour les ignorés mais si quelqu'un pense que les aria-labelledby ne sont pas adaptés, j'apporterais le changement nécessaire.

Merci pour vos réponses.