Prueba de una aplicación de Oracle JET para accesibilidad de solo teclado

Introducción

Este es el segundo tutorial de la ruta de aprendizaje Identificar problemas de accesibilidad.

Las Directrices de accesibilidad de contenido web (WCAG) 2.2 describen muchos de los criterios de éxito para crear una aplicación web accesible. Este tutorial se centra en los criterios que abordan el uso exclusivo del teclado.

Una aplicación accesible solo con teclado se puede utilizar con dispositivos de entrada alternativos para personas con movilidad limitada o incapacidad para manipular un mouse. Cuando las personas pueden usar un teclado, Internet está a su alcance.

Objetivos

En este tutorial, aprenderá a realizar una prueba de solo teclado de una aplicación web.

Requisitos

Tarea 1: Preparación para la prueba de accesibilidad solo con teclado

La inspección visual proporciona una visión general de la estructura y la funcionalidad básica de una página accesible. Las pruebas de solo teclado están en el centro de las pruebas manuales de accesibilidad; le da al desarrollador la oportunidad de interactuar con la aplicación desde la perspectiva de un usuario discapacitado. El subconjunto de los criterios de éxito de WCAG 2.2 en torno al cual se centra este tutorial implica varios conceptos específicos.

Los criterios de éxito mencionados al principio de esta sección abordan indirectamente el concepto de elementos enfocables, por lo que es necesario definir un par de términos.

Con estos conceptos aplicables definidos y explicados, está preparado para probar la aplicación de inicio.

Observe el texto "No Exception" incluido entre paréntesis del criterio de éxito 2.1.3. Esto significa que la accesibilidad del teclado es obligatoria.

La directriz 2.1 de la WCAG y el criterio de éxito que la sigue subrayan la necesidad absoluta de accesibilidad del teclado. El teclado juega un papel fundamental en llevar la tecnología a todos.

Tarea 2: Verificación de la existencia de un enfoque visual

Las pruebas de accesibilidad solo con teclado se basan únicamente en el indicador de enfoque. El cumplimiento del siguiente criterio de éxito "Focus Visible" no es negociable. Los usuarios discapacitados no pueden navegar por una aplicación sin un enfoque activo o cuando la colocación del enfoque no está clara.

A medida que avanza por la aplicación web, siempre debe haber un indicador visible que identifique la ubicación de enfoque. El indicador suele ser un rectángulo. Si se desactiva el rectángulo de enfoque, se produce un fallo en este criterio.

Los desarrolladores de aplicaciones se enorgullecen de las aplicaciones y programas que escriben. Su objetivo es integrar la función con una experiencia visualmente atractiva. Un rectángulo de enfoque a menudo resta valor al diseño; por lo tanto, los desarrolladores a menudo lo ocultan o desactivan y violan el Criterio de Éxito 2.4.7.

Rectángulo de enfoque 1

Rectángulo de enfoque 1

Rectángulo de enfoque 2

Rectángulo de enfoque 2

Localice el punto de enfoque en las dos capturas de pantalla anteriores.

La primera captura de pantalla, Rectángulo de enfoque 1, representa una página con una indicación correcta de enfoque. El indicador de enfoque es muy evidente, ya que rodea la ficha Visión general en la parte superior izquierda de la página. La segunda captura de pantalla, Focus Rectangle 2, carece de cualquier indicación de enfoque en el separador Overview.

