Conceptos de estructura de página

noviembre 17, 2020 0 Por claretcoromoto
Conceptos de estructura de página

Conceptos de estructura de página: El contenido bien estructurado permite una navegación y un procesamiento más eficientes. Utilice HTML para mejorar la navegación y la orientación en páginas web y aplicaciones.

  1. Regiones de página: identifique y marque regiones en páginas web utilizando roles HTML5.
  2. Etiquetado de regiones: etiquete regiones para permitir a los usuarios distinguirlas y acceder a ellas.
  3. Encabezados: agregue encabezados y anímelos de manera lógica para etiquetar secciones de páginas web de acuerdo con sus relaciones e importancia.
  4. Estructura del contenido: marque el contenido de una página de una manera que utilice elementos apropiados y significativos.

¿Qué elementos definen la estructura web?

De cara a definir la estructura de una web, contamos con los siguientes
elementos a nivel de página:
● Menús
● Breadcrumbs
● Filtros
● Listados
● Relacionados
● Paginación
Los elementos más conflictivos a nivel SEO son los filtros, listados y la paginación, ya que si no los controlamos son los grandes generadores de contenido duplicado y thin content. Normalmente los SEOs recomiendan evitar el rastreo o la indexación de estos, aunque bien utilizados (sobre todo los filtros) pueden ayudarnos a conseguir posicionarnos en búsquedas longtail. Por eso, vamos a analizarlos en detalle:

¿Por qué es importante la estructura de la página?

Las páginas con contenido bien estructurado son esenciales para muchos usuarios web, por ejemplo:

Las personas con discapacidades cognitivas y de aprendizaje pueden encontrar y priorizar más fácilmente el contenido de la página.
Las personas que usan lectores de pantalla pueden saltar directamente al contenido principal y navegar a las secciones que son importantes para ellos.
Los usuarios de teclado pueden navegar por las páginas y sus secciones de manera más eficiente. De lo contrario, los usuarios deben presionar la tecla de tabulación varias veces para navegar por todos los enlaces de cada sección.
Las personas que utilizan software que solo muestra el contenido principal de una página web, como las personas con discapacidades cognitivas, obtendrán mejores resultados si la estructura de la página está correctamente marcada.
Las personas con discapacidad visual, incluidas las personas con baja visión, tienen señales que proporcionan orientación en la página y en el contenido.
Los usuarios de la web móvil a menudo tienen acceso a un modo de «lector» o «lectura» que solo mostrará el contenido principal de la página si está correctamente marcado.
Las personas que usan ciertos complementos del navegador pueden usar roles de referencia para saltar a secciones específicas de una página.
Hay beneficios adicionales para una estructura de página buena y accesible, más allá de los que experimentan las personas con discapacidades. Por ejemplo, los motores de búsqueda pueden utilizar los datos para indexar mejor el contenido de una página

Debes tener presente que tanto la estructura de la página como la estructura del sitio forman parte del SEO y es imperante que cuando se piensa aplicar estas técnicas sea antes de implementar el sitio.

Conceptos de menú

¿Por qué el menú es importante?

Los menús se utilizan para la navegación y para proporcionar funciones que son partes críticas de la operatividad de la página web.

Estructura: Marque los menús de una manera que refleje su estructura y los etiquete adecuadamente.

Estilo: utilice patrones de diseño comúnmente reconocidos para distinguir los menús y el estado de los elementos del menú.

Menús desplegables: asegúrese de que los submenús desplegables (desplegables) se puedan utilizar correctamente con el mouse y el teclado.

Menús de aplicaciones: agregue un marcado y un comportamiento de teclado específicos para que se parezcan a los menús de las aplicaciones de escritorio.

Los menús de navegación reflejan la estructura subyacente de los sitios web

Los menús de la aplicación proporcionan acceso a la funcionalidad esencial de una aplicación. Por lo tanto, los menús son partes críticas de las páginas web y las aplicaciones y requieren una atención especial durante el diseño y desarrollo.

