Saltar al contenido principal
LibreTexts Español

6.7: Actividad 10- Panel de Pestañas Accesibles

  1. Última actualización
  2. Guardar como PDF
  • Page ID
    152566

    • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    Panel de Pestañas Accesibles

    Con base en los detalles del Panel de pestañas de la página anterior, aplique lo aprendido a los archivos de actividad asociados para que el panel de pestañas allí sea accesible.

    Los archivos de esta actividad incluyen:

    Utilice los alrededores del código resaltado en la página anterior como guía para encontrar dónde se deben aplicar las correcciones. Repare la accesibilidad del panel de pestañas aplicando el código resaltado al archivo /assets/ik_tabs.js.

    Nota: Si bien sugerimos usar el código resaltado que hemos proporcionado, usted es libre de idear sus propias soluciones siempre que produzcan los resultados esperados enumerados en la rúbrica de marcado a continuación.

    Pruebe su panel de pestañas actualizado con ChromeVox para asegurarse de que cada elemento descrito en la rúbrica de marcado a continuación funcione como se sugiere.

    Requerimientos

    Cuando hayas aplicado tus cambios y hayas probado para asegurarte de que tu panel de pestañas funciona como se describe, envía la URL a tu archivo tabs.html en tu sitio de Páginas GitHub, al archivo en el servidor web que estás usando para alojar tu copia de los archivos de actividad, o una URL de GitHack.

    Rúbrica de Gradaje

    Criterios Puntos
    Semántica de lista a tabulación: La semántica de
    lista se reemplaza con la semántica del panel de pestañas.    		 2.0 ptos
    Tab Position: Se anuncia la posición de
    enfoque en el tablista.    		 1.0 ptos
    Ficha Enfoque abre Panel:
    Cuando una ficha está enfocada, se muestra su panel asociado.    		 1.0 ptos
    Tecla de flecha entre pestañas: Las teclas de
    flecha se pueden usar para navegar entre pestañas.    		 2.0 ptos
    Tecla de tabulación de
    tabulación a panel: la tecla de tabulación se puede usar para pasar de una pestaña seleccionada directamente a su panel asociado, Mayús+Tab para volver a las pestañas.    		 2.0 ptos
    Paneles enfocable:
    Los paneles son enfoables por teclado.    		 2.0 ptos
    Puntos Totales: 10.0

    This page titled 6.7: Actividad 10- Panel de Pestañas Accesibles is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.