# 6.3 Accesibilidad en web y apps

#### APPS útiles en el aula según el perfil del alumnado

En una **serie de infografías** mostramos cómo **el [equipo de CDD Aragón](https://www.cddaragon.es/apps-accesibilidad/)** ha clasificado diferentes apps según su utilidad con determinados perfiles que se puedan dar en las aulas:

- **Discapacidad visual** *Lazzus, Navilens, Envision AI, JAWS, Orca, Brailliac, Lookout* y *Comunicador táctil ONCE.*
- **Discapacidad auditiva** *Diccionario LSE, Spread Sings, Ability Connect, Sueñaletras, Rogervoice, Visalfy Accesibilidad Acústic, ¡Dilo con las manos!* y *Subtitle Edit for Windows*
- **Discapacidad física** *Accesibility Plus, Disabled Park, Enable Viacam, MAPcesible, EsAccesible, TUR4all* y *Equalitas Vitae.*
- **Discapacidad intelectual** *Leo con Grin, Rey de las matemáticas, Smile and Learn, Encuentra las diferencias, Mates y lógica para niños, Pooza Romecabezas, Equilibrians* y *Remembery.*
- **Trastornos de la comunicación** *CBoard, Proloquo2GO, CPA-Comunicador Personal, Proyecto PECs, E-Mintza, Symbotalk, [EVA](https://www.cddaragon.es/glossary/eva/) Facial Mouse* , *Telepatix y la novedad de software libre AsTeRICS GRID.*
- **Retraso global del desarrollo***Speech Blubs, Aprendizaje sensorial, Otsimo, Picaa, Letra Kid, Isecuencias lite, Isecuencias vial, Objetos ocultos para niños, Series1* y *Yo también leo.*
- **Dificultades específicas del aprendizaje***Deslixate, Modmath, Relexia, Piruletras, Galexia Mejora Fluidez Lectora, Visual Attention Therapy Lite, Las letras y yo* y *Sígueme.*
- **Trastornos de conducta***¡Adiós enfados!, Classcraft, Enuresis Trainer, Si te portas bien, Class 1,2,3, Motivador del buen comportamiento, Normas para niños* y *Petit Bambou*
- **Trastorno del espectro autista***Te ayudo a jugar, AutisMIND, Día a día, Tuli Emociones, Emoplay, Dictapicto, Eneso Verbo, Soy Visual* y *APPYautism.*
- **Aplicaciones móviles asistivas.**  
    Aplicaciones para móviles que ayudan de diferentes formas a las personas con **diferentes discapacidades**:
    
    *Listen all, Voice aloud reader, Be my eyes, Pictotea, Lazarillo, Speak!, Háblalo* y *Voice access.*

Estas herramientas digitales son de utilidad para la labor docente a la hora de atender a la diversidad.

<p class="callout info align-left">Las presentaciones permiten **maximizarlas** a pantalla completa utilizando la opción correspondiente en el menú desplegable representado por los **tres puntos alineados en sentido horizontal.** Para navegar por ellas, usa las flechas.  
</p>

<div id="bkmrk-" style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="675px" scrolling="yes" src="https://view.genial.ly/6389e180fcaa150018fe1031" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="APPs Discapacidad Visual" width="1200px"></iframe>

</div><div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="675px" scrolling="yes" src="https://view.genial.ly/63886d0142382600113092ee" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="APPs Discapacidad Auditiva" width="1200px"></iframe>

</div></div><div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="675px" scrolling="yes" src="https://view.genial.ly/63a98b04811115001105b05f" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="APPs Discapacidad Física" width="1200px"></iframe>

</div></div></div><div id="bkmrk--0" style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="675px" scrolling="yes" src="https://view.genial.ly/63b7282e0d17080012e8e634" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="APPs Discapacidad Intelectual" width="1200px"></iframe>

</div></div><div id="bkmrk--1" style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="675px" scrolling="yes" src="https://view.genial.ly/63b5e26b12e4fc0018cd060c" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="APPs Trastornos Comunicación" width="1200px"></iframe>

</div></div><div id="bkmrk--2" style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="675px" scrolling="yes" src="https://view.genial.ly/63b7fe881d37b0001a721959" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="APPs Retraso Global del Desarrollo" width="1200px"></iframe>

</div></div><div id="bkmrk--3" style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="675px" scrolling="yes" src="https://view.genial.ly/6394f9b45c32d2001126cb45" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="APPs Dificultades Aprendizaje" width="1200px"></iframe>

</div></div><div id="bkmrk--4" style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="675px" scrolling="yes" src="https://view.genial.ly/6396f634056efd0019433f5f" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="APPs Trastornos Conducta" width="1200px"></iframe>

</div></div><div id="bkmrk--5" style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="675px" scrolling="yes" src="https://view.genial.ly/6398422f4c3656001129e51c" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="APPs TEA" width="1200px"></iframe>

</div></div><div id="bkmrk--6" style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="675px" scrolling="yes" src="https://view.genial.ly/637c86dd7255600019c0e32a" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="APPs móviles asistidas" width="1200px"></iframe>

  
</div></div>#### Normativa de accesibilidad web  


Las **Web Content Accessibility Guidelines (WCAG)**, o **Pautas de Accesibilidad para el Contenido Web** en español, son directrices establecidas por el **W3C (World Wide Web Consortium)** con el propósito de asegurar la accesibilidad de diversos tipos de contenido en la web. Esto **abarca desde documentos habituales como Word o PowerPoint hasta documentos de diseño y publicación como PDF, así como contenido multimedia.**

La versión más reciente de estas pautas es la **WCAG 2.1**, aunque se está trabajando en una **próxima edición, la 3.0.** Debido a su enfoque universal y su promoción de estándares que no están ligados a una tecnología específica, las WCAG se han convertido en el **estándar para el diseño de cualquier producto o servicio digital.**

<details id="bkmrk-%C2%BFqu%C3%A9-es-el-w3c%3F-%28wor"><summary>¿Qué es el W3C? (World Wide Web Consortium)</summary>

El **W3C, o *World Wide Web Consortium*** (Consorcio del World Wide Web en español), es una organización internacional que se dedica a establecer estándares y pautas para el desarrollo y la evolución de la World Wide Web. Fue fundada en 1994 por Tim Berners-Lee, uno de los creadores originales de la web, y su sede se encuentra en el Instituto Tecnológico de Massachusetts (MIT) en Estados Unidos.

<p class="callout success">El objetivo principal del **W3C es garantizar la interoperabilidad y la accesibilidad de la web,** lo que significa que trabaja para asegurarse de que los sitios web y las tecnologías relacionadas sean **compatibles entre sí y accesibles para todas las personas**, independientemente de sus capacidades o dispositivos utilizados para acceder a Internet.</p>

Para lograr este objetivo, **el W3C desarrolla y mantiene una serie de estándares y recomendaciones técnicas** que abarcan una amplia gama de tecnologías web, como HTML (lenguaje de marcado), CSS (hojas de estilo en cascada), JavaScript, estándares de accesibilidad y más. Estos estándares adoptados y utilizados en todo el mundo, lo que contribuye a la coherencia y la calidad de la web.

</details><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> </span></span></span></span></span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> </span></span>

<div id="bkmrk--7" style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="675" scrolling="yes" src="https://view.genial.ly/638f77c7da181d0019eb4924" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="LISTA TRIÁNGULOS" width="1200"></iframe>

</div></div><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Elaborado por </span></span></span></span></span></span></span></span>[<span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">**Marta Ríos Cintora** en el libro CATEDU ***B2- Competencia Digital Docente en Educación Especial***</span></span></span></span></span></span></span></span></span></span></span></span>](https://libros.catedu.es/books/b2-competencia-digital-docente-en-educacion-especial)*<span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">**[.](https://libros.catedu.es/books/b2-competencia-digital-docente-en-educacion-especial)**[CC BY-NC-SA](https://creativecommons.org/licenses/by-nc-sa/4.0/)</span></span></span></span></span></span>[<span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">.</span></span></span></span></span></span>](https://creativecommons.org/licenses/by-nc/4.0/)</span></span>*

#### Pautas WCAG-2.1

Las **WCAG 2.1** y la **Norma Europea EN 301 549**, que abordan la accesibilidad en productos y servicios de Tecnologías de la Información y Comunicación (TIC), comparten una serie de características esenciales:

<table border="1" id="bkmrk-1.-perceptibilidad%3A-" style="border-collapse: collapse; width: 100%; height: 117.4px;"><colgroup><col style="width: 22.9969%;"></col><col style="width: 77.071%;"></col></colgroup><tbody><tr style="height: 29.35px;"><td class="align-center" style="height: 29.35px; background-color: rgb(243, 92, 108); vertical-align: middle;"><span style="color: rgb(255, 255, 255);">**1. Perceptibilidad**:</span></td><td style="height: 29.35px; vertical-align: middle;">Esto se refiere a la presentación de información y componentes de la interfaz de usuario de manera que sean perceptibles por todos los usuarios. Esto incluye proporcionar alternativas textuales para contenido no textual, garantizar la legibilidad y audibilidad, ofrecer múltiples formas de presentar contenido y asegurar la distinción entre el fondo y el primer plano.</td></tr><tr style="height: 29.35px;"><td class="align-center" style="height: 29.35px; background-color: rgb(133, 83, 127); vertical-align: middle;"><span style="color: rgb(255, 255, 255);">**2. Operabilidad**:</span></td><td style="height: 29.35px; vertical-align: middle;">Los componentes de la interfaz de usuario y la navegación deben ser operables por todos los usuarios. Esto implica hacer que el contenido sea manejable mediante el teclado (para aquellos que no utilizan un ratón), proporcionar suficiente tiempo para leer y evitar contenido que pueda causar reacciones negativas. También se centra en la navegabilidad de la información y ofrece diferentes métodos de entrada.</td></tr><tr style="height: 29.35px;"><td class="align-center" style="height: 29.35px; background-color: rgb(241, 196, 15); vertical-align: middle;"><span style="color: rgb(255, 255, 255);">**3. Comprensibilidad:**</span></td><td style="height: 29.35px; vertical-align: middle;">La información y el funcionamiento de la interfaz de usuario deben ser comprensibles para todos. Esto se logra mediante el uso de texto fácil de leer y entender, siguiendo estándares de navegación comunes para hacer que la página sea predecible y brindando ayuda para la entrada de datos.</td></tr><tr style="height: 29.35px;"><td class="align-center" style="height: 29.35px; background-color: rgb(206, 212, 217); vertical-align: middle;"><span style="color: rgb(255, 255, 255);">**4. Robustez**:</span></td><td style="height: 29.35px; vertical-align: middle;">El contenido debe ser lo suficientemente robusto como para ser interpretado por una amplia variedad de agentes de usuario, incluyendo dispositivos de asistencia. Esto implica respetar estándares de código que aseguren la compatibilidad con una variedad de dispositivos y programas.</td></tr></tbody></table>

<p class="callout info">Todas estas pautas se pueden consultar en [**el sitio web oficial del W3C.** Nos facilitan una **guía rápida de referencia**](https://www.w3.org/WAI/WCAG21/quickref/) para consultas.   
(Precisamente, no es accesible en el idioma, puesto que no tiene una traducción integrada, pero muchos buscadores ofrecen la opción de traducción que nos pueden echar una mano)  
</p>

[![imagen.png](https://libros.catedu.es/uploads/images/gallery/2023-09/scaled-1680-/0yFimagen.png)](https://libros.catedu.es/uploads/images/gallery/2023-09/0yFimagen.png)

Captura de pantalla del [ **sitio web del W3C**](https://www.w3.org/WAI/WCAG21/quickref/)

Tal como hemos comentado, **actualmente se está trabajando en las pautas de accesibilidad del W3C (WCAG) 3.0** que representarán la próxima iteración de las directrices de accesibilidad para el contenido en línea desarrolladas por el World Wide Web Consortium (W3C).

<p class="callout success">**En la actualidad, estas pautas son un "borrador de trabajo" según el[ W3C Editor's Draft de julio de 2023](https://www.w3.org/TR/wcag-3.0/).** Un cambio significativo en el nombre de estas pautas subraya su aplicabilidad a una amplia variedad de contenido, no limitándose únicamente al contenido web.</p>

#### *Responsive design*

Hoy en día este término está en boca de todos a la hora de hablar de páginas web y apps. Normalmente hace años sólo usábamos ordenadores para navegar por internet, pero actualmente tenemos múltiples dispositivos portátiles que usamos constantemente para navegar o usar apps.

> Cuando utilizamos el término “responsive” (adaptable), nos referimos principalmente a “responsive design” (diseño web adaptable). Esto significa hacer que un sitio web sea accesible y adaptable en todos los dispositivos: tabletas, smartphones, etc.
> 
> El principio de responsive design se logra a través de hojas de estilos en cascada ([CSS](https://atinternet.com/es/glosario/css)) y técnicas de programación ([HTML](https://atinternet.com/es/glosario/html-4)). Con estas técnicas, puede evitar que se integre el mismo contenido varias veces, ya que el objetivo del responsive design es adaptar el mismo conjunto de contenidos a las diferentes tecnologías que se utilizan.
> 
> Definición de ['Responsive design' en la **web de *atinternet*** ](https://www.atinternet.com/es/glosario/responsive/)

Esta técnica de diseño web que busca **que las páginas web se adapten y se vean bien en una variedad de dispositivos y tamaños de pantalla.** Esto se logra mediante la **creación de diseños y layouts que responden y se ajustan automáticamente** según el tamaño de la pantalla en la que se están visualizando **sin necesidad de crear versiones separadas de un sitio web para cada tipo de dispositivo.** Esto es esencial para asegurar que los visitantes puedan navegar y consumir contenido de manera efectiva sin importar cómo accedan al sitio web.

<details id="bkmrk-descubre-m%C3%A1s-sopbre-"><summary>Descubre más sopbre qué equipos trabajan el responsive design</summary>

Suele ser realizado en gran medida por el equipo de desarrollo *frontend*. El equipo *frontend* se encarga de la parte de un sitio web que interactúa directamente con los usuarios, es decir, la interfaz de usuario que se muestra en el navegador web.

Para crear un diseño web adaptable, **el equipo frontend trabaja en conjunto con los diseñadores web para implementar las pautas y principios de diseño responsive**. Esto implica escribir código HTML, CSS y, a veces, JavaScript de manera que el sitio web pueda adaptarse automáticamente a diferentes tamaños de pantalla y dispositivos.

El diseño responsive implica **considerar aspectos como el diseño de la cuadrícula, la tipografía, las imágenes y los elementos interactivos de manera que se vean y funcionen correctamente** en dispositivos móviles, tabletas y computadoras de escritorio. El equipo frontend también se encarga de **probar y depurar el sitio web en diversos dispositivos y navegadores para garantizar una experiencia de usuario coherente y de alta calidad en todas las plataformas**.

</details><p class="callout success">Por esta razón debemos **ser capaces de elegir webs y apps que tengan implementado un *responsive design*** para usarlas con soltura y que genere la menor problemática posible en nuestras aulas o para nuestro alumnado.  
</p>

[![scaler-create-impact.gif](https://libros.catedu.es/uploads/images/gallery/2023-09/scaler-create-impact.gif)Scaler Create Impact GIF de Scaler\_official Vía Tenor ](https://libros.catedu.es/uploads/images/gallery/2023-09/scaler-create-impact.gif)

<p class="callout danger">En muchas ocasiones **webs gubernamentales u oficiales no han implementado aún este *responsive design* y generan fallos** de visualización según el explorador o dispositivo que se use. No queda otra que esperar a que las optimicen.  
</p>

En este tweet, Tesh Sidi (*big data lead*, ingeniera informática y diputada en las cortes generales) nos cuenta lo que respecta a ello en corto vídeo explicativo:

> UX|UI en aplicaciones públicas, y la importancia de incorporar todos los perfiles en el diseño de las mismas 👇  
> Cuando te peleas 1000h con un “div” pones en valor la frase: “I’m not an expert” [pic.twitter.com/lQRkWYMJHN](https://t.co/lQRkWYMJHN)
> 
> — Tesh Sidi (@teshsidi) [September 1, 2023](https://twitter.com/teshsidi/status/1697591776456917290?ref_src=twsrc%5Etfw)