Back to the original French page Read this page in Italian by Google Translation Read this page in Portuguese by Google Translation Read this page in English by Google Translation Read this page in German by Google Translation Read this page in Spanish by Google Translation Read this page in Arabic by Google Translation Read this page in Hebrew by Google Translation

Dar una estructura semántica de las páginas web

Ir al principio de los contenidos sin necesidad de utilizar la Consulta y Participación de barras Cómo utilizar la barra de Consulta y Participación Escuche el contenido principal de esta página
Imprimir Imprimir el contenido principal de esta página Enviar Enviar por correo electrónico el contenido principal de esta página Parte Compartir esta página en TwitThis Compartir esta página en Facebook Compartir esta página en Wikio Compartir esta página en Google Compartir esta página en LinkedIn Comparte este artículo en Digg Compartir el artículo en del.icio.us Compartir esta página en Netvibes

Advertencia: La versión original de este documento es crear la estructura semántica . Esta traducción al francés fue realizada por Ideose como parte de un acuerdo entre WebAIM y Ideose .

Nota: Vea la página de los documentos sobre accesibilidad web para obtener una lista de todos los documentos traducidos. Otras fuentes de información sobre la accesibilidad web también aparecen en el portal digital accesible .

La naturaleza de HTML

Los autores de HTML fueron los científicos que buscaban una forma de compartir documentos en la física de partículas. Llevaban muy poco interés en la forma visual del documento exacto que aparece en una pantalla de ordenador. De hecho, HTML fue diseñado originalmente para cumplir con una separación entre la estructura del contenido y el diseño gráfico. La intención era crear unas páginas de la World Wide Web que pueden mostrarse en cada sistema existente y el navegador, incluyendo los navegadores que "leen" las páginas web de texto a los usuarios con discapacidad visual - y que podría ser interpretado por motores de búsqueda y análisis.

Los inventores de la Web no se da cuenta de su potencial para la visualización gráfica. De este modo, el código HTML no se ha diseñado con tales consideraciones. Ellos estaban tan ansiosos de que los documentos utilizados por las máquinas que producen máquinas de documentos solamente (o los físicos de partículas) le gustaría leer. Al centrarse únicamente en la lógica estructural de los documentos, ignoraron la necesidad de la lógica visual del diseño gráfico y la tipografía. Esta falta de consideración inicial web visual que está causando el estrés para los diseñadores web cuando se desea obtener un diseño gráfico específico para sus páginas web. Esta necesidad de formateo es la razón por la cual las compañías de software han comenzado a ignorar las normas de navegación de HTML y autorizó una funcionalidad adicional en sus navegadores.

Por ejemplo, la mayoría de los diseñadores de evitar el uso de etiquetas HTML estándar para títulos de los párrafos ( <h1> , <h2> , etc.) porque carecen de la sutileza visual: en la mayoría de los navegadores web, estas etiquetas muestran títulos absolutamente demasiado grandes ( <h1> , <h2> ) o ridículamente pequeña ( <h4> , <h5> , <h6> ). Sin embargo, estas etiquetas HTML que no se han creado con la preocupación de su representación visual. Su único objetivo es designar a la héarchique nivel de un título para que los lectores humanos y motores de búsqueda pueden leer un documento y determinar su estructura de información. Es sólo que sin querer los desarrolladores de navegadores han dado diferentes tamaños y niveles de grasa en cada etiqueta del título del párrafo, aunque estas medidas tienden a ser limitadas en el código HTML.

Utilice títulos de los párrafos para estructurar el contenido

A pesar de la naturaleza de la Web y los grandes cambios de uso (una forma de estructurar un documento en un medio visual), es importante que el contenido web se ha diseñado con una buena estructura. Mejor integración con hojas de estilo (CSS) en las versiones recientes de navegadores Web, los desarrolladores pueden cambiar la apariencia de los elementos estructurales para cumplir con sus opciones de diseño y visualización.

Ejemplo

