Módulo D1: Estructuras de Página – Cómo Crear Cursos 12

Continuamos desgranando el currículum necesario en un curso de accesibilidad, esta vez con el primero de los módulos para desarrolladores.

Los cursos basados en este módulo deberán:

  • Mostrar como las personas con discapacidad se dependen de encabezados, secciones y otras estructuras para orientarse y navegar en una página web.
  • Mostrar como las personas con discpacidad dependen de la semántica del código de la página web para identiicar los componentes de la página y comprender su significado.
  • Explicar las técnicas de codificacion para trasmitir la estructura y semática en un contenido accesible.

Objetivos de aprendizaje para este módulo

Los estudiantes deberán ser capaces de:

  • Explicar como la estructrura de una página permite a las personas con discapacidad orientarse y navegar dentro de la misma.
  • Identificar y trasmitir la jerarquía de las secciones del contenido mediante el uso de encabezados.
  • Escribir lenguaje de marcado apropiado para la estructura del contenido,como párrafos y listas.
  • Etiquetar diferentes regiones de la página, como el encabezado, el pie y el contenido principal.
  • Escribir lenguaje de marcado para indicar la metainformación y facilitar de este modo la identificación e interpretación.
  • Destacar los beneficios de usar los elementos nativos de HTML para asegurar la compatibilidad con tecnologías de asistencia y estrategias adaptativas.
  • Escribir código que permita a las personas saltar bloques repetitivos de la página.
  • Escribir código para el contenido de forma que se presente en una secuencia significativa.
  • Escribir estilos y código para el contenido de forma que tenga un indicador de foco distinguible.

Habilidades

Habilidades necesarias para este módulo:

Estudiantes

Instructores

Lecciones a enseñar

Lecciones que enseñar para alcanzar el objetivo de aprendizaje:

Lección: Encabezados de sección

Demostrar el uso de los elementos HTML h1 a h6 para distinguir y etiquetar seccciones del contenido. Demostrar el uso las propiedades WAI-ARIA role="heading" y level="1-6" cuando los encabezados HTML no puedan ser usados. Explicar como diferentes perfiles usan los encabezados para orientarse y navegar.

Objetivos de aprendizaje para la lección

Los estudiantes deberán ser capaces de:

  • Explicar como los encabezados y su jerarquía de niveles son usados por diferentes tipos de tecnologías de asistencia y estrategias adaptativas, como texto a voz y hojas de estilo personalizadas, para permitir a personas con diferentes perfiles de discapacidad comprender y navegar el contenido.
  • Etiquetar encabezados usando los elementos HTML h1 a h6, y usando las propiedades WAI-ARIA role="heading" y level="1-6" cuando los encabezados HTML no puedan ser usados
  • Jerarquizar los niveles de encanezado de acuerdo a su estructura jerárquica en el contenido.
  • Describir requisitos complementarios para autores y diseñadores para proporcionar textos significativos y estilos distintivos para los encabezados.

Ideas para enseñar la lección

Ideas opcionales para alcanzar los objetivos de aprendizaje

  • Explicar que los encabezados están organizados de un modo estructuralmente jerárquico, por ejemplo h1 siendo el nivel superior y h6 el último. Enfatice que los elementos nativos de HTML son más propensos a ser soportados por los navegadores y las tecnologías de asistencia. Muestre ejemplos de como los encabezados pueden ser anidados para distinguir y etiquetar diferentes secciones y subsecciones del contenido. Puede encontrar ejemplos de como proveer páginas estructuradas en estos Tutoriales sobre WAI en "Headings that Reflect the Page Organization"
  • Muestre ejemplos de encabezados y reflexione junto con los estudiantes si son o no descriptivos de la sección que encabezan. Mencione que proporcionar un encabezado descriptivo es una responsabilidad compartida entre los diferentes miembros del equipo de contenidos, autores, diseñadores y desarrolladores. Puede consultar algunas descripciones acerca de como etiquetar adecuadamente los encabezados en los tutoriales siguientes "Organize Passages of Text".
  • Demuestre el uso de comandos de voz, pulsaciones de teclas y gestos proporcionados por las tecnologías de asistencia y estrategias adaptativa para navegar en las páginas web a través de encabezados. Explore la funcionalidad avanzada que algunas herramientras proporcionan, como presentar todos los encabezados en una listas, donde los usuarios pueden seleccionar el encabezado en que están interesados. Ejemplos de como las personas con discapacidad interactuan con la web pueden encontrarse en el documento "How People with Disabilities Use the Web"".

