Attribut HTML 'Table' 'Scope'

L'attribut de portée est un attribut de la balise dans HTML, qui est utilisé pour clarifier la portée de la cellule de titre de table. Il indique au navigateur si un en-tête de table cible une ligne ou une colonne, aidant ainsi les technologies auxiliaires telles que les lecteurs d'écran pour interpréter avec précision la structure de la table. 1. Utilisez scope = "col" pour indiquer que le titre est un en-tête de colonne, qui convient aux meilleurs titres tels que "nom" et "âge"; 2. Utilisez Scope = "Row" pour indiquer que le titre est un en-tête de ligne, qui convient au contenu tel que "ID utilisateur" au début de chaque ligne; 3. Dans les tables complexes, vous pouvez combiner Rowspan avec scope = "rowGroup" ou scope = "Colgroup" pour implémenter une structure d'en-tête à plusieurs niveaux. L'utilisation correcte de la portée peut éviter l'ambiguïté et garantir que les utilisateurs handicapés ont une compréhension claire de la correspondance entre les données et les titres. Il est recommandé d'ajouter toujours une portée pour et de tester son effet via un lecteur d'écran pour éviter la nidification hiérarchique inutile.

Dans le développement Web, table sont souvent utilisées pour afficher des données structurées. Afin de technologies d'assistance telles que les lecteurs d'écran pour interpréter correctement le contenu de la table, HTML fournit une propriété très utile: scope . Il peut aider les utilisateurs handicapés à comprendre plus clairement les relations d'information dans le tableau.

Qu'est-ce que scope ?

scope est un attribut utilisé dans HTML pour les balises <th> , qui est utilisée pour clarifier la portée de la cellule de titre de table. Il peut indiquer au navigateur si l'en-tête est pour une ligne ou une colonne.<p> Par exemple: </p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175278188553894.jpeg" class="lazy" alt="Attribut HTML 'Table' 'Scope'"><pre class='brush:php;toolbar:false;'> &lt;ballage&gt; &lt;tr&gt; &lt;th Scope = &quot;Col&quot;&gt; Nom &lt;/ Th&gt; &lt;th Scope = &quot;Col&quot;&gt; Age &lt;/ Th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;TD&gt; Zhang San &lt;/td&gt; &lt;td&gt; 28 &lt;/td&gt; &lt;/tr&gt; &lt;/ table&gt;</pre><p> Dans cet exemple, <code>scope="col" signifie "nom" et "âge" sont des en-têtes de colonne. Lorsque le lecteur d'écran lit "Zhang San", il l'associera automatiquement à la colonne "Nom"; Lors de la lecture de "28", cela indiquera qu'il s'agit des données de la colonne "Age".

Pourquoi l'utilisation scope est-elle importante pour l'accessibilité?

Pour les utilisateurs avec une vision normale, la structure du tableau est claire en un coup d'œil. Mais pour les personnes utilisant des lecteurs d'écran, ils ne peuvent qu'écouter le contenu linéairement et ne peuvent pas dire en un coup d'œil quels sont les titres, quelles lignes ou colonnes correspondent.

Si vous n'utilisez pas scope , le lecteur d'écran peut:

• Je ne sais pas si un <th> est un titre de ligne ou un titre de colonne
• Données à incorrecte avec le titre
• Rendre difficile pour les utilisateurs de comprendre les structures de table complexes

Après avoir utilisé scope , le lecteur d'écran peut dire avec précision l'utilisateur: "Les données que vous voyez appartiennent maintenant à" l'âge "de la colonne X, et le titre de ligne correspondant est" Zhang San "."

Comment utiliser correctement scope ?

Il existe deux valeurs scope communes: row et col Il y a rowgroup et colgroup , mais ils sont moins utilisés.

1. Titre de la colonne ( scope="col" )

Applicable aux titres en haut de chaque colonne, tels que "nom", "âge", "ville".

 <th Scope = "Col"> City </th>

2. Titre de ligne ( scope="row" )

Applicable aux titres au début de chaque ligne, tels que la colonne qui indique "ID utilisateur" ou "nom" sur le côté gauche de la table.

 <th scope = "row"> utilisateur 001 </th>

3. En-tête à plusieurs niveaux (cou)

Si vous avez une table complexe avec des groupements, tels que "Nom" et "Gender" sous "Informations personnelles", vous pouvez organiser la structure en combinaison avec <thead> , <th> et scope .

 <tr>
  <th rowspan = "2" scope = "rowgroup"> Informations utilisateur </th>
  <th Scope = "Col"> Nom </ Th>
  <th Scope = "Col"> Gender </th>
</tr>
<tr>
  <th Scope = "Col"> Zhang San </th>
  <th Scope = "Col"> mâle </th>
</tr>

Cela permet à la technologie auxiliaire d'identifier le "Zhang San" appartient à la colonne "Nom" dans le groupe "Informations utilisateur".

Quelques conseils dans le développement réel

• Ajoutez toujours scope pour <th> pour éviter l'ambiguïté.
• Les tables simples utilisent d'abord col ou row , sans surcomplexation.
• Pour tester l'effet sans barrière , vous pouvez utiliser des outils de lecteur d'écran (tels que NVDA, VoiceOver) pour vérifier si les informations d'en-tête sont correctement diffusées.
• N'abusez pas rowgroup et colgroup à moins que votre structure de table ne nécessite vraiment ce niveau.

---

Fondamentalement, c'est tout. Bien qu'il semble être une petite propriété, scope joue un rôle important dans l'amélioration de l'accessibilité des pages Web. Ne le sous-estimez pas. L'ajout d'une propriété peut permettre à un utilisateur contre visuellement de comprendre facilement le formulaire que vous avez fait.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!