Questions d'entretien pour développeur Frontend Junior : React, outils et sujets avancés

Introduction

Ce guide complet contient 21 questions d'entretien soigneusement sélectionnées, couvrant des sujets avancés du développement frontend : React et frameworks, outils de build et contrôle de version, optimisation des performances, débogage, accessibilité, tests et compétences générales. Ce sont les questions que les développeurs frontend juniors rencontrent réellement lors des entretiens en 2024-2025. Chaque question comprend une réponse approfondie, une évaluation de la rareté et une évaluation de la difficulté basée sur l'analyse de centaines d'entretiens réels provenant de grandes entreprises technologiques et de startups.

Il s'agit de la partie 2 de notre guide d'entretien complet. Pour les bases sur HTML, CSS et JavaScript, consultez Partie 1 : Fondamentaux HTML, CSS et JavaScript.

React et frameworks (8 questions)

33. Qu'est-ce que JSX et pourquoi l'utilisons-nous dans React ?

Réponse : JSX (JavaScript XML) est une extension de syntaxe pour JavaScript qui ressemble à HTML et est utilisée pour décrire la structure de l'interface utilisateur dans React.

Exemple :

const element = <h1 className="title">Bonjour, {name} !</h1> ;

// Est compilé en :
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Bonjour, ',
  name,
  ' !'
) ;

Avantages :

• Plus lisible et intuitif que React.createElement()
• Ressemble à HTML, mais avec toute la puissance de JavaScript
• Prend en charge les expressions à l'intérieur des accolades {}
• Type-safe lors de l'utilisation de TypeScript
• Syntaxe familière pour les développeurs

Principales différences par rapport à HTML :

• Utilisez className au lieu de class
• Utilisez htmlFor au lieu de for
• Tous les attributs sont en camelCase (onClick, onChange)
• Doit fermer toutes les balises (y compris <img />, <br />)

Rareté : Courant Difficulté : Facile

34. Expliquez la différence entre les props et l'état dans React

Réponse :

Props (Propriétés) :

• Données transmises DU parent AUX composants enfants
• En lecture seule (immuable du point de vue de l'enfant)
• Utilisé pour la configuration des composants
• Les changements proviennent du rendu du parent

// Parent
function Parent() {
  return <Child name="Alice" age={25} /> ;
}

// Enfant
function Child({ name, age }) {
  return <p>{name} a {age} ans</p> ;
  // Impossible de modifier le nom ou l'âge
}

État :

• Données gérées DANS un composant
• Modifiable (peut être modifié avec une fonction setter)
• Les changements déclenchent des rendus
• Privé au composant

function Counter() {
  const [count, setCount] = useState(0) ;
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Compteur : {count}
    </button>
  ) ;
}

Principale différence : Les props descendent (du parent à l'enfant), l'état est local au composant.

Rareté : Courant Difficulté : Facile

35. Qu'est-ce que le hook useState et comment l'utilisez-vous ?

Réponse : useState est un hook React qui ajoute la gestion de l'état aux composants fonctionnels.

Syntaxe :

const [stateVariable, setStateFunction] = useState(initialValue) ;

Exemples :

// Compteur simple
function Counter() {
  const [count, setCount] = useState(0) ;
  
  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrémenter</button>
      <button onClick={() => setCount(0)}>Réinitialiser</button>
    </div>
  ) ;
}

// État de l'objet
function Form() {
  const [user, setUser] = useState({ name: '', email: '' }) ;
  
  const handleChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    }) ;
  } ;
  
  return (
    <input name="name" value={user.name} onChange={handleChange} />
  ) ;
}

// Initialisation paresseuse (calcul coûteux)
const [data, setData] = useState(() => {
  return expensiveComputation() ;
}) ;

Points clés :

• Les mises à jour de l'état déclenchent des rendus
• Les mises à jour de l'état sont asynchrones
• Utilisez les mises à jour fonctionnelles pour l'état basé sur l'état précédent : setCount(prev => prev + 1)

Rareté : Courant Difficulté : Facile-Moyen

36. Que fait le hook useEffect ? Expliquez le tableau de dépendances.

Réponse : useEffect exécute des effets secondaires après le rendu (extraction de données, abonnements, manipulation du DOM).

Syntaxe :

useEffect(() => {
  // Code d'effet secondaire ici
  
  return () => {
    // Nettoyage (facultatif)
  } ;
}, [dependencies]) ;

Comportement du tableau de dépendances :

