Prueba de una aplicación de Oracle JET para la accesibilidad: inspección visual

Introducción

Las directrices de accesibilidad de contenido web (WCAG) 2.2 contienen un conjunto de más de sesenta criterios de éxito para crear una aplicación web accesible. En esta ruta de aprendizaje, nos centraremos en un subconjunto de estos criterios que se centra principalmente en:

Este tutorial se centra en dónde comienza la prueba de una aplicación: la inspección visual. Este tutorial y los dos que lo siguen, Test an Oracle JET App for Keyboard-Only Accessibility y Perform Screen-Reader Validation on an Oracle JET App, le guiarán por los pasos de prueba necesarios. Debe completar estos tres tutoriales de prueba en orden antes de continuar con la ruta de aprendizaje.

El primer paso para evaluar una aplicación web para la accesibilidad es realizar una revisión visual de la aplicación. Durante la revisión, busque los siguientes elementos:

Objetivos

En este tutorial, aprenderá a realizar una prueba de accesibilidad manual de una aplicación web, así como a aprender cómo el marco de auditoría JavaScript de Oracle puede ayudar a buscar problemas de accesibilidad.

Requisitos

Tarea 1: Preparación de la aplicación inicial

Estamos utilizando una aplicación inicial de Oracle JET 13.0 Nav Drawer en esta ruta de aprendizaje.

  1. En la ubicación del sistema de archivos donde desea que resida la aplicación, extraiga el ACCLearningPath.zip descargado en una carpeta ACCLearningPath.

  2. Abra una ventana de terminal y verifique que la última versión de la interfaz de línea de comandos (CLI) de Oracle JET esté instalada (se requiere la versión 13.0 o posterior).

    $ ojet --version

    Si se muestra la última versión de la CLI de Oracle JET, la instalación es correcta. Si no es así, vuelva a instalar mediante el comando npm install para su plataforma.

    • Para Windows:

       $ npm install -g @oracle/ojet-cli

    • Para sistemas Mac y Linux:

       $ sudo npm install -g @oracle/ojet-cli

      Una vez finalizada la instalación, la CLI de Oracle JET muestra un resumen de todos los cambios.

  3. Navegue hasta el directorio ACCLearningPath y restaure las herramientas de la aplicación Oracle JET.

    $ ojet restore

  4. Ejecución de la aplicación

    $ ojet serve

    Las herramientas de Oracle JET ejecutan la aplicación en un explorador web local. El explorador se abre en la página Introducción de la aplicación, con el separador Visión general cargado. La aplicación está lista para usar.

    Deje abierta la ventana de terminal y el explorador para que la aplicación se actualice automáticamente con los cambios que realice.

Tarea 2: Auditar la aplicación

El marco de auditoría de Oracle JET (JAF) es una utilidad de línea de comandos y una API de soporte diseñada para auditar los archivos de una aplicación Oracle JET, en función de las opciones de tiempo de ejecución que encuentre en un archivo de configuración. Los mensajes de diagnóstico devueltos por la auditoría de una aplicación se derivan de juegos de reglas incorporados que son específicos de la versión de JET de la aplicación. Sin embargo, el marco de auditoría es ampliable y los usuarios pueden ampliar sus capacidades mediante la escritura de reglas personalizadas.

Las auditorías de Oracle JAF pueden ayudar a identificar la accesibilidad y otros problemas en sus aplicaciones, aunque no encontrarán todos los problemas de accesibilidad que abordaremos en la aplicación ACCLearningPath. Es por eso que, además de auditar la aplicación, debe seguir el procedimiento y los pasos descritos en esta ruta de aprendizaje Identificar problemas de accesibilidad para buscar y abordar problemas de accesibilidad. Una auditoría de JAF se debe ejecutar desde el principio para que la aplicación de ejemplo sea accesible, a fin de identificar posibles problemas en la aplicación antes de comenzar el trabajo. Para obtener más información sobre Oracle JAF, consulte Uso y ampliación del marco de auditoría de Oracle JET.

