Introducción

El presente documento tiene como propósito brindar una guía de buenas prácticas para implementar la accesibilidad web a los portales de YPF.

Objetivos del anexo

• Brindar información para crear contenido accesible, así como también brindar una mejor experiencia a todos los usuarios.
• Cumplir con las normativas vigentes alcanzadas por la Ley N°26.653.

¿Qué es la accesibilidad web?

La “accesibilidad web” es la posibilidad de que la información de la web pueda ser comprendida y consultada por personas con discapacidad, con el objeto de garantizarles la igualdad real de oportunidades y trato, evitando así todo tipo de discriminación.

Para que el acceso a la información sea posible existen determinadas normas y requisitos que las páginas web deben cumplir, tal como indica la “Ley de Accesibilidad de la Información en las Páginas Web” (Ley N° 26.653) y la normativa que de ella se deriva. En el ámbito de la accesibilidad web, estas normas y requisitos se denominan “pautas” y están orientadas a la eliminación o reducción de las barreras que dificultan el acceso.

El cumplimiento de las pautas contribuye a que el contenido sea más accesible para todas las personas, con o sin discapacidad, incluyendo por supuesto a personas que para acceder a la web utilizan diversos productos de apoyo (visuales, auditivos, motrices u otros).

Pautas de accesibilidad web a nivel internacional

Las pautas de accesibilidad web internacionalmente adoptadas son las definidas por la W3C, y se denominan en castellano: “Pautas de Accesibilidad de Contenido Web 2.0”, WCAG 2.0 por sus siglas en inglés.

La versión original y normativa en inglés se denomina, “Web Content Accessibility Guidelines (WCAG) 2.0” . Las WCAG 2.0 se han convertido además en el estándar internacional ISO/IEC 40500:2012.

El contenido de las WCAG 2.0 se estructura a partir de cuatro conceptos importantes: principios, pautas, criterios de conformidad y técnicas suficientes y recomendables.

• Principios: son cuatro principios que proporcionan los fundamentos de la accesibilidad web, a saber:
  • Perceptible: la información y los componentes de la interfaz de usuario deben estar presentables para los usuarios de manera que puedan percibirlos. Esto significa que los usuarios deben poder percibir la información que se presenta (no puede ser invisible para todos sus sentidos)
  • Operable: los componentes de la interfaz de usuario y la navegación deben estar operativos. Esto significa que los usuarios deben poder operar la interfaz (la interfaz no puede requerir una interacción que un usuario no pueda realizar)
  • Comprensible: la información y el funcionamiento de la interfaz de usuario deben ser comprensibles. Esto significa que los usuarios deben poder comprender la información y el funcionamiento de la interfaz de usuario (el contenido o el funcionamiento no pueden estar más allá de su comprensión).
  • Robusto: el contenido debe ser lo suficientemente sólido como para que pueda ser interpretado de manera confiable por una amplia variedad de agentes de usuario, incluidas las tecnologías de asistencia. Esto significa que los usuarios deben poder acceder al contenido a medida que avanzan las tecnologías (a medida que evolucionan las tecnologías y los agentes de usuario, el contenido debe permanecer accesible).


• Pautas: para cada uno de los cuatro principios se han definido pautas. En total son doce pautas que poseen un nivel de abstracción menor que los principios, aunque no son totalmente verificables como sí lo son los criterios de conformidad.


• Criterios de conformidad: para cada pauta se proporcionan criterios de conformidad verificables que permiten emplear las WCAG 2.0 en la práctica. Con el fin de cubrir las diferentes necesidades de las personas que navegan la web se han definidoo tres niveles de conformidad; de menor a mayor exigencia, estos niveles son: ○ A, deben cumplirse 25 criterios de conformidad. ○ AA, se agregan 13 criterios de conformidad a los 25 del nivel A; total 38 criterios. ○ AAA, se agregan 23 criterios de conformidad a los 38 de los demás niveles; total 61 criterios. “Verificable” significa, en este contexto, que cada criterio puede ser evaluado de forma directa, pudiendo ser los resultados de cada verificación los siguientes: “cumple”, “no cumple”, “no aplica”.


• Técnicas suficientes y recomendables: las técnicas son informativas y se agrupan en dos categorías, aquellas que son suficientes para satisfacer los criterios de conformidad y aquellas que son recomendables. Es decir, estas técnicas orientan acerca de cómo cumplir con las pautas.

Pautas de Accesibilidad web en Argentina

La normativa técnica que adopta las WCAG 2.0 de la W3C en Argentina es la Disposición ONTI 6/2019, siendo “A” y “AA” los niveles de conformidad requeridos.

Además de adoptar las pautas, la Disposición aprueba los “niveles mínimos de conformidad” que deben cumplir las páginas web de las organizaciones alcanzadas por la norma y establece dos períodos: hasta octubre de 2020 el nivel mínimo de conformidad a cumplimentar es de 20 criterios, luego en el período posterior el nivel mínimo de conformidad asciende a 30 criterios, considerando la totalidad de 38 criterios.