// 1. Pas de tableau de dépendances - s'exécute après CHAQUE rendu
useEffect(() => {
  console.log('S'exécute à chaque rendu') ;
}) ;

// 2. Tableau vide [] - s'exécute UNE SEULE FOIS au montage
useEffect(() => {
  console.log('S'exécute uniquement au montage') ;
  fetchData() ;
}, []) ;

// 3. Avec des dépendances - s'exécute lorsque les dépendances changent
useEffect(() => {
  console.log('S'exécute lorsque le compteur change') ;
  document.title = `Compteur : ${count}` ;
}, [count]) ;

Cas d'utilisation courants :

// Extraction de données
useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => setUsers(data)) ;
}, []) ;

// Écouteurs d'événements (avec nettoyage)
useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth) ;
  window.addEventListener('resize', handleResize) ;
  
  return () => window.removeEventListener('resize', handleResize) ;
}, []) ;

Rareté : Courant Difficulté : Moyen

37. Comment afficher une liste d'éléments dans React ? Pourquoi avons-nous besoin de clés ?

Réponse :

Affichage des listes :

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  ) ;
}

Pourquoi les clés sont importantes : Les clés aident React à identifier les éléments qui ont changé, ont été ajoutés ou ont été supprimés. Elles permettent des mises à jour efficaces en :

• Minimisant la manipulation du DOM
• Préservant l'état du composant
• Conservant l'identité appropriée de l'élément
• Optimisant l'algorithme de réconciliation

Consignes relatives aux clés :

// BIEN - Identifiants uniques et stables
items.map(item => <Item key={item.id} {...item} />)

// MAL - Index du tableau (instable lorsque la liste change)
items.map((item, index) => <Item key={index} {...item} />)

// MAL - Les clés non uniques provoquent des bogues
items.map(item => <Item key={item.category} {...item} />)

Quand l'index est acceptable : Listes statiques qui ne sont jamais réorganisées ou modifiées.

Rareté : Courant Difficulté : Facile-Moyen

38. Qu'est-ce que le DOM virtuel et pourquoi React l'utilise-t-il ?

Réponse : Le DOM virtuel est une représentation JavaScript légère du DOM réel que React conserve en mémoire.

Comment ça marche :

1. Rendu : React crée un arbre DOM virtuel lorsque l'état change
2. Diff : React compare le nouveau DOM virtuel avec la version précédente (réconciliation)
3. Mise à jour : React calcule les modifications minimales nécessaires
4. Correctif : React met à jour uniquement les parties modifiées du DOM réel

Pourquoi c'est bénéfique :

• Performances : La manipulation directe du DOM est lente ; React regroupe et minimise les mises à jour
• Efficacité : Met à jour uniquement les éléments modifiés, pas l'arbre entier
• Expérience du développeur : Écrivez du code déclaratif, React gère les mises à jour efficaces
• Abstraction : Le même code peut cibler différentes plateformes (React Native, VR)

Exemple :

// Vous écrivez :
<div>{count}</div>

// Lorsque le compteur passe de 0 à 1 :
// React met uniquement à jour le nœud de texte, pas l'ensemble du div

Remarque : React moderne (architecture Fiber) ne différencie pas littéralement deux DOM virtuels, mais utilise un concept similaire avec les nœuds Fiber.

Rareté : Courant Difficulté : Moyen

39. Comment gérez-vous les formulaires dans React ?

Réponse :

Composants contrôlés (recommandé) : Les valeurs des éléments de formulaire sont contrôlées par l'état React.

function LoginForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  }) ;
  
  const handleChange = (e) => {
    const { name, value } = e.target ;
    setFormData(prev => ({
      ...prev,
      [name]: value
    })) ;
  } ;
  
  const handleSubmit = (e) => {
    e.preventDefault() ;  // Empêcher le rechargement de la page
    console.log('Soumis :', formData) ;
    // Appel API ici
  } ;
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
        type="email"
      />
      <input
        name="password"
        value={formData.password}
        onChange={handleChange}
        type="password"
      />
      <button type="submit">Connexion</button>
    </form>
  ) ;
}

Composants non contrôlés (moins courants) : Utilisez des refs pour accéder directement aux valeurs du DOM.

function UncontrolledForm() {
  const emailRef = useRef() ;
  
  const handleSubmit = (e) => {
    e.preventDefault() ;
    console.log(emailRef.current.value) ;
  } ;
  
  return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} type="email" />
    </form>
  ) ;
}