Descargue y utilice Oracle JAF en modo CLI para comprobar si hay problemas de accesibilidad.

  1. Utilice npm para instalar la CLI de Oracle JAF.

    Abra una ventana de terminal y compruebe si hay versiones instaladas de Oracle JAF.

    $ ojaf -v

    Si no está instalado o si su versión de JAF no es la versión actual, desinstale las versiones anteriores e instale la versión más actual.

    $ npm uninstall -g @oracle/oraclejet-audit

    $ npm install -g @oracle/oraclejet-audit

  2. Vaya al directorio ACCLearningPath de la aplicación y utilice el indicador de línea de comandos --init para inicializar una configuración de JAF por defecto.

    $ ojaf --init

    Las herramientas almacenan el archivo de configuración de JAF por defecto oraclejafconfig.json en el directorio ACCLearningPath y definen los valores de configuración por defecto según el archivo de configuración de la aplicación JET oraclejetconfig.json, que también se encuentra en el directorio raíz de la aplicación.

  3. Abra oraclejafconfig.json en el editor y asegúrese de que el valor de la propiedad jetVer es correcto para la versión de JET con la que desea auditar (por ejemplo, 13.0, 13.1, etc.).

    "builtinJetRules": true,
   "jetVer": "13.0",

    Puede personalizar la auditoría de la aplicación agregando o modificando las propiedades de JAF en el archivo oraclejafconfig.json. Encontrará una descripción completa de las opciones de configuración en Acerca de las propiedades del archivo de configuración de Oracle JAF.

  4. Antes de auditar la aplicación por primera vez, puede confirmar la configuración por defecto para los archivos que JAF auditará mediante el indicador de línea de comandos --dryrun.

    $ ojaf --dryrun

    Una ejecución simulada no audita la aplicación, pero confirma los archivos que se van a auditar en función de los valores de configuración actuales de JAF.

    Nota: Puede obtener una lista completa de los indicadores de línea de comandos introduciendo el comando ojaf --help.

  5. Realice una auditoría de la aplicación introduciendo el comando para llamar a la utilidad de auditoría de JAF.

    $ ojaf

  6. Al ejecutar la auditoría, Oracle JAF busca en el directorio oraclejafconfig.json y crea un informe de auditoría.

    El informe enumera los problemas que rompen las reglas que se encuentran en la aplicación, así como sus ubicaciones en los archivos de la aplicación. Además, el informe incluye un resumen de los problemas encontrados y sus gravedades, las reglas auditadas y los archivos auditados.

    Informe de auditoría de JAF

    En la lista de problemas del informe de auditoría, observe el problema de nivel de gravedad blocker que se encuentra en el archivo departments.html: 'aria-label' or 'aria-labelledby' missing on <oj-film-strip>.

    Falta una propiedad aria-label en el componente de cinta de película de la aplicación, lo que puede impedir que un lector de pantalla acceda a la identidad del componente. Este es uno de los problemas de accesibilidad que abordaremos en tutoriales posteriores.

Este es el final del análisis de Oracle JAF en esta ruta de aprendizaje. Cuando haya terminado de auditar la aplicación, recuerde suprimir la carpeta jaftmp@ y el archivo oraclejafconfig.json del directorio ACCLearningPath.

Tarea 3: Revisión de la Estructura de Página

La estructura de página es el punto de partida lógico para la inspección visual de una aplicación. Las cabeceras HTML proporcionan un esquema del contenido de la página sin centrarse en detalles específicos. Los lectores de pantalla proporcionan accesos directos para permitir a los usuarios moverse rápidamente entre los encabezados correctamente marcados.