Los usuarios de lectores de pantalla y teclados se benefician de la interoperabilidad del teclado y el marcado que les permite operar los menús de diferentes formas.

Los usuarios con dificultades motoras finas y los usuarios de pantallas táctiles requieren objetivos más grandes para hacer clic o tocar. En los menús desplegables, los submenús no deberían desaparecer inmediatamente después de que el mouse haya abandonado el área en la que se puede hacer clic.

Las personas con atención limitada o memoria a corto plazo se benefician de menús claros y distintos con estados fácilmente identificables, como la página actual.

Conceptos de imágenes

¿Por qué las imágenes son importante?

Las imágenes deben tener alternativas de texto que describan la información o función que representan. Esto asegura que las imágenes puedan ser utilizadas por personas con diversas discapacidades. Este tutorial demuestra cómo proporcionar alternativas de texto adecuadas según el propósito de la imagen:

Imágenes informativas: imágenes que representan gráficamente conceptos e información, generalmente imágenes, fotografías e ilustraciones. La alternativa de texto debe ser al menos una breve descripción que transmita la información esencial presentada por la imagen.

Temas que te pueden interesar  Magnificat: Oración por la mañana

Imágenes decorativas: brinde una alternativa de texto nulo (alt = «») cuando el único propósito de una imagen es agregar decoración visual a la página, en lugar de transmitir información que es importante para comprender la página.

Imágenes funcionales: la alternativa de texto de una imagen utilizada como enlace o como botón debe describir la funcionalidad del enlace o botón en lugar de la imagen visual. Ejemplos de tales imágenes son un icono de impresora para representar la función de impresión o un botón para enviar un formulario.

Imágenes de texto: a veces, el texto legible se presenta dentro de una imagen. Si la imagen no es un logotipo, evite el texto en las imágenes. Sin embargo, si se utilizan imágenes de texto, la alternativa de texto debe contener las mismas palabras que en la imagen.

Imágenes complejas, como gráficos y diagramas: para transmitir datos o información detallada, proporcione un texto completo equivalente a los datos o la información proporcionada en la imagen como alternativa de texto.

Grupos de imágenes: si varias imágenes transmiten una sola pieza de información, la alternativa de texto para una imagen debe transmitir la información para todo el grupo.

Mapas de imágenes: la alternativa de texto para una imagen que contiene varias áreas en las que se puede hacer clic debe proporcionar un contexto general para el conjunto de enlaces. Además, cada área en la que se puede hacer clic individualmente debe tener un texto alternativo que describa el propósito o el destino del enlace.

Para obtener una descripción general rápida sobre cómo decidir en qué categoría encaja una imagen en particular, consulte el Árbol de decisiones alternativo. La alternativa de texto debe ser determinada por el autor, dependiendo del uso, contexto y contenido de una imagen. Por ejemplo, el tipo exacto y el aspecto de un pájaro en una imagen pueden ser menos relevantes y se describen solo brevemente en un sitio web sobre parques, pero pueden ser apropiados en un sitio web específicamente sobre aves.

Las imágenes y los gráficos hacen que el contenido sea más agradable

Y además,  más fácil de entender para muchas personas, y en particular para las personas con discapacidades cognitivas y de aprendizaje. Sirven como señales que utilizan las personas con discapacidad visual, incluidas las personas con baja visión, para orientarse en el contenido.

Sin embargo, las imágenes se utilizan ampliamente en sitios web y pueden crear barreras importantes cuando no son accesibles. Las imágenes accesibles son beneficiosas en muchas situaciones, como:

Personas que utilizan lectores de pantalla: la alternativa de texto puede leerse en voz alta o reproducirse en Braille.

Personas que utilizan software de entrada de voz: los usuarios pueden enfocar un botón o una imagen vinculada con un solo comando de voz.

Personas que navegan por sitios web habilitados para voz: la alternativa de texto se puede leer en voz alta