Meilleure pratique : Utilisez des composants contrôlés dans la plupart des cas.

Rareté : Courant Difficulté : Moyen

40. Quelle est la différence entre les composants fonctionnels et les composants de classe ?

Réponse :

Composants fonctionnels (modernes, préférés) :

function Welcome({ name }) {
  const [count, setCount] = useState(0) ;
  
  useEffect(() => {
    // Effets secondaires
  }, []) ;
  
  return <h1>Bonjour, {name} !</h1> ;
}

Composants de classe (hérités) :

class Welcome extends React.Component {
  constructor(props) {
    super(props) ;
    this.state = { count: 0 } ;
  }
  
  componentDidMount() {
    // Effets secondaires
  }
  
  render() {
    return <h1>Bonjour, {this.props.name} !</h1> ;
  }
}

Principales différences :

• Syntaxe : Fonctions vs classes
• État : Hooks (useState) vs this.state
• Cycle de vie : Hooks (useEffect) vs méthodes de cycle de vie
• Mot-clé this : Pas nécessaire dans les composants fonctionnels
• Code passe-partout : Moins de code dans les composants fonctionnels
• Performances : Légèrement meilleures avec les composants fonctionnels

Norme moderne : Les composants fonctionnels avec Hooks sont désormais l'approche recommandée (depuis React 16.8). Les composants de classe fonctionnent toujours, mais sont considérés comme hérités.

Rareté : Courant Difficulté : Facile-Moyen

Outils de build et contrôle de version (5 questions)

41. Qu'est-ce que npm et à quoi sert package.json ?

Réponse : npm (Node Package Manager) est le gestionnaire de packages par défaut pour JavaScript, utilisé pour installer, gérer et partager des packages de code.

package.json est le fichier manifeste qui contient :

• Métadonnées : Nom du projet, version, description, auteur
• Dépendances : Packages nécessaires à la production (dependencies)
• DevDependencies : Packages nécessaires uniquement au développement (devDependencies)
• Scripts : Commandes pour les tâches courantes (démarrage, build, test)

Exemple de package.json :

{
  "name": "mon-application",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  }
}

Commandes courantes :

• npm install - Installe toutes les dépendances
• npm install nom-du-package - Installe un package spécifique
• npm install --save-dev nom-du-package - Installe comme dépendance de développement
• npm run nom-du-script - Exécute un script npm
• npm update - Met à jour les packages

Rareté : Courant Difficulté : Facile

42. Qu'est-ce que Git et pourquoi les équipes l'utilisent-elles ?

Réponse : Git est un système de contrôle de version distribué qui suit les modifications du code au fil du temps.

Pourquoi les équipes utilisent Git :

• Collaboration : Plusieurs développeurs travaillent sur la même base de code sans conflits
• Historique : Enregistrement complet de toutes les modifications (qui, quoi, quand, pourquoi)
• Branchement : Travaillez sur les fonctionnalités indépendamment sans affecter le code principal
• Sauvegarde : Code stocké dans plusieurs emplacements (local + distant)
• Restauration : Revenez facilement aux versions de travail précédentes
• Revue de code : Examinez les modifications avant de les fusionner (pull requests)
• Expérimentation : Essayez de nouvelles idées dans les branches sans risque

Concepts de base :

• Référentiel (repo) : Dossier de projet suivi par Git
• Commit : Instantané des modifications avec message
• Branche : Ligne de développement indépendante
• Fusion : Combinez les modifications de différentes branches
• Distant : Référentiel hébergé en ligne (GitHub, GitLab)

Norme de l'industrie : Plus de 93 % des développeurs utilisent Git dans le monde entier.

Rareté : Courant Difficulté : Facile

43. Expliquez les commandes et le flux de travail Git courants

Réponse :

Flux de travail de base :

# Cloner le référentiel
git clone https://github.com/user/repo.git

# Vérifier l'état
git status

# Créer une nouvelle branche
git checkout -b nom-de-la-fonctionnalité
# ou syntaxe moderne :
git switch -c nom-de-la-fonctionnalité

# Apporter des modifications, puis les indexer
git add fichier.js
git add .  # Indexer toutes les modifications

# Valider avec un message
git commit -m "Ajouter la fonctionnalité de connexion"

# Envoyer vers le référentiel distant
git push origin nom-de-la-fonctionnalité

# Extraire les dernières modifications
git pull origin main

# Fusionner la branche
git checkout main
git merge nom-de-la-fonctionnalité

# Afficher l'historique
git log