Mira la estructura del contenido de una de sus páginas web utilizando el validador del W3C . . Introduce la URL de la página web en el cuadro de texto, active la opción Mostrar esquema y, a continuación, haga clic en Validar esta página. Por ahora, ignora los errores de HTML que se muestran y desplácese hacia abajo la página para ver el mapa que aparece en la página Web. Usted verá una breve descripción de la estructura de los contenidos de su página web, según lo definido por las etiquetas ( <h1> - <h6> ). Si el resultado no se parece a un verdadero plan, es probable que las etiquetas no se utilizan correctamente (o no hay faro de títulos de los párrafos).

Los usuarios de lectores de pantalla y otras tecnologías de asistencia son capaces de navegar por páginas Web que utilizan su estructura. Esto significa que el usuario puede leer o dirigir el acceso a los elementos de alto nivel ( <h1> ) y los de segundo nivel ( <h2> ), a continuación, a los del tercer nivel ( <h3> ) y así sucesivamente. Ver o escuchar a este plan les da una buena idea del contenido y la estructura de la página.

Las páginas deben ser estructurados jerárquicamente, el primer nivel de seguridad ( <h1> ) es el más grande (por lo general la página del título o documento), el segundo nivel de seguridad ( <h2> por lo general, los títulos vivos capítulos), a continuación, los títulos de tercer nivel ( <h3> , subpárrafos de los capítulos) y así sucesivamente. Técnicamente, como un nivel más bajo debe seguir un mayor nivel de seguridad. El siguiente diagrama muestra la estructura de los valores en valores que debe contener una página web. De hecho, representa la jerarquía de los principales contenidos de esta página con diferentes niveles de títulos de los párrafos de mayor a menor. Puede hacer clic en cada título para acceder a la sección correspondiente en esta página.

Utilizar correctamente títulos de los párrafos

No utilice el formato de texto como el tamaño de la fuente o negrita para dar la apariencia visual de títulos de los párrafos - usar las etiquetas estándar de titulación ( <h1> - <h6> ) en todo el contenido. Las ayudas técnicas y otros navegadores se basan literalmente en el código de la página para determinar su estructura. Los artículos que están en negrita o aparecen en una fuente más grande no son interpretados como elementos estructurales.

Además, no utiliza las etiquetas para el ajuste de sólo crear los efectos visuales. Por ejemplo, si desea resaltar o enfatizar un elemento de contenido que no es un título (como se hizo con la frase anterior), No utilice etiquetas que hacer la valoración. En su lugar, utilizar las etiquetas de estilo de fuente tamaño, negrita o cursiva. Si desea hacer hincapié en algo, debe utilizar la etiqueta de strong (énfasis) en lugar de b y la etiqueta de em (la cursiva) en lugar de i . Tags b y i llevar a toda la información visual de dos solamente, mientras que strong y em dan información semántica. Visualmente, el resultado es el mismo pero los desarrolladores deben utilizar los elementos HTML apropiados. et sélectionnez l'option Utiliser « strong » et « em » à la place de « b » et « i » . En Dreamweaver, puede seleccionar Editar> Preferencias> General y selecciona Utilizar la "fuerte" y "ellos" en lugar de "b" y la "i".

Utilizar correctamente las listas

Listas HTML - ul , ol , y dl - también sirven para transmitir una estructura jerárquica de contenidos. Cada una de estas listas también tienen normas relativas a su uso. La viñeta (lista desordenada) se debe utilizar cuando no existe una secuencia u orden de importancia entre los elementos de la lista. La lista ordenada sugiere una serie de elementos de progresión o secuencia de la lista. La lista de definición se debe utilizar de forma explícita para la presentación de algunas definiciones de la estructura. Como valoración con las etiquetas, las listas de las etiquetas debe ser utilizado correctamente de acuerdo con su naturaleza. La listas ordenadas y desordenadas siempre debe incluir los elementos de la lista. Las listas de definición debe ser siempre la descripción de las definiciones. Listas vacías no son válidos en HTML. Las listas no deben usarse nunca por otras razones o para el diseño. Las listas anidadas deben estar correctamente codificados.

WebAIM es una iniciativa de:
Centro para Personas con Discapacidad (CPD) Universidad Estatal de Utah

Derechos de autor 1999-2009 WebAIM

Principio de la página