5568 sujets

Sémantique web et HTML

L'attribut role en HTML5

Pages :
Bonjour,

Je développe un site perso en HTML5 (En HTML "tout court" désolé Smiley lol ) et CSS3 et j'aurais une petite question pour les experts que vous êtes.

Alors j'ai une liste de liens que j'aimerais contenir dans une balise <nav> cependant j'aimerais lui appliquer le role='seealso' ET le role='navigation'.

Pour faire simple, j'ai une sorte de "bloc" dans ma page avec une liste de lien ayant un rapport avec le contenu principal où j'aimerais rediriger l'internaute si l'article lui a plût.
Une sorte de bloc "Voir aussi" (qui serait défini dans mon role='seealso' ) mais comme c'est également des liens de navigation interne à mon site j'aimerais aussi lui appliquer le role='navigation'.

Donc est-ce possible d'avoir une balise du genre <nav role='navigation seealso'></nav>
Sinon je mettrais simplement <nav role='seealso'></nav>


Merci d'avance Smiley smile

Foggy
Modifié par fogofo (25 Jan 2011 - 12:58)
Perso j'utiliserais : 



<article role="article">

blablablabla

<aside role="complementary">Liste de liens en rapport avec l'article</aside>
</article>


Mais pas de <nav/>…
salut,

est-ce que quelqu'un pourrait m'expliquer l'intérêt de ces rôles ?

- a quoi ça sert ?
- est on OBLIGÉ de les utiliser ?
- que se passe t-il si on utilise pas les bons rôles dans les balises ?

Merci pour vos lumières, car j'ai beau trainer sur google depuis quelques jours c'est toujours pas clair... par exemple

a écrit :
L'attribut "role"

L'attribut "role" a été introduit dans (feu) XHTML2 afin d'ajouter du contexte aux éléments (de la sémantique).

Il est ainsi possible pour les agents utilisateurs et pour les applications accessibles riches (ARIA) d'exploiter ces informations complémentaires.


c'est du chinois pour moi Smiley decu
merci encore Smiley cligne
ARIA via des attributs supplémentaires sur les éléments html permet de donner plus d'information, sur leur état (obligatoire, caché, désactivé, etc) ou leurs… rôles. C'est surtout utile pour l'accessibilité et les lecteurs d'écran.

Les rôles, comme je les utilise sur mon site, indiquent où se trouve l'entête de la page (banner), le contenu principal (main), le contenu complémentaire (complementary), la recherche (search) et le pied de page (contentinfo). Prochainement je vais ajouter le rôle article sur les articles.

Avec VoiceOver, je passe facilement d'une zone à l'autre. Smiley smile
Modifié par Patidou (06 Aug 2011 - 23:03)
Voici une sructure simplifié d'une page billet :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="no-js" lang="fr" xml:lang="fr">
<head>
  <meta charset="UTF-8" />
  
  <title>Titre du billet</title>
  <meta name="description" lang="fr" content="jkkjkjhl" />

 
</head>

<body class="dc-post">

<div id="page">
	<header role="banner">
	  <h1><span><a href="/">Nom du site</a></span></h1>
	</header>

	<div id="wrapper">
		<div id="main">
			
		  <div id="content" role="main">
			<article id="p177" class="post">
				<header>
					<h2 class="post-title" lang="fr" xml:lang="fr">Titre du billet</h2>
	
		
				<div class="post-content" lang="fr" xml:lang="fr">
					<p>blablabla</p>
			  	</div>
			</article>
		</div> <!-- End #main -->
		
		<aside role="complementary">
			<form id="search" action="http://lombre.net/" method="get" role="search">
				<div>
					<input
					type="search" id="q" name="q" class="search-field" maxlength="255"
		value="" title="Recherche" placeholder="Termes à rechercher…" /> <span class="search-r"></span> 
					<input type="submit" value="Recherche" />
				</div>
			</form>
			<div id="sidebar">
			  <nav id="blognav">
				<div id="topnav">
					<h2>Navigation</h2>
						<ul>
							<li class="topnav-home"><a href="/">Accueil</a><span> - </span></li>
							<li class="topnav-arch"><a href="/archive">Archives</a></li>
						</ul>
					</div>
				</nav> <!-- End #blognav -->
		</aside>

	</div> <!-- End #wrapper -->

	<footer id="footer" role="contentinfo">
	  <p><small>Propulsé par <a href="http://dotclear.org/">Dotclear</a></small></p>
	</footer>
</div><!--end #page-->
</body>
</html>
Patidou a écrit :
C'est surtout utile pour l'accessibilité et les lecteurs d'écran.


Merci beaucoup pour ta réponse

pour ma part je n'en trouve aucune utilité vue que c'est un blog privée avec très peu de membres qui n'ont aucun problème d'accessibilité. je me trompe ?

j'ai détourné les rôle en leur donnant des valeurs personnels (pour faciliter ma visibilité quand je relis mon code). est-ce une erreur fondamentale qui pourrait avoir des répercussions sur la qualité ou la vitesse d'affichage du blog ?

merci
On ne sait jamais qui va lire ton blog, perso j'utiliserais les roles corrects et des commentaires pour s'y retrouver dans le code. Si tu regardes mon code, il y a des commentaires indiquant la fin des éléments/conteneurs principaux.
Modifié par Patidou (08 Aug 2011 - 15:32)
Bonjour à toi Patidou pourquoi utilise tu des "div" au lieu des "section" qui sont les nouvelles balises html5 ?
Merci !
La balise section ne remplace pas la balise div. Les 2 sont valides en HTML 5, ça dépend juste de ce que tu veux faire. En gros section sert à démarrer une nouvelle hiérarchie de titre commençant par h1 et div n'a pas de valeur sémantique et sert à créer une zone (division) dans la page.
Modifié par jb_gfx (18 Aug 2011 - 07:49)
Pourtant je tombe sur des articles types :
a écrit :
La balise section : elle doit être utilisée pour définir des blocs distincts de l'article et des autres balises sémantiques sur une page comme la balise div de not' bon vieux temps. De ce point de vue elle sert la division de la page et n'a d'intérêt que pour la mise en page sur le plan visuel.

extrait de on-air.hiseo.fr
C'est assez vague..
Sur html5doctor.

Sur mon blog j'utilise des <article> pour le contenu des billets. Si les commentaires sont ouverts, un <section> à l'intérieur va les contenir (je considère les commentaires comme faisant partie de l'article mais à part).

On peut aussi avoir des articles à l'intérieur de sections, faut juste bien organiser son contenu logiquement.
Modifié par Patidou (18 Aug 2011 - 11:05)
Bonjour,


Ne voulant pas créer de doublon, je post sur ce topic:

Je me suis mis aux role en HTML5 (jamais trop tard) mais j'ai un souci avec le role du footer, je voudrais lui attribuer un role="copyright" (j'ai que le copyright dans le footer, je suis pas à la mode Smiley langue ) mais le validateur w3c est pas d'accord.

Quels sont les roles que l'on peut mette au footer? Smiley eek
Salut,
jmlapam a écrit :
Ne voulant pas créer de doublon, je post sur ce topic:

Je me suis mis aux role en HTML5 (jamais trop tard) mais j'ai un souci avec le role du footer, je voudrais lui attribuer un role=&quot;copyright&quot; (j'ai que le copyright dans le footer, je suis pas à la mode Smiley langue ) mais le validateur w3c est pas d'accord.

Quels sont les roles que l'on peut mette au footer? Smiley eek 

<footer role="contentinfo">
<!-- Tes infos de copyright -->
</footer>
Pages :
Sujet clos
Aller à