Módulo D2: Menús – Cómo Crear Cursos 13

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 basan en estructuras, etiquetas y estilo para interactuar con menús.
  • Explicar técnicas de codificación para proporcioanr estructuras, etiquetas y funcionalidad de menús accesible.

Objetivos de aprendizaje del módulo

Los estudiantes deberán ser capaces de:

  • Explicar las estrategias que las personas con discapacidad utilizan para interactuar con menús.
  • Escribir usando código y etiqetas los menús de una página.
  • Escribir estructuras de menús como listas, sublistas y elementos de lista que tengan significado semántico.
  • Escribir estilos para los menúis de forma que ante events como hover o focus actuen como se espera.
  • Codificar menús para que ser edimensionen en base a l tamaño del viewport.
  • Codificar de forma que se comunique adecuadamente el estado de los menús desplegables a las personas que usan diferentes tecnologías y estrategias adaptativas.
  • Identificar y codificar el menú para que la interacción mediante teclado sea la adecuada.
  • Codificar de forma adecuada los menús para aplicaciónes.
  • Describir los requisitos relacionados para asegurar que los diseñadores genern menús con funcionalidad accesible.

Habilidades

Habilidades necesairas para el módulo:

Estuiantes

Instructores

Temas e enseñar

Temas a aprender para alcanzar el objetivo de aprendizaje:

Tema: Estructura de un menú

Apoyate en "Developer Module 1: Page Structure" para explicar el uso de HTML y WAI-ARIA de forma que la estructura tenga sentido. Relacione esto con la estructura de los menús, en particular usando listas y elementos de lista.

Objetivos de aprendizaje del tema

Los estudiantes deberán ser capaces de:

  • Explicar como las tecnologias de asistencia procesan la estructura de los elementos HTML, como listas, sublistas y elementos de menú, y comunicar a las personas con discapacidad estas estructuras y sus relaciones entre sí.
  • Describir diferentes tipos de menús como vertical, horizontal, de "migas de pan", de "rastro" y de aplicación.
  • Identificar menús usando los elementos nav y encabezados cuando sea neceario.
  • Codificar menús como listas, sub listas y elementos de menú usando, por ejemplo los elementos html ul, ol y li.
  • Escribir código que permite que las funcioens del menú se pueden operar únicamente mediante teclado y/o otros dispositivos de entrada.
  • Escribir código para los enús de forma que sean desplegados del modo esperado de acuerdo a su función y propósito.

Ideas adicionales para la enseñanza del tema

Ideas de apoyo para la consecución del objetivo de aprendizaje:

  • Muestre ejemplos del elemento HTML5 nav para codificar apropiadamente una region que corresponda con navegación. Un eje,plo de como usar este elemento puede consutlarse en el documento "WAI tutorials: Identify menus".
  • Haga referencia a los elementos HTML ul, ol y li aprendidos en el módulo anterior. Explique que estos elementos sirven a la estructura y permiten organizar las listas y los elementos dentro de estas. Puede ver ejemplos del uso de estos elementos en el contexto de los menús en "WAI tutorial: Menu representation".
  • Proporcione ejemplos de etiquetas para menús. Mencione que estas etiquetas pueden ser texto o gráficos con su correspondente texto alternativo dentro del elemento HTML a. Haga hincapié en que pas personas con discapcidad cognitiva y usuarios de lector de pantalla dependen de las etoquetas para identificar el propósito de cada uno de los elementos de menú. Puede obtener ejemplos de como proporcioanr textos descriptivos para los enlaces en el documento "Técnique G91: Providing link text that describes the purpose of a link".

Ideas para apoyar en el aprendizaje del tema