Observe el rectángulo de enfoque mientras navega por los primeros componentes que se pueden enfocar en la página Introducción.

  1. Si la aplicación aún no se está ejecutando, vaya a la carpeta ACCLearningPath e iníciela.

    $ ojet serve

  2. Cuando la aplicación se abra en el explorador, pulse <Ctrl+L> para establecer el foco en la barra de direcciones y, a continuación, pulse <Tab> para mover el foco al enlace de omisión de navegación.

  3. Pulse <Tab> para mover el foco a john.hancock@oracle.com en el menú de usuario, en la parte superior derecha de la página.

  4. Pulse <Tab> para mover el foco a Introduction (Introducción) en el menú de navegación principal inmediatamente debajo del menú de usuario.

  5. Pulse <down arrow> para mover el foco a Resources (Recursos) en el menú de navegación y pulse <Enter> para cargar la página Resources.

    Página Recursos

  6. Pulse <Tab> para mover el foco al enlace Oracle JET Main Site.

    Observe que no hay una indicación clara de la ubicación del enfoque. La página Recursos falla el Criterio de Conformidad 2.4.7.

    En los siguientes pasos, corregirá el problema del rectángulo de enfoque ausente para cumplir con los estándares de WCAG.

  7. Vaya a la carpeta ACCLearningPath/src/js/views y abra el archivo resources.html en un editor de código.

  8. Busque el enlace del sitio principal de Oracle JET.

    <li><a style="outline-width:0"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

    Cambie "outline-width:0" a "outline-width:3" en el atributo style.

    <li><a style="outline-width:3"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

  9. Guarde y cierre resources.html.

    El archivo debe tener un aspecto similar a resources-html.txt.

  10. Repita los pasos 2 a 6 anteriores para verificar que el rectángulo de enfoque ahora esté visible.

Tarea 3: Verificación de una secuencia de fichas de significado

La siguiente parte de las pruebas de solo teclado implica la organización de una página como separadores del usuario a través de ella.

El orden de enfoque se puede entender mejor con una ilustración. A medida que el usuario pasa por la página, la ubicación del foco no es aleatoria. No se mueve de un lado de la página al otro y viceversa. Se mueve de una manera esperada y lógica.

En la tarea anterior Verificar la existencia de un enfoque visual, ha visto cómo el enfoque se movía en un orden esperado a través del banner de la página; sin embargo, la página Recursos en sí se ha codificado para ilustrar un orden de separadores más aleatorio.

  1. En la aplicación que se está ejecutando, pulse <Ctrl+L> para establecer el foco en la barra de direcciones.
  2. Pulse <Tab> para mover el foco al enlace de omisión de navegación.
  3. Pulse <Tab> para mover el foco a john.hancock@oracle.com en el menú de usuario, en la parte superior derecha de la página.
  4. Pulse <Tab> para mover el foco a Introduction (Introducción) en el menú de navegación principal.
  5. Pulse <Tab> para mover el foco al enlace Oracle JET Main Site en el cuerpo de la página.

  6. Pulse <Tab>. Focus debe pasar a la Guía del desarrollador de Oracle JET, pero en su lugar pasa al enlace Oracle JET Cookbook.

    The Oracle JET Developer’s Guide link is not in the tab sequence, which violates Success Criteria 2.4.3.

    Los pasos del 7 al 11 describen el método necesario para devolver el enlace Oracle JET Developer's Guide a su posición correcta en la secuencia de separadores. Los pasos 12 a 16 ilustran cómo confirmar que la solución funcionó.

  7. In your code editor, locate the Oracle JET Developer’s Guide link in the resources.html file.

    <li><a tabindex="-1"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

    El atributo tabindex="-1" quita este enlace completamente del orden de los separadores de la página.

  8. Modifique el valor del atributo tabindex en 0 para que el enlace vuelva a su lugar adecuado en la secuencia de separadores de la página.

    <li><a tabindex="0"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

  9. Guarde y cierre el archivo. La página Recursos del explorador se refresca automáticamente con su nuevo contenido.

  10. Pulse <Ctrl+L> para fijar el foco en la barra de direcciones.

  11. Pulse <Tab> tres veces para mover el foco a Introduction (Introducción) en el menú de navegación.

  12. Pulse <Tab> para mover el foco al enlace Oracle JET Main Site.

  13. Press <Tab> to move focus to the Oracle JET Developer’s Guide link.

  14. Continúe pulsando <Tab> hasta que el foco llegue al enlace Acerca de Oracle en el pie de página.

    Una vez que haya navegado por todos los elementos que se pueden centrar en una página, invierta el proceso. A veces, cuando se desplaza hacia atrás a través de una página, la ruta cambia inesperadamente, aparecen nuevos elementos o desaparecen algunos elementos.

  15. Utilice <Shift+Tab> para desplazarse de abajo hacia arriba para asegurarse de que la secuencia significativa es verdadera mientras navega a la inversa por la página.

