Structurez votre code HTML de manière accessible 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>

Codez un site web accessible avec HTML & CSS

Structurez votre code HTML de manière accessible avec ARIA

Compétences évaluées

Question 1

Question 2

Question 3