Usuarios de la web móvil: las imágenes se pueden desactivar, especialmente para el roaming de datos.

Optimización de motores de búsqueda: los motores de búsqueda pueden indexar las imágenes

Nota: La eliminación de imágenes de sitios web (las denominadas «veConceptos de tablasrsiones de solo texto») las hace menos accesibles y funcionales para estos usuarios y situaciones.

Conceptos de tablas

Las tablas de datos se utilizan para organizar datos con una relación lógica en cuadrículas. Las tablas accesibles necesitan marcado HTML que indique las celdas de encabezado y las celdas de datos y defina su relación. Las tecnologías de asistencia utilizan esta información para proporcionar contexto a los usuarios.

Las celdas de encabezado deben marcarse con y las celdas de datos con para que las tablas sean accesibles. Para tablas más complejas, es posible que se necesiten asociaciones explícitas mediante los atributos de alcance, id y encabezados.

Este tutorial le muestra cómo aplicar el marcado estructural apropiado a las tablas. Incluye las siguientes páginas:

Tablas con un encabezado para filas o columnas: para tablas con contenido que es fácil de distinguir, marque las celdas del encabezado con

y las celdas de datos con elementos.

Las tablas con dos encabezados tienen un encabezado de fila simple y un encabezado de columna simple: para tablas con direcciones de encabezado poco claras, defina la dirección de cada encabezado estableciendo el atributo de alcance en col o fila.

Las tablas con encabezados irregulares tienen celdas de encabezado que abarcan varias columnas y / o filas: para estas tablas, defina grupos de columnas y filas y establezca el rango de las celdas de encabezado utilizando los valores colgroup y rowgroup del atributo de alcance.

Las tablas con encabezados de varios niveles tienen varias celdas de encabezado asociadas por celda de datos: para las tablas que son tan complejas que las celdas de encabezado no se pueden asociar de una manera estrictamente horizontal o vertical, use los atributos id y headers para asociar el encabezado y las celdas de datos de manera explícita.

Temas que te pueden interesar  Oración a la Beatísima Virgen del Monte Carmelo para tiempos difíciles

Título y resumen: un título identifica el tema general de una tabla y es útil en la mayoría de las situaciones. Un resumen proporciona sugerencias de orientación o navegación en tablas complejas.

Algunos formatos de documentos distintos de HTML, como PDF, proporcionan mecanismos similares a las estructuras de las tablas de marcado. Las aplicaciones de procesamiento de texto también pueden proporcionar mecanismos para marcar tablas. El marcado de tablas a menudo se pierde al convertir de un formato a otro, aunque algunos programas pueden proporcionar funcionalidad para ayudar a convertir el marcado de tablas.

Muchas herramientas de creación web y sistemas de gestión de contenido (CMS) proporcionan funciones para definir las celdas de encabezado durante la creación de la tabla sin tener que editar el código manualmente.

Notas: Este tutorial proporciona una guía para crear tablas que se utilizan para mostrar datos en una cuadrícula. Este tutorial no se aplica a las tablas utilizadas para el diseño. Como regla general, las tablas no están diseñadas para usarse con fines de diseño. En su lugar, una práctica recomendada es utilizar hojas de estilo en cascada (CSS) para la presentación visual.

¿Por qué las Tables son importante?

Las tablas sin marcado estructural para diferenciar y vincular adecuadamente entre el encabezado y las celdas de datos, crean barreras de accesibilidad. Depender únicamente de las señales visuales no es suficiente para crear una mesa accesible. Con el marcado estructural, los encabezados y las celdas de datos se pueden determinar mediante programación mediante software, lo que significa que:

Las personas que utilizan lectores de pantalla pueden hacer que los encabezados de las filas y columnas se lean en voz alta mientras navegan por la tabla. Los lectores de pantalla hablan una celda a la vez y hacen referencia a las celdas de encabezado asociadas, para que el lector no pierda el contexto.

