Prueba de una aplicación de Oracle JET para la 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.1 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 de solo teclado.

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

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 de solo 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 son el centro de las pruebas manuales de accesibilidad; brindan al desarrollador la oportunidad de interactuar con la aplicación desde la perspectiva de un usuario con discapacidad. El subconjunto de los criterios de éxito de WCAG 2.1 en torno a los cuales 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 focalizables, 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 inicial.

Observe el texto "No Exception" incluido en los paréntesis de Success Criterion 2.1.3. Esto significa que la accesibilidad del teclado es obligatoria.

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

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

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

Al desplazarse 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. La desactivación del rectángulo de enfoque provoca un fallo de 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 del 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

Descripción de la ilustración focus_rec1.png

Rectángulo de enfoque 2

Rectángulo de enfoque 2

Descripción de la ilustración focus_rec2.png

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

La primera captura de pantalla, Focus Rectangle 1, representa una página con una indicación correcta del enfoque. El indicador de enfoque es muy evidente, ya que rodea el separador Overview (Descripción general) en la parte superior izquierda de la página. La segunda captura de pantalla, Focus Rectangle 2, carece de indicación de enfoque en torno al separador Overview.

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

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

    $ ojet serve

  2. Cuando se abra la aplicación en el explorador, pulse <Ctrl+L> para definir el enfoque en la barra de direcciones y, a continuación, pulse <Tab> para mover el enfoque al enlace de navegación de omisió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 enfoque a Recursos en el menú de navegación y pulse <Enter> para cargar la página Recursos.

    Página Recursos

    Descripción de la ilustración resources_page.png

  6. Pulse <Tab> para mover el foco al enlace Sitio principal de Oracle JET.

    Observe que no hay una indicación clara de la ubicación del foco. La página Recursos falla en el criterio de éxito 2.4.7.

    En los siguientes pasos, corregirá el problema de 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. Localice 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 separador significativa

La siguiente parte de las pruebas de solo teclado implica la organización de una página a medida que el usuario pasa por ella.

El orden de enfoque se puede comprender 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 de nuevo. Se mueve de manera esperada y lógica.

En la tarea Verificar la existencia de un enfoque visual anterior, vio 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 se ha codificado para ilustrar un orden de tabulación más aleatorio.

  1. En la aplicación en ejecución, pulse <Ctrl+L> para centrarse 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 Sitio principal de Oracle JET en el cuerpo de la página.

  6. Presione <Tab>. El enfoque debe pasar a la Guía para desarrolladores de Oracle JET, pero, en su lugar, debe pasar al enlace Oracle JET Cookbook.

    El enlace Oracle JET Developer's Guide (Guía del desarrollador de Oracle JET) no está en la secuencia de separadores, lo que viola los criterios de éxito 2.4.3.

    Los pasos 7 a 11 describen el método necesario para devolver el enlace Oracle JET Developer's Guide (Guía del desarrollador de Oracle JET) a su posición correcta en la secuencia de separadores. Los pasos 12 a 16 ilustran cómo confirmar que la corrección ha funcionado.

  7. En el editor de código, busque el enlace Oracle JET Developer's Guide (Guía del desarrollador de Oracle JET) en el archivo resources.html.

    <li><a tabindex="-1"
   href="https://docs.oracle.com/en/middleware/developer-tools/jet/13/books.html"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

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

  8. Modifique el valor del atributo tabindex a 0 para devolver el enlace 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=OJACC"
   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. Presione <Ctrl+L> para centrar la atención en la barra de direcciones.

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

  12. Pulse <Tab> para mover el foco al enlace Sitio principal de Oracle JET.

  13. Pulse <Tab> para mover el foco al enlace Oracle JET Developer's Guide (Guía del desarrollador de Oracle JET).

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

    Una vez que haya navegado por todos los elementos que se pueden enfocar en una página, revierta el proceso. En ocasiones, cuando el tabulador de desplazamiento retrocede por una página, la ruta cambia de forma inesperada, aparecen nuevos elementos o algunos elementos desaparecen.

  15. Utilice <Shift+Tab> para desplazarse de abajo a arriba para asegurarse de que la secuencia significativa es verdadera mientras navega de forma 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 función 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 soltarlos en su lugar, y el código resultante es accesible.

Por ejemplo, a continuación se muestra 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 separadores, grupos de radio y controles de grupo similares, puede que tenga que desplazarse con el tabulador al 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. Presione <Ctrl+L> para centrar la atención 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. Pulse <Space> para expandir el menú de usuario. El enfoque pasa a Preferencias.

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

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

  7. Presione <Tab>. El enfoque pasa a Introducción en el menú principal de la navegación, 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 gesto 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 captura de teclado. Una captura de teclado se produce cuando un usuario no puede mover el foco fuera 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 de solo teclado. La solución común para una captura de teclado es reiniciar la aplicación.

¡Póngase en práctica!

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 hay una indicación visible de la ubicación de enfoque y que el enfoque se mueve en un patrón predecible.

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

Página de Organización

Descripción de la ilustración org_page.png

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 centrar la atención 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 por la barra de separadores.

  7. Pulse <Tab> para mover el enfoque a la vista de árbol. El enfoque se aplica al primer elemento que se puede enfocar, 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 en la vista de árbol.

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

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

    Aparecerá un formulario en el lado derecho de la página con los detalles del empleado.

    Separador Organización con formulario de detalles de empleado

    Descripción de la ilustración org_page_form.png

  10. Pulse <Tab> para mover el foco al campo ID de empleado.

  11. Pulse <Tab> para mover el foco al campo Employee Name (Nombre de empleado).

  12. Pulse <Tab> para mover el foco al campo Título del trabajo.

  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>, presione las teclas de flecha para cambiar el enfoque de fecha dentro de la cuadrícula del calendario.

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

  15. Pulse <Tab> para mover el enfoque al campo 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 enfoque al campo Manager ID.

    ¿Ha observado que una vez que el enfoque se ha movido al campo Salario, al pulsar <Tab> o <Shift+Tab> no se ha movido el enfoque fuera del campo? Este campo tiene una captura de teclado. Si no se corrige el código, la única forma de salir de la captura es refrescar la página.

Tarea 6: eliminación de la captura

  1. Navegue 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 Identify a Keyboard Trap anterior para asegurarse de que la captura del teclado se haya eliminado.

  4. Cuando llegue al campo Manager Id (ID de mánager), pulse <Tab> para mover el foco a los botones de radio Jobs (Trabajos).

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

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

  6. Revierta 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 completó la fase de prueba de solo teclado. Continúe con el tutorial final dentro de esta ruta de aprendizaje, Realizar validación de lector de pantalla en una aplicación Oracle JET.

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.