Utilice la aplicación ACCLearningPath para revisar la estructura de la página.

  1. En la aplicación en ejecución, determine si las secciones de las páginas se identifican por encabezados.

    El texto de los encabezados es más grande o tiene un estilo diferente al texto normal de la página. Cree cabeceras HTML verdaderas mediante etiquetas <h1> a través de <h6>.

  2. Determinar si el texto de cada encabezado describe adecuadamente el contenido asociado a él.

    Examine el separador Overview de la página Introduction. El tercer panel del extremo derecho tiene el encabezado Espacio de texto. El contenido de este panel se refiere al ajuste del espaciado de texto. Por lo tanto, este título es un ejemplo de un título adecuadamente descriptivo.

  3. Utilice el separador Elementos DevTools de Chrome para determinar si los encabezados son verdaderos encabezados HTML o texto diseñado para parecerse a ellos.

    • Haga clic con el botón derecho en la cabecera Página Introducción y seleccione Inspeccionar en el menú contextual para ver la estructura del modelo de objeto de documento (DOM) de la página.

      El elemento resaltado en el árbol DOM, que se muestra en el panel DevTools Elementos, emplea el método correcto para crear una cabecera HTML.

       <h4>The Introduction Page</h4>

    • Cierre DevTools y, a continuación, haga clic con el botón derecho en la cabecera Página Recursos y seleccione Inspeccionar en el menú contextual.

      El elemento resaltado en este árbol DOM tiene el estilo de texto para que se vea como un encabezado HTML.

       <span class="h4Style">The Resources Page</span>

      Un lector de pantalla no detectará este código como encabezado. Los usuarios de lectores de pantalla a menudo navegan por una página por encabezados, y el texto diseñado para parecerse a los encabezados se ignora. En los siguientes pasos, corregirá el encabezado codificado incorrectamente. Deje la aplicación en ejecución y el explorador abierto para observar cómo los siguientes cambios afectan a la aplicación.

  4. Vaya a la carpeta ACCLearningPath/src/js/views y abra overview.html en el editor de código.

  5. Busque la etiqueta <span class="h4Style">.

  6. Sustituya la etiqueta <span class="h4Style"> por una etiqueta <h4>.

  7. Sustituya la etiqueta </span> por una etiqueta </h4>.

  8. Guarde el archivo y vea los cambios realizados en la aplicación en el explorador.

Tarea 4: Revisar el título de la página

Una inspección visual de la aplicación incluye una evaluación de la efectividad del título de la página.

Navegue por la aplicación de inicio en ejecución y mire el título de cada página.

  1. Determina si el título de la página identifica claramente la página, el separador y el nombre de la aplicación.

  2. Determine si el título de la página cambia a medida que navega entre las páginas o entre los separadores de la página Introducción.

    El título de la página debe cambiar para cada nueva página o separador que se muestre. Por ejemplo, cuando se selecciona Introducción en el menú principal en la parte superior derecha de la página, el título debe leer "Introducción" y cuando se selecciona Recursos, el título debe leer "Recursos".

    El título de la página Introducción debe incluir tanto la palabra "Introducción" como el nombre de la ficha seleccionada actualmente. Al seleccionar una ficha diferente en la barra de fichas, el título debe cambiar para reflejar la ficha recién seleccionada.

    • Introducción - Visión general
    • Introducción - Organización
    • Introducción - Empleados
    • Introducción - Departamentos

    Del mismo modo, el título de la página Recursos debe incluir la palabra "Recursos".

    Observará que el título de la página no cambia al navegar entre páginas o separadores. Este problema se solucionará en un tutorial posterior.

Cuando haya contenido repetido como enlaces de navegación y logotipos en el encabezado de página de una aplicación web, incluya un enlace de navegación de omisión. Los estándares del sector sugieren que el enlace de omisión de navegación se debe ocultar de la vista hasta que se acceda mediante tabulación.