Commandes essentielles que les juniors doivent connaître :

• clone - Copier le référentiel distant
• add - Indexer les modifications
• commit - Enregistrer l'instantané avec un message
• push - Envoyer vers le référentiel distant
• pull - Télécharger + fusionner les modifications distantes
• branch - Répertorier/créer des branches
• checkout/switch - Changer de branche
• status - Voir l'état actuel
• log - Afficher l'historique des commits

Rareté : Courant Difficulté : Facile-Moyen

44. Qu'est-ce qu'un conflit de fusion et comment le résoudriez-vous ?

Réponse : Un conflit de fusion se produit lorsque Git ne peut pas fusionner automatiquement les modifications, car des modifications concurrentes existent sur les mêmes lignes de code.

Scénario courant :

# Le développeur A modifie la ligne 5
# Le développeur B modifie également la ligne 5
# Lors de la fusion, Git ne sait pas laquelle conserver

Marqueurs de conflit :

<<<<<<< HEAD
const greeting = "Bonjour" ;
=======
const greeting = "Salut" ;
>>>>>>> branche-fonctionnalité

Étapes de résolution :

1. Identifier les conflits : Git marque les fichiers avec des conflits
2. Ouvrir les fichiers en conflit : Rechercher les marqueurs de conflit
3. Décider quoi conserver : Examiner les deux modifications
4. Modifier le code : Supprimer les marqueurs, conserver le code souhaité
5. Tester : S'assurer que le code fonctionne correctement
6. Indexer les fichiers résolus : git add fichier.js
7. Terminer la fusion : git commit

Meilleures pratiques :

• Communiquer avec l'équipe
• Extraire fréquemment pour minimiser les conflits
• Garder les commits petits et ciblés
• Tester minutieusement après la résolution

Rareté : Courant Difficulté : Moyen

45. Que fait Webpack ? Qu'est-ce que Vite ?

Réponse :

Webpack : Un bundler de modules qui prend JavaScript, CSS, des images et d'autres ressources, les traite et les regroupe dans des fichiers optimisés pour le navigateur.

Ce qu'il fait :

• Regroupe plusieurs fichiers en moins de fichiers
• Transforme le code (Babel pour JSX/ES6, Sass en CSS)
• Optimise pour la production (minification, tree shaking)
• Gère les dépendances
• Fractionnement du code pour les performances

Concept de base :

src/
  index.js
  component.js
  styles.css
          ↓ Webpack
dist/
  bundle.js (tout combiné et optimisé)

Vite : Outil de build moderne qui est considérablement plus rapide que les bundlers traditionnels comme Webpack.

Pourquoi Vite est plus rapide :

• Utilise les modules ES natifs pendant le développement (aucun regroupement nécessaire)
• Le remplacement à chaud des modules (HMR) est instantané
• Regroupe uniquement pour la production
• Meilleure expérience de développement

Quand utiliser :

• Vite : Nouveaux projets, frameworks modernes (React, Vue)
• Webpack : Projets existants, besoin d'une configuration complexe

Rareté : Courant Difficulté : Facile-Moyen

Performances web et optimisation (3 questions)

46. Comment optimiseriez-vous les performances de chargement d'un site web ?

Réponse :

Optimisation des images :

• Compresser les images (JPG pour les photos, PNG pour les graphiques, WebP pour les deux)
• Utiliser les tailles appropriées (ne pas charger une image de 4 000 px pour un affichage de 300 px)
• Charger paresseusement les images en dessous de la ligne de flottaison
• Utiliser srcset pour les images réactives

Optimisation du code :

• Minifier JavaScript, CSS, HTML (supprimer les espaces, les commentaires)
• Regrouper et compresser les fichiers (gzip ou Brotli)
• Supprimer le CSS/JS inutilisé (tree shaking)
• Fractionnement du code (charger uniquement le code nécessaire par page)

Mise en cache :

• Mise en cache du navigateur avec des en-têtes de cache appropriés
• Utiliser un CDN pour les ressources statiques
• Service workers pour les capacités hors ligne

Stratégies de chargement :

• CSS critique en ligne dans <head>
• Différer JavaScript non critique
• Précharger les ressources importantes
• Réduire les requêtes HTTP

Mesures de performance :

• Mesurer avec Lighthouse, PageSpeed Insights
• Cible : FCP < 1,8 s, LCP < 2,5 s, CLS < 0,1

Rareté : Courant Difficulté : Moyen