Ideas adicionales para lograr el objetivo de aprendizjae:

  • Práctica - Los estudiantes deberán identificar las regiones de una página que contengan el menú y marcarlos como región y encabezados de forma apropiada. Apoye a los estudiantes en el uso del elemento HML nav y encabezados apropiados para marcar los menús.
  • Práctica - Los estuidiantes deberán codificar la estructura interna de cada uno de los menús de una web. Apoye a los estudiantes en el uso de listas y elementos de lista para codificar convenientemente la estructura del mismo.
  • Práctica - Proporcione a los estudientes un menú y ídales que etiqueten sus elementos. Apoye a los estudientes en el aprendizaje de como describir el elemento y su propósito usando texto en el contexto del elemento HTML a.

Tema: Estilo del menú

Muestre el uso de HTML, WAI-ARIA y CSS para lograr el diseño deseado para los menús.

Objetivos de aprendizaje del tema

Los estudiantes deberán ser capaces de:

  • Explicar como un estilo CSS adecuado hace los menús mas fáciles de identificar y comprender, y más usables para las personas con discapacidad usando estrategias adaptativas como el redimensionado y customización de texto, magnificador de pantalla, y pantallas táctiles.
  • Usar estilos para hacer que los menús se muestren cuando se necesite, por ejemplo, vertical, horizontal y como rastro de migas de pan.
  • Escriibir código que trasmita convenitnentemente el estado del elemento actual del menú usando la propiadad de WAI-ARIA aria-current="page"
  • Escribir código para trasmitir otros estados de los elementos del menú usando la semántica adecuada, así como color, forma y estilos.
  • Describir requisitos relacionados para autores y diseñadores de forma que provean textos y estilos de menú adecuados.

Ideas para apoyar la enseñanza del tema

Ideas para ayudar al alumno a alcanzar los objetivos de aprendizaje

  • Muestre ejemplos de diferentes tipos de menú como de navegación, de aplicacion y rastros de migas de pan. Explicque que necesitan ser codificados tanto en códgo como en estilo de forma que aparezcan en las posiciones esperadas dentro de la página. Mencione que la localización del menú es una responsabilidad compartida entre los diferentes miembros del equipo de contenidos, autores, diseñadores y desarrolladores. Puede encontrar ejemplos de las opsiciones esperadas para un menú en el documento "WAI tutorials: Location".
  • Presente los diferentes estados que un elemento de menú puede tener, como hover, focus, current, active y visited. Explique como codificiar esos estados de forma que sean percibidos por todos los perfiles de usuario. Ejemplos de como codificiar estos estados se muestran en el siguiente documento "WAI tutorials: Menu Items".
  • Muestre ejemplos de diferentes confuguraciones estructurales para el menú. Explique que los men´s deben adaptarse a diferentes tamaños de texto en función de la elección del usuario. Mencione que los menúis deben tener suficiente espacio de modo que puedan ser manejados por cualqueir usuario. Puede consultar algunas consideraciones adicionales sobre la legibilidad y tamaño de los elementos de menu en el documento "WAI tutorials: General considerations".

Ideas para apoyar en el aprendizaje del tema<

Ideas adicionales para apoyar en el proceso de enseñanza del tema:

  • Practica - Aporte a los estudiantes diferentes tipos de menús y pídales que los codifiquen de forma que estén situados donde les corresponde. Apoye a los estudiantes en el aprendizaje de las localizaciones adecuadas de los menús en las páginas web.
  • Práctica - Pida a los estudiantes que codifiquen diferentes estados para los elementos de menú y los hagan distinguibles unos de otros. Apoye a los estudiantes en el conocimiento de WAI-ARIA y CSS de modo que sean capaces de aplicar las técnicas precisas para comunicar el estado de los items del menú correctamente.

Tema: Menús desplegables

Explique el uso de elementos HTML y atributos WAI-ARIA para identificar la presencia de submenús, por ejemplo aria-haspopup. Explique como trasmitir los estados visible e invisible de los elementos del submenu usando WAI-ARIA para tornarlo usable por todos los perfiles de usuario.

Objetivos de aprendizaje del tema

