Por ejemplo, aquellos usuarios que necesitan leer el software de pantalla. Como front-end, ¿cómo podríamos soportarlo? Siempre he querido escribir un artículo de este tipo antes, compartiendo cómo crear una página con mejor accesibilidad. El plan de hoy incluye una combinación de estándares HTML TA AG y WCAG. Te recomiendo que escribas tu HTML así para que la vida de algunas personas pueda ser más fácil.
Lo que quiero compartir hoy es cómo usar nuestra etiqueta HTML para reflejar los estándares WCAG y los objetivos de la red semántica:
De hecho, esto no tiene nada que ver con WCAG, pero para una página con una mejor compatibilidad, especialmente la compatibilidad con atraso, te recomiendo que lo escribas así:
<! Doctype html>
La conexión a Internet casi se puede decir que se implementa utilizando <a>, como la etiqueta más común en una página. ¿Cómo debemos tratarlo?
<a href = title = accesskey = m rel =hilera> Enlace </a>
También es muy importante usar las etiquetas HTML correctamente, lo que conduce a la comprensión de la estructura de la página de los usuarios de software de lectura de pantalla. Especialmente cuando se usa etiquetas como H1, H2, H3, etc., el abuso puede conducir fácilmente a la confusión estructural. Por supuesto, usar etiquetas generales y luego usar CSS para hacer contraste visual también es algo que la gente común puede reconocer. Pero, ¿qué pasa con los usuarios de software de lectura de pantalla? Por supuesto, aquí solo necesitamos prestar atención al uso de etiquetas de página, y lo más importante de ABBR debería ser agregar un atributo de título para describir la abreviatura. Por ejemplo:
<Abbr Title = Web Developer> WD </BBR>
Cuando hay grandes párrafos de citas, use <ClockQuote>, mientras que las citas en línea usan <cite> para facilitar su estructura:
<LockQuote> Siempre he querido escribir un artículo de este tipo antes, compartiendo cómo crear una página con mejor accesibilidad. El plan de hoy incluye una combinación de estándares HTML TA AG y WCAG. Te recomiendo que escribas tu HTML así para que la vida de algunas personas pueda ser más fácil. </loCLOQUETE> <P> La oración más impresionante de A es que cuando estás al frente, debes tener amor. No use cuerpos rugientes en todo tipo de personas en ningún momento </cite>. </p>
No se puede hacer algo en papel como escribir algo en una computadora. Puede usar la tecla Deshacer para presionarla, pero ¿qué debemos hacer cuando queremos enfatizar que algo se elimina? Eso es usar la etiqueta <El>. Por ejemplo:
<El> Al expresar énfasis en HTML, use & lt; b & gt; Etiqueta </el> Al expresar énfasis en HTML, use & lt; Strong & gt; etiqueta
El efecto es así:
Al enfatizar en HTML, use la etiqueta <b>Al enfatizar en HTML, use la etiqueta <strong>
Cuando estaba llevando a los recién llegados a hacer un blog front-end de Alipay el año pasado, lo que más me impresionó fue que me gustaba usar <dl>. En ese momento, estaba pensando que estos estudiantes eran bastante buenos y tenían una buena comprensión de la semántica. Todavía rara vez usamos listas de definición. En su lugar, use los dos de los dos <ul> <ol>. <dl> también debe usarse con precaución, es mejor usar solo ciertas entradas definitivas, como el ejemplo de W3School, la definición de café y leche:
<dl> <dt> café </dt> <dd>- bebida caliente negra </dd> <dt> leche </dt> <dd>- bebida fría blanca </dd> </dl>
Lista, esto es muy familiar para cada front-end. Debido a que la estructura se puede aplicar de manera muy flexible, a menudo se usa en navegación, lista, pestaña, etc. No es necesario decir mucho sobre esto. Pero hay una cosa que debe entenderse. No crea que <ul>/<ol> sea un sustituto de <table>. En nuestras etiquetas HTML de uso común, cada etiqueta tiene su propia función, y nadie es un sustituto de nadie.
<Ol> <li> Café </li> <li> té </li> <li> leche </li> </ol>
Si es una tabla, no use párrafos en su lugar, y mucho menos listas. A menos que sea absolutamente necesario, y son convertibles. Además, hay algunos puntos a tener en cuenta en la tabla:
<Tabla Summary = Sofish's Blog Status> <thead> <tr> <th> date </th> <th> ip </th> <th> pv </th> </tr> </thead> <tbody> <tr> <td> 2011.3.11 </td> <td> 3000 </td> <td> 8000 </td> </tr> </tbody> </table>
<código> se refiere al texto del código de la computadora, mientras que <pre> se refiere al texto preformado. <pre> es un rango más amplio y es un elemento en bloque que puede usarse para formatear varios texto, especialmente el código. No es necesario prestar especial atención al usarlo, principalmente un uso semánticamente correcto, como no usar <pre> en lugar de general <p>.
<code> text-align: Center </code> <pre> {(1 * 102) + (9 * 101) + (3 * 100)} </pre>En las páginas web modernas, es muy raro usar <br>. El espacio en blanco en las páginas web generalmente se implementa utilizando el relleno y el margen CSS. Esto es más preciso y más fácil de controlar. El uso recomendado ahora es usar el párrafo general <p> para hacer descansos de línea simples en lugar de controlar el espacio en blanco de la página.
<p> Soy un párrafo. <Br /> Política siempre es que rompa la línea. </p>
<hr> tiene muy buen efecto semántico. Pero sus efectos visuales son difíciles de controlar. He escrito tales artículos antes sobre temas en varios navegadores. En general, rara vez se usa. Si proporciona una página separada específicamente para usuarios de software de lectura de pantalla, puede ser de gran utilidad.
<h3> Título 1 </h3> <p> lorem ipsum es ... </p> <hr/> <h3> Título 2 </h3> <p> Esta es la entrada de ... </p>
De hecho, las dos etiquetas <iv>/<span> tienen semántica, y ambas define una sección en un documento. Sí, en realidad es lo mismo que <Section> en HTML5. Es solo que, debido a los motores de búsqueda, los motores de búsqueda piensan que son etiquetas semánticas, por lo que se convierten en etiquetas semánticas. El uso recomendado es intentar usar otros contenedores como marco de página, como el diseño, agregar efectos visuales adicionales, en lugar de sustitutos de párrafos, etc.
<div id = contenedor> <div id = content> </div> <div id = barbar> <ul> <li> <span> dios </span>, oh mi zsh </span> </li> </ul> </div> </div>
Casi se puede decir que estas etiquetas son las etiquetas más importantes en la jerarquía de una etiqueta de página. Podemos usar la estructura de un libro para ilustrar estas etiquetas, y cuando construimos una página, también debemos tener tal pensamiento:
Sí, por supuesto, también hay citas <CLOCKQuote>, códigos proporcionados en libros técnicos <pre class = código>, listas de puntos que necesitan atención <ul>, tablas para una fácil comparación, etc.
<h1> logo </h1> <h2> title </h2> <div class = entry> <h3> Resumen: </h3> <p> lorem ipsum es ... <em> enfatizar </em> </p> </div>
<em> enfatiza la abreviación. Y <strong> es un fuerte énfasis. Muchos estudiantes que recién comienzan no podrán usar las etiquetas de <em>, <strong>, <cite>, <i>, <b> y <b> con precisión. <i> y <b> están básicamente abandonados, equivalentes a los actuales y <strong>. En términos generales, su orden de la importancia del contenido es el siguiente: fuerte> em ≈ cite.
<strong> Nota: </strong> no use etiquetas viejas, como <cite> font, centro </cite>, etc., especialmente <em> fuente </em>.
Los elementos de formulario son etiquetas relativamente complejas en HTML, y hay muchos puntos a los que prestar atención:
<Form Method = Post Action = http: //sofish.de> <fieldset> <legend> mi formulario </legend> <etiqueta for = firstName>* Nombre de primer: </label> <input type = text id = firstName/> <etiqueta for = discurso> decir algo: </etiqueta <xtexarea id = discurso/> </textare> <input type = subt value/subt tithle button> </fieldset> </form>
Para las fotos, las personas ciegas no pueden verlas. Proporcionar ALT para representar texto alternativo. Diles qué tipo de imagen es esta.
<img src = http: //sofish.de/favicon.ico alt = feliz favoritos favicon/>
Intente evitar el uso de marcos <frame>, pero cuando necesita usarlos, es mejor proporcionar un atributo de título para describirlos.
<iframe src = http: //sofish.de title = feliz favoritos/</iframe>
Los medios también son un formato relativamente complejo, que es más problemático de procesar. Por lo general, podemos hacer esto:
<audio src = mozart.mp4> Mozart 39 Symphony </ audio>
La página debe contener el título, y cada etiqueta debe ser reconocible. Por ejemplo, esto se refleja en Alipay:
<title> Contáctame-Happiness Favoritos </title>
Está bien. Eso es todo por ahora. WCAG no es solo el uso de estas etiquetas HTML simples, y las páginas web semánticas no son algo que se pueda escribir en uno o dos artículos. Tome su tiempo. Comience con las cosas más comunes y desarrolle buenos hábitos. Volviendo a la oración al comienzo del artículo, ¿tiene el corazón para escribir la página tan difícil de usar?