Pruebe si existe el enlace de omisión de navegación en la aplicación que se ejecuta en el explorador.

  1. En la aplicación, pulse <Ctrl+L> para mover el foco a la barra de direcciones.

  2. Pulse <Tab> para que el enlace de omisión de navegación aparezca y reciba el foco.

    Debido a que no aparece ningún enlace de navegación de omisión, el foco se dirige al primer elemento enfocable de la página: john.hancock@oracle.com en el menú de usuario en la parte superior derecha de la página. Los elementos enfocables se definen con más detalle en el tutorial Accesibilidad solo para teclado.

    Durante la prueba, ha determinado que la aplicación de inicio no tiene ningún enlace de navegación de omisión implementado.

    Hay tres pasos para agregar el enlace de omisión de navegación:

    1. Agregue el enlace al archivo index.html.
    2. Agregue una clase de estilo al archivo app.css para ocultar el enlace de omisión de navegación hasta el tabulador.
    3. Agregue los anclajes de destino a los archivos intro.html y resources.html.

Actualizar el archivo index.html

El archivo index.html define la estructura general de la aplicación web de Oracle JET. El enlace de omisión de navegación debe colocarse en esta página.

  1. Vaya al directorio ACCLearningPath/src y abra index.html en un editor de código.

  2. Busque la etiqueta <body>.

    <body class="oj-web-applayout-body">
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

  3. Inserte un enlace con su destino como #main entre la etiqueta <body> y el comentario que lo sigue.

    <body class="oj-web-applayout-body">
   <a class="hideSkipNav" href="#main">Skip to main content</a>
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

    La clase hideSkipNav hará que el enlace sea invisible hasta que el usuario se inicie en la parte superior de la página y pulse <Tab>.

  4. Guarde y cierre index.html. El archivo debe tener un aspecto similar a index-html.txt.

Actualizar el archivo app.css

Hemos hecho referencia a la clase de estilo hideSkipNav en el archivo index.html. Ahora tenemos que definirlo en app.css. Todas las definiciones de estilo personalizadas se encuentran en este archivo.

  1. Vaya a la carpeta ACCLearningPath/src/css y edite app.css.

  2. Agregue la clase de estilo .hideSkipNav y las propiedades al final del archivo.

    .hideSkipNav { 
   position: absolute;
   left: -1000px; }

.hideSkipNav:focus {
   position: unset;
   left: 0px; }

  3. Guarde y cierre app.css. El archivo debe tener un aspecto similar a app-css.txt.

Actualizar los archivos HTML de las páginas

Dado que el destino del enlace de navegación de omisión debe estar en la parte superior del contenido principal de cada página, agregue las etiquetas de anclaje de destino a las páginas Introducción y Recurso.

  1. Vaya a la carpeta ACCLearningPath/src/js/views y edite el archivo intro.html.

  2. Localice <div> con la clase oj-hybrid-padding.

    <div class="oj-hybrid-padding">
   <div id="mainContainer">

  3. Inserte la etiqueta de anclaje y la cabecera h2 entre las dos etiquetas <div>.

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Introduction</h2>
</a>
   <div id="mainContainer">

    El código agregado no solo proporciona el destino del enlace de navegación de omisión, sino también una cabecera h2 para mejorar la estructura de la página.

  4. Guarde y cierre intro.html. El archivo debe tener un aspecto similar al de intro-html.txt.

  5. Abra resources.html en el editor de código y localice <div> con la clase oj-hybrid-padding.

    <div class="oj-hybrid-padding">
   <ul>

  6. Inserte la etiqueta de anclaje y la cabecera h2 entre las etiquetas <div> y <ul>.

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Resources</h2>
</a>
   <ul>

  7. Guarde y cierre resources.html. El archivo debe tener un aspecto similar a resources-html.txt.

  8. En la aplicación que se está ejecutando, pulse <Ctrl+L> para mover el foco a la barra de direcciones.

  9. Pulse <Tab> para que aparezca el enlace de omisión de navegación y reciba el foco.

  10. Pulse <Enter> para activar el enlace de omisión de navegación.

    A continuación, el foco se desplaza al contenido principal de la página.

    Una vez que haya probado la funcionalidad del enlace de omisión de navegación, pase al siguiente elemento de la inspección visual.