Los estudiantes deberán ser capaces de:

  • Codificar para trasmitir la relacion jerárquica entre un elemento de menú los submenús que contiene mediante el uso de listas aniadas y elementos de lista.
  • Codificar los elementos que contienen submenús utilizando el atributo WAI-ARIA aria-haspopup.
  • Codificar los menús desplegables de modo que soporten diferentes dispositivos de entrada, incluyendo solo teclado e interacciones por voz.
  • Codificar para trasmitir el estado de visibilidad de los elementos de menú usando el atributo WAI-ARIR aria-expanded, y actualizando las etiqueas relacionadas de modo que mantengan la concordancia.
  • Describir requisitos relacioandos para diseñadores asegurándose de que los menús desplegables puedan ser usados de forma efectiva en diferentes situaciones, como mediante el uso de magnificadores o interacciones mediante voz.

Ideas para apoyar la enseñanza del tema

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

  • Muestre ejemplos de menús que contengan submenús. Explique que la capa con los items de submenú necesita ser marcada como lista anidada, y que cada elemento de dicho submenú necesita ser marcado como elemento de lista. Un eje,plo de la estructura del menú y submenú puede consultarse en el documento "WAI tutorials: Indicate submenus".
  • Explique el uso del atributo WAI-ARIA aria-haspopup para codificar la presencia de submenús. Indique que este atributo debe ser presentado en el marcado HTML inicial. Un eje,plo del uso del atributo WAI-ARIA aria-haspopup puede ser consultado en el documento "WAI tutorials: Indicate submenus".
  • Muestre ejemplos de diferentes formas de interactuar con menús desplegables, como usar el ratón, el teclado, y la interacción mediante voz. Eje,plos de como hacer la funcionalidad de los menús desplegbles disponible para todos los usuarios puede consultarse en el documento "WAI tutorials: Fly-Out functionality".
  • Explique que el atributo WAI-ARIA aria-expandeed trasmite el estado de visibilidad de los elementos de submenu. Explique que el atributo debe estar presente en el HTML original. Ejemplos del uso correcto de aria-expanded pueden consultarse en el documento "WAI tutorials: Indicate submenus".

Ideas para apoyar en el conocimiento del tema

Ideas de apoyo en la adquisición de los conocimientos del tema.

  • Práctica - Aporte a los estudiantes una estructura visual de un menu y submenús , y pídales que usen el código apropiado para trasmitir dicha estructura. Apoye a los estudiantes en el conocimiento del uso de listas anidadas y elementos de lista para trasmitir programátiamante la estructura visual de menús y submenús.
  • Práctica - Aporte a los estudiantes una lista de elementos de menu y submenu y pídales que usen el atributo aria-haspopup donde corresponda. Apoye a los estudiantes en el marcado de elementos de submenú.
  • Práctica - Aporte a los estudiantes un menú desplegable y pídales que lo hagan operable con teclado y con ratón. Apoye a los estudientes en la comprensión de la funcionalidad a implementar en los menús desplegables a fin de hacerlos operables con ratón y teclado.
  • Práctica - Aporte a los estudiantes una lista de elementos de menú y submenú que dinñamicamente se muestren u oculten en base a la entrada del usuario y pídales que codifiquen los cambios dinámicos adecuadametne. Apoye a los estudiantes en el uso del atributo WAI-ARIA aria-expanded en el código e iconos, así como en cualquier otro indicador visual del estado de los elementos de submenú.

Tema: Menús para aplicaciones

Muestra ejemplos de escenarios específicos donde los menús para aplicaciones pueden ser usados. Los menús para aplicaciones son usualmente utilizados en aplicaciones interactivas, que son comentadas en profundidad en el docuemento "Developer Module 7 Rich Applications". Exploque los usos de los roles WAI-ARIA adicionales y las propiedades a usar en la codificación de menús de aplicaciones. Haga referencia a las técnicas de codificacion para crear menús de aplicacion operables usando diversos métodos de entrada, incluyendo solo teclado.

Objetivos de aprendizaje del módulo