El contenido bien estructurado permite una navegación y procesamiento más eficientes. Use HTML y WAI-ARIA para mejorar la navegación y la orientación en páginas web y en aplicaciones

Regiones de una página

Las regiones de las páginas web tendrán que estar definidas por las siguientes etiquetas:

• Header: Donde puede llegar a contener el logotipo, funciones de búsqueda y opciones de navegación.
• Nav: Va a contener menú de navegación
• Main: Identificará el contenido principal de la página
• Aside: Va a contener regiones que admitan el contenido principal, pero que sean secciones separadas y significativas por sí mismas.
• Article: encierra un bloque de contenido relacionado que tiene sentido por sí solo sin el resto de la página (por ejemplo, una sola publicación de blog).
• Section: es similar a article, pero sirve más para agrupar una sola parte de la página que constituye una sola pieza de funcionalidad (p. ej., un minimapa o un conjunto de títulos y resúmenes de artículos) o un tema. Se considera una buena práctica comenzar cada sección con un encabezado ; también tenga en cuenta que puede dividir article s en diferentes section s , o section s en diferentes article s, según el contexto.
• Footer: Similar al Header en donde también puede contener información sobre legales.

Proporcione etiquetas para distinguir dos regiones de página del mismo tipo, como los menús "navegación principal" y "navegación secundaria" utilizando un <nav> elemento en la misma página.

Use aria-labelledby para señalar un elemento existente por su (único) id. La etiqueta de la región es el contenido del elemento referenciado. Cada elemento puede ser una etiqueta de esta manera. Las etiquetas deben ser cortas y descriptivas

<--Ejemplo fragmento de código-->
<nav aria-labelledby="principal">										
    <h3 id="principal">Menu principal </h3>
</nav>

<nav aria-labelledby="secundario">										
    <h3 id="secundario">Menu izquierdo </h3>
</nav>

Encabezados

Los encabezados comunican la organización del contenido en la página. Los navegadores web, los complementos y las tecnologías de asistencia pueden usarlos para proporcionar navegación en la página

El título más importante tiene el rango 1 <h1>, el título menos importante rango 6 <h6>. Los encabezados con un rango igual o superior comienzan una nueva sección, los encabezados con un rango inferior comienzan nuevas subsecciones que forman parte de la sección de mayor clasificación.

Saltarse las filas de encabezado puede ser confuso y debe evitarse siempre que sea posible: Asegúrese de que una <h2>es no seguida directamente por una <h4>, por ejemplo. Está bien omitir filas cuando se cierran subsecciones, por ejemplo, al <h2> comenzar una nueva sección, puede seguir una <h4> mientras cierra la sección anterior.

No use encabezados en imágenes o cualquier otro elemento que no sea un titular.

No use las etiquetas de encabezados para dar estilo a los títulos, para estilar se debe aplicar una clase a cada encabezado

<--Ejemplo fragmento de código-->
<h1 class="titulo-1"> YPF Argentina </h1>										
    <h2 class="titulo-2"> Noticias </h2>									
        <h3 class="titulo-3"> Noticias 1 </h3>								
        <h3 class="titulo-3"> Noticias 2 </h3>								
        <h3 class="titulo-3"> Noticias 3 </h3>
    <h2 class="titulo-2"> Productos </h2>									
        <h3 class="titulo-3"> Productos 1 </h3>								
        <h3 class="titulo-3"> Productos 2 </h3>								
        <h3 class="titulo-3"> Productos 3 </h3>

Estructura de contenidos

Marque el contenido del sitio web semánticamente, de modo que el sitio web sea extensible. La semántica válida crea contenido que es reutilizable y más significativo para las tecnologías de asistencia.

• Article: El <article> elemento HTML5 representa una composición completa o autónoma en la página web.
• Section: El <section> elemento HTML5 marca una región general de una página web o un artículo. Se utiliza para la agrupación temática de contenido.
• Párrafos: Use el elemento de párrafo <p> para marcar párrafos de texto. El estilo consistente de los párrafos mejora la legibilidad del texto. También brinda a los usuarios más control al personalizar su vista.
• Listas: Use diferentes tipos de listas para agrupar información de acuerdo con su naturaleza para proporcionar orientación a los usuarios.
  • Las listas desordenadas se utilizan cuando el orden de los elementos no es relevante. Los elementos de la lista en listas desordenadas están marcados con una viñeta.
  • Las listas ordenadas se utilizan para obtener información secuencial y el navegador las enumera automáticamente.
  • Las listas de descripción son grupos de términos y descripciones relacionados que están conectados mediante programación.

Los elementos de lista individuales pueden contener una variedad de elementos HTML, incluidos párrafos, encabezados, elementos de formulario y otras listas (anidadas).

Menús

Los menús de navegación reflejan la estructura subyacente de los sitios web. Los menús de aplicaciones proporcionan acceso a la funcionalidad esencial de una aplicación. Por lo tanto, estos son partes críticas de las páginas web/aplicaciones y requieren una atención particular durante el diseño y el desarrollo. El contenido del sitio web semánticamente, de modo que el sitio web sea extensible. La semántica válida crea contenido que es reutilizable y más significativo para las tecnologías de asistencia.