47. Quels outils utiliseriez-vous pour mesurer les performances d'un site web ?

Réponse :

Outils de développement du navigateur :

• Onglet Réseau des outils de développement Chrome : Analyser le timing des requêtes, la taille des fichiers, l'ordre de chargement
• Onglet Performance/Lighthouse : Générer des rapports de performance avec des scores
• Onglet Couverture : Trouver JavaScript/CSS inutilisé
• Console : Mesurer avec console.time() et l'API Performance

Outils en ligne :

• Google PageSpeed Insights : Obtenir des scores de performance et des recommandations
• WebPageTest : Graphiques en cascade détaillés, plusieurs emplacements
• GTmetrix : Analyse des performances avec des notes

Mesures à surveiller :

• First Contentful Paint (FCP) : Quand le premier contenu apparaît
• Largest Contentful Paint (LCP) : Quand le contenu principal se charge
• Time to Interactive (TTI) : Quand la page devient interactive
• Cumulative Layout Shift (CLS) : Stabilité visuelle
• Total Blocking Time (TBT) : Temps de blocage du thread principal

Pour les juniors : Une connaissance de base des outils de développement Chrome et de Lighthouse est suffisante. Les compétences d'analyse approfondie ne sont pas attendues.

Rareté : Courant Difficulté : Facile-Moyen

48. Qu'est-ce que le chargement paresseux et quand l'utiliseriez-vous ?

Réponse : Le chargement paresseux diffère le chargement des ressources non critiques jusqu'à ce qu'elles soient nécessaires, généralement lorsqu'elles sont sur le point d'entrer dans la fenêtre d'affichage.

Cas d'utilisation courants :

Images :

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Description">

Chargement paresseux natif (navigateurs modernes) :

<img src="image.jpg" loading="lazy" alt="Description">

JavaScript/React :

// Chargement paresseux du composant
const HeavyComponent = React.lazy(() => import('./HeavyComponent')) ;

function App() {
  return (
    <Suspense fallback={<div>Chargement...</div>}>
      <HeavyComponent />
    </Suspense>
  ) ;
}

Avantages :

• Chargement initial de la page plus rapide
• Utilisation réduite de la bande passante
• Meilleures performances sur les connexions lentes
• Expérience utilisateur améliorée (le contenu apparaît plus rapidement)

Quand utiliser :

• Images en dessous de la ligne de flottaison
• Composants lourds non immédiatement visibles
• Contenu dans les onglets/accordéons
• Implémentations de défilement infini

Rareté : Peu courant Difficulté : Moyen

Débogage et outils de développement (2 questions)

49. Comment déboguer une erreur JavaScript dans le navigateur ?

Réponse :

Processus de débogage étape par étape :

1. Vérifier la console :

console.log(variable) ;      // Inspecter les valeurs
console.error('Erreur :', error) ;  // Enregistrer les erreurs
console.table(arrayOfObjects) ;   // Afficher les données dans un tableau
console.warn('Avertissement') ;    // Mettre en évidence les avertissements

2. Utiliser les points d'arrêt :