Los estudiantes deberán ser capaces de:

  • Identificar situaciones en las que apropiado usar menús para aplicacion, como para aplicaciones web y explicar los potenciales retos de accesibilidad del uso de este tipo de menúis, incluyendo la definición de comandos de teclado apropiados para operar estos menús.
  • Codificar menús para aplicacioens usando la propiedad WAI-ARIA role="menubar".
  • Codificar elementos de menú individuales usando la propiedad WAI-ARIA role="menuitem"
  • Codificar items del menú para aplicaciones que contengan submenús usando la propiedad WAI-ARIA role="menu".
  • Codificar menús para aplicaciones usando el elemento HTML tabindex de modoq ue puedan recobir el foco del teclado. focus
  • Codificar la funcionalidada del menú para aplicaciones necesaria para soportar diferentes métodos de entrada, como solo teclado.

Ideas para apoyar en el proceso de enseñanza del tema.

Ideas adicionales para apoyar en el proceso de aprendizaje

  • Muestre ejemplos de diferentes tipos de menús en aplicaciones web. Haga hincapié en la necesidad de comandos de navegación específicos (al estilo del escritorio) diferentes al uso habitual de tabindex. Explique que código adicional es necesario para que las tecnologías de asistencia puedan renderizar estos menús adecuadamente. Ejemplos de como codificar estos menús pueden encontrarse en el documento "WAI tutorials: Additional markup".
  • Muestre ejemplos de como un menú de aplicacion es operado usando el tecoado. Explique que la funcionalidad adicional debe ser agregada mediante script de manera que los patrones de teclado se parezcan a los usados en el escritorio. Ejemplos de como codificar este tipo de menús de aplicacion de forma que puedan ser operados mediante teclado de forma adecuada pueden consultarse en los documentos "WAI tutorials:Functionality" y "WAI tutorials: Keyboard behavior".

Ideas para apoyar en el aprendizaje del tema

Ideas adicionales para ayudar en el estudio del tema

  • Practica - Aporte a los estudiantes un menú para aplicación y pídales que lo codifiquen usando la pripiedad WAI-ARIA requerida- Apoye a los estudiantes en el conocimiento de codificación de los menús de aplicación.
  • Práctica - Aporte a los estudiantes un menú para aplicaciones y pídales que implementen la funcionalidad para teclado. Apoye a los estudiantes en la adquisición de conocimientos de los patrones de teclado accesible para menús para aplicaciones.

Ideas para apoyar en el conocimiento del módulo

Ideas adicionales para facilitar el aprendizaje del módulo:

  • Portfolio - Los estidiantes deberán crear un set de páginas web con menús de navegación que permitan a los usuarios navegar entre dichas páginas. Apoye a los estudiantes en la identificación, organización y etiquetado de menús de navegación.

Recursos para enseñanza

Materiales de apoyo sugeridos para la enseñanza del módulo:

  • "Menus (WAI Web Accessibility Tutorials)" — Muestra como desarrollar mecanismos de navegación que sean accesibles para personas con discapacidad.
  • "How People with Disabilities Use the Web" — Proporciona historias de personas con discapacidad usando la web; describe el tipo de discapacidades y algunas de las barreras que encuentran usando la Red, y presenta tipos de tecnologías de asistencia y estrategias adaptartivas que estos usuarios utilizan.
  • "Keyboard Compatibility (Web Accessibility Perspectives)" — Es una de las perspectivas de accesibilidad en video que muestra características de accesibilidad y como impactan en las personas con discapacidad.
  • "WCAG" — Muestra la accesibilidad de contenido web en escritoprio, portatil, tablets y dispositivos móviles.
  • "WAI-ARIA" — Describe los roles, estados y propiedades que definen los elementos de interfaz de usuario accesibles y puede ser usado para mejorar la accesibilidad e interoperabilidad tanto de contenido web como de aplicaciones.
  • "HTML living standard"  — El lenguaje de marcado principal del contenido web.

Referencias

W3C - Curricula on Web Accessibility - Developer Modules - Module 2: Menús


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>