Par exemple, les utilisateurs qui ont besoin de lire des logiciels d'écran. En tant que front-end, comment pourrions-nous le supporter? J'ai toujours voulu écrire un tel article auparavant, partageant comment créer une page avec une meilleure accessibilité. Le plan d'aujourd'hui comprend une combinaison de normes HTML TA AG et WCAG. Je vous recommande d'écrire votre HTML comme celui-ci afin que la vie de certaines personnes puisse être plus facile.
Ce que je veux partager aujourd'hui, c'est comment utiliser notre balise HTML pour refléter les normes WCAG et les objectifs du réseau sémantique:
En fait, cela n'a rien à voir avec WCAG, mais pour une page avec une meilleure compatibilité, en particulier la compatibilité en arrière, je vous recommande de l'écrire comme ceci:
<! Doctype html>
La connexion Internet peut presque être considérée comme implémentée en utilisant <a>, comme balise la plus courante sur une page. Comment devrions-nous le traiter?
<a href = title = AccessKey = m rel =hidefocus> Lien </a>
Il est également très important d'utiliser correctement les balises HTML, ce qui est propice à la compréhension de la structure des pages des utilisateurs de logiciels de lecture d'écran. Surtout lorsque vous utilisez des étiquettes telles que H1, H2, H3, etc., les abus peuvent facilement entraîner une confusion structurelle. Bien sûr, utiliser des étiquettes générales, puis utiliser CSS pour faire du contraste visuel est également quelque chose que les gens ordinaires peuvent reconnaître. Mais qu'en est-il des utilisateurs de logiciels de lecture d'écran. Bien sûr, ici, nous avons juste besoin de prêter attention à l'utilisation des balises de page, et la chose la plus importante à propos d'ABBR devrait être d'ajouter un attribut de titre pour décrire l'abréviation. Par exemple:
<ABBR Title = Web Developer> WD </BBR>
Lorsqu'il y a de grands paragraphes de citations, utilisez <lockquote>, tandis que les citations en ligne utilisent <CITE> pour rendre votre structure plus facile à lire:
<lockquote> J'ai toujours voulu écrire un tel article auparavant, partageant comment créer une page avec une meilleure accessibilité. Le plan d'aujourd'hui comprend une combinaison de normes HTML TA AG et WCAG. Je vous recommande d'écrire votre HTML comme celui-ci afin que la vie de certaines personnes puisse être plus facile. </clockquote> <p> La phrase la plus impressionnante de A est que lorsque vous êtes devant, vous devez avoir l'amour. N'utilisez pas de corps rugissants sur toutes sortes de personnes à tout moment </CITE>. </p>
Écrire quelque chose sur papier ne peut pas être fait comme écrire quelque chose sur un ordinateur. Vous pouvez utiliser la touche UNDO pour appuyer dessus, mais que devons-nous faire lorsque nous voulons souligner que quelque chose est supprimé? C'est-à-dire utiliser la balise <l>. Par exemple:
<Del> Lorsque vous exprimez l'accent sur HTML, veuillez utiliser le & lt; b & gt; TAG </DEL> Lorsque vous exprimez l'accent sur HTML, veuillez utiliser le & lt; Strong & gt; étiqueter
L'effet est comme ceci:
Lorsque vous mettez l'accent sur HTML, veuillez utiliser la balise <b>Lorsque vous mettez l'accent sur HTML, veuillez utiliser la balise <strong>
Lorsque je prenais des nouveaux arrivants pour faire un blog frontal Alipay l'année dernière, ce qui m'a le plus impressionné, c'est que j'aimais utiliser <DL>. À cette époque, je pensais que ces étudiants étaient assez bons et avaient une bonne compréhension de la sémantique. Nous utilisons toujours rarement des listes de définition. Au lieu de cela, utilisez les deux des <ul> <ul> <ul>. <dl> doit également être utilisé avec prudence, il est préférable d'utiliser uniquement certaines entrées définitives, telles que l'exemple de W3School, la définition du café et du lait:
<dl> <dt> café </dt> <dd> - boisson chaude noire </dd> <dt> lait </dt> <dd> - boisson froide blanche </dd> </dl>
Liste, cela est très familier à chaque frontal. Parce que la structure peut être appliquée de manière très flexible, elle est souvent utilisée dans la navigation, la liste, l'onglet, etc. Il n'est pas nécessaire de dire beaucoup à ce sujet. Mais il y a une chose qui doit être comprise. Ne croyez pas que <ul> / <l> est un substitut de <Bile>. Dans nos balises HTML couramment utilisées, chaque balise a sa propre fonction et personne ne remplace personne.
<l> <li> Café </li> <li> thé </li> <li> Milk </li> </l>
S'il s'agit d'un tableau, n'utilisez pas les paragraphes à la place, sans parler des listes. À moins que ce soit absolument nécessaire, et ils sont convertibles. De plus, il y a quelques points à noter dans le tableau:
<Table Summary = Sofish's Blog Status> <Thead> <Tr> <Th> Date </th> <th> ip </th> <th> pv </th> </tr> </thead> <tbody> <tr> <td> 2011.31 </td> <td> 3000 </td> <td> 8000 </td> </tr> </cody>
<code> fait référence au texte du code informatique, tandis que <pre> fait référence au texte préformaté. <Pre> est une plage plus large et est un élément en bloc qui peut être utilisé pour formater divers texte, en particulier le code. Il n'est pas nécessaire de prêter une attention particulière à son utilisation, principalement une utilisation sémantiquement correcte, comme ne pas utiliser <pre> au lieu de général <p>.
<code> Text-Align: Center </code> <pre> {(1 * 102) + (9 * 101) + (3 * 100)} </ Pre>Dans les pages Web modernes, il est très rare d'utiliser <br>. L'espace vierge dans les pages Web est généralement implémenté à l'aide du rembourrage et de la marge CSS. Ceci est plus précis et plus facile à contrôler. L'utilisation recommandée est maintenant d'utiliser le paragraphe général <p> pour faire des pauses de ligne simples au lieu de contrôler l'espace blanc de la page.
<p> Je suis un paragraphe. <Br /> La politique est toujours révolutionnaire. </p>
<hr> a un très bon effet sémantique. Mais ses effets visuels sont difficiles à contrôler. J'ai déjà écrit de tels articles sur les problèmes dans divers navigateurs. Généralement, il est rarement utilisé. Si vous fournissez une page distincte spécifiquement pour les utilisateurs de logiciels de lecture d'écran, il peut être très utile.
<h3> titre 1 </h3> <p> lorem ipsum is ... </p> <hr /> <h3> titre 2 </h3> <p> Ceci est l'entrée de ... </p>
En fait, les deux balises <v> / <span> ont une sémantique et définit tous deux une section dans un document. Oui, c'est en fait la même chose que <Action> dans HTML5. C'est juste qu'en raison des moteurs de recherche, les moteurs de recherche pensent qu'ils sont des étiquettes sémantiques, donc elles deviennent des étiquettes sémantiques. L'utilisation recommandée est d'essayer d'utiliser d'autres conteneurs comme cadre de page, tels que la mise en page, l'ajout d'effets visuels supplémentaires, plutôt que des substituts des paragraphes, etc.
<div id = conteneur> <div id = contenu> </ div> <div id = sidebar> <ul> <li> <span> dieu </span>, oh mon zsh </span> </li> </ul> </div> </div>
Ces balises peuvent presque être considérées comme les balises les plus importantes de la hiérarchie d'une balise de page. Nous pouvons utiliser la structure d'un livre pour illustrer ces balises, et lorsque nous construisons une page, nous devons également avoir une telle pensée dans notre esprit:
Oui, bien sûr, il y a aussi des citations <lockQuote>, des codes fournis dans les livres techniques <pre classe = code>, listes de points qui nécessitent une attention <ul>, des tables pour une comparaison facile, etc.
<h1> logo </h1> <h2> Title </h2> <div class = Entry> <h3> Résumé: </h3> <p> lorem ipsum is ... <em> souligner </em> </p> </div>
<em> met l'accent sur l'abréviation. Et <strong> est fortement souligné. De nombreux étudiants qui ne font que commencer ne pourront pas utiliser les étiquettes de <em>, <strong>, <cite>, <i>, <b> et <b> avec précision. <i> et <b> sont essentiellement abandonnés, équivalents à ceux actuels et <strong>. D'une manière générale, leur ordre de l'importance du contenu est le suivant: fort> em ≈ citer.
<strong> Remarque: </strong> N'utilisez pas d'anciennes balises, telles que <CITE> FONT, CENTER </CITE>, etc., en particulier <em> Font </em>.
Les éléments de formulaire sont des balises relativement complexes en HTML, et il y a de nombreux points auxquels faire attention:
<formulaire méthode = post-action = http: //sofish.de> <fieldset> <gend> mon formulaire </ légende> <label for = firstName> * prénom: </ label> <input type = text id = firstName /> <label for = speech = dire quelque chose: </ laboratoire
Pour les photos, les aveugles ne peuvent pas les voir. Fournir Alt pour représenter un texte alternatif. Dites-leur de quel type d'image c'est.
<img src = http: //sofish.de/favicon.ico alt = happy favoris favicon />
Essayez d'éviter l'utilisation de frameworks <frame>, mais lorsque vous devez les utiliser, il est préférable de fournir un attribut de titre pour les décrire.
<iframe src = http: //sofish.de title = Happy Favorites / </ iframe>
Les médias sont également un format relativement complexe, ce qui est plus difficile à traiter. Habituellement, nous pouvons faire ceci:
<audio src = mozart.mp4> Mozart 39 Symphony </ audio>
La page doit contenir le titre et chaque balise doit être reconnaissable. Par exemple, cela se reflète dans Alipay:
<Title> Contactez-moi - Favoris de Happiness </TITAL>
D'accord. C'est tout pour l'instant. WCAG n'est pas seulement l'utilisation de ces tags HTML simples, et les pages Web sémantiques ne sont pas quelque chose qui peut être écrit dans un ou deux articles. Prenez votre temps. Commencez par les choses les plus courantes et développez de bonnes habitudes. Pour en revenir à la phrase au début de l'article, avez-vous le cœur d'écrire la page si difficile à utiliser?