Ideas para apoyar en el estudio del tema

Ideas opcionales para asimilar este conocimiento

  • Preguntas y respuestas cortas - Pregunte a los estudiantes cuantos niveles de encabezado hay en las especificaciones HTML, y como se codifica cada uno de ellos. Apoye a los estudiantes en el conocimiento de los elementos h1 a h6, y tambien en las propiedades WAI-ARIA role="heading" y level="1-6".
  • Práctica - Proporcione a los estudiantes diferentes páginas web que contengan encabezados incorrectos tanto en estructura como en jerarquía y pregúnteles cómo construirían ellos dichos encabezados de forma correcta usadnolos elementos h1 a h6. Asesore a los estudiantes en como reflejar la estructura de una página mediante la estructura intrínseca.
  • Práctica - Proporcione a los estudiantes encabezados que no describan las secciones, e inste y apoye a los estudiantes para que reemplacen el texto de los encabezados con títulos que describan correctamente la información. Ayude a los estudiantes para desarrollar su capacidad de proporcionar títulos adecuados para las secciones.

Tema: Secciones del contenido

Explique el uso de elementos HTML para crear la estructura del contenido. Por ejemplo, el código correcto para secciones, párrafos y listas.

Objetivos de aprendizaje para el tema

Los estudiantes deberán ser capaces de:

  • Explicar como las secciones de contenido, codificadas correctamente, pueden ser presentadas en diferentes formas: por ejemplo, leidas a través de tecnologías de texto a voz, o renderizadas usando hojas de estilo personalizadas, y mostradas en diferentes pantallas y tamaños de texto.
  • Describir el proósito de los elementos HTML section, article, p, ul, ol, li, dl, dt, y dd.
  • Escribir el código para secciones de contenido usando los elementos HTML section y article.
  • Escribir código para los parrafos usando el elemento HTML p.
  • Escribir código para listas usando los elementos HTML ul, ol, ydl.
  • Escribir código para elementos de lista usando los elementos HTML li, dt, y dd
  • Escribir código para citas inline o de bloque usando los elementos HTML q y blockquote respectivamente.
  • Aplicar las propiedades WAI-ARIA correspondientes cuando los elementos nativos HTML no puedan ser usados
  • Describir los requisitos relacionados para autores de contenidos, para usar la estructura apropiada para apoyar el significado del contenido, como parrafos y listas.

Ideas para enseñar la materia

Ideas adicionales para ayudar a los alumnos a alcanzar los objetivos de aprendizaje

  • Defina los elementos section como el agrupamiento temático de contenido. Un ejemplo de como codificar un elemento sectionestá disponible en los Tutoriales WAI sobre secciones.
  • Defina el elemento article como una unidad autocontenida dentro de la página web. Un ejemplo de como codificar un elemento article puede consultarse en los Tutoriales WAI sobre artículos.
  • Explique que los elementos p se usan para marcar parrafos de texto. Un ejemplo de como codificar el elemento paragraph puede encontrarse en los Tutoriales WAI sobre parrafos.
  • Explique que las listas no ordenadas son usadas para agrupar elementos cuando el orden numérico no es relevante, y listas ordenadas cuando el orden numérico de los elemetos agrupados es relevante. Explique que estas listas se codifican mediante los elementos ul y ol respectivamentem y que cada elemento de las mismas se codifica mediante un elemento li. Enfatice que cada uno de los elementos de lista puede contener encabezados, parafos y otras listas. Un eje,plo de como codificar listas no ordenadas puede encontrarse en los Tutoriales WAI sobre listas.
  • Defina las listas descriptivas como una agrupación de varios términos y sus definiciones. Las listas descriptivas son codificadas mediante el elemento dt, y las definiciones mediante el elemento dd. Ejemplos de como codificar las listas descriptivas pueden encontrarse en los Tutoriales WAI sobre listas descriptivas.
  • Defina una cita como un texto atribuido a otro autor. Explique que pueden ser inline o de bloque, y que son codificadas meduante los elementos HTML q y blockquoterespectivamente. Puede encontrar ejemplos de como codificar citas en los Tutoriales WAI sobre citas.

Ideas para apoyar en el aprendizaje del tema

