• 6 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 26/05/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