Tarea 6: Comprobar el uso del color y la posición

Los botones son una parte integral de las instrucciones que mueven a un usuario de una página o acción a la siguiente. Los desarrolladores mejoran el aspecto y la funcionalidad de una página con el uso de botones de colores. "Pulse el botón verde para continuar" es una instrucción común. Sin embargo, sin un etiquetado adecuado, los usuarios con discapacidad visual no pueden seguir estas y otras instrucciones similares.

El panel central de la página Descripción general contiene una barra de herramientas con tres botones de colores, así como un par de instrucciones para presionar los botones en función de su color y posición. Un usuario ciego o daltónico no puede distinguir entre los botones porque no tienen etiquetas u otras características distintivas. Este juego de botones falla en los criterios de éxito 1.3.3 y 1.4.1.

Uso de instrucciones de color

Cada uno de los botones de color del panel central debe tener una etiqueta de texto asociada. Los siguientes cambios agregarán nombres de color como etiquetas a los botones.

  1. Vaya a la carpeta ACCLearningPath/src/js/views y edite el archivo overview.html.

  2. Localice el juego de tres elementos oj-button.

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">
</oj-button>

  3. Modifique los botones del código para crear los identificadores de color.

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">Green
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">Red
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">Purple
</oj-button>

  4. Guarde overview.html y verifique que los botones ahora tienen etiquetas de texto adecuadas.

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

Tarea 7: Verificar legibilidad

La fase final de la inspección visual es específica para los usuarios de baja visión. Determine si ajustar el espaciado entre líneas, palabras y caracteres o cambiar el nivel de zoom de la página aumenta o disminuye la legibilidad.

Utilizaremos la página Visión General para ilustrar estos criterios y verificar el espaciado del texto y el zoom en la aplicación.

Verificar el espaciado del texto y el zoom

  1. En la aplicación en ejecución, examine el panel situado más a la derecha de la página, titulado Espacio de texto. El panel contiene dos secciones. Compare el texto de ambas secciones para asegurarse de que todo el texto está presente.

    La parte superior del panel tiene texto con espaciado normal. La parte inferior contiene el mismo texto con mayor espacio entre caracteres, palabras y líneas.

    Si ninguno de los caracteres de la sección inferior está distorsionado, recortado o superpuesto, la página cumple el criterio de éxito 1.4.12.

  2. Aumentar el nivel de zoom del navegador al 200%. Haga clic en el icono de zoom de lupa de la barra de herramientas y, a continuación, haga clic en el signo + para aumentar el zoom.

    Si todo el texto es legible y el texto se ajusta correctamente dentro de cada panel, la página cumple el Criterio de Conformidad 1.4.4 con un aumento del 200%.

    • Success Criterion 1.4.10 Reflow indica: "El contenido se puede presentar sin pérdida de información o funcionalidad, y sin necesidad de desplazarse en dos dimensiones para:
      • Contenido de desplazamiento vertical en un ancho equivalente a 320 píxeles CSS;
      • Contenido de desplazamiento horizontal a una altura equivalente a 256 píxeles en CSS. Excepto por partes del contenido que requieren un diseño bidimensional para su uso o significado.

    La página debe cambiar el formato para requerir el desplazamiento en una sola dirección. Una página se desplaza horizontal o verticalmente, pero no en ambas direcciones. El Criterio de Conformidad 1.4.10 facilita el uso de las páginas.

  3. Aumentar el zoom al 400%.

  4. Examine la página para ver la apariencia de las barras de desplazamiento. Si aparecen barras de desplazamiento horizontales y verticales, la página no cumple este criterio.

La fase de prueba inicial está completa.

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.