• Ouvrir le panneau Sources/Débogueur des outils de développement
• Cliquer sur le numéro de ligne pour définir un point d'arrêt
• L'exécution du code s'interrompt au point d'arrêt
• Inspecter les variables dans le panneau Portée
• Parcourir le code (Pas au-dessus, Pas dans, Pas à l'extérieur)

3. Examiner la trace de pile :

• Les messages d'erreur affichent les noms de fichiers et les numéros de ligne
• Suivre la pile d'appels pour trouver l'origine de l'erreur
• Vérifier les erreurs de réseau dans l'onglet Réseau

4. Déboguer les problèmes de DOM :

• Inspecter les éléments dans le panneau Éléments
• Vérifier les styles calculés
• Utiliser le forçage de l'état :hover
• Vérifier les écouteurs d'événements attachés

5. Vérifier les requêtes réseau :

• L'onglet Réseau affiche les appels d'API ayant échoué
• Examiner les en-têtes de requête/réponse
• Vérifier les codes d'état (404, 500, etc.)

Techniques de débogage courantes :

• Ajouter l'instruction debugger ; pour interrompre l'exécution
• Utiliser des points d'arrêt conditionnels
• Surveiller les expressions
• Mettre en boîte noire le code tiers

Rareté : Courant Difficulté : Facile-Moyen

50. Quels sont les principaux panneaux des outils de développement Chrome et à quoi servent-ils ?

Réponse :

Panneaux essentiels :

1. Console :

• Afficher les erreurs et les journaux JavaScript
• Exécuter les commandes JavaScript
• Tester les expressions de manière interactive
• Tests d'API

2. Éléments (Inspecteur) :

• Inspecter et modifier la structure HTML
• Modifier le CSS en temps réel
• Déboguer les problèmes de mise en page
• Afficher les styles calculés, le modèle de boîte
• Tester les conceptions réactives

3. Sources (Débogueur) :

• Afficher les fichiers sources
• Définir les points d'arrêt
• Parcourir l'exécution du code
• Modifier et enregistrer les modifications (espaces de travail)
• Afficher la pile d'appels

4. Réseau :

• Surveiller les requêtes/réponses HTTP
• Vérifier les temps de chargement et la taille des fichiers
• Déboguer les appels d'API
• Filtrer par type (JS, CSS, XHR, images)
• Limiter la vitesse du réseau

5. Performance/Lighthouse :

• Analyser les performances d'exécution
• Générer des audits de performance
• Identifier les goulots d'étranglement
• Vérifier les Core Web Vitals

6. Application :

• Inspecter le stockage local, le stockage de session
• Afficher et effacer les cookies
• Vérifier les service workers
• Gérer le cache

Pour les juniors : Une forte connaissance de la Console, des Éléments, des Sources et du Réseau est attendue. Le profilage des performances est un plus.

Rareté : Courant Difficulté : Facile

Accessibilité et meilleures pratiques (2 questions)

51. Qu'est-ce que l'accessibilité web et pourquoi est-ce important ?

Réponse : L'accessibilité web signifie concevoir et développer des sites web qui peuvent être utilisés par tous, y compris les personnes handicapées (visuelles, auditives, motrices, cognitives).

Pourquoi c'est important :

1. Conception inclusive : 15 % de la population mondiale a une forme de handicap 2. Exigences légales : ADA (Americans with Disabilities Act), Section 508, conformité WCAG 3. Meilleure expérience utilisateur pour tous : Les légendes aident dans les environnements bruyants, la navigation au clavier aide les utilisateurs avancés 4. Avantages SEO : HTML sémantique et structure appropriée améliorent le classement dans les moteurs de recherche 5. Public plus large : N'excluez pas les utilisateurs/clients potentiels 6. Responsabilité éthique : L'égalité d'accès est un droit humain

Handicaps courants à prendre en compte :

• Visuel : Cécité, basse vision, daltonisme
• Auditif : Surdité, perte auditive
• Moteur : Mobilité limitée, tremblements, paralysie
• Cognitif : Troubles d'apprentissage, problèmes de mémoire

Analyse de rentabilité : Les sites web accessibles atteignent plus d'utilisateurs, sont mieux classés dans les moteurs de recherche, évitent les poursuites judiciaires, démontrent la responsabilité sociale de l'entreprise.

Rareté : Courant Difficulté : Facile-Moyen

52. Quels sont les moyens de base pour rendre un site web plus accessible ?

Réponse :

Structure HTML :

• Utiliser des éléments sémantiques (<header>, <nav>, <main>, <article>, <footer>)
• Hiérarchie des titres appropriée (H1 → H2 → H3, pas de saut)
• Étiqueter correctement les entrées de formulaire

<label for="email">E-mail :</label>
<input id="email" type="email" name="email" />

Images :

• Toujours inclure un texte alt descriptif
• Utiliser alt vide pour les images décoratives : alt=""

Navigation au clavier :

• Tous les éléments interactifs doivent être accessibles au clavier
• Ordre de tabulation logique
• Indicateurs de focus visibles
• Ne pas supprimer le contour de :focus

Couleur et contraste :

• Contraste de couleur suffisant (4,5:1 pour le texte normal, 3:1 pour le texte volumineux)
• Ne pas s'appuyer uniquement sur la couleur pour transmettre des informations
• Tester avec des simulateurs de daltonisme

Attributs ARIA (si nécessaire) :

<button aria-label="Fermer la boîte de dialogue">×</button>
<div role="alert" aria-live="polite">Modifications enregistrées</div>
<nav aria-label="Navigation principale">...</nav>

Tests :

• Utiliser des lecteurs d'écran (VoiceOver, NVDA, JAWS)
• Navigation uniquement au clavier
• Outils d'accessibilité du navigateur (Lighthouse, axe)

Rareté : Courant Difficulté : Moyen

Sensibilisation aux tests (1 question)

53.