Algunas personas usan formas alternativas de representar los datos, por ejemplo, utilizando hojas de estilo personalizadas para mostrar las celdas de encabezado de manera más prominente. Técnicas como esta les permiten cambiar el tamaño y los colores del texto y mostrar la información como listas en lugar de cuadrículas. El código de la tabla debe estar estructurado correctamente para permitir representaciones alternativas.

Conceptos de formularios

Los formularios se utilizan comúnmente para proporcionar interacción al usuario en sitios web y en aplicaciones web. Por ejemplo, iniciar sesión, registrarse, comentar y comprar. Este tutorial le muestra cómo crear formularios accesibles. Los mismos conceptos se aplican a todos los formularios, ya sean procesados ​​del lado del cliente o del servidor.

Consideraciones técnicas de los Formularios

Aparte de las consideraciones técnicas, los usuarios suelen preferir formas sencillas y breves. Solo pida a los usuarios que ingresen lo que se requiere para completar la transacción o el proceso; si se solicitan datos irrelevantes o excesivos, es más probable que los usuarios abandonen el formulario.

Controles de etiquetado: utilice el elemento y, en casos específicos, otros mecanismos (por ejemplo, WAI-ARIA, atributo de título, etc.) para identificar cada control de formulario.

Agrupar controles: use los elementos y para agrupar y asociar controles de formulario relacionados.

Instrucciones de formulario: proporcione instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y los controles de formulario individuales.

Validación de entrada: Valide la entrada proporcionada por el usuario y brinde opciones para deshacer los cambios y confirmar la entrada de datos.

Notificaciones de usuario: notifique a los usuarios sobre la finalización exitosa de la tarea, cualquier error y proporcione instrucciones para ayudarlos a corregir errores.

Formularios de varias páginas: divida los formularios largos en varios formularios más pequeños que constituyen una serie de pasos o etapas lógicas e informan a los usuarios sobre su progreso.

Controles personalizados: utilice elementos de formulario estilizados y otras técnicas de mejora progresiva para proporcionar controles personalizados

¿Por qué los Formularios son importantes?

Los formularios pueden ser visual y cognitivamente complejos y difíciles de usar. Los formularios accesibles son más fáciles de usar para todos, incluidas las personas con discapacidades.

Las personas con discapacidades cognitivas pueden comprender mejor el formulario y cómo completarlo, ya que hacer que los formularios sean accesibles mejora la estructura del diseño, las instrucciones y los comentarios.

Las personas que utilizan la entrada de voz pueden usar las etiquetas a través de comandos de voz para activar los controles y mover el enfoque a los campos que deben completar.

Las personas con destreza limitada se benefician de grandes áreas en las que se puede hacer clic que incluyen las etiquetas, especialmente para controles más pequeños, como botones de opción y casillas de verificación.

Las personas que utilizan lectores de pantalla pueden identificar y comprender los controles de formulario más fácilmente porque están asociados con etiquetas, conjuntos de campos y otros elementos estructurales.

Conceptos de carrusel

Implemente un widget de carrusel accesible al proporcionar una estructura sólida y control de usuario:

Temas que te pueden interesar  Linkbuilding holístico

Estructura: utilice la estructura semántica del carrusel para respaldar el funcionamiento adecuado de la tecnología de asistencia.
Funcionalidad: agregue funcionalidad para mostrar y anunciar elementos de carrusel.
Animaciones: agregue una animación de transición entre elementos y asegúrese de que los usuarios puedan detenerla y reanudarla.
Estilo: diseñe el carrusel para asegurarse de que todos puedan usarlo y leerlo.

¿Qué son los carruseles?

Los carruseles muestran una colección de elementos de uno en uno. También se conocen como «presentaciones de diapositivas» y «controles deslizantes». Los usos típicos de los carruseles incluyen el desplazamiento de titulares de noticias, artículos destacados en páginas de inicio y galerías de imágenes.

¿Qué hace que un carrusel sea accesible?

Los usuarios deben poder pausar el movimiento del carrusel porque puede ser demasiado rápido o distraer, dificultando la lectura del texto.

