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

Introducción

Las Directrices de accesibilidad de contenido web (WCAG) 2.1 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 subjuego de estos criterios que se centra principalmente en:

Este tutorial se centra en dónde se inicia la prueba de una aplicación: la inspección visual. Este tutorial y los dos que 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 la accesibilidad de una aplicación web 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 conocer cómo el marco de auditoría de Oracle JavaScript puede ayudar a encontrar problemas de accesibilidad.

Requisitos

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

Estamos utilizando una aplicación de inicio del cajón de navegación de Oracle JET 13.0 en esta ruta de aprendizaje.

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

  2. Abra una ventana de terminal y verifique que esté instalada la última versión de la interfaz de línea de comandos (CLI) de Oracle JET (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 realizar la instalación con el comando npm install para la 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 al directorio ACCLearningPath y restaure las herramientas de la aplicación Oracle JET.

    $ ojet restore

  4. Ejecute 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 app está lista para usarse.

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

Tarea 2: auditoría de la aplicación

Oracle JET Audit Framework (JAF) es una utilidad de línea de comandos y 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 extensible y los usuarios pueden ampliar sus capacidades mediante la escritura de reglas personalizadas.

Las auditorías de Oracle JAF pueden ayudar a identificar problemas de accesibilidad y otros problemas en sus aplicaciones, aunque no encontrarán todos los problemas de accesibilidad que trataremos en la aplicación ACCLearningPath. Por este motivo, 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 solucionar problemas de accesibilidad. Se debe ejecutar una auditoría de JAF al principio de hacer que la aplicación de ejemplo sea accesible, con el fin de identificar posibles problemas en la aplicación antes de comenzar su trabajo. Para obtener más información sobre Oracle JAF, consulte Using and Extending the Oracle JET Audit Framework.

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

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

    Abra una ventana de terminal y compruebe las 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. Navegue 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 representan 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 realizar la auditoría (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 About the Oracle JAF Configuration File Properties.

  4. Antes de auditar la aplicación por primera vez, puede confirmar la configuración por defecto de 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 según los valores de configuración actuales de JAF.

    Nota: Puede obtener una lista completa de 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 enumerará los problemas innovadores 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 JAF

    Descripción de la ilustración jaf-report.png

    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 tira de película de la aplicación, 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 debate sobre 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 los detalles específicos. Los lectores de pantalla proporcionan accesos directos para permitir a los usuarios moverse rápidamente entre los encabezados marcados correctamente.

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 cabeceras.

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

  2. Determine si el texto de cada encabezado describe adecuadamente el contenido asociado con él.

    Examine el separador Overview de la página Introduction. El tercer panel, situado más a la derecha, tiene el encabezado Espacio de texto. El contenido de este panel se refiere al ajuste del espaciado de texto. Por lo tanto, esta rúbrica es un ejemplo de una rúbrica suficientemente descriptiva.

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

    • Haga clic con el botón derecho en el encabezado Página de introducción y seleccione Inspeccionar en el menú contextual para ver la estructura Modelo de objetos de documento (DOM) de la página.

      El elemento resaltado del árbol DOM, que se muestra en el panel DevTools Elementos, utiliza 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 de este árbol DOM tiene un estilo de texto que se parece a un encabezado HTML.

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

      Un lector de pantalla no detectará este código como un encabezado. Los usuarios del lector de pantalla a menudo navegan por una página por encabezados, y se ignora el texto diseñado para que se parezca a los encabezados. En los siguientes pasos, corregirá la cabecera codificada 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ódigos.

  5. Localice 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 de la aplicación en el explorador.

Tarea 4: revisión del título de la página

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

Navegue por la aplicación inicial en ejecución y observe cada título de página.

  1. Determine 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 al navegar entre páginas o entre los separadores de la página Introducción.

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

    El título de la página Introducción debe incluir tanto la palabra "Introduction" como el nombre del separador seleccionado actualmente. Cuando selecciona una ficha diferente de 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 omisión de navegación. Los estándares del sector sugieren que el enlace de omisión de navegación se debe ocultar hasta que se acceda mediante tabulación.

Prueba de la existencia del 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 aparezca el enlace de omisión de navegación y reciba el enfoque.

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

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

    Hay tres pasos para agregar el enlace Omitir 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 que se acople con 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 vínculo omitir navegación debe colocarse en esta página.

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

  2. Localice 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 le 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 empiece 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 debemos definirlo en app.css. Todas las definiciones de estilo personalizado 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 omisión de navegació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 proporciona no solo el destino del enlace de omisión de navegació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 a 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 en ejecución, 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 enfoque.

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

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

    Una vez que haya probado la funcionalidad del enlace de omisión de navegación, vaya 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 indicaciones 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 instrucciones y otras similares.

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

Uso de instrucciones de color

Descripción de la ilustración color_buttons.png

Cada uno de los botones coloreados 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 conjunto 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 tienen ahora las etiquetas de texto adecuadas.

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

Tarea 7: verificar la legibilidad

La fase final de la inspección visual es específica para los usuarios de baja visión. Determine si el ajuste del espaciado de líneas, palabras y caracteres o el cambio del 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 de texto y el zoom en la aplicación.

Verificar espaciado de texto y zoom

Descripción de la ilustración text_spacing.png

  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 un espacio de caracteres, palabras y líneas mayor.

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

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

    Si todo el texto se puede leer y el texto se ajusta correctamente dentro de cada panel, la página cumple el criterio de éxito 1.4.4 con un aumento del 200%.

    • El reflujo del criterio de éxito 1.4.10 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 a una anchura equivalente a 320 píxeles en CSS;
      • Contenido de desplazamiento horizontal en una altura equivalente a 256 píxeles en CSS. A excepción de las partes del contenido que requieren un diseño bidimensional para el uso o significado".

    La página se debe cambiar de formato para que sea necesario desplazarse en una sola dirección. Una página se desplaza horizontal o verticalmente, pero no en ambas direcciones. El criterio de éxito 1.4.10 facilita el uso de las páginas.

  3. Aumente el zoom al 400%.

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

La fase de prueba inicial está completa. El siguiente tutorial dentro de esta ruta de aprendizaje es Test an Oracle JET App for Keyboard-Only Accessibility.

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.