Ideas adicionales para apoyar en el proceso de aprendizaje.

  • Investigación - Los estudiantes deberán investigar las especificaciones de HTML para proporcionar información sobre las diferentes formas de codificar secciones de contenido. Apoye a los estudiantes en el conocimiento de los elementos HTML para codificar el contenido.
  • Práctica - Proporcione a los estudiantes diferentes tipos de listas y pídales a los estudiantes que los codifiquen usando los elementos HTML correspondientes. Apoye a los estudiantes en el conocimiento de los diferentes tipos de lista.
  • Práctica - Aporte a los estudiantes un segmento de texto que contenga diferentes secciones, parrafos, listas y citas. Pida a los estudiantes que codifiquen ese contenido usando los elementos HTML correspondientes.

Tema: Regiones de la página

Explicar el uso de elementos de código comunes para identificar regiones de la páginas, como las áreas de cabecera, pie, navegación y contenido principal. Explique como las regiones en una página permiten la orientación y navegación para personas con discapacidad.

Objetivos de aprendizaje para el tema

Los estudiantes deberán ser capaces de:

  • Explicar como las regiones de página, correctamente codificadas, pueden ser mostradas de diferentes formas. Por ejemplo, pueden ser leidas por una tecnología de texto a voz, renderizadas usando hojas de estilo personalizadas o mostradas en diferentes pantallas y tamaños de letra.
  • Describir el propósito de los elementos HTML header, nav, main, section, article, aside, y footer
  • Escribir código para las regiones de la página usando los elementos HTML header, nav, main, section, article, aside, y footer, y tambien sus equivalentes landmarks en WAI-ARIA cuando las estructuras HTML no pueden ser usadas.
  • Etiquetar regiones usando encabezados HTML, aria-label, yh aria-labelledbycuando sea necesario.

Ideas para apoyar el proceso de aprendizaje

Ideas de apoyo para alcanzar el objetivo de aprendizaje:

  • Muestre ejemplos de diferentes configuraciones de página y su código fuente para encabezado, navegación, contenido principal, secciones, artículo , elementosc complementarios y pie. Haga hincapié en que los elemntos HTML nativos son los más ampliamente soportados por las tecnologías de asistencia de los navegadores actuales. Ejemplos de como usar los elementos HTML para codificar las diferentes regiones pueden consultarse en los Tutoriales WAI para regiones.
  • Explique que los elementos para regiones de WAI-ARIA proporcioann una mayor compatibilidad con viejas tecnologías de asistencia y navegadores. Haga hincapié en que también pueden mejorar la semántica de docuemntos HTML 4., si se aplican a un elemento div. Ejemplos de como codificar regiones usando WAI-ARIA pueden ser consultados en los Tutorales WAI aria para regiones de página en HTML 5 usando WAI_ARIA
  • Muestre ejemplos de como proveer etiquetas oara las regiones de la página, incluyendo el uso de encabezados HTML, aria-label y aria-labelledby. Explique que la región debe ser etiquetada para distinguirlas unas de las otras, por ejemplo, cuando dos regiones del mismo tipo son usadas en la misma web (como podrían ser menú principal y menu de legal). Ejemplos de como etiquetar regiones pueden ser consultadas en el documento Tutoriales WAI: Etiquetando regiones.
  • Muestre como funcionan los comandos de voz, atajos de teclado, y gestos proporcionados por las tecnologías de asistencia y estrategias adaptativas para bavegar ebtre reguibes, Estudie la funcionalidad avanzada que algunas herramientras proporcionan, como presentar todas las regiones en una lista o arbol donde los usuarios puedens seleccionar la región en que estñan interesados. Puede encontrar ejemplos de como personas con discapacidad interactuan con la web en el documento "Stories of Web Users".
  • Invite a los estudiantes a probar por sí mismos la funcionalidad incorporada en algunos navegadores para facilitar la lectura. Explique que esto cambia la configuración de la página, mostrando el contenido principal de la web cuando está correctamente etiquetada. Debata con los estudiantes como esto puede mejorar la legibilidad para todos los perfiles de usuarios. Apóyese en las páginas de apoyo de los diversos navegadores para obtener más información acerca de cada modo de lectura específico.

Ideas para apoyar en el aprendizaje del objetivo