Todas las funciones, incluida la navegación entre elementos del carrusel, deben poder utilizarse con el teclado.

Los cambios en los elementos del carrusel deben comunicarse a todos los usuarios, incluidos los usuarios de lectores de pantalla.

La posición del teclado («foco») se gestiona de forma razonable y comprensible.

Nota: Los carruseles se disputan desde una perspectiva de usabilidad porque su contenido puede ser difícil de descubrir. Garantizar la accesibilidad también puede mejorar la usabilidad.

¿Por qué es  importante carrusel?

Por lo general, los carruseles se ubican de manera prominente y se utilizan para proporcionar navegación o mostrar el contenido de la página. Los carruseles accesibles son esenciales para muchos usuarios de sitios web, incluidos:

Las personas que utilizan software de entrada de voz y navegación por teclado pueden navegar entre elementos individuales.

Las personas que utilizan lectores de pantalla comprenderán qué elemento se muestra actualmente y cómo navegar entre elementos.

Las personas que se distraen con el movimiento pueden pausar las animaciones.

Las personas que necesitan más tiempo para leer pueden pausar las animaciones, lo que les proporciona tiempo suficiente para leer y comprender el contenido del carrusel.

Listados

Imprescindibles en la mayoría de webs, excepto en aquellas tan pequeñas que sus principales secciones quepan en un menú, los listados y sus elementos de filtrado (facets) y ordenación tienen que estar muy acotados a nivel SEO.

Paginaciones

Cuando usas la paginación debes tener en cuenta también que es un factor de claro impacto en la estructura web y en el rastreo por parte de los bots de los buscadores.
Debido a que muchas veces el contenido de las páginas de un listado es
muy similar entre sí, especialmente en ecommerces y webs de clasificados, las páginas internas suelen ser un problema para el posicionamiento web. Esto quedó claro a la comunidad SEO tras la confirmación por parte de John Muller de Google que no están teniendo en cuenta las etiquetas HTML que deberían utilizar para entender correctamente los listados paginados: las etiquetas link rel=”next” y rel=”prev”.

Por tanto, hay que tener en cuenta que cuantos más listados paginados tenga un sitio web, mayor serán los problemas de rastreo y le será más.
Prueba de ello es la gran cantidad de keywords por las que posicionan las páginas 2 de la mayoría de ecommerce y webs de gran tamaño:

En el extremo opuesto tenemos el problema de que si la web dispone de muchos elementos (productos o anuncios, entre otros) sin una paginación de listados es muy fácil que estos puedan quedarse sin ningún enlace interno  apuntando hacia ellos, con lo que esto supone para el posicionamiento. Las estrategias SEO más eficaces para evitar estos problemas, sin cambiar la estructura de la web, son dos, en función de si nos interesa posicionar los  elementos del listado o no:

  1.  Scroll infinito: solución ideal cuando no necesitas posicionar los elementos paginados, ya que deja sin enlazado interno a todos los elementos que no aparecen al cargarse la página y sin interacción por parte de los usuarios. Es importante destacar que el uso de este tipo de paginación colisiona con el uso de un footer en los listados, ya que en este tipo de solución no es posible hacer click en los elementos del footer al ir añadiéndose al hacer scroll nuevos elementos que lo desplazan.
  2. Aumentar el número de elementos de cada página: en el caso de que tengas que mantener la paginación y quieras mantener enlazados todos los elementos de los listados, esta es la solución que te interesa. Es habitual ver webs donde solo se muestran 9 elementos por página (o incluso menos) y que tienen listados de más de 5 páginas, lo cual complica la arquitectura
    de la información añadiendo urls innecesarias. Si se aumenta el número de elementos por página a un número que no suponga un problema para el rendimiento de la web o su tiempo de carga (y tampoco para la usabilidad de la web), conseguiremos reducir drásticamente el número de urls de la web evitando o aligerando los problemas de rastreo comentados.

Fuente: W3