Tarea 4: Interacción con controles

Muchos de los controles que se utilizan en este tutorial son controles específicos de Oracle JET. Una característica de Oracle JET es que sus componentes están diseñados con accesibilidad de solo teclado ya incorporada. Los desarrolladores que utilizan Oracle JET pueden copiar componentes directamente desde Oracle JET Cookbook y colocarlos en su lugar, y se puede acceder al código resultante.

Por ejemplo, aquí hay una breve lista de pulsaciones de teclas comunes para interactuar con componentes HTML estándar:

Nota: para determinados controles, como menús de navegación, barras de tabulación, grupos de radio y controles de grupo similares, puede que tenga que tabular el control y, a continuación, utilizar las teclas de flecha para desplazarse por él.

Utilice la aplicación inicial en ejecución para interactuar con varios componentes de Oracle JET.

  1. Pulse <Ctrl+L> para fijar el foco en la barra de direcciones.

  2. Pulse <Tab> para mover el foco al enlace de omisión de navegación.

  3. Pulse <Tab> para mover el foco a john.hancock@oracle.com en el menú de usuario, en la parte superior derecha de la página.

    Según la documentación del teclado del elemento <oj-menu-button>, al pulsar <Space>, <Enter> o <down arrow>, se abre el menú y al pulsar <Escape>, se cierra el menú.

  4. Presione <Space> para expandir el menú de usuario. Focus se mueve a Preferences (Preferencias).

  5. Pulse <down arrow> para bajar la lista de opciones de menú.

  6. Pulse <Escape> para cerrar el menú de usuario.

  7. Pulse <Tab>. Focus pasa a Introduction (Introducción) en el menú de navegación principal inmediatamente debajo del menú de usuario.

    Para obtener información adicional sobre las pulsaciones de teclas específicas para cada componente de Oracle JET, consulte la Guía de gestos y teclado de Oracle JET.

Tarea 5: Identificación de una captura de teclado

El tema final introducido al principio de este tutorial implica un concepto conocido como una trampa de teclado. Una captura de teclado se produce cuando un usuario no puede mover el foco de un elemento de la página mediante <Tab>, <Shift+Tab> o cualquiera de las teclas de flecha.

Una captura de teclado hace que toda la página no se pueda utilizar para un usuario que solo usa teclado. La solución común para una captura de teclado es reiniciar la aplicación.

¡Practicemos!

En esta sección del tutorial se proporciona un ejemplo detallado de una metodología de prueba de solo teclado.

Al probar la página Organización de la aplicación, verifique que siempre haya una indicación visible de la ubicación de enfoque y que el enfoque se mueva en un patrón predecible.

A la página que probará se accede a través del separador Organization de la página Introduction.

La página Organización