Ideas adicionales para aportar a la consecución de los objetivos de aprendizaje:

  • Preguntas y respuestas cortas - Pregunte a los estudiantes acerca de los tipos de regiones de una página y como cada una de ellas puede ser codificada tanto mediante HTML como mediante WAI-ARIA. Apoye a los estudiantes en la adquisición de conocimiento sobre las diferentes formas de codificar regiones en una página.
  • Práctica - Aporte a los estudiantes algunas configuraciones de página y pídales que las codifiquen mediante HTML y también mediante WAI-ARIA. Apoye a los estuddiantes en el conocimiento de los diferentes tipos de regiones y las diferentes técnicas que permiten codificarlas.

Tema: Orientacion de página y navegación

Explicque como las regiones, secciones de contenido y secciones de encabezados (aprendidos en temas anteriores) se combiann entre sí para proveer una estructura global de la página coherente. Explique como la orientación y la navegación en la página se articulan mediante diferentes mecanismos, como enlaces, indicadores de foco del teclado visibles, secuencias significativas y metainformación.

Objetivos de aprendizaje del módulo

Los estudiantes deberán ser capaces de:

  • Escribir código para incluir titulos que identifiquen las páginas web.
  • Codificar el idioma principal de una pagina web para permitir una correcta interpretación por parte de las tecnologías de asistencia.
  • Etiquetar bloques dec ontenido que se repiten en multiples páginas y nombrarlos de forma consistente.
  • Escribir código que permita a las personas usar únicamente el teclado para saltarse bloques de contenido que se repite.
  • Escribir código que permita presentar el contenido como una secuencia significativa.
  • Escribir código que permita distinguir los indicadores de foco, usando por ejemplo el selector CSS :focus.
  • Describir requisitos relacionados de modo que los autores de contenido puedan escribir titulos significativos para los enlaces y títulos de páginas.
  • Describir requisitos adicionales para diseñadores de modo que proporcionen indicadores de foco disntinguibles, para enlaces y otros elementos relacionados con la navegación.
  • Describir requisitos relacionados para los autores de contenido y diseñadores de forma que proporcionen estructuras y diseños claros que soporten diferentes tamaño de pantalla.

Ideas para la enseñanza del tema

Ideas adicionales para apoyar en la consecución de los objetivos de aprendizaje:

  • Muestre el uso del elemento HTML title dentro del elemento head para indicar el tema o propósito de la página.
  • Muestre el uso del atributo lang, junto con una etiqueta de idioma válida, para indicar el idioma principal de una página web. Explique que este atributo debe situarse dentro de la etiqueta html. Ejemplos de como indicar el idioma principal de una página web puede ser encontrado en el documnto de la técnica "H57: Using the language attribute on the HTML element".
  • Haga hincapié en que, cuando hay un segmento de texto en un idioma diferente al principal, el atributo lang ha de ser usado con una etiqueta de idioma válida que coresponda con el idioma de ese segmento. Para una explicación más a fondo de como usar el atributo lang para indicar cambios en el lenguaje consulte el documento "H58: Using language attributes to identify changes in the human language".
  • Muestre el uso de enlaces HTML y otros elementos de navegación, como aquellos que permiten saltar bloques de contenido repetitivos en múltiples páginas. Mencione que esos enlaces, necesitan tener el atributo HTML href, junto con un valor que contenga su destino en formad e una dirección URI. Explique que las personas que usan únicamente el teclado, dependen de poder saltar bloques para saltar bloques grandes de contenido repetitivo, como el encabezado o barras de navegación. Puede consultar ejemplos de implementación de este tipo de enlaces en el documento de técnica "G1: Adding a link at the top of each page that goes directly to the main content area".
  • Muestre contenido en diferentes configuraciones, por ejemplo, con diferentes hojas de estilo. Haga hincapié en que el contenido siempre necesita seguir una semántica coherentes que permita la adaptación del contenido a diferentes modos de presentación. Para obtener más información sobre como asegurar una secuencia significativa, consulte el documento de la técnica "G57: Ordering the content in a meaningful sequence".
  • Haga hincapié en que mantener el orden del foco es un requisito imprescindible para asegurar la consistencia entre el orden visual y programático de los elemntos. Muestre ejemplos de páginas donde el orden del código cincide con la representación visual y compárelo con páginas donde esto no se cumpla. Enñace este requisito con el criterio WCG "2.4.3 Focus Order".
  • Muestre ejemplos de los indicadores personalizados del foco y los indicadores por defecto. Explique que estos indicadores pueden ayudar a las personas a saber donde están mientras navegan en nuestra web. Mencione que suele ser buena práctica proporcionar un indicador personalizado para una mejor visibilidad y ratio de contraste. Relacione este requisito con el criterio WCAG "2.4.7 Focus Visible".

