• 6 heures
  • Moyenne
Licence

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 01/08/2023

Structurez votre code HTML de manière accessible avec ARIA

Compétences évaluées

  • Coder une page HTML respectant les règles d'accessibilité WCAG avec ARIA

  • Question 1

    Qu’est-ce que la sémantique ?

    • C’est un paradigme de programmation CSS qui donne des pistes pour bien construire son CSS.

    • C’est un concept lié aux bases de données et à leur intégration dans des sites marchands.

    • C’est la possibilité de donner un rôle explicite aux éléments via le HTML.

    • C’est un terme en relation avec le concept de mobile first.

  • Question 2

    Qu’est-ce que les attributs ARIA permettent de faire ?

     
    Attention, plusieurs réponses sont possibles.

    • Ils permettent de préciser la nature d’un élément (par exemple, une page de recherche).

       

    • Ils permettent de réaliser une animation sans avoir à développer.

       

    • Ils permettent de définir l’état d’un élément.

       

    • Ils permettent de changer automatiquement la langue du navigateur.

       

    • Ils permettent de préciser l’action possible sur un élément.

       

    • Ils permettent de se passer de l’utilisation de balises sémantiques.

       

  • Question 3

    Selon vous, comment rendre le code ci-dessous plus accessible ?

    <!DOCTYPE html>

    <html lang="en">

    <head>

       <meta charset="UTF-8">

       <meta name="viewport" content="width=device-width, initial-scale=1.0">

       <title>Tonight In Gotham - OpenClassrooms</title>

     

       <link rel="stylesheet" href="./css/normalize.css">

       <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">

       <link rel="stylesheet" href="./css/app.css">

    </head>

    <body>

       <div class="header">

           <div class="main-nav"></div>

       </div>

       <div class="content">

           <div class="inner-page-navigation">

           </div>

           <div class="section">

           </div>

       </div>

       <div class="footer">

           <div class="footer-nav"></div>

       </div>

    </body>

    </html>
     
     

    • Il n’y a rien à modifier, ce contenu est accessible.

       
       
    • <!DOCTYPE html>

      <html lang="en">

      <head>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <title>Tonight In Gotham - OpenClassrooms</title>

       

         <link rel="stylesheet" href="./css/normalize.css">

         <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">

         <link rel="stylesheet" href="./css/app.css">

      </head>

      <body>

         <header class="header">

             <nav class="main-nav"></nav>

         </header>

         <main class="content">

             <div class="inner-page-navigation">

             </div>

             <section class="section">

             </section>

         </main>

         <footer class="footer">

             <div class="footer-nav"></div>

         </footer>

      </body>

      </html>
       
       
    • <!DOCTYPE html>

      <html lang="en">

      <head>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <title>Tonight In Gotham - OpenClassrooms</title>

       

         <link rel="stylesheet" href="./css/normalize.css">

         <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">

         <link rel="stylesheet" href="./css/app.css">

      </head>

      <body>

         <header class="header">

             <div class="main-nav"></div>

         </header>

         <main class="content">

             <div class="inner-page-navigation">

             </div>

             <div class="section">

             </div>

         </main>

         <footer class="footer">

             <div class="footer-nav"></div>

         </footer>

      </body>

      </html>
       
       
Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Être orientéComparez nos types de formation