Los landmarks su elementos HTML sem\u00e1nticos que identifican las regiones principales de una p\u00e1gina: la cabecera, la navegaci\u00f3n, el contenido principal, el contenido complementario y el pie de p\u00e1gina. Son la versi\u00f3n moderna y accesible de los antiguos Los landmarks principales son: Los usuarios de lectores de pantalla podemos navegar entre landmarks con una sola tecla. En lugar de tabular por todos los elementos de la p\u00e1gina uno por uno, pueden saltar directamente al contenido principal, al men\u00fa de navegaci\u00f3n o al pie de p\u00e1gina. Sin landmarks, tienen que recorrer toda la p\u00e1gina secuencialmente cada vez.<\/p>\n El criterio que axe-core comprueba principalmente es que exista al menos un elemento Tiene que haber exactamente un elemento Puedes tener m\u00faltiples elementos La mayor\u00eda de temas WordPress modernos ya usan elementos sem\u00e1nticos correctamente. Divi genera un Los problemas aparecen cuando el tema usa Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<\/div><\/div><\/div><div id=\"header\"><\/code>, <div id=\"content\"><\/code>, etc.<\/p>\n<header><\/code> (cabecera), <nav><\/code> (navegaci\u00f3n), <main><\/code> (contenido principal), <aside><\/code> (contenido complementario), <footer><\/code> (pie de p\u00e1gina) y <section><\/code>
\n\/
\n<article><\/code> para regiones de contenido.<\/p>\n\u00bfPor qu\u00e9 su importantes para la accesibilidad?<\/h2>\n
<main><\/code> en la p\u00e1gina. Sin \u00e9l, no hay manera de identificar program\u00e1ticamente donde es el contenido principal.<\/p>\nLa estructura de landmarks recomendada<\/h2>\n
<header><\/code>
\nLogo, nombre del lugar, navegaci\u00f3n principal
\n<nav aria-label=\"Navegaci\u00f3 principal\"><\/code>
\n<ul>…elementos del men\u00fa…<\/ul>
\n<\/nav><\/code>
\n<\/header><\/code><\/p>\n<main><\/code>
\nContenido principal de la p\u00e1gina
\n(\u00fanico por p\u00e1gina)
\n<\/main><\/code><\/p>\n<aside><\/code>
\nContenido complementario
\n(sidebar, widgets relacionados)
\n<\/aside><\/code><\/p>\n<footer><\/code>
\nPie de p\u00e1gina, links, copyright
\n<\/footer><\/code><\/p>\nReglas importantes<\/h2>\n
Un solo elemento <main><\/h3>\n
<main><\/code> por p\u00e1gina. Si en tenso dos, axe-core detecta un error. El <main><\/code> tiene que contener el contenido espec\u00edfico de aquella p\u00e1gina, no el header ni el footer.<\/p>\nM\u00faltiplos<nav> con etiquetas<\/h3>\n
<nav><\/code> (men\u00fa principal, men\u00fa secundario, breadcrumbs), pero cada uno tiene que tener un aria-label que les diferencie:<\/p>\n\n
<nav aria-label=\"Navegaci\u00f3 principal\">...<\/code><\/li>\n<nav aria-label=\"Breadcrumb\">...<\/code><\/li>\n<nav aria-label=\"Navegaci\u00f3 del peu de p\u00e0gina\">...<\/code><\/li>\n<\/ul>\nLandmarks en WordPress y Divi<\/h2>\n
<header><\/code> y un <footer><\/code> adecuados. El contenido de la p\u00e1gina se envuelve en el <main><\/code> del template.<\/p>\n<div><\/code> en lugar de elementos sem\u00e1nticos, o cuando el contenido principal no tiene el elemento <main><\/code>. Con la herramienta de autoevaluaci\u00f3n de webaccessible.cat puedes verificar si tu p\u00e1gina tiene la estructura de landmarks correcta.<\/p>\n