Ideas para apoyar en el estudio de este tema

Ideas adicionales para apoyar en el proceso de aprendizaje:

  • Práctica - Aporte a los estudiantes un conjunto de páginas web. Pída a sus estudiantes que ejlijan un título que describa lo mejor posible cada una de ellas y que los codifiquen apropiadamente. Apoye a los estudiantes en el conocimiento del elemento title y como proporcioanr contenido descriptivo.
  • Práctica - Aporte a los estudiantes un conjunto de segmentos de texto escritos en diferentes idiomas y pídales que los codifiquen usando la etiqueta de idioma adecuada. Apoye a los estudiantes en el conocimiento de como codificar diferentes etiquetas de idioma.
  • Práctica - Los estudiantes deben construir un mecanismo para saltar bloques de contenido. Apoye a los estudiantes en la comprensión de la diferencia entre bloque repetitivo y contenido específico de la página.
  • Preguntas y respuestas cortas - Pregunte a los estudiantes sobre los diferentes mecanismos de navegación que conozcan y pídales que expliquen sus principales características. Apoye a los estudiantes en el conocimiento sobre como las personas navegan en las páginas y localizan contenido específico.

Ideas para apoyar en el aprendizaje del módulo

Ideas adicionales para apoyar el proceso de aprendizaje del móduglo:

  • Práctica - Supervise a los estudiants mientras usan diferentes mecanismos de las tecnologías de asisitencia para moverse entre encabezados adelante y atrás, y para mostrar todos los encabezados de la página por separado. Apoye a los estudiantes en el aprendizaje de los diferentes mecanismos que las tecnologías de asistencia nos proporcionan para navegar entre encabezados.
  • Practica - Supervise a los estudiantes mientas utilizan los diferentes mecanismos que las tecnologías de asistencia proporcionan para moverse entre rgiones y para mostrar las regiones de una página en una lista. Apoye a los estudiantes en el aprendizaje de los diferentes mecanismos existentes para moverse entre regiosnes.
  • Práctica - Supervise a los estudiantes mientras utilizan los diferentes mecanismos que proveen las tecnologías de apoyo para leer el título de la página. Apoye a los estudiantes en el conocimiento de los mecanismos existentes en las tecnologías de asistencia para este propósito.
  • Portfolio - Los estudiantes construirán una página web simple con la estructura y semántica apropiadas. Apoye a los estudiantes en el conocimiento de como deben marcar cada una de las diferentes características, incluyendo reguines de la página, secciones del contenido, encabezados, segmentos del texto, titulo e idioma de la página.

Recursos para enseñanza

Recursos sugeridos para apoyar en el proceso de enseñanza:

  • "Page Structure (WAI Web Accessibility Tutorials)" — Muestra como proporcionar estructuras de página que sean accesibles para personas con discapacidad.
  • "How People with Disabilities Use the Web" — Describe algunas de las barreras que las personas encuentran usando la Red e introduce tipos de tecnología de asistencia y estrategias adaptativas que algunas personas usan.
  • "Text to Speech (Web Accessibility Perspective)" — Es uno de los videos en torno a perspectivsa sobre accesibilidad web que muestran características de accesibildad y como impactan en las personas con discapacidad.
  • "Clear Layout and Design (Web Accessibility Perspectives)" — Es uno de los videos en torno a perspectivsa sobre accesibilidad web que muestran características de accesibildad y como impactan en las personas con discapacidad.
  • WCAG — Estándares de accesibilidad para contenido web en escritorio, portatiles, tablets y dispositivos móviles.
  • WAI-ARIA — Describe los roles, estados y propiedades que definen la accesibilidad de elemtnso de interfaz de usuario y que pueden ser usadas para mejorar la accesibilidad e interoperabilidad tanto del contenido web y como de las aplicaciones.
  • "HTML5 living standard" — Especificación de HTML5

Referencias

W3C - Curricula on Web Accessibility - Developer Modules - Module 1: Page Structure


Quizá te interese leer más sobre A11Y Curricula

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>