• Los usuarios del lector de pantalla y del teclado se benefician de la interoperabilidad y el marcado del teclado que les permite operar los menús de diferentes maneras.
• Los usuarios con dificultades motoras finas y los usuarios de pantalla táctil requieren objetivos más grandes para hacer clic o tocar. En los menús desplegables, los submenús no deberían desaparecer inmediatamente después de que el mouse haya abandonado el área en la que se puede hacer clic.
• Las personas con atención limitada o memoria a corto plazo se benefician de menús claros y distintos con estados fácilmente identificables, como la página actual.

Identifique el menú usando el <nav> de HTML5 para permitir a los usuarios acceder directamente al menú.

Transmita la estructura del menú mediante el uso de una lista. Dicha información estructural permite que las tecnologías de asistencia anuncien la cantidad de elementos en el menú y proporcionen la funcionalidad de navegación correspondiente.

Un estilo claro y consistente permite a los usuarios encontrar y reconocer menús más rápidamente. Tal estilo incluye consistencia en el comportamiento, apariencia y ubicación relativa en las páginas de un sitio web.

Ubicación

Muestra el menú donde el público objetivo del sitio web lo espera. Por ejemplo, en los sitios web, el menú de navegación principal suele ubicarse verticalmente a la izquierda de las páginas (en idiomas de izquierda a derecha) u horizontalmente en la parte superior. Los menús de aplicaciones generalmente se esperan horizontalmente en la parte superior.

Identificación

Asegúrese de que los menús y sus elementos sean identificables como tales. Además del marcado estructural, el esquema de color es necesario para comunicar visualmente la presencia de menús y elementos.

Legibilidad

Asegure el tamaño apropiado de los menús y elementos del menú para que se ajusten a todo el texto. El tamaño del menú también debe adaptarse a diferentes tamaños de texto, para acomodar idiomas con palabras más largas y personas que necesitan texto más grande. Siempre que sea posible, evite todo el texto en mayúscula, los saltos de línea y la separación silábica, ya que a menudo son molestos y difíciles de leer.

Tamaño

Proporcione suficiente espacio en blanco, como relleno, para apoyar a las personas con destreza reducida y pequeñas pantallas táctiles en dispositivos móviles. Al mismo tiempo, asegúrese de que los menús no se superpongan con otros contenidos de la página cuando los usuarios aumenten el tamaño del texto o amplíen la página.

Imágenes

Las imágenes deben tener alternativas de texto que describan la información o función representada por ellas. Esto asegura que las imágenes puedan ser utilizadas por personas con diversas discapacidades.

El autor debe determinar la alternativa de texto, según el uso, el contexto y el contenido de la imagen, y en caso de que la imagen no sume valor informativo el atributo alt deberá estar vacío para que pueda ser ignorados por las tecnologías de asistencia, como los lectores de pantalla. ( alt=”” , sin espacios entre las comillas).

Algunos ejemplos de decisiones sobre texto alternativo:

• La imagen contiene texto y el texto también está presente como texto real cercano.
  Usa un atributo alt vacío.
• La imagen contiene texto y el texto se muestra para efectos visuales.
  Usa un atributo alt vacío.
• La imagen contiene texto y el texto tiene una función específica, por ejemplo, es un icono.
  Usa el atributo alt para comunicar la función de la imagen.
• La imagen contiene texto y el texto en la imagen no está presente de otra manera.
  Usa el atributo alt para incluir el texto de la imagen.
• Se utiliza la imagen en un enlace o un botón, y sería difícil o imposible entender qué hace el enlace o el botón, si la imagen no estuviera allí.
  Usa el atributo alt para comunicar el destino del enlace o acción tomada.
• La imagen aporta significado a la página o contexto actual y es un simple gráfico o fotografía.
  Use una breve descripción de la imagen de una manera que transmita ese significado en el atributo alt.
• La imagen aporta significado a la página o contexto actual y es gráfico o información compleja.
  Incluya la información contenida en la imagen en otra parte de la página.
  
• La imagen aporta significado a la página o contexto actual y muestra contenido que es redundante para el texto real cercano.
  Usa un atributo alt vacío.
• La imagen es puramente decorativa o no está destinada al usuario.
  Usa un atributo alt vacío.

Carousel de imágenes (slider)

• Los usuarios deben poder pausar el movimiento del carousel porque puede ser demasiado rápido o distraer, lo que dificulta la lectura del texto.
• Toda la funcionalidad, incluida la navegación entre elementos de carousel, debe ser operable por teclado.
• Los cambios en los elementos del carousel deben comunicarse a todos los usuarios, incluidos los usuarios de lectores de pantalla.
• La posición del teclado ("foco") se gestiona de manera razonable y comprensible.

Contraste

Se debe proporcionar suficiente contraste entre el texto y su fondo para que pueda ser leído por personas con una visión moderadamente baja. Para poder cumplir con este requerimiento se debe proporcionar un contraste de al menos 4,5:1 excepto para los siguientes casos:

• Textos grandes: 3:1
• Incidental: No tienen requisitos de contraste.
• Logotipos: No tienen requisitos de contraste.