Utilice la aplicación inicial para realizar una prueba de teclado de la página Organización.

  1. En la página Recursos de la aplicación, pulse <Ctrl+L> para establecer el foco en la barra de direcciones.

  2. Pulse <Tab> para mover el foco al enlace de omisión de navegación.

  3. Pulse <Tab> para mover el foco a john.hancock@oracle.com en el menú de usuario, en la parte superior derecha de la página.

  4. Pulse <Tab> para mover el foco a Introduction (Introducción) en el menú de navegación principal debajo del nombre de usuario.

    Según la documentación del teclado del elemento <oj-navigation-list>, utilice las teclas <up arrow> y <down arrow> para navegar por los elementos del menú de navegación principal.

  5. Pulse <Enter> para seleccionar Introduction (Introducción).

  6. Pulse <Tab> y, a continuación, <right arrow> para mover el foco al separador Organización en la barra de separadores. Pulse <Enter> para cargar la página Organización.

    Según la documentación del teclado del elemento <oj-tab-bar>, utilice las teclas de flecha para desplazarse dentro de la barra de separadores.

  7. Pulse <Tab> para mover el foco a la vista de árbol. El enfoque se centra en el primer elemento que se puede centrar, el nodo Contabilidad.

    Según la documentación del teclado del elemento <oj-tree-view>, utilice las teclas <up arrow> y <down arrow> para navegar entre los nodos de la vista de árbol.

  8. Pulse <right arrow> para ampliar el nodo de grupo Accounting en el árbol y, a continuación, pulse <left arrow> para contraer el nodo de grupo.

  9. Pulse <down arrow> dos veces para mover el foco al empleado JONES en el nodo de grupo RESEARCH. A continuación, pulse <Enter> para seleccionarla.

    Aparecerá un formulario en la parte derecha de la página con los detalles del empleado.

    Ficha Organización con formulario de detalles de empleado

  10. Pulse <Tab> para mover el foco al campo ID de empleado.
  11. Pulse <Tab> para mover el foco al campo Nombre del empleado.
  12. Pulse <Tab> para mover el foco al campo Cargo.

  13. Pulse <Tab> para mover el foco al campo Hire Date (Fecha de contratación) y mostrar una cuadrícula de calendario ampliada.

    Según la documentación del teclado del elemento <oj-date-picker>, pulse las teclas de flecha para cambiar el foco de la fecha en la cuadrícula de calendario.

  14. Pulse <down arrow> y, a continuación, utilice las teclas de flecha para mover el foco a una fecha en el selector de fechas ampliado. A continuación, pulse <Enter> para seleccionar una fecha.

  15. Pulse <Tab> para mover el foco al campo Salary (Salario).

    Según la documentación del teclado del elemento <oj-input-number>, utilice <up arrow> para aumentar el valor de salario y utilice <down arrow> para reducir el valor de salario.

  16. Pulse <Tab> e intente mover el foco al campo Manager ID (ID de gestor).

    ¿Ha notado que una vez que el foco se ha movido al campo Salario, al pulsar <Tab> o <Shift+Tab>, el foco no se ha movido fuera del campo? Este campo tiene una captura de teclado. Sin una corrección en el código, la única manera de salir de la captura es refrescar la página.

Tarea 6: Eliminar la captura

  1. Vaya a la carpeta src/js/views y abra el archivo organization.html en un editor.

  2. Localice el elemento <oj-input-number> donde id="salary":

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1"
   on-blur="[[setKeyTrap]]">
</oj-input-number>

    Elimine el atributo on-blur que provoca la captura del teclado.

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1">
</oj-input-number>

  3. Guarde el archivo. A continuación, repita los pasos de la tarea anterior Identify a Keyboard Trap (Identificar una captura del teclado) para asegurarse de que la captura del teclado se haya eliminado.

  4. Al acceder al campo Manager Id, pulse <Tab> para mover el foco a los botones de radio Jobs.

    Según la documentación del teclado del elemento <oj-radioset>, utilice <up arrow> para seleccionar el botón anterior en el grupo. Utilice <down arrow> para seleccionar el botón siguiente en el grupo.

  5. Pulse <Tab> para mover el foco al enlace Acerca de Oracle en la sección de pie de página de la página.

  6. Revertir el proceso. Pulse <Shift+Tab> para volver a los botones de radio Trabajos. Siga pulsando <Shift+Tab> para retroceder por la página hasta john.hancock@oracle.com en el menú de usuario.

Recuerde consultar la Guía de gestos y teclado de Oracle JET si tiene alguna pregunta sobre las pulsaciones de teclas necesarias para utilizar un componente de Oracle JET o navegar por él.

Se ha completado la fase de prueba de solo teclado.

Siguiente paso

Continúe con el siguiente tutorial de este módulo.

Este tutorial forma parte del módulo Identify Accessibility Issues.

Puede volver a la página principal de la ruta de aprendizaje de accesibilidad para acceder a todos los módulos sobre accesibilidad.

Más recursos de aprendizaje

Explore otros laboratorios en docs.oracle.com/learn o acceda a más contenido de aprendizaje gratuito en el canal YouTube de Oracle Learning. Además, visite education.oracle.com/learning-explorer para convertirse en un explorador de Oracle Learning.

Para obtener documentación sobre el producto, visite Oracle Help Center.