Partage
  • Partager sur Facebook
  • Partager sur Twitter

validation html sur aria control

creationsites
    16 mars 2018 à 16:50:50

    Bonjour,

    je souhaite valider mon site avec validatorw3c mais il m'indique

    aria-controls attribute must point to an element in the same document.

    From line 331, column 12; to line 331, column 75

    <li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>

    et

    The aria-labelledby attribute must point to an element in the same document.


    Voici le code html de aria control :

     <ul class="resp-tabs-list" role="tablist">
                                <li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>Location de jeux Baby Foot</span></li>
                              <li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>Location de jeux moto/auto</span></li>
                              <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>Location de jeux de tir</span></li>
                              <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>Location de jeux de billard</span></li>
                              <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>Location de jeux de Flipper</span></li>
                              <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>Location de jeux de Palet</span></li>
                              </ul>

     et aria-labelledby :

        <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
                                   
                                    <div class="tab_img">
                                      <div class="img-top">       
                                                <img src="images/location-simulateur-voiture-location-jeux-pyrenees-orientales-france.jpg" class="img-responsive" alt="location jeux baby-foot"/>
                                              <div class="tab_desc">
                                                 <ul class="round-top">
                                                     <li><a href=""><i class="glyphicon glyphicon-search"> </i></a></li>
                                                     <li><a href=""><i class="glyphicon glyphicon-link"> </i></a></li>
                                                 </ul>    
                                              </div>
                                        </div>
                                        <div class="img-top ">
                                         
                                                <img src="images/location-simulateur-moto-location-jeux-pyrenees-orientales-france.jpg" class="img-responsive" alt="location jeux pour enfants"/>
                                            <div class="tab_desc">
                                                 <ul class="round-top">
                                                     <li><a href=""><i class="glyphicon glyphicon-search"> </i></a></li>
                                                     <li><a href=""><i class="glyphicon glyphicon-link"> </i></a></li>
                                                 </ul>    
                                              </div>
                                             </div>
                                       
                                            <div class="clearfix"></div>
                                 </div>   
                                                                                       
                          </div>


    quelqu'un pourrai m'aider a valider ?

    MERCI

    -
    Edité par creationsites 16 mars 2018 à 16:52:57

    • Partager sur Facebook
    • Partager sur Twitter
    Lamecarlate
    • HTML / CSS
      16 mars 2018 à 17:07:41

      Bonjour,

      le message est clair pourtant :) l'élément avec aria-controls et l'élément dont l'id est référencée dans le aria-controls doivent être sur la même page. As-tu un élément avec id "tab_item-0" dans ta page ?

      Même question pour le aria-labelledby.

      • Partager sur Facebook
      • Partager sur Twitter

      Pas d'aide concernant le code par MP, le forum est là pour ça :)

      creationsites
        16 mars 2018 à 17:30:21

        j'ai cet élémént :

        <div class="resp-tabs-container">
                                <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
                                    <div class="tab_img">
                                      <div class="img-top">       
                                                <img src="images/location-baby-foot-location-jeux-perpignan-simulateur-1.jpg" class="img-responsive" alt="location jeux palet"/>
                                              <div class="tab_desc">
                                                 <ul class="round-top">
                                                     <li><a href=""><i class="glyphicon glyphicon-search"> </i></a></li>
                                                     <li><a href=""><i class="glyphicon glyphicon-link"> </i></a></li>
                                                 </ul>    
                                              </div>
                                        </div>


        et

         <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
									
									<div class="tab_img">
									  <div class="img-top">		
					   		  			   <img src="images/location-simulateur-voiture-location-jeux-pyrenees-orientales-france.jpg" class="img-responsive" alt="location jeux baby-foot"/>
								              <div class="tab_desc">
												 <ul class="round-top">
												 	<li><a href="liste-produits-location-jeux.html#sectionsimateurvoiture"><i class="glyphicon glyphicon-search"> </i></a></li>
												 	<li><a href="liste-produits-location-jeux.html#sectionsimateurvoiture"><i class="glyphicon glyphicon-link"> </i></a></li>
												 </ul> 	
											  </div>
										</div>


        tout est sur la meme page.Presque au meme endroit.Merci

        -
        Edité par creationsites 16 mars 2018 à 17:31:16

        • Partager sur Facebook
        • Partager sur Twitter
        Lamecarlate
        • HTML / CSS
          16 mars 2018 à 17:33:29

          Bin il manque des éléments avec des id. La valeur des aria-labelledby et des aria-controls doit être un id d'un élément existant. Tu ne peux pas court-circuiter. Là, en gros tu dis "cet élément contrôle *ceci*, et cet élément a pour titre/description *cela*", sans que ni le "ceci" ni le "cela" existent, en fait.
          • Partager sur Facebook
          • Partager sur Twitter

          Pas d'aide concernant le code par MP, le forum est là pour ça :)

          creationsites
            19 mars 2018 à 13:18:41

            voici le container complet :

            <div class="container">
		<!---->
		<div class="sap_tabs">
			
						 <div id="horizontalTab" class="horizontaltable">
						  <ul class="resp-tabs-list" role="tablist">
						  	  <li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>Location de jeux Baby Foot</span></li>
							  <li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>Location de jeux moto/auto</span></li>
							  <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>Location de jeux de tir</span></li>
							  <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>Location de jeux de billard</span></li>
							  <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>Location de jeux de Flipper</span></li>
							  <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>Location de jeux de Palet</span></li>
							  </ul>	
							  <div class="clearfix"></div>
						  	
							<br />
							  <span>Autres types de matériels disponibles nous contacter...</span><br />						  
							<div class="resp-tabs-container">
							    <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
									<div class="tab_img">
									  <div class="img-top">		
					   		  			   <img src="images/location-baby-foot-location-jeux-perpignan-simulateur-1.jpg" class="img-responsive" alt="location jeux palet"/>
								              <div class="tab_desc">
												 <ul class="round-top">
												 	<li><a href="#sectionbabyfoot"><i class="glyphicon glyphicon-search"> </i></a></li>
												 	<li><a href="#sectionbabyfoot"><i class="glyphicon glyphicon-link"> </i></a></li>
												 </ul> 	
											  </div>
										</div>
										
											<div class="clearfix"></div>
							     </div>	
									 	        					 
						  </div>
							    <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
									
									<div class="tab_img">
									  <div class="img-top">		
					   		  			   <img src="images/location-simulateur-voiture-location-jeux-pyrenees-orientales-france.jpg" class="img-responsive" alt="location jeux baby-foot"/>
								              <div class="tab_desc">
												 <ul class="round-top">
												 	<li><a href="#sectionsimateurvoiture"><i class="glyphicon glyphicon-search"> </i></a></li>
												 	<li><a href="#sectionsimateurvoiture"><i class="glyphicon glyphicon-link"> </i></a></li>
												 </ul> 	
											  </div>
										</div>
										<div class="img-top ">
										  
					   		  			   <img src="images/location-simulateur-moto-location-jeux-pyrenees-orientales-france.jpg" class="img-responsive" alt="location jeux pour enfants"/>
											<div class="tab_desc">
												 <ul class="round-top">
												 	<li><a href="#sectionsimulateurmoto"><i class="glyphicon glyphicon-search"> </i></a></li>
												 	<li><a href="#sectionsimulateurmoto"><i class="glyphicon glyphicon-link"> </i></a></li>
												 </ul> 	
											  </div>
											 </div>
										
											<div class="clearfix"></div>
							     </div>	
									 	        	 	        					 
						  </div>
						    <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
									<div class="tab_img">
									  <div class="img-top">		
					   		  			   <img src="images/location-simulateur-jeux-tir-location-jeux-pyrenees-orientales-france.JPG" class="img-responsive" alt="location jeux parc"/>
								              <div class="tab_desc">
												 <ul class="round-top">
												 	<li><a href="#sectionsimulateurtir"><i class="glyphicon glyphicon-search"> </i></a></li>
												 	<li><a href="#sectionsimulateurtir"><i class="glyphicon glyphicon-link"> </i></a></li>
												 </ul> 	
											  </div>
										</div>
										
											<div class="clearfix"></div>
							    	 </div>			 	        	 
							  </div>	


							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-3">
									<div class="tab_img">
									  <div class="img-top">		
					   		  			   <img src="images/location-billard-location-jeux-pyrenees-orientales-france.JPG" class="img-responsive" alt="location jeux camping"/>
								              <div class="tab_desc">
												 <ul class="round-top">
												 	<li><a href="#sectionbillard"><i class="glyphicon glyphicon-search"> </i></a></li>
												 	<li><a href="#sectionbillard"><i class="glyphicon glyphicon-link"> </i></a></li>
												 </ul> 	
											  </div>
										</div>
										
											<div class="clearfix"></div>
							    	 </div>			 	        	 
							  </div>	



								<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-4">
									<div class="tab_img">
									  <div class="img-top">		
					   		  			   <img src="images/location-flipper-location-jeux-perpignan-simulateur-1.jpg" class="img-responsive" alt="location jeux anniversaire"/>
								              <div class="tab_desc">
												 <ul class="round-top">
												 	<li><a href="#sectionflipper"><i class="glyphicon glyphicon-search"> </i></a></li>
												 	<li><a href="#sectionflipper"><i class="glyphicon glyphicon-link"> </i></a></li>
												 </ul> 	
											  </div>
										</div>
										
											<div class="clearfix"></div>
							    	 </div>			 	        	 
							  </div>			

							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-5">
									<div class="tab_img">
									  <div class="img-top">		
					   		  			   <img src="images/location-jeux-palet-location-jeux-perpignan-simulateur-1.jpg" class="img-responsive" alt="location jeux bars"/>
								              <div class="tab_desc">
												 <ul class="round-top">
												 	<li><a href="#sectionpalet"><i class="glyphicon glyphicon-search"> </i></a></li>
												 	<li><a href="#sectionpalet"><i class="glyphicon glyphicon-link"> </i></a></li>
												 </ul> 	
											  </div>
										</div>
										
											<div class="clearfix"></div>
							    	 </div>			 	        	 
							  </div>									  
                  </div>
         	 </div>
         </div>

	</div>

            pardon du bout à bout.

            Merci.

            • Partager sur Facebook
            • Partager sur Twitter
            Mewen_bzh
            • HTML / CSS
              19 mars 2018 à 14:01:03

              Bonjour,

              C'est gentil de mettre plus de code mais ton problème reste toujours le même : tu fais référence à des éléments qui ne sont pas définis dans ton code...

              • Partager sur Facebook
              • Partager sur Twitter
              Je ne réponds pas aux messages privés.

              validation html sur aria control